@extends('admin.layouts.app')

@section('title', 'Homepage Content')
@section('breadcrumb')
    <li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor"
            stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg></li>
    <li><a href="{{ route('admin.dashboard') }}" class="hover:text-primary-600 transition-colors">Pages</a></li>
    <li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor"
            stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg></li>
    <li><span class="text-gray-500">Homepage</span></li>
@endsection
@section('heading', 'Homepage Content')
@section('subheading',
    'Edit hero, services, CTA, and other sections. Featured Listings show real properties from the
    system.')

@section('content')

    <div class="min-w-0 max-w-full">
        @if (session('success'))
            <div
                class="mb-4 sm:mb-6 p-3 sm:p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-xs sm:text-sm text-emerald-700">
                {{ session('success') }}</div>
        @endif

        <form action="{{ route('admin.pages.homepage.update') }}" method="POST" enctype="multipart/form-data"
            class="min-w-0">
            @csrf
            @method('PUT')

            @php
                $d = $data;
                $hdr = $d['header'] ?? [];
                $h = $d['hero'] ?? [];
                $fl = $d['featured_listings'] ?? [];
                $sv = $d['services'] ?? [];
                $items = $sv['items'] ?? [];
                $cta = $d['cta'] ?? [];
                $app = $d['download_app'] ?? [];
                $lc = $d['loan_calculator'] ?? [];
                $ag = $d['agents_section'] ?? [];
                $tm = $d['testimonials_section'] ?? [];
                $brands = $d['brands'] ?? [];
                $brandsItems = $brands['items'] ?? [];
            @endphp

            {{-- Tabs Navigation --}}
            <div class="bg-white rounded-xl border border-gray-100 mb-4 sm:mb-6 overflow-hidden">
                <div class="border-b border-gray-200 overflow-x-auto -mx-px">
                    <nav class="flex overflow-x-auto scrollbar-thin min-w-0 gap-0 sm:gap-0" aria-label="Tabs"
                        style="-webkit-overflow-scrolling: touch;">
                        <button type="button" onclick="showTab('header')" id="tab-header"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-700 border-b-2 border-primary-500">
                            Header
                        </button>
                        <button type="button" onclick="showTab('hero')" id="tab-hero"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">
                            Hero
                        </button>
                        <button type="button" onclick="showTab('featured')" id="tab-featured"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Featured
                            Listings</button>
                        <button type="button" onclick="showTab('services')" id="tab-services"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Services</button>
                        <button type="button" onclick="showTab('loan')" id="tab-loan"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Loan
                            Calculator</button>
                        <button type="button" onclick="showTab('brands')" id="tab-brands"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Brands</button>
                        <!--<button type="button" onclick="showTab('agents')" id="tab-agents"-->
                        <!--    class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Agents</button>-->
                        <button type="button" onclick="showTab('testimonials')" id="tab-testimonials"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Testimonials</button>
                        <button type="button" onclick="showTab('blogs')" id="tab-blogs"
                            class="tab-button shrink-0 whitespace-nowrap px-4 py-3 sm:px-5 sm:py-4 md:px-6 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">Blogs</button>
                    </nav>
                </div>

                {{-- Tab Contents --}}
                <div class="p-4 sm:p-5 md:p-6">

                    {{-- Header Tab --}}
                    <div id="content-header" class="tab-content">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Header Settings</h3>
                        <p class="text-xs sm:text-sm text-gray-500 mb-4">Upload a site logo and set the contact number shown in the navbar.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Logo</label>
                                @if (!empty($hdr['logo']))
                                    <div class="mb-2 max-w-full"><img src="{{ asset($hdr['logo']) }}" alt="Current logo"
                                            class="max-h-16 w-auto max-w-full object-contain rounded border"></div>
                                @endif
                                <input type="file" name="header_logo" accept="image/*"
                                    class="w-full max-w-full px-3 py-2.5 sm:px-3.5 sm:py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none box-border">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Contact Number</label>
                                <input type="text" name="header[contact_no]" value="{{ old('header.contact_no', $hdr['contact_no'] ?? '') }}"
                                    placeholder="+91 55511 10123"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Hero Tab --}}
                    <div id="content-hero" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Hero</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="hero[title]" value="{{ old('hero.title', $h['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Subtitle</label>
                                <textarea name="hero[subtitle]" rows="2"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none resize-none">{{ old('hero.subtitle', $h['subtitle'] ?? '') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Search placeholder</label>
                                <input type="text" name="hero[searchPlaceholder]"
                                    value="{{ old('hero.searchPlaceholder', $h['searchPlaceholder'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                            <div class="md:col-span-2 min-w-0">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Background image</label>
                                @if (!empty($h['image']))
                                    <div class="mb-2 max-w-full"><img src="{{ asset($h['image']) }}" alt=""
                                            class="max-h-20 sm:max-h-24 w-auto max-w-full object-cover rounded border">
                                    </div>
                                @endif
                                <input type="file" name="hero_image" accept="image/*"
                                    class="w-full max-w-full px-3 py-2.5 sm:px-3.5 sm:py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none box-border">
                            </div>
                        </div>
                    </div>

                    {{-- Featured Listings Tab --}}
                    <div id="content-featured" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Featured Listings (section
                            heading only)</h3>
                        <p class="text-xs sm:text-sm text-gray-500 mb-4">Listings are loaded from actual properties in the
                            system. Edit only the section title and subtitle here.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="featured_listings[title]"
                                    value="{{ old('featured_listings.title', $fl['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Subtitle</label>
                                <input type="text" name="featured_listings[subtitle]"
                                    value="{{ old('featured_listings.subtitle', $fl['subtitle'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Services Tab --}}
                    <div id="content-services" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Services</h3>
                        <div class="grid grid-cols-1 gap-4 sm:gap-5 mb-5 min-w-0">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Section title</label>
                                <input type="text" name="services[title]"
                                    value="{{ old('services.title', $sv['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Section subtitle</label>
                                <textarea name="services[subtitle]" rows="2"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none resize-none">{{ old('services.subtitle', $sv['subtitle'] ?? '') }}</textarea>
                            </div>
                        </div>
                        @for ($i = 0; $i < 4; $i++)
                            <div class="border border-gray-100 rounded-lg p-3 sm:p-4 mb-4">
                                <p class="text-sm font-medium text-gray-600 mb-3">Service {{ $i + 1 }}</p>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4 min-w-0">
                                    <div>
                                        <label class="block text-sm text-gray-700 mb-1">Title</label>
                                        <input type="text" name="services[items][{{ $i }}][title]"
                                            value="{{ old("services.items.{$i}.title", $items[$i]['title'] ?? '') }}"
                                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-sm text-gray-700 mb-1">Link</label>
                                        <input type="text" name="services[items][{{ $i }}][link]"
                                            value="{{ old("services.items.{$i}.link", $items[$i]['link'] ?? '#') }}"
                                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm text-gray-700 mb-1">Description</label>
                                        <textarea name="services[items][{{ $i }}][description]" rows="2"
                                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none resize-none">{{ old("services.items.{$i}.description", $items[$i]['description'] ?? '') }}</textarea>
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm text-gray-700 mb-1">Image (replaces icon)</label>
                                        @if (!empty($items[$i]['image']))
                                            <div class="mb-2 max-w-full"><img src="{{ asset($items[$i]['image']) }}"
                                                    alt=""
                                                    class="h-14 sm:h-16 w-auto max-w-full object-contain rounded border">
                                            </div>
                                        @endif
                                        <input type="file" name="services_item_{{ $i }}_image"
                                            accept="image/*"
                                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>

                    {{-- CTA Tab --}}
                    <div id="content-cta" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">CTA</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="cta[title]"
                                    value="{{ old('cta.title', $cta['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Description</label>
                                <textarea name="cta[description]" rows="2"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none resize-none">{{ old('cta.description', $cta['description'] ?? '') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Button text</label>
                                <input type="text" name="cta[buttonText]"
                                    value="{{ old('cta.buttonText', $cta['buttonText'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Button link</label>
                                <input type="text" name="cta[buttonLink]"
                                    value="{{ old('cta.buttonLink', $cta['buttonLink'] ?? '#') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Image</label>
                                @if (!empty($cta['image']))
                                    <div class="mb-2 max-w-full"><img src="{{ asset($cta['image']) }}" alt=""
                                            class="h-20 sm:h-24 w-auto max-w-full object-contain rounded border"></div>
                                @endif
                                <input type="file" name="cta_image" accept="image/*"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Download App Tab --}}
                    <div id="content-download" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Download App</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="download_app[title]"
                                    value="{{ old('download_app.title', $app['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Description</label>
                                <textarea name="download_app[description]" rows="3"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none resize-none">{{ old('download_app.description', $app['description'] ?? '') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">App Store link</label>
                                <input type="text" name="download_app[appStoreLink]"
                                    value="{{ old('download_app.appStoreLink', $app['appStoreLink'] ?? '#') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Play Store link</label>
                                <input type="text" name="download_app[playStoreLink]"
                                    value="{{ old('download_app.playStoreLink', $app['playStoreLink'] ?? '#') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Image</label>
                                @if (!empty($app['image']))
                                    <div class="mb-2"><img src="{{ asset($app['image']) }}" alt=""
                                            class="h-24 w-auto object-contain rounded border"></div>
                                @endif
                                <input type="file" name="download_app_image" accept="image/*"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Loan Calculator Tab --}}
                    <div id="content-loan" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Loan Calculator</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="loan_calculator[title]"
                                    value="{{ old('loan_calculator.title', $lc['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Description</label>
                                <textarea name="loan_calculator[description]" rows="2"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none resize-none">{{ old('loan_calculator.description', $lc['description'] ?? '') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Total Amount label</label>
                                <input type="text" name="loan_calculator[totalAmountLabel]"
                                    value="{{ old('loan_calculator.totalAmountLabel', $lc['totalAmountLabel'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Down Payment label</label>
                                <input type="text" name="loan_calculator[downPaymentLabel]"
                                    value="{{ old('loan_calculator.downPaymentLabel', $lc['downPaymentLabel'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Interest Rate label</label>
                                <input type="text" name="loan_calculator[interestRateLabel]"
                                    value="{{ old('loan_calculator.interestRateLabel', $lc['interestRateLabel'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Amortization label</label>
                                <input type="text" name="loan_calculator[amortizationLabel]"
                                    value="{{ old('loan_calculator.amortizationLabel', $lc['amortizationLabel'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Property Tax label</label>
                                <input type="text" name="loan_calculator[propertyTaxLabel]"
                                    value="{{ old('loan_calculator.propertyTaxLabel', $lc['propertyTaxLabel'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Insurance label</label>
                                <input type="text" name="loan_calculator[insuranceLabel]"
                                    value="{{ old('loan_calculator.insuranceLabel', $lc['insuranceLabel'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Calculate button text</label>
                                <input type="text" name="loan_calculator[calculateButtonText]"
                                    value="{{ old('loan_calculator.calculateButtonText', $lc['calculateButtonText'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Start over button text</label>
                                <input type="text" name="loan_calculator[startOverButtonText]"
                                    value="{{ old('loan_calculator.startOverButtonText', $lc['startOverButtonText'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Image</label>
                                @if (!empty($lc['image']))
                                    <div class="mb-2"><img src="{{ asset($lc['image']) }}" alt=""
                                            class="h-24 w-auto object-contain rounded border"></div>
                                @endif
                                <input type="file" name="loan_calculator_image" accept="image/*"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- ============================================================ --}}
                    {{-- Brands Tab — with per-item delete                            --}}
                    {{-- ============================================================ --}}
                    <div id="content-brands" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Brands / Partners</h3>
                        <p class="text-xs sm:text-sm text-gray-500 mb-4">
                            Existing logos are shown below. Click <strong>Delete</strong> on any to remove it instantly.
                            Add new logos using the upload input at the bottom.
                        </p>

                        {{-- Current brands grid --}}
                        @if (count($brandsItems) > 0)
                            <div class="mb-6 min-w-0" id="brands-grid">
                                <p class="text-xs sm:text-sm font-medium text-gray-700 mb-3">Current brands:</p>
                                <div class="flex flex-wrap gap-3 min-w-0" id="brands-list">
                                    @foreach ($brandsItems as $idx => $b)
                                    <div class="brand-item flex flex-col items-center gap-2 border border-gray-200 rounded-xl p-3 bg-gray-50 w-28"
                                         id="brand-card-{{ $idx }}"
                                         data-path="{{ $b['image'] ?? '' }}">
                                
                                        {{-- ← ADD THIS hidden input so existing paths are submitted with the main form --}}
                                        <input type="hidden" name="brands_paths[]" value="{{ $b['image'] ?? '' }}">
                                
                                        <img src="{{ asset($b['image'] ?? '') }}"
                                             alt="Brand {{ $idx + 1 }}"
                                             class="h-12 w-auto object-contain"
                                             onerror="this.style.opacity='0.3'">
                                        <span class="text-xs text-gray-400">#{{ $idx + 1 }}</span>
                                        <button type="button"
                                                onclick="deleteBrand('{{ addslashes($b['image'] ?? '') }}', 'brand-card-{{ $idx }}')"
                                                class="w-full text-xs text-red-500 hover:text-white hover:bg-red-500 border border-red-200 hover:border-red-500 rounded-lg px-2 py-1 transition-colors">
                                            Delete
                                        </button>
                                    </div>
                                @endforeach
                                </div>
                                <p id="no-brands-msg" class="text-sm text-gray-400 hidden mt-2">No brands yet. Upload one below.</p>
                            </div>
                        @else
                            <div id="brands-grid" class="mb-6">
                                <div class="flex flex-wrap gap-3 min-w-0" id="brands-list"></div>
                                <p id="no-brands-msg" class="text-sm text-gray-400 mt-2">No brands yet. Upload one below.</p>
                            </div>
                        @endif

                        {{-- Upload new brands --}}
                        <div class="border-t border-gray-100 pt-5">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Add new brand images</label>
                            <input type="file" name="brands_new[]" accept="image/*" multiple
                                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            <p class="text-xs text-gray-400 mt-1">You can select multiple files at once.</p>
                        </div>
                    </div>

                    {{-- Agents Section Tab --}}
                    <div id="content-agents" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Agents section (heading &
                            footer text only)</h3>
                        <p class="text-xs sm:text-sm text-gray-500 mb-4">Agent cards are loaded from the Agents API. Edit
                            only titles and button text here.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="agents_section[title]"
                                    value="{{ old('agents_section.title', $ag['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Subtitle</label>
                                <input type="text" name="agents_section[subtitle]"
                                    value="{{ old('agents_section.subtitle', $ag['subtitle'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Footer text</label>
                                <textarea name="agents_section[footerText]" rows="2"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none resize-none">{{ old('agents_section.footerText', $ag['footerText'] ?? '') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Footer link text</label>
                                <input type="text" name="agents_section[footerLinkText]"
                                    value="{{ old('agents_section.footerLinkText', $ag['footerLinkText'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Footer link URL</label>
                                <input type="text" name="agents_section[footerLinkUrl]"
                                    value="{{ old('agents_section.footerLinkUrl', $ag['footerLinkUrl'] ?? '#') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Button text</label>
                                <input type="text" name="agents_section[buttonText]"
                                    value="{{ old('agents_section.buttonText', $ag['buttonText'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Button link</label>
                                <input type="text" name="agents_section[buttonLink]"
                                    value="{{ old('agents_section.buttonLink', $ag['buttonLink'] ?? '#') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Testimonials Section Tab --}}
                    <div id="content-testimonials" class="tab-content hidden">
                        <h3 class="text-sm sm:text-base font-semibold text-gray-900 mb-4 sm:mb-5">Testimonials section
                            (heading only)</h3>
                        <p class="text-xs sm:text-sm text-gray-500 mb-4">Testimonial cards are loaded from the Testimonials
                            API. Manage testimonials in <a href="{{ route('admin.testimonials.index') }}"
                                class="text-primary-600 hover:underline">Testimonials</a>.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 min-w-0">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                                <input type="text" name="testimonials_section[title]"
                                    value="{{ old('testimonials_section.title', $tm['title'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Subtitle</label>
                                <input type="text" name="testimonials_section[subtitle]"
                                    value="{{ old('testimonials_section.subtitle', $tm['subtitle'] ?? '') }}"
                                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Blogs Tab --}}
                    <div id="content-blogs" class="tab-content hidden">
                        <div class="flex items-center justify-between mb-4 sm:mb-5">
                            <div>
                                <h3 class="text-sm sm:text-base font-semibold text-gray-900">Blog Posts</h3>
                                <p class="text-xs sm:text-sm text-gray-500 mt-1">Create and manage blog posts. Published posts appear on the frontend blog page.</p>
                            </div>
                            <button type="button" onclick="openPostModal()"
                                class="px-4 py-2 bg-primary-500 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">
                                + New Post
                            </button>
                        </div>

                        <div class="overflow-x-auto rounded-lg border border-gray-200">
                            <table class="w-full text-sm">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Title</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tag</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Published</th>
                                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100" id="posts-tbody">
                                    @forelse($posts as $post)
                                        <tr id="post-row-{{ $post->id }}">
                                            <td class="px-4 py-3">
                                                <div class="flex items-center gap-3">
                                                    @if($post->image)
                                                        <img src="{{ asset($post->image) }}" alt="" class="w-10 h-10 rounded object-cover border flex-shrink-0">
                                                    @else
                                                        <div class="w-10 h-10 rounded bg-gray-100 flex items-center justify-center flex-shrink-0">
                                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
                                                        </div>
                                                    @endif
                                                    <div class="min-w-0">
                                                        <p class="font-medium text-gray-900 truncate">{{ $post->title }}</p>
                                                        <p class="text-xs text-gray-400 truncate">{{ Str::limit($post->excerpt, 60) }}</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-3 text-gray-600">{{ $post->tag ?? '—' }}</td>
                                            <td class="px-4 py-3 text-gray-600">{{ $post->published_at?->format('d M Y') ?? 'Draft' }}</td>
                                            <td class="px-4 py-3 text-right">
                                                <button type="button" onclick='editPost(@json($post))' class="text-primary-600 hover:text-primary-700 text-xs font-medium mr-2">Edit</button>
                                                <button type="button" onclick="deletePost({{ $post->id }})" class="text-red-500 hover:text-red-600 text-xs font-medium">Delete</button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr id="no-posts-row">
                                            <td colspan="4" class="px-4 py-8 text-center text-gray-400">No blog posts yet. Click "New Post" to create one.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Global Submit Button --}}
            <div class="flex flex-col sm:flex-row justify-end gap-3 mt-4 sm:mt-0">
                <button type="submit"
                    class="w-full sm:w-auto px-4 py-3 sm:px-6 sm:py-3 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm touch-manipulation">
                    Save Homepage Content
                </button>
            </div>

        </form>
    </div>

    {{-- Post Modal --}}
    <div id="post-modal" class="fixed inset-0 z-50 hidden" style="background:rgba(0,0,0,0.4)">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
                <div class="flex items-center justify-between p-5 border-b border-gray-100">
                    <h3 class="text-base font-semibold text-gray-900" id="post-modal-title">New Post</h3>
                    <button type="button" onclick="closePostModal()" class="text-gray-400 hover:text-gray-600">&times;</button>
                </div>
                <form id="post-form" enctype="multipart/form-data" class="p-5 space-y-4">
                    <input type="hidden" id="post-id" value="">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title *</label>
                        <input type="text" id="post-title" required
                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Excerpt</label>
                        <textarea id="post-excerpt" rows="2"
                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none resize-none"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Content</label>
                        <textarea id="post-content" rows="5"
                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none resize-none"></textarea>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tag</label>
                            <input type="text" id="post-tag" placeholder="e.g. Real Estate"
                                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Published Date</label>
                            <input type="date" id="post-published"
                                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Image</label>
                        <div id="post-image-preview" class="mb-2 hidden"><img id="post-image-img" src="" alt="" class="max-h-20 w-auto rounded border"></div>
                        <input type="file" id="post-image" accept="image/*"
                            class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 outline-none">
                    </div>
                    <div class="flex justify-end gap-3 pt-2">
                        <button type="button" onclick="closePostModal()" class="px-4 py-2.5 border border-gray-200 text-gray-600 text-sm rounded-lg hover:bg-gray-50">Cancel</button>
                        <button type="submit" id="post-submit-btn" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors">Save Post</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';

        // ── Tabs ──────────────────────────────────────────────────────────────
        function showTab(tabName) {
            document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
            document.querySelectorAll('.tab-button').forEach(b => {
                b.classList.remove('text-gray-700', 'border-primary-500');
                b.classList.add('text-gray-500', 'border-transparent');
            });
            document.getElementById('content-' + tabName).classList.remove('hidden');
            const btn = document.getElementById('tab-' + tabName);
            btn.classList.remove('text-gray-500', 'border-transparent');
            btn.classList.add('text-gray-700', 'border-primary-500');
        }

        // ── Brand Delete ──────────────────────────────────────────────────────
        async function deleteBrand(imagePath, cardId) {
            if (!confirm('Remove this brand logo? This cannot be undone.')) return;

            const card = document.getElementById(cardId);
            const btn  = card?.querySelector('button');
            if (btn) { btn.disabled = true; btn.textContent = 'Deleting…'; }

            try {
                const res = await fetch('{{ route('admin.pages.homepage.brands.destroy') }}', {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ image_path: imagePath }),
                });

                const data = await res.json();

                if (res.ok && data.success) {
                    // Remove card from DOM
                    if (card) card.remove();
                    // Show "no brands" message if list is now empty
                    const remaining = document.querySelectorAll('#brands-list .brand-item');
                    if (remaining.length === 0) {
                        document.getElementById('no-brands-msg')?.classList.remove('hidden');
                    }
                } else {
                    alert(data.message || 'Failed to delete brand.');
                    if (btn) { btn.disabled = false; btn.textContent = 'Delete'; }
                }
            } catch (err) {
                alert('Network error. Please try again.');
                if (btn) { btn.disabled = false; btn.textContent = 'Delete'; }
            }
        }

        // ── Post CRUD ─────────────────────────────────────────────────────────
        function openPostModal(post = null) {
            document.getElementById('post-modal').classList.remove('hidden');
            document.getElementById('post-form').reset();
            document.getElementById('post-image-preview').classList.add('hidden');
            if (post) {
                document.getElementById('post-modal-title').textContent = 'Edit Post';
                document.getElementById('post-id').value = post.id;
                document.getElementById('post-title').value = post.title || '';
                document.getElementById('post-excerpt').value = post.excerpt || '';
                document.getElementById('post-content').value = post.content || '';
                document.getElementById('post-tag').value = post.tag || '';
                if (post.published_at) {
                    document.getElementById('post-published').value = post.published_at.substring(0, 10);
                }
                if (post.image) {
                    document.getElementById('post-image-preview').classList.remove('hidden');
                    document.getElementById('post-image-img').src = post.image.startsWith('http')
                        ? post.image
                        : '/' + post.image.replace(/^\/+/, '');
                }
            } else {
                document.getElementById('post-modal-title').textContent = 'New Post';
                document.getElementById('post-id').value = '';
                document.getElementById('post-published').value = new Date().toISOString().substring(0, 10);
            }
        }

        function editPost(post) { openPostModal(post); }

        function closePostModal() {
            document.getElementById('post-modal').classList.add('hidden');
        }

        document.getElementById('post-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const id  = document.getElementById('post-id').value;
            const fd  = new FormData();
            fd.append('title',        document.getElementById('post-title').value);
            fd.append('excerpt',      document.getElementById('post-excerpt').value);
            fd.append('content',      document.getElementById('post-content').value);
            fd.append('tag',          document.getElementById('post-tag').value);
            fd.append('published_at', document.getElementById('post-published').value);
            const imgFile = document.getElementById('post-image').files[0];
            if (imgFile) fd.append('image', imgFile);

            const url = id ? `/public/admin/posts/${id}` : '/public/admin/posts';
            const btn = document.getElementById('post-submit-btn');
            btn.disabled = true; btn.textContent = 'Saving…';

            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                    body: fd,
                });
                if (res.ok) {
                    closePostModal();
                    window.location.reload();
                } else {
                    const err = await res.json();
                    alert(err.message || 'Failed to save post.');
                }
            } catch (ex) {
                alert('Network error.');
            } finally {
                btn.disabled = false; btn.textContent = 'Save Post';
            }
        });

        async function deletePost(id) {
            if (!confirm('Delete this post?')) return;
            try {
                const res = await fetch(`/public/admin/posts/${id}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                });
                if (res.ok) {
                    const row = document.getElementById('post-row-' + id);
                    if (row) row.remove();
                } else {
                    alert('Failed to delete.');
                }
            } catch (ex) {
                alert('Network error.');
            }
        }
    </script>

@endsection