@extends('layouts.master')

@section('title', 'Properties - HomesInKerala')
@section('meta_description', 'Search verified Kerala properties with Ajax filters for location, property type, price range, bedrooms, bathrooms and built area.')

@section('content')
    <section class="bg-soft py-5 border-bottom">
        <div class="container">
            <div class="row align-items-end g-3">
                <div class="col-lg-8">
                    <p class="text-primary fw-bold text-uppercase small mb-1">Ajax Property Search</p>
                    <h1 class="fw-bold">Discover verified Kerala properties</h1>
                    <p class="text-muted mb-0">Live search by keyword, district, city, area, type, category, purpose, price, bedrooms, bathrooms and built area.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <span class="badge text-bg-light fs-6" id="property-search-summary">{{ $summary }}</span>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <form
                id="property-search-form"
                class="property-search-layout"
                action="{{ route('properties.index') }}"
                method="GET"
                data-cities-url="{{ route('properties.ajax.cities') }}"
                data-areas-url="{{ route('properties.ajax.areas') }}"
            >
                <aside class="property-filter-panel">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="h5 mb-0">Filters</h2>
                        <button type="button" class="btn btn-link btn-sm text-decoration-none" id="property-filter-reset">Reset</button>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="property-search-keyword">Keyword</label>
                        <input class="form-control property-live-input" id="property-search-keyword" name="q" value="{{ request('q') }}" placeholder="Search title, location, project">
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="property-search-district">District</label>
                        <select class="form-select property-live-input" id="property-search-district" name="district">
                            <option value="">All Districts</option>
                            @foreach($districts as $district)
                                <option value="{{ $district->slug }}" @selected((string) request('district') === (string) $district->slug || (string) request('district') === (string) $district->id)>{{ $district->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="property-search-city">City</label>
                        <select class="form-select property-live-input" id="property-search-city" name="city">
                            <option value="">All Cities</option>
                            @foreach($cities as $city)
                                <option value="{{ $city->slug }}" @selected((string) request('city') === (string) $city->slug || (string) request('city') === (string) $city->id)>{{ $city->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="property-search-area">Area</label>
                        <select class="form-select property-live-input" id="property-search-area" name="area">
                            <option value="">All Areas</option>
                            @foreach($areas as $area)
                                <option value="{{ $area->slug }}" @selected((string) request('area') === (string) $area->slug || (string) request('area') === (string) $area->id)>{{ $area->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6 col-lg-12">
                            <label class="form-label" for="property-search-type">Type</label>
                            <select class="form-select property-live-input" id="property-search-type" name="type">
                                <option value="">Any Type</option>
                                @foreach($types as $type)
                                    <option value="{{ $type->slug }}" @selected((string) request('type') === (string) $type->slug || (string) request('type') === (string) $type->id)>{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 col-lg-12">
                            <label class="form-label" for="property-search-category">Category</label>
                            <select class="form-select property-live-input" id="property-search-category" name="category">
                                <option value="">Any Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->slug }}" @selected((string) request('category') === (string) $category->slug || (string) request('category') === (string) $category->id)>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="my-3">
                        <label class="form-label" for="property-search-purpose">Purpose</label>
                        <select class="form-select property-live-input" id="property-search-purpose" name="purpose">
                            <option value="">Any Purpose</option>
                            <option value="sale" @selected(request('purpose') === 'sale')>For Sale</option>
                            <option value="rent" @selected(request('purpose') === 'rent')>For Rent</option>
                            <option value="lease" @selected(request('purpose') === 'lease')>For Lease</option>
                        </select>
                    </div>

                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label" for="property-price-min">Min Price</label>
                            <input type="number" min="0" class="form-control property-live-input" id="property-price-min" name="price_min" value="{{ request('price_min') }}" placeholder="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="property-price-max">Max Price</label>
                            <input type="number" min="0" class="form-control property-live-input" id="property-price-max" name="price_max" value="{{ request('price_max') }}" placeholder="5000000">
                        </div>
                    </div>

                    <div class="row g-3 mt-0">
                        <div class="col-6">
                            <label class="form-label" for="property-bedrooms">Bedrooms</label>
                            <select class="form-select property-live-input" id="property-bedrooms" name="bedrooms">
                                <option value="">Any</option>
                                @foreach([1, 2, 3, 4, 5] as $bedroom)
                                    <option value="{{ $bedroom }}" @selected((string) request('bedrooms') === (string) $bedroom)>{{ $bedroom }}+</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="property-bathrooms">Bathrooms</label>
                            <select class="form-select property-live-input" id="property-bathrooms" name="bathrooms">
                                <option value="">Any</option>
                                @foreach([1, 2, 3, 4, 5] as $bathroom)
                                    <option value="{{ $bathroom }}" @selected((string) request('bathrooms') === (string) $bathroom)>{{ $bathroom }}+</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mt-0">
                        <div class="col-6">
                            <label class="form-label" for="property-area-min">Min Area</label>
                            <input type="number" min="0" class="form-control property-live-input" id="property-area-min" name="area_min" value="{{ request('area_min') }}" placeholder="Sqft">
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="property-area-max">Max Area</label>
                            <input type="number" min="0" class="form-control property-live-input" id="property-area-max" name="area_max" value="{{ request('area_max') }}" placeholder="Sqft">
                        </div>
                    </div>

                    <button class="btn btn-primary w-100 mt-4" type="submit">Apply Filters</button>

                    @auth
                        <div class="border-top mt-4 pt-4">
                            <label class="form-label" for="saved-search-name">Save this search</label>
                            <input class="form-control mb-2" id="saved-search-name" name="name" value="" placeholder="Search name" form="save-search-form">
                            <button class="btn property-save-search-btn w-100" type="submit" form="save-search-form">Save Search</button>
                        </div>
                    @endauth
                </aside>

                <div class="property-results-panel">
                    <div class="d-flex flex-column flex-md-row gap-3 justify-content-between align-items-md-center mb-4">
                        <div>
                            <h2 class="h4 mb-1">Property Results</h2>
                            <p class="text-muted mb-0" id="property-search-count">{{ $summary }}</p>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <label class="form-label mb-0" for="property-search-sort">Sort</label>
                            <select class="form-select property-live-input" id="property-search-sort" name="sort">
                                <option value="">Newest First</option>
                                <option value="price_asc" @selected(request('sort') === 'price_asc')>Price: Low to High</option>
                                <option value="price_desc" @selected(request('sort') === 'price_desc')>Price: High to Low</option>
                                <option value="area_desc" @selected(request('sort') === 'area_desc')>Largest Area</option>
                                <option value="oldest" @selected(request('sort') === 'oldest')>Oldest First</option>
                            </select>
                        </div>
                    </div>

                    <div id="property-search-loading" class="property-search-loading d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>

                    <div id="property-results">
                        @include('frontend.properties.partials.results')
                    </div>
                </div>
            </form>
            @auth
                <form id="save-search-form" method="POST" action="{{ route('user.saved-searches.store') }}">
                    @csrf
                </form>
            @endauth
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('property-search-form');
            if (!form) return;

            const results = document.getElementById('property-results');
            const loading = document.getElementById('property-search-loading');
            const count = document.getElementById('property-search-count');
            const summary = document.getElementById('property-search-summary');
            const reset = document.getElementById('property-filter-reset');
            const saveSearchForm = document.getElementById('save-search-form');
            const district = document.getElementById('property-search-district');
            const city = document.getElementById('property-search-city');
            const area = document.getElementById('property-search-area');
            let timer = null;
            let controller = null;

            const buildUrl = (url = form.action) => {
                const formData = new FormData(form);
                const params = new URLSearchParams();

                formData.forEach((value, key) => {
                    if (value !== null && String(value).trim() !== '') {
                        params.append(key, value);
                    }
                });

                return params.toString() ? `${url}?${params}` : url;
            };

            const search = async (url = null, pushState = true) => {
                controller?.abort();
                controller = new AbortController();
                loading?.classList.remove('d-none');

                const targetUrl = url || buildUrl();

                try {
                    const response = await fetch(targetUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        signal: controller.signal,
                    });

                    if (!response.ok) throw new Error('Search request failed');

                    const payload = await response.json();
                    results.innerHTML = payload.html;
                    count.textContent = payload.summary;
                    summary.textContent = payload.summary;

                    if (pushState) {
                        window.history.pushState({}, '', targetUrl);
                    }
                } catch (error) {
                    if (error.name !== 'AbortError') {
                        results.innerHTML = '<div class="alert alert-danger">Unable to load properties. Please try again.</div>';
                    }
                } finally {
                    loading?.classList.add('d-none');
                }
            };

            const debouncedSearch = () => {
                clearTimeout(timer);
                timer = setTimeout(() => search(), 350);
            };

            const fillSelect = (select, items, placeholder) => {
                if (!select) return;
                select.innerHTML = `<option value="">${placeholder}</option>`;
                items.forEach((item) => {
                    const option = document.createElement('option');
                    option.value = item.slug;
                    option.textContent = item.name;
                    select.appendChild(option);
                });
            };

            form.addEventListener('submit', (event) => {
                event.preventDefault();
                search();
            });

            form.querySelectorAll('.property-live-input').forEach((input) => {
                if ([district, city].includes(input)) return;

                input.addEventListener(input.tagName === 'INPUT' ? 'input' : 'change', debouncedSearch);
            });

            district?.addEventListener('change', async () => {
                fillSelect(city, [], 'All Cities');
                fillSelect(area, [], 'All Areas');

                if (district.value) {
                    const response = await fetch(`${form.dataset.citiesUrl}?district=${district.value}`);
                    const payload = await response.json();
                    fillSelect(city, payload.data, 'All Cities');
                }

                search();
            });

            city?.addEventListener('change', async () => {
                fillSelect(area, [], 'All Areas');

                if (city.value) {
                    const response = await fetch(`${form.dataset.areasUrl}?city=${city.value}`);
                    const payload = await response.json();
                    fillSelect(area, payload.data, 'All Areas');
                }

                search();
            });

            results.addEventListener('click', (event) => {
                const link = event.target.closest('.pagination a');
                if (!link) return;

                event.preventDefault();
                search(link.href);
            });

            reset?.addEventListener('click', () => {
                form.querySelectorAll('input, select').forEach((field) => {
                    field.value = '';
                });
                fillSelect(city, [], 'All Cities');
                fillSelect(area, [], 'All Areas');
                search(form.action);
            });

            saveSearchForm?.addEventListener('submit', () => {
                saveSearchForm.querySelectorAll('input[data-filter-copy]').forEach((input) => input.remove());
                const formData = new FormData(form);

                formData.forEach((value, key) => {
                    if (['name', '_token'].includes(key) || String(value).trim() === '') return;

                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = value;
                    input.dataset.filterCopy = '1';
                    saveSearchForm.appendChild(input);
                });
            });

            window.addEventListener('popstate', () => {
                window.location.reload();
            });
        });
    </script>
@endpush