@extends('layouts.public')

@section('title', 'Agrawal Properties — Plots, Homes & Land in Indore')

@push('head')
<link rel="canonical" href="{{ route('public.home') }}">
<meta property="og:url" content="{{ route('public.home') }}">
@endpush

@section('content')
<section class="hero">
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="container position-relative py-5">
        <div class="text-center mx-auto" style="max-width:900px;">
            {{-- Admin-editable via Settings > Home Page Content
                 (App\Models\AppSetting) — see HomeController::index().
                 Rendered raw (not escaped) so an admin can include a
                 literal <br> to control the line break, same as the
                 original hardcoded heading always could. --}}
            <h1 class="mx-auto" style="max-width:16ch;">{!! $home_hero_heading !!}</h1>
            <p class="fs-5 text-muted-2 mt-3 mb-0 mx-auto" style="max-width:560px;">
                {{ $home_hero_description }}
            </p>
        </div>

        <div class="d-flex flex-wrap gap-2 justify-content-center mt-4">
            @php
                $purpose = request('purpose', 'for_sale');

                // Rent listings live on an entirely different scale than
                // sale listings (monthly rent vs a sale price) — same
                // reasoning as the results-page Budget slider's own
                // dedicated rent range (PublicPropertySearchService's
                // RENT_BUDGET_MIN/MAX). Labels spell out "Lakh"/"Crore"
                // rather than the sidebar's abbreviated "L"/"Cr", matching
                // this dropdown's own existing convention.
                $budgetOptions = [
                    'for_sale' => [
                        'min' => ['' => 'No min', '1000000' => '₹10 Lakh', '2500000' => '₹25 Lakh', '5000000' => '₹50 Lakh', '10000000' => '₹1 Crore'],
                        'max' => ['' => 'No max', '5000000' => '₹50 Lakh', '10000000' => '₹1 Crore', '20000000' => '₹2 Crore', '50000000' => '₹5 Crore & above'],
                    ],
                    'for_rent' => [
                        'min' => ['' => 'No min', '5000' => '₹5,000', '15000' => '₹15,000', '30000' => '₹30,000', '50000' => '₹50,000'],
                        'max' => ['' => 'No max', '15000' => '₹15,000', '30000' => '₹30,000', '50000' => '₹50,000', '500000' => '₹5 Lakh & above'],
                    ],
                ];
                $activePurposeKey = $purpose === 'for_rent' ? 'for_rent' : 'for_sale';
            @endphp
            {{-- These radios submit with #homeSearchForm via the form="" attribute
                 even though they're not DOM-nested inside it — kept as a sibling,
                 outside the white search card, matching the template (the toggle
                 sits on the hero background, not the card). --}}
            <label class="tab-pill {{ $purpose === 'for_sale' ? 'active' : '' }}" style="margin:0;">
                <input type="radio" name="purpose" value="for_sale" form="homeSearchForm" class="visually-hidden" {{ $purpose === 'for_sale' ? 'checked' : '' }}> Buy
            </label>
            <label class="tab-pill {{ $purpose === 'for_rent' ? 'active' : '' }}" style="margin:0;">
                <input type="radio" name="purpose" value="for_rent" form="homeSearchForm" class="visually-hidden" {{ $purpose === 'for_rent' ? 'checked' : '' }}> Rent
            </label>
        </div>

        <form id="homeSearchForm" class="search-card mx-auto mt-3" style="max-width:960px;" action="{{ route('public.properties.index') }}" method="get">
            <div class="row g-0 align-items-stretch">
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="search-field h-100">
                        <label for="hType">Property type</label>
                        <select id="hType" name="type">
                            <option value="">Any type</option>
                            @foreach ($propertyTypes as $slug => $label)
                                <option value="{{ $slug }}" {{ request('type') === $slug ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="search-field h-100">
                        <label for="hLocality">City / Locality</label>
                        @include('partials.site._location-autocomplete-field', ['locId' => 'hLocality'])
                    </div>
                </div>
                <div class="col-6 col-lg-2">
                    <div class="search-field h-100">
                        <label for="hMin">Budget from</label>
                        <select id="hMin" name="min">
                            @foreach ($budgetOptions[$activePurposeKey]['min'] as $value => $label)
                                <option value="{{ $value }}" {{ request('min', '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-6 col-lg-2">
                    <div class="search-field h-100">
                        <label for="hMax">Budget to</label>
                        <select id="hMax" name="max">
                            @foreach ($budgetOptions[$activePurposeKey]['max'] as $value => $label)
                                <option value="{{ $value }}" {{ request('max', '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-lg-2 d-flex align-items-stretch p-2">
                    <button type="submit" id="homeSearchBtn" class="btn btn-amber w-100 d-flex align-items-center justify-content-center gap-2" style="border-radius:14px;">Search</button>
                </div>
            </div>
        </form>

        @push('scripts')
        <script>
        (function () {
            var budgetOptions = @json($budgetOptions);
            var minSelect = document.getElementById('hMin');
            var maxSelect = document.getElementById('hMax');
            if (!minSelect || !maxSelect) return;

            var currentPurposeKey = @json($activePurposeKey);

            // Full reset — always used for a genuine purpose switch (see the
            // radio listener below), which must drop any current selection
            // rather than risk silently reinterpreting a stale number on a
            // different scale.
            function rebuild(select, options) {
                select.innerHTML = '';
                Object.keys(options).forEach(function (value) {
                    var option = document.createElement('option');
                    option.value = value;
                    option.textContent = options[value];
                    select.appendChild(option);
                });
            }

            // Budget To must never let the user pick a value below whatever
            // Budget From is currently set to — an inverted range (e.g.
            // From ₹50L, To ₹25L) can never match anything. '' ("No min"/
            // "No max") is always kept, since it's not a real bound. Unlike
            // a purpose switch, this must PRESERVE the current Budget To
            // selection whenever it's still a valid (>= From) option,
            // rather than resetting it — the user is narrowing the From
            // bound, not starting the whole Budget field over.
            function filterMaxOptions() {
                var minValue = minSelect.value;
                var previousMaxValue = maxSelect.value;
                var allMaxOptions = budgetOptions[currentPurposeKey].max;

                var filtered = {};
                Object.keys(allMaxOptions).forEach(function (value) {
                    if (value === '' || minValue === '' || parseInt(value, 10) >= parseInt(minValue, 10)) {
                        filtered[value] = allMaxOptions[value];
                    }
                });

                rebuild(maxSelect, filtered);
                if (filtered.hasOwnProperty(previousMaxValue)) {
                    maxSelect.value = previousMaxValue;
                }
            }

            minSelect.addEventListener('change', filterMaxOptions);

            // Buy/Rent radios live outside the form (see the comment above
            // them), so the change has to be picked up via the radio inputs
            // directly rather than a single scoped listener — switching
            // purpose swaps the whole Budget scale (rent is thousands, sale
            // is lakhs/crores), so a stale sale-scale value carried over
            // after switching to Rent wouldn't mean anything sensible;
            // resetting to "No min"/"No max" is safer than silently
            // reinterpreting the same number on a different scale.
            document.querySelectorAll('input[name="purpose"]').forEach(function (radio) {
                radio.addEventListener('change', function () {
                    currentPurposeKey = radio.value === 'for_rent' ? 'for_rent' : 'for_sale';
                    rebuild(minSelect, budgetOptions[currentPurposeKey].min);
                    rebuild(maxSelect, budgetOptions[currentPurposeKey].max);
                });
            });
        }());
        </script>

        {{-- Homepage-only widening of the Google Places suggestion dropdown
             (.pac-container) so it spans from the City/Locality field's left
             edge to the Search button's right edge, instead of Google's
             default (matching just the input's own width). Deliberately
             self-contained here, NOT in the shared
             _location-autocomplete-scripts.blade.php partial, since that
             partial is also @included by the results page's "Change
             Location" modal — this must only affect the homepage search bar. --}}
        <script>
        (function () {
            var locationInput = document.getElementById('hLocality');
            var searchBtn = document.getElementById('homeSearchBtn');
            if (!locationInput || !searchBtn) return;

            // Google already anchors .pac-container's own `left` to the
            // input's left edge — exactly where this needs to start — so
            // only `width` needs overriding, extending it rightward to the
            // Search button. Only at the `lg` breakpoint and up: below that,
            // Bootstrap wraps the Search button onto its own row (col-12
            // col-lg-2), so there's no adjacent button edge to span to —
            // Google's own input-width default is already correct there.
            function widen(container) {
                if (window.innerWidth < 992) return;

                var inputRect = locationInput.getBoundingClientRect();
                var btnRect = searchBtn.getBoundingClientRect();
                var width = btnRect.right - inputRect.left;

                if (width > 0) {
                    container.style.width = width + 'px';
                    container.style.minWidth = width + 'px';
                }
            }

            var watchedContainer = null;

            function watch(container) {
                if (watchedContainer === container) return;
                watchedContainer = container;

                // Google repositions .pac-container (via its own inline
                // left/top/width) on focus/input/resize/scroll — this
                // observer re-applies our own width immediately after each
                // of those, without fighting Google for it: disconnecting
                // before we mutate the style ourselves avoids re-triggering
                // this same observer in a loop.
                var observer = new MutationObserver(function () {
                    observer.disconnect();
                    widen(container);
                    observer.observe(container, { attributes: true, attributeFilter: ['style'] });
                });
                widen(container);
                observer.observe(container, { attributes: true, attributeFilter: ['style'] });
            }

            // Google appends .pac-container to <body> once the Autocomplete
            // widget initializes on this field — watch for its arrival.
            new MutationObserver(function () {
                var container = document.querySelector('.pac-container');
                if (container) watch(container);
            }).observe(document.body, { childList: true });

            window.addEventListener('resize', function () {
                if (watchedContainer) widen(watchedContainer);
            });
        }());
        </script>
        @endpush

        @if ($popularSearches->isNotEmpty())
        <div class="d-flex flex-wrap justify-content-center align-items-center gap-2 mt-4">
            <span class="small fw-medium text-muted-2">Popular:</span>
            @foreach ($popularSearches as $search)
                <a class="trend-chip" href="{{ route('public.properties.index', ['type' => $search['type'], 'purpose' => $search['purpose']]) }}">{{ $search['label'] }}</a>
            @endforeach
        </div>
        @endif

        {{-- Admin-editable via Settings > Home Page Content > Homepage
             Statistics (App\Models\AppSetting) — see HomeController::index(). --}}
        @if (!empty($stats))
        <div class="d-flex flex-wrap justify-content-center gap-5 mt-5">
            @foreach ($stats as $stat)
                <div class="stat text-center"><div class="num">{{ $stat['value'] }}</div><div class="lbl">{{ $stat['label'] }}</div></div>
            @endforeach
        </div>
        @endif
    </div>
</section>

@if ($featuredProperties->isNotEmpty())
<section class="container py-5">
    <div class="d-flex align-items-end justify-content-between flex-wrap gap-3 mb-4">
        <div>
            <span class="eyebrow">{{ $home_recently_listed_heading }}</span>
            <h2 class="fw-bold mb-0 mt-2" style="font-size:clamp(28px,3.6vw,40px);">{{ $home_recently_listed_subheading }}</h2>
            @if (filled($home_recently_listed_description))
                <p class="text-muted-2 mt-2 mb-0" style="max-width:60ch;">{{ $home_recently_listed_description }}</p>
            @endif
        </div>
        <a href="{{ route('public.properties.index') }}" class="fw-semibold text-green">View all listings →</a>
    </div>
    <div class="row g-4">
        @foreach ($featuredProperties as $property)
            @include('partials.site._property-card', ['property' => $property, 'propertyTypes' => $propertyTypes])
        @endforeach
    </div>
</section>
@endif

@if (!empty($budgetTiers))
<section class="container pb-5">
    <div class="mb-4">
        <span class="eyebrow">{{ $home_budget_heading }}</span>
        <h2 class="fw-bold mb-0 mt-2" style="font-size:clamp(28px,3.6vw,40px);">{{ $home_budget_subheading }}</h2>
    </div>
    <div class="row g-4">
        @php $categoryUrlBuilder = app(\App\Services\PropertyCategoryUrlBuilder::class); @endphp
        @foreach ($budgetTiers as $tier)
            <div class="col-6 col-lg-3">
                @php
                    // canonicalPath() picks the right suffix shape from
                    // whichever of min/max are present — under-only (max),
                    // above-only (min), or between (both) — so every tier
                    // gets a direct SEO link now, including the open-ended
                    // "₹1 Cr & up" tier (min only -> "-above-").
                    $tierHref = $categoryUrlBuilder->canonicalPath(
                        null, null, null, [], null, null,
                        isset($tier['max']) ? (float) $tier['max'] : null,
                        isset($tier['min']) ? (float) $tier['min'] : null
                    );
                @endphp
                <a class="tile text-reset" href="{{ $tierHref }}">
                    <div class="big">{{ $tier['label'] }}</div>
                    <div class="text-muted-2 mt-2">{{ $tier['sub'] }}</div>
                    <div class="fw-semibold text-amber mt-3">Explore →</div>
                </a>
            </div>
        @endforeach
    </div>
</section>
@endif

@if ($topCities->isNotEmpty())
<section class="container pb-5">
    <div class="band-green p-4 p-lg-5"><div class="glow"></div><div class="position-relative">
        <div class="d-flex justify-content-between align-items-end flex-wrap gap-3">
            <h2 class="text-white fw-semibold mb-0" style="font-size:clamp(24px,3.2vw,34px);">{{ $home_cities_heading }}</h2>
            <span class="small" style="color:#A9B9B2;">{{ $home_cities_subheading }}</span>
        </div>
        <div class="d-flex flex-wrap gap-2 mt-4">
            @php $categoryUrlBuilder = app(\App\Services\PropertyCategoryUrlBuilder::class); @endphp
            @foreach ($topCities as $cityRow)
                <a class="loc-chip" href="{{ $categoryUrlBuilder->canonicalPath(null, $cityRow->city, null) }}">{{ $cityRow->city }}</a>
            @endforeach
        </div>
    </div></div>
</section>
@endif

@if ($testimonials->isNotEmpty())
<section class="container pb-5">
    <div class="mb-4">
        <span class="eyebrow">{{ $home_testimonials_heading }}</span>
        <h2 class="fw-bold mb-0 mt-2" style="font-size:clamp(28px,3.6vw,40px);">{{ $home_testimonials_subheading }}</h2>
    </div>
    <div class="row g-4">
        @foreach ($testimonials as $testimonial)
            <div class="col-md-4">
                <figure class="quote-card mb-0">
                    <blockquote class="mb-3" style="font-size:16px;line-height:1.65;">&ldquo;{{ $testimonial->message }}&rdquo;</blockquote>
                    <figcaption class="small text-muted-2">
                        <strong class="text-dark">{{ $testimonial->customer_name }}</strong>@if ($testimonial->designation) &middot; {{ $testimonial->designation }}@endif
                    </figcaption>
                </figure>
            </div>
        @endforeach
    </div>
</section>
@endif

{{-- Home Page's own Footer SEO Content — rendered ONLY here, never
     site-wide (see partials.site._footer-seo's own doc comment). Plain
     text (no rich formatting), same as the Content Page/Landing Page
     versions — line breaks preserved, any typed HTML shown as literal
     text rather than interpreted. --}}
@include('partials.site._footer-seo', ['footerSeoContent' => \App\Models\AppSetting::get('footer_seo_content')])
@endsection