@extends('backend.layouts.app')

@section('title', $contact ? 'Edit Site Contact' : 'Create Site Contact')

@section('content')
    @php
        $pageTitle = $contact ? 'Edit Site Contact' : 'Create Site Contact';
        $indexRoute = 'site-contact.index';
        $indexLabel = 'Site Contacts';
        $formAction = $contact ? route('site-contact.update', $contact->id) : route('site-contact.store');
        $method = $contact ? 'PUT' : 'POST';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-5">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Fill in the contact information below. The frontend footer and contact page will use these values.
                </p>
            </div>

            <form action="{{ $formAction }}" method="POST">
                @csrf
                @if($method === 'PUT')
                    @method('PUT')
                @endif

                <div class="space-y-5 border-t border-gray-100 p-6 dark:border-gray-800">

                    <!-- SITE -->
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                                Site
                            </label>
                            <select name="site_id"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 @error('site_id') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                                <option value="">-- Select Site --</option>
                                @foreach($sites as $id => $name)
                                    <option value="{{ $id }}" {{ old('site_id', $contact?->site_id) == $id ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                            @error('site_id')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- STATUS -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                                Status
                            </label>
                            <div class="flex items-center h-11">
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="status" value="1"
                                        {{ old('status', $contact?->status ?? true) ? 'checked' : '' }}
                                        class="rounded border-gray-300 text-brand-500 focus:ring-brand-500/20 dark:border-gray-700">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">Active</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- WEBSITE -->
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                                Website URL
                            </label>
                            <input type="text" name="website_url" value="{{ old('website_url', $contact?->website_url) }}" placeholder="https://redd.nres.gov.my"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('website_url') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                            @error('website_url')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                                Website Label
                            </label>
                            <input type="text" name="website_label" value="{{ old('website_label', $contact?->website_label) }}" placeholder="redd.nres.gov.my"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('website_label') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                            @error('website_label')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- EMAIL & PHONE -->
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                                Email
                            </label>
                            <input type="text" name="email" value="{{ old('email', $contact?->email) }}" placeholder="redd@nres.gov.my"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                            @error('email')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                                Phone
                            </label>
                            <input type="text" name="phone" value="{{ old('phone', $contact?->phone) }}" placeholder="+603 8091 7000"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('phone') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                            @error('phone')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- ADDRESS -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Address
                        </label>
                        <textarea name="address" rows="6" placeholder="One line per row of the address"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('address') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">{{ old('address', $contact?->address) }}</textarea>
                        @error('address')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- OFFICE HOURS (hidden for now) --}}
                    {{-- <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Office Hours
                        </label>
                        <input type="text" name="office_hours" value="{{ old('office_hours', $contact?->office_hours) }}" placeholder="Monday – Friday, 8:30 am – 5:30 pm (GMT+8)"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('office_hours') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                        @error('office_hours')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div> --}}
                </div>

                <div class="flex justify-end gap-3 border-t border-gray-100 px-6 py-4 dark:border-gray-800">
                    <a href="{{ route('site-contact.index') }}"
                        class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Cancel</a>
                    <button type="submit"
                        class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">{{ $contact ? 'Update' : 'Save' }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection