@extends('layouts.app')
@section('page-title', isset($office) ? 'Edit Office' : 'Add Office')

@section('content')

@php $isEdit = isset($office); @endphp

<x-admin-hero-header :title="$isEdit ? 'Edit Office' : 'Add New Office'" :subtitle="$isEdit ? $office->name : 'Fill in the office details below'">
    <x-slot:icon>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2M5 21H3m6-14h1m-1 4h1m4-4h1m-1 4h1M9 21v-5h6v5"/></svg>
    </x-slot:icon>
    <x-slot:actions>
        <a href="{{ route('admin.offices.index') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back to Offices
        </a>
    </x-slot:actions>
</x-admin-hero-header>

<form method="POST" class="enhanced-form"
      action="{{ $isEdit ? route('admin.offices.update', $office) : route('admin.offices.store') }}">
    @csrf
    @if($isEdit) @method('PUT') @endif

    <x-form-shell title="Office information" description="Enter the office location and address details." icon="office">
        <div
            class="space-y-4"
            x-data="officeAddressForm({
                states: @js($states->map(fn($s) => ['id' => $s->id, 'name' => $s->name])->values()),
                selectedCountryId: @js((string) old('country_id', $isEdit ? ($office->country_id ?? '') : '')),
                selectedStateId: @js((string) old('state_id', $isEdit ? ($office->state_id ?? '') : '')),
            })"
        >

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label for="name" class="form-label">Office Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name"
                               value="{{ old('name', $isEdit ? $office->name : '') }}"
                               placeholder="e.g. Dubai Head Office"
                               class="form-input form-icon-office {{ $errors->has('name') ? 'form-input-error' : '' }}" />
                        @error('name')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div class="[&_.form-input]:h-11">
                        <x-searchable-select
                            name="country_id"
                            id="country_id"
                            label="Country"
                            :options="$countries"
                            :selected="(string) old('country_id', $isEdit ? ($office->country_id ?? '') : '')"
                            placeholder="Select country"
                            search-placeholder="Search country..."
                            :required="true"
                            error="country_id"
                            icon="country"
                            :enhanced="true"
                            :show-code="true"
                            emit-event="office-country-selected"
                        />
                    </div>
                </div>

                <div class="border-t border-surface-100 pt-4">
                    <p class="section-label mb-3">Office Address</p>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div x-on:office-country-selected.window="loadStates($event.detail)">
                            <label for="state_id_button" class="form-label">State <span class="text-[11px] text-red-500/80">*</span></label>
                            <div
                                x-data="{
                                    open: false, query: '',
                                    get selectedLabel() {
                                        return (this.states.find(s => String(s.id) === String(this.selectedStateId)) ?? {}).name ?? '';
                                    },
                                    get filteredStates() {
                                        const q = this.query.trim().toLowerCase();
                                        return q ? this.states.filter(s => s.name.toLowerCase().includes(q)) : this.states;
                                    },
                                    choose(id) { this.selectedStateId = String(id); this.open = false; this.query = ''; },
                                }"
                                @click.outside="open = false"
                                class="relative"
                            >
                                <input type="hidden" name="state_id" x-model="selectedStateId" />

                                <div x-show="loadingStates" class="form-input flex h-11 items-center gap-3 text-[13px] text-surface-400">
                                    <svg class="h-4 w-4 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3"/><path class="opacity-75" fill="currentColor" d="M12 3a9 9 0 00-9 9h3a6 6 0 016-6V3z"/></svg>
                                    Loading states...
                                </div>

                                <div x-show="!loadingStates && states.length === 0">
                                    <div class="form-input flex h-11 cursor-not-allowed items-center gap-3 border-dashed bg-surface-100/70 text-[13px] text-surface-400">
                                        <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2M5 21H3M9 7h1m-1 4h1m4-4h1m-1 4h1M8 18l8-8"/></svg>
                                        <span x-text="statesError || (selectedCountryId ? 'No states available for this country' : 'Select a country first')"></span>
                                    </div>
                                </div>

                                <div x-show="!loadingStates && states.length > 0">
                                    <button
                                        type="button"
                                        id="state_id_button"
                                        @click="open = !open"
                                        @keydown.escape.prevent="open = false"
                                        @keydown.tab="open = false"
                                        class="form-input h-11 flex items-center gap-3 text-left w-full {{ $errors->has('state_id') ? 'form-input-error' : '' }}"
                                        :class="selectedLabel ? 'text-surface-900 font-medium' : 'text-surface-400'"
                                    >
                                        <span class="truncate flex-1" x-text="selectedLabel || 'Select state'"></span>
                                        <svg class="w-4 h-4 shrink-0 text-surface-400 transition-transform" :class="open ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                        </svg>
                                    </button>

                                    <div x-show="open" x-transition style="display:none;"
                                         class="absolute z-50 mt-1 w-full overflow-hidden rounded-xl border border-surface-200 bg-white shadow-soft-lg">
                                        <div class="p-2 border-b border-surface-100">
                                            <input type="search" x-model="query"
                                                   @keydown.escape.prevent="open = false"
                                                   placeholder="Search state..."
                                                   class="form-input form-icon-search py-2" />
                                        </div>
                                        <div class="max-h-52 overflow-y-auto py-1">
                                            <template x-for="state in filteredStates" :key="state.id">
                                                <button type="button" @click="choose(state.id)"
                                                        class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-primary-50 hover:text-primary-700 transition-colors"
                                                        :class="String(selectedStateId) === String(state.id) ? 'bg-primary-50 text-primary-700 font-medium' : 'text-surface-700'">
                                                    <span class="truncate" x-text="state.name"></span>
                                                    <svg x-show="String(selectedStateId) === String(state.id)" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                    </svg>
                                                </button>
                                            </template>
                                            <p x-show="filteredStates.length === 0" class="px-3 py-3 text-sm text-surface-400">No states found</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @error('state_id')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="city" class="form-label">City <span class="text-red-500">*</span></label>
                            <input type="text" id="city" name="city"
                                   value="{{ old('city', $isEdit ? $office->city : '') }}"
                                   placeholder="e.g. Karachi"
                                   class="form-input h-11 {{ $errors->has('city') ? 'form-input-error' : '' }}" />
                            @error('city')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="zip_code" class="form-label">Zip Code <span class="text-red-500">*</span></label>
                            <input type="text" id="zip_code" name="zip_code"
                                   value="{{ old('zip_code', $isEdit ? $office->zip_code : '') }}"
                                   placeholder="e.g. 74200"
                                   class="form-input h-11 {{ $errors->has('zip_code') ? 'form-input-error' : '' }}" />
                            @error('zip_code')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        <div class="sm:col-span-2">
                            <label for="address" class="form-label">Address <span class="text-red-500">*</span></label>
                            <textarea id="address" name="address" rows="3"
                                      placeholder="Street address, building, floor..."
                                      class="form-input resize-none {{ $errors->has('address') ? 'form-input-error' : '' }}">{{ old('address', $isEdit ? $office->address : '') }}</textarea>
                            @error('address')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

        </div>

        <x-slot:actions>
            <a href="{{ route('admin.offices.index') }}" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                {{ $isEdit ? 'Save Changes' : 'Create Office' }}
            </button>
        </x-slot:actions>
    </x-form-shell>
</form>

@endsection