{{--
    Deal Explorer Filter Panel (Sidebar Over Drawer)
--}}
@props(['context' => 'frontend'])

@php
    $propertyTypes = \App\Constants\FilterConstants::getPropertyTypes();
    $saleStatuses = \App\Constants\FilterConstants::getSaleStatuses();
    $rentStatuses = \App\Constants\FilterConstants::getRentStatuses();
@endphp

<div class="relative" x-data="{ panelOpen: false }">

    {{-- Filter button --}}
    <button
        type="button"
        id="de-filter-btn"
        @click="openFilterPanel(); panelOpen = true;"
        class="relative inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
    >
        <x-heroicon-o-funnel class="h-4 w-4 text-muted-foreground" />
        Filters
        {{-- Active filter count badge --}}
        <span
            x-show="hasActiveFilters()"
            x-cloak
            class="ms-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold text-white"
            x-text="activeFilterCount()"
        ></span>
    </button>

    {{-- Slide-over Drawer --}}
    <div
        x-show="panelOpen"
        class="fixed inset-0 z-50 overflow-hidden"
        aria-labelledby="slide-over-title"
        role="dialog"
        aria-modal="true"
        x-cloak
    >
        <div class="absolute inset-0 overflow-hidden">
            {{-- Backdrop --}}
            <div
                x-show="panelOpen"
                x-transition:enter="ease-in-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in-out duration-300"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
                @click="panelOpen = false"
            ></div>

            {{-- Drawer wrapper --}}
            <div class="fixed inset-y-0 end-0 flex max-w-full ps-10">
                <div
                    x-show="panelOpen"
                    x-transition:enter="transform transition ease-in-out duration-300"
                    x-transition:enter-start="translate-x-full"
                    x-transition:enter-end="translate-x-0"
                    x-transition:leave="transform transition ease-in-out duration-300"
                    x-transition:leave-start="translate-x-0"
                    x-transition:leave-end="translate-x-full"
                    class="pointer-events-auto w-screen max-w-md"
                >
                    <div class="flex h-full flex-col overflow-y-scroll bg-card shadow-xl border-l border-border">
                        {{-- Drawer Header --}}
                        <div class="px-6 py-5 border-b border-border bg-card">
                            <div class="flex items-center justify-between">
                                <h2 class="text-lg font-bold leading-6 text-foreground" id="slide-over-title">
                                    Filters
                                </h2>
                                <div class="ms-3 flex h-7 items-center">
                                    <button
                                        type="button"
                                        @click="panelOpen = false"
                                        class="relative rounded-md text-muted-foreground hover:text-foreground focus:outline-none"
                                    >
                                        <span class="sr-only">Close panel</span>
                                        <x-heroicon-o-x-mark class="h-6 w-6" aria-hidden="true" />
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Drawer Body --}}
                        <div class="relative flex-1 px-6 py-6 bg-slate-50/50 dark:bg-slate-950/20 overflow-y-auto space-y-6">
                            
                            {{-- Filter White Card --}}
                            <div class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/60 rounded-xl p-6 shadow-sm space-y-5">
                                
                                {{-- Row 1: Property Type & Availability --}}
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <div>
                                        <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">Property Type</label>
                                        <select x-model="tempFilters.property_type" class="de-filter-select w-full">
                                            <option value="">Property Type</option>
                                            @foreach($propertyTypes as $type)
                                                <option value="{{ $type }}">{{ $type }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">Property Availability</label>
                                        <select x-model="tempFilters.availability" class="de-filter-select w-full">
                                            <option value="">All</option>
                                            <option value="sale">For Sale</option>
                                            <option value="rent">For Rent</option>
                                            <option value="both">For Sale & Rent</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- Row 2: Sale Status & Rent Status (conditional) --}}
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2" 
                                     x-show="tempFilters.availability === 'sale' || tempFilters.availability === 'rent' || tempFilters.availability === 'both'" 
                                     x-cloak>
                                    <!-- Sale Status -->
                                    <div x-show="tempFilters.availability === 'sale' || tempFilters.availability === 'both'" x-cloak>
                                        <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">Sale Status</label>
                                        <select x-model="tempFilters.property_sale_status" class="de-filter-select w-full">
                                            <option value="">Sale Status</option>
                                            @foreach($saleStatuses as $status)
                                                <option value="{{ $status }}">{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- Rent Status -->
                                    <div x-show="tempFilters.availability === 'rent' || tempFilters.availability === 'both'" x-cloak>
                                        <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">Rent Status</label>
                                        <select x-model="tempFilters.property_rent_status" class="de-filter-select w-full">
                                            <option value="">Rent Status</option>
                                            @foreach($rentStatuses as $status)
                                                <option value="{{ $status }}">{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                 {{-- Row 3: Sale Price Range (conditional) --}}
                                <div x-show="tempFilters.availability === '' || tempFilters.availability === 'sale' || tempFilters.availability === 'both'" x-cloak class="space-y-1">
                                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300">Sale Price Range</label>
                                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                        <div class="relative">
                                            <span class="absolute start-3 top-2 text-sm font-semibold text-slate-400">₹</span>
                                            <input type="text" 
                                                   inputmode="numeric" 
                                                   pattern="[0-9]*"
                                                   x-model="tempFilters.min_sale_price" 
                                                   @keydown="isNumberKey($event)"
                                                   @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                                   @input="sanitizeNumberInput('min_sale_price')"
                                                   placeholder="Min Sale Price" 
                                                   class="de-filter-input w-full ps-7 pe-3" />
                                        </div>
                                        <div class="relative">
                                            <span class="absolute start-3 top-2 text-sm font-semibold text-slate-400">₹</span>
                                            <input type="text" 
                                                   inputmode="numeric" 
                                                   pattern="[0-9]*"
                                                   x-model="tempFilters.max_sale_price" 
                                                   @keydown="isNumberKey($event)"
                                                   @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                                   @input="sanitizeNumberInput('max_sale_price')"
                                                   placeholder="Max Sale Price" 
                                                   class="de-filter-input w-full ps-7 pe-3" />
                                        </div>
                                    </div>
                                </div>

                                {{-- Row 4: Rent Price Range (conditional) --}}
                                <div x-show="tempFilters.availability === '' || tempFilters.availability === 'rent' || tempFilters.availability === 'both'" x-cloak class="space-y-1">
                                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300">Rent Price Range</label>
                                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                        <div class="relative">
                                            <span class="absolute start-3 top-2 text-sm font-semibold text-slate-400">₹</span>
                                            <input type="text" 
                                                   inputmode="numeric" 
                                                   pattern="[0-9]*"
                                                   x-model="tempFilters.min_rent_price" 
                                                   @keydown="isNumberKey($event)"
                                                   @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                                   @input="sanitizeNumberInput('min_rent_price')"
                                                   placeholder="Min Rent Price" 
                                                   class="de-filter-input w-full ps-7 pe-3" />
                                        </div>
                                        <div class="relative">
                                            <span class="absolute start-3 top-2 text-sm font-semibold text-slate-400">₹</span>
                                            <input type="text" 
                                                   inputmode="numeric" 
                                                   pattern="[0-9]*"
                                                   x-model="tempFilters.max_rent_price" 
                                                   @keydown="isNumberKey($event)"
                                                   @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                                   @input="sanitizeNumberInput('max_rent_price')"
                                                   placeholder="Max Rent Price" 
                                                   class="de-filter-input w-full ps-7 pe-3" />
                                        </div>
                                    </div>
                                </div>

                                {{-- Row 5: Area SQM Range --}}
                                <div class="space-y-1">
                                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300">Area SQM Range</label>
                                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                        <div class="relative">
                                            <input type="text" 
                                                   inputmode="numeric" 
                                                   pattern="[0-9]*"
                                                   x-model="tempFilters.min_area" 
                                                   @keydown="isNumberKey($event)"
                                                   @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                                   @input="sanitizeNumberInput('min_area')"
                                                   placeholder="Min Area" 
                                                   class="de-filter-input w-full px-3" />
                                            <span class="absolute end-3 top-2.5 text-2xs font-bold text-slate-400 uppercase">SQM</span>
                                        </div>
                                        <div class="relative">
                                            <input type="text" 
                                                   inputmode="numeric" 
                                                   pattern="[0-9]*"
                                                   x-model="tempFilters.max_area" 
                                                   @keydown="isNumberKey($event)"
                                                   @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                                   @input="sanitizeNumberInput('max_area')"
                                                   placeholder="Max Area" 
                                                   class="de-filter-input w-full px-3" />
                                            <span class="absolute end-3 top-2.5 text-2xs font-bold text-slate-400 uppercase">SQM</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Row 6: Location (State/City) --}}
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <div>
                                        <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">State</label>
                                        <select
                                            id="de-filter-state"
                                            x-model="tempFilters.state_id"
                                            @change="onStateChange()"
                                            class="de-filter-select w-full"
                                        >
                                            <option value="">Select State</option>
                                            <template x-for="s in states" :key="s.id">
                                                <option :value="s.id" x-text="s.state" :selected="s.id == tempFilters.state_id"></option>
                                            </template>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">City</label>
                                        <select
                                            id="de-filter-city"
                                            x-model="tempFilters.city"
                                            :disabled="!tempFilters.state_id"
                                            class="de-filter-select w-full disabled:opacity-50 disabled:cursor-not-allowed"
                                        >
                                            <option value="">Select City</option>
                                            <template x-for="c in cities" :key="c.id">
                                                <option :value="c.city" x-text="c.city" :selected="c.city == tempFilters.city"></option>
                                            </template>
                                        </select>
                                    </div>
                                </div>

                                {{-- Row 7: Pincode --}}
                                <div>
                                    <label class="mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">Postal Code (Pincode)</label>
                                    <input type="text" 
                                           inputmode="numeric" 
                                           pattern="[0-9]*"
                                           x-model="tempFilters.postal_code" 
                                           @keydown="isNumberKey($event)"
                                           @keydown.enter.prevent="if (applyFilters()) panelOpen = false;"
                                           @input="sanitizePincode()"
                                           placeholder="Pincode" 
                                           class="de-filter-input w-full px-3" />
                                </div>

                            </div>
                        </div>

                        {{-- Drawer Footer --}}
                        <div class="border-t border-border px-6 py-4 flex items-center justify-end gap-3 bg-white dark:bg-card">
                            <button
                                type="button"
                                @click="resetFilters();"
                                class="rounded-lg border border-border bg-card px-5 py-2.5 text-xs font-bold text-slate-700 hover:bg-slate-50 transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-slate-500"
                            >Reset</button>
                            <button
                                type="button"
                                @click="if (applyFilters()) panelOpen = false;"
                                class="rounded-lg bg-indigo-900 px-5 py-2.5 text-xs font-bold text-white shadow-sm hover:bg-indigo-950 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800"
                            >Apply</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>