@props([
    'filters',
    'aidOptions' => [],
    'cities' => [],
    'clearRoute',
    'showStatusFilter' => true,
])

@php
    $f = $filters;
    $expanded = $f->isActive();
@endphp

<div class="card border mb-24">
    <div class="card-header bg-base py-16 px-24 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <iconify-icon icon="solar:filter-outline" class="text-xl text-primary-600"></iconify-icon>
            <h6 class="mb-0 fw-semibold">Advanced Search & Filters</h6>
        </div>
        <button class="btn btn-sm btn-outline-primary-600 radius-8" type="button"
                data-bs-toggle="collapse" data-bs-target="#advancedFilterPanel"
                aria-expanded="{{ $expanded ? 'true' : 'false' }}">
            {{ $expanded ? 'Hide filters' : 'Show filters' }}
        </button>
    </div>

    <div class="collapse {{ $expanded ? 'show' : '' }}" id="advancedFilterPanel">
        <form method="GET" action="{{ url()->current() }}" class="card-body p-24 border-top">
            {{-- Global --}}
            <div class="mb-24">
                <h6 class="text-sm fw-semibold text-primary-light mb-12">General</h6>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-sm">Keyword (search all fields)</label>
                        <input type="text" name="keyword" value="{{ $f->keyword }}" class="form-control radius-8"
                               placeholder="Search across all application data...">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-sm">Application ID</label>
                        <input type="text" name="application_id" value="{{ $f->application_id }}" class="form-control radius-8" placeholder="#">
                    </div>
                    @if ($showStatusFilter)
                        <div class="col-md-3">
                            <label class="form-label text-sm">Status</label>
                            <select name="status" class="form-select radius-8">
                                <option value="">All statuses</option>
                                <option value="pending" @selected($f->status === 'pending')>Pending</option>
                                <option value="approved" @selected($f->status === 'approved')>Approved</option>
                                <option value="rejected" @selected($f->status === 'rejected')>Rejected</option>
                            </select>
                        </div>
                    @endif
                    <div class="col-md-3">
                        <label class="form-label text-sm">Submitted from</label>
                        <input type="date" name="date_from" value="{{ $f->date_from }}" class="form-control radius-8">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-sm">Submitted to</label>
                        <input type="date" name="date_to" value="{{ $f->date_to }}" class="form-control radius-8">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-sm">Declaration from</label>
                        <input type="date" name="declaration_from" value="{{ $f->declaration_from }}" class="form-control radius-8">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label text-sm">Declaration to</label>
                        <input type="date" name="declaration_to" value="{{ $f->declaration_to }}" class="form-control radius-8">
                    </div>
                </div>
            </div>

            <div class="accordion accordion-flush advanced-filter-accordion" id="filterAccordion">
                {{-- Step 01: Applicant --}}
                <div class="accordion-item border rounded-8 mb-12 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button {{ $f->my_name || $f->my_nic || $f->my_phone || $f->my_job ? '' : 'collapsed' }} fw-semibold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterApplicant">
                            01. මවගේ විස්තර — Applicant
                        </button>
                    </h2>
                    <div id="filterApplicant" class="accordion-collapse collapse {{ $f->my_name || $f->my_nic || $f->my_phone || $f->my_job ? 'show' : '' }}">
                        <div class="accordion-body">
                            <div class="row g-3">
                                <div class="col-md-3"><label class="form-label text-sm">Name</label><input type="text" name="my_name" value="{{ $f->my_name }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">NIC</label><input type="text" name="my_nic" value="{{ $f->my_nic }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">Phone</label><input type="text" name="my_phone" value="{{ $f->my_phone }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">Job</label><input type="text" name="my_job" value="{{ $f->my_job }}" class="form-control radius-8"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Spouse & Guardian --}}
                <div class="accordion-item border rounded-8 mb-12 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-semibold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterFamily">
                            Spouse & Guardian — පියා සහ භාරකරු
                        </button>
                    </h2>
                    <div id="filterFamily" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row g-3">
                                <div class="col-md-4"><label class="form-label text-sm">Spouse name (පියා)</label><input type="text" name="spouse_name" value="{{ $f->spouse_name }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Spouse NIC</label><input type="text" name="spouse_nic" value="{{ $f->spouse_nic }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Spouse phone</label><input type="text" name="spouse_phone" value="{{ $f->spouse_phone }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Guardian name</label><input type="text" name="guardian_name" value="{{ $f->guardian_name }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Guardian NIC</label><input type="text" name="guardian_nic" value="{{ $f->guardian_nic }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Guardian phone</label><input type="text" name="guardian_phone" value="{{ $f->guardian_phone }}" class="form-control radius-8"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Address --}}
                <div class="accordion-item border rounded-8 mb-12 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-semibold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterAddress">
                            Address & Contact
                        </button>
                    </h2>
                    <div id="filterAddress" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label text-sm">City</label>
                                    <input type="text" name="addr_city" value="{{ $f->addr_city }}" list="cityList" class="form-control radius-8" placeholder="Type or select">
                                    <datalist id="cityList">
                                        @foreach ($cities as $city)
                                            <option value="{{ $city }}"></option>
                                        @endforeach
                                    </datalist>
                                </div>
                                <div class="col-md-3"><label class="form-label text-sm">Street</label><input type="text" name="addr_street" value="{{ $f->addr_street }}" class="form-control radius-8"></div>
                                <div class="col-md-2"><label class="form-label text-sm">Division (කොට්ඨාසය)</label><input type="text" name="addr_colombo" value="{{ $f->addr_colombo }}" class="form-control radius-8"></div>
                                <div class="col-md-2">
                                    <label class="form-label text-sm">Residence</label>
                                    <select name="residence_type" class="form-select radius-8">
                                        <option value="">Any</option>
                                        <option value="permanent" @selected($f->residence_type === 'permanent')>Permanent</option>
                                        <option value="temporary" @selected($f->residence_type === 'temporary')>Temporary</option>
                                    </select>
                                </div>
                                <div class="col-md-2"><label class="form-label text-sm">Phone</label><input type="text" name="phone" value="{{ $f->phone }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">WhatsApp</label><input type="text" name="whatsapp" value="{{ $f->whatsapp }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">Email</label><input type="email" name="email" value="{{ $f->email }}" class="form-control radius-8"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Children --}}
                <div class="accordion-item border rounded-8 mb-12 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-semibold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterChildren">
                            03. පාසල් යන දරුවන්ගේ විස්තර — School Children Details
                        </button>
                    </h2>
                    <div id="filterChildren" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row g-3">
                                <div class="col-md-3"><label class="form-label text-sm">Birth certificate no.</label><input type="text" name="child_name" value="{{ $f->child_name }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">Student name</label><input type="text" name="child_ref" value="{{ $f->child_ref }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">School</label><input type="text" name="child_school" value="{{ $f->child_school }}" class="form-control radius-8"></div>
                                <div class="col-md-3"><label class="form-label text-sm">Grade</label><input type="text" name="child_grade" value="{{ $f->child_grade }}" class="form-control radius-8"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Aid --}}
                <div class="accordion-item border rounded-8 mb-12 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-semibold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterAid">
                            04. දැනට ලභාගන්නා සහනාධාර — Aid
                        </button>
                    </h2>
                    <div id="filterAid" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label text-sm">Aid type</label>
                                    <select name="aid_code" class="form-select radius-8">
                                        <option value="">All aid types</option>
                                        @foreach ($aidOptions as $code => $label)
                                            <option value="{{ $code }}" @selected($f->aid_code === $code)>{{ $label }}</option>
                                        @endforeach
                                        <option value="other" @selected($f->aid_code === 'other')>Other</option>
                                    </select>
                                </div>
                                <div class="col-md-4"><label class="form-label text-sm">Aid estimate</label><input type="text" name="aid_estimate" value="{{ $f->aid_estimate }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Trade name</label><input type="text" name="trade_name" value="{{ $f->trade_name }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Qualifications (අධ්‍යාපන සුදුසුකම්)</label><input type="text" name="trade_ref" value="{{ $f->trade_ref }}" class="form-control radius-8"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Office --}}
                <div class="accordion-item border rounded-8 mb-12 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-semibold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#filterOffice">
                            Office use
                        </button>
                    </h2>
                    <div id="filterOffice" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row g-3">
                                <div class="col-md-4"><label class="form-label text-sm">Form number</label><input type="text" name="office_form_no" value="{{ $f->office_form_no }}" class="form-control radius-8"></div>
                                <div class="col-md-4"><label class="form-label text-sm">Officer name</label><input type="text" name="officer_name" value="{{ $f->officer_name }}" class="form-control radius-8"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2 mt-24 pt-24 border-top">
                <button type="submit" class="btn btn-primary-600 radius-8 px-24 py-11">
                    <iconify-icon icon="solar:magnifer-outline" class="me-1"></iconify-icon> Apply filters
                </button>
                @if ($f->isActive())
                    <a href="{{ $clearRoute }}" class="btn btn-outline-secondary radius-8 px-24 py-11">Clear all</a>
                @endif
            </div>
        </form>
    </div>
</div>