@extends('admin.layouts.app')

@section('title', 'Edit Property')
@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.properties.index') }}" class="hover:text-primary-600 transition-colors">Properties</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">Edit</span></li>
@endsection
@section('heading', 'Edit Property')
@section('subheading', 'Update property listing details.')

@section('content')

    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-50 border border-red-100 rounded-xl text-sm text-red-700">
            <ul class="list-disc list-inside space-y-1">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif
 
    <form id="main-form" action="{{ route('admin.properties.update', $property) }}" method="POST"
        enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- Section 1: Basic Information --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Basic Information</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <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="title" value="{{ old('title', $property->title) }}"
                        placeholder="e.g. 3 BHK Luxury Apartment in Bandra West"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Slug</label>
                    <input type="text" name="slug" value="{{ old('slug', $property->slug) }}"
                        placeholder="auto-generate from title"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                    <p class="text-xs text-gray-400 mt-1">Leave blank to auto-generate from title</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Property Type</label>
                    <select name="property_type_id"
                        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 appearance-none bg-white">
                        <option value="">Select Type</option>
                        @foreach ($types as $t)
                            <option value="{{ $t->id }}"
                                {{ old('property_type_id', $property->property_type_id) == $t->id ? 'selected' : '' }}>
                                {{ $t->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Description</label>
                    <textarea name="description" rows="5" placeholder="Detailed property description..."
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all resize-none">{{ old('description', $property->description) }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Category</label>
                    <select name="property_category_id"
                        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 appearance-none bg-white">
                        <option value="">Select Category</option>
                        @foreach ($categories as $c)
                            <option value="{{ $c->id }}"
                                {{ old('property_category_id', $property->property_category_id) == $c->id ? 'selected' : '' }}>
                                {{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Listing Status (Badge)</label>
                    <select name="property_status_id"
                        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 appearance-none bg-white">
                        <option value="">Select Status</option>
                        @foreach ($statuses as $s)
                            <option value="{{ $s->id }}"
                                {{ old('property_status_id', $property->property_status_id) == $s->id ? 'selected' : '' }}>
                                {{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Listing Type</label>
                    <select name="listing_type"
                        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 appearance-none bg-white">
                        <option value="">Select</option>
                        <option value="sale" {{ old('listing_type', $property->listing_type) == 'sale' ? 'selected' : '' }}>Sale</option>
                        <option value="rent" {{ old('listing_type', $property->listing_type) == 'rent' ? 'selected' : '' }}>Rent</option>
                        <option value="lease" {{ old('listing_type', $property->listing_type) == 'lease' ? 'selected' : '' }}>Lease</option>
                        <option value="pg" {{ old('listing_type', $property->listing_type) == 'pg' ? 'selected' : '' }}>PG</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Section 2: Pricing & Area --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Pricing & Area</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Price (₹)</label>
                    <div class="relative">
                        <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-500 text-sm">₹</span>
                        <input type="number" name="price" placeholder="0" value="{{ old('price', $property->price) }}"
                            class="w-full pl-8 pr-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Price Per Sq.ft (₹)</label>
                    <input type="number" name="price_per_sqft" placeholder="0" value="{{ old('price_per_sqft', $property->price_per_sqft) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Area (sq.ft) / Size</label>
                    <input type="number" name="area" placeholder="0" value="{{ old('area', $property->area) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Built-up Area (sq.ft)</label>
                    <input type="number" name="built_up_area" placeholder="0" value="{{ old('built_up_area', $property->built_up_area) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Carpet Area (sq.ft)</label>
                    <input type="number" name="carpet_area" placeholder="0" value="{{ old('carpet_area', $property->carpet_area) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Plot Area / Land Size (sq.ft)</label>
                    <input type="number" name="plot_area" placeholder="0" value="{{ old('plot_area', $property->plot_area) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
            </div>
        </div>

        {{-- Section 3: Property Details --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Property Details</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Bedrooms</label>
                    <select name="bedrooms"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        @for ($i = 1; $i <= 10; $i++)
                            <option value="{{ $i }}" {{ old('bedrooms', $property->bedrooms) == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                        <option value="10+" {{ old('bedrooms', $property->bedrooms) == '10+' ? 'selected' : '' }}>10+</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Bathrooms</label>
                    <select name="bathrooms"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        @for ($i = 1; $i <= 10; $i++)
                            <option value="{{ $i }}" {{ old('bathrooms', $property->bathrooms) == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                        <option value="10+" {{ old('bathrooms', $property->bathrooms) == '10+' ? 'selected' : '' }}>10+</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Balconies</label>
                    <select name="balconies"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        @for ($i = 0; $i <= 5; $i++)
                            <option value="{{ $i }}" {{ old('balconies', $property->balconies) == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                        <option value="5+" {{ old('balconies', $property->balconies) == '5+' ? 'selected' : '' }}>5+</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Floor</label>
                    <select name="floor"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        <option value="">Select</option>
                        @for ($i = 1; $i <= 50; $i++)
                            <option value="{{ $i }}" {{ old('floor', $property->floor) == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Total Floors</label>
                    <input type="number" name="total_floors" placeholder="0" value="{{ old('total_floors', $property->total_floors) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Furnishing</label>
                    <select name="furnishing"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        <option value="">Select</option>
                        <option value="unfurnished" {{ old('furnishing', $property->furnishing) == 'unfurnished' ? 'selected' : '' }}>Unfurnished</option>
                        <option value="semi" {{ old('furnishing', $property->furnishing) == 'semi' ? 'selected' : '' }}>Semi Furnished</option>
                        <option value="fully" {{ old('furnishing', $property->furnishing) == 'fully' ? 'selected' : '' }}>Fully Furnished</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Facing</label>
                    <select name="facing"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        <option value="">Select</option>
                        <option value="n" {{ old('facing', $property->facing) == 'n' ? 'selected' : '' }}>North</option>
                        <option value="s" {{ old('facing', $property->facing) == 's' ? 'selected' : '' }}>South</option>
                        <option value="e" {{ old('facing', $property->facing) == 'e' ? 'selected' : '' }}>East</option>
                        <option value="w" {{ old('facing', $property->facing) == 'w' ? 'selected' : '' }}>West</option>
                        <option value="ew" {{ old('facing', $property->facing) == 'ew' ? 'selected' : '' }}>East-West</option>
                        <option value="ne" {{ old('facing', $property->facing) == 'ne' ? 'selected' : '' }}>North-East</option>
                        <option value="nw" {{ old('facing', $property->facing) == 'nw' ? 'selected' : '' }}>North-West</option>
                        <option value="se" {{ old('facing', $property->facing) == 'se' ? 'selected' : '' }}>South-East</option>
                        <option value="sw" {{ old('facing', $property->facing) == 'sw' ? 'selected' : '' }}>South-West</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Age of Property</label>
                    <select name="age_of_property"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        <option value="">Select</option>
                        <option value="under_construction" {{ old('age_of_property', $property->age_of_property) == 'under_construction' ? 'selected' : '' }}>Under Construction</option>
                        <option value="new" {{ old('age_of_property', $property->age_of_property) == 'new' ? 'selected' : '' }}>New (0-1 year)</option>
                        <option value="1-5" {{ old('age_of_property', $property->age_of_property) == '1-5' ? 'selected' : '' }}>1-5 years</option>
                        <option value="5-10" {{ old('age_of_property', $property->age_of_property) == '5-10' ? 'selected' : '' }}>5-10 years</option>
                        <option value="10+" {{ old('age_of_property', $property->age_of_property) == '10+' ? 'selected' : '' }}>10+ years</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Section 4: Location --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Location</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Address</label>
                    <textarea name="address" rows="2" placeholder="Full address"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all resize-none">{{ old('address', $property->address) }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Landmark</label>
                    <input type="text" name="landmark" placeholder="e.g. Near Bandra Station" value="{{ old('landmark', $property->landmark) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">State</label>
                    <select name="state" id="state"
                        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 appearance-none bg-white">
                        <option value="">Select State</option>
                        @foreach (config('india.states', []) as $state)
                            <option value="{{ $state }}"
                                {{ old('state', $property->state) === $state ? 'selected' : '' }}>{{ $state }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">City</label>
                    <select name="city" id="city"
                        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 appearance-none bg-white">
                        <option value="">Select City</option>
                        @foreach (config('india.cities_by_state', []) as $stateName => $cities)
                            @foreach ($cities as $city)
                                <option value="{{ $city }}" data-state="{{ $stateName }}"
                                    {{ old('city', $property->city) === $city ? 'selected' : '' }}>{{ $city }}
                                    ({{ $stateName }})</option>
                            @endforeach
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">PIN Code</label>
                    <input type="text" name="pin_code" value="{{ old('pin_code', $property->pin_code) }}" placeholder="400050"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Country</label>
                    <input type="text" name="country" value="{{ old('country', $property->country ?? 'India') }}"
                        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 transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Latitude</label>
                    <input type="text" name="latitude" placeholder="19.0760" value="{{ old('latitude', $property->latitude) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Longitude</label>
                    <input type="text" name="longitude" placeholder="72.8777" value="{{ old('longitude', $property->longitude) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Google Maps URL</label>
                    <input type="url" name="google_maps_url" placeholder="https://maps.google.com/..." value="{{ old('google_maps_url', $property->google_maps_url) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
            </div>
        </div>

        {{-- Section 5: Media --}}
        <!--<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">-->
        <!--    <h3 class="text-base font-semibold text-gray-900 mb-5">Media</h3>-->
        <!--    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">-->
        <!--        <div>-->
        <!--            <label class="block text-sm font-medium text-gray-700 mb-1.5">Featured Image</label>-->
        <!--            <div class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:border-primary-300 transition-colors cursor-pointer"-->
        <!--                id="featured_image_zone">-->
        <!--                <input type="file" name="featured_image" id="featured_image" class="hidden"-->
        <!--                    accept="image/*">-->
        <!--                <label for="featured_image" class="cursor-pointer block">-->
        <!--                    <div id="featured_preview"-->
        <!--                        class="hidden mb-2 rounded-lg overflow-hidden max-h-40 bg-gray-100">-->
        <!--                        <img id="featured_preview_img" src="" alt="Preview"-->
        <!--                            class="w-full h-40 object-cover">-->
        <!--                    </div>-->
        <!--                    <div id="featured_existing"-->
        <!--                        class="mb-2 rounded-lg overflow-hidden max-h-40 bg-gray-100 {{ $property->images->where('is_featured', true)->isEmpty() ? 'hidden' : '' }}">-->
        <!--                        @if ($property->images->where('is_featured', true)->first())-->
        <!--                            <img src="{{ $property->images->where('is_featured', true)->first()->url }}"-->
        <!--                                alt="Current" class="w-full h-40 object-cover">-->
        <!--                        @endif-->
        <!--                    </div>-->
        <!--                    <div id="featured_placeholder"-->
        <!--                        class="{{ $property->images->where('is_featured', true)->isNotEmpty() ? 'hidden' : '' }}">-->
        <!--                        <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor"-->
        <!--                            viewBox="0 0 24 24">-->
        <!--                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"-->
        <!--                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />-->
        <!--                        </svg>-->
        <!--                        <p class="text-sm text-gray-500">Drag & drop or click to upload</p>-->
        <!--                    </div>-->
        <!--                </label>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--            <label class="block text-sm font-medium text-gray-700 mb-1.5">Gallery Images</label>-->
        <!--            <div class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:border-primary-300 transition-colors cursor-pointer"-->
        <!--                id="gallery_images_zone">-->
        <!--                <input type="file" name="gallery_images[]" id="gallery_images" class="hidden"-->
        <!--                    accept="image/*" multiple>-->
        <!--                <label for="gallery_images" class="cursor-pointer block">-->
        <!--                    <div id="gallery_existing" class="flex flex-wrap gap-2 justify-center mb-2">-->
        <!--                        @foreach ($property->images->where('is_featured', false) as $img)-->
        <!--                            <div class="w-20 h-20 rounded-lg overflow-hidden border border-gray-200 shrink-0" style="width: 100px; height: 100px;">-->
        <!--                                <img src="{{ $img->url }}" alt=""-->
        <!--                                    class="w-full h-full object-cover w-20 h-20">-->
        <!--                            </div>-->
        <!--                        @endforeach-->
        <!--                    </div>-->
        <!--                    <div id="gallery_preview" class="hidden flex flex-wrap gap-2 justify-center mb-2"></div>-->
        <!--                    <div id="gallery_placeholder">-->
        <!--                        <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor"-->
        <!--                            viewBox="0 0 24 24">-->
        <!--                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"-->
        <!--                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />-->
        <!--                        </svg>-->
        <!--                        <p class="text-sm text-gray-500">Drag & drop or click to upload more</p>-->
        <!--                    </div>-->
        <!--                </label>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--            <label class="block text-sm font-medium text-gray-700 mb-1.5">Video URL</label>-->
        <!--            <input type="url" name="video_url" placeholder="https://youtube.com/watch?v=... or https://youtu.be/..."-->
        <!--                value="{{ old('video_url', $property->video_url) }}"-->
        <!--                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">-->
        <!--        </div>-->
        <!--        <div>-->
        <!--            <label class="block text-sm font-medium text-gray-700 mb-1.5">Virtual Tour URL</label>-->
        <!--            <input type="url" name="virtual_tour_url" placeholder="https://..." value="{{ old('virtual_tour_url', $property->virtual_tour_url) }}"-->
        <!--                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>--> 
        
        {{-- Section 5: Media --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Media</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        
                {{-- Featured Image --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Featured Image</label>
        
                    @php $featuredImg = $property->images->where('is_featured', true)->first(); @endphp
                    @if($featuredImg)
                    <div class="relative mb-3 rounded-lg overflow-hidden border border-gray-200 bg-gray-50 group"
                         id="existing-featured-wrap"
                         style="height:160px;">
                        <img src="{{ $featuredImg->url }}" alt="Featured"
                             style="width:100%;height:100%;object-fit:cover;display:block;">
                        <button type="button"
                            data-delete-image="{{ route('admin.properties.images.destroy', [$property, $featuredImg]) }}"
                            onclick="deleteImage(this, 'existing-featured-wrap')"
                            style="position:absolute;top:8px;right:8px;width:28px;height:28px;background:#ef4444;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity 0.2s;"
                            onmouseenter="this.style.background='#dc2626'"
                            onmouseleave="this.style.background='#ef4444'">
                            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                    <script>
                        (function(){
                            var wrap = document.getElementById('existing-featured-wrap');
                            var btn = wrap ? wrap.querySelector('button') : null;
                            if(wrap && btn){
                                wrap.addEventListener('mouseenter', function(){ btn.style.opacity='1'; });
                                wrap.addEventListener('mouseleave', function(){ btn.style.opacity='0'; });
                            }
                        })();
                    </script>
                    @endif
        
                    <div style="border:2px dashed #e5e7eb;border-radius:0.75rem;padding:1rem;text-align:center;cursor:pointer;"
                         onmouseenter="this.style.borderColor='#93c5fd'"
                         onmouseleave="this.style.borderColor='#e5e7eb'">
                        <input type="file" name="featured_image" id="featured_image" class="hidden" accept="image/*">
                        <label for="featured_image" style="cursor:pointer;display:block;">
                            <div id="featured_preview" style="display:none;margin-bottom:8px;border-radius:8px;overflow:hidden;height:120px;background:#f3f4f6;">
                                <img id="featured_preview_img" src="" alt="Preview"
                                     style="width:100%;height:100%;object-fit:cover;display:block;">
                            </div>
                            <div id="featured_placeholder">
                                <svg style="width:40px;height:40px;margin:0 auto 6px;color:#d1d5db;display:block;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                <p style="font-size:0.875rem;color:#6b7280;">Click to upload new featured image</p>
                            </div>
                        </label>
                    </div>
                </div>
        
                {{-- Gallery Images --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Gallery Images</label>
        
                    @php $galleryImgs = $property->images->where('is_featured', false); @endphp
                    @if($galleryImgs->isNotEmpty())
                    <div id="existing-gallery-grid"
                         style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;">
                        @foreach($galleryImgs as $img)
                        <div id="gallery-img-{{ $img->id }}"
                             style="position:relative;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb;background:#f9fafb;">
                            {{-- padding-bottom trick: makes a perfect square regardless of image size --}}
                            <div style="padding-bottom:100%;position:relative;">
                                <img src="{{ $img->url }}" alt=""
                                     style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;">
                                <button type="button"
                                    data-delete-image="{{ route('admin.properties.images.destroy', [$property, $img]) }}"
                                    data-wrap-id="gallery-img-{{ $img->id }}"
                                    onclick="deleteImage(this, 'gallery-img-{{ $img->id }}')"
                                    style="position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(239,68,68,0.9);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;z-index:10;">
                                    <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
        
                    {{-- Upload more --}}
                    <div style="border:2px dashed #e5e7eb;border-radius:0.75rem;padding:1rem;text-align:center;cursor:pointer;"
                         onmouseenter="this.style.borderColor='#93c5fd'"
                         onmouseleave="this.style.borderColor='#e5e7eb'">
                        <input type="file" name="gallery_images[]" id="gallery_images" class="hidden" accept="image/*" multiple>
                        <label for="gallery_images" style="cursor:pointer;display:block;">
                            <div id="gallery_preview"
                                 style="display:none;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;"></div>
                            <div id="gallery_placeholder">
                                <svg style="width:40px;height:40px;margin:0 auto 6px;color:#d1d5db;display:block;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                <p style="font-size:0.875rem;color:#6b7280;">Click to add more gallery images</p>
                            </div>
                        </label>
                    </div>
                </div>
        
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Video URL</label>
                    <input type="url" name="video_url" placeholder="https://youtube.com/watch?v=..."
                        value="{{ old('video_url', $property->video_url) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Virtual Tour URL</label>
                    <input type="url" name="virtual_tour_url" placeholder="https://..."
                        value="{{ old('virtual_tour_url', $property->virtual_tour_url) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
            </div>
        </div>

        {{-- Section 6: Amenities --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Amenities</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                @php $selectedAmenityIds = old('amenity_ids', $property->amenities->pluck('id')->toArray()); @endphp
                @foreach ($amenities as $amenity)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="amenity_ids[]" value="{{ $amenity->id }}"
                            {{ in_array($amenity->id, $selectedAmenityIds) ? 'checked' : '' }}
                            class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                        <span class="text-sm text-gray-700">{{ $amenity->name }}</span>
                    </label>
                @endforeach
            </div>
        </div>

        {{-- Section 7: Agent & Ownership --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">Agent & Ownership</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Agent</label>
                    <select name="agent_id"
                        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 appearance-none bg-white">
                        <option value="">Select Agent</option>
                        @foreach ($agents as $agent)
                            <option value="{{ $agent->id }}"
                                {{ old('agent_id', $property->agent_id) == $agent->id ? 'selected' : '' }}>
                                {{ $agent->name }} ({{ $agent->email }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Ownership Type</label>
                    <select name="ownership_type"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                        <option value="">Select</option>
                        <option value="freehold" {{ old('ownership_type', $property->ownership_type) == 'freehold' ? 'selected' : '' }}>Freehold</option>
                        <option value="leasehold" {{ old('ownership_type', $property->ownership_type) == 'leasehold' ? 'selected' : '' }}>Leasehold</option>
                        <option value="cooperative" {{ old('ownership_type', $property->ownership_type) == 'cooperative' ? 'selected' : '' }}>Cooperative</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Authority Approval</label>
                    <input type="text" name="authority_approval" placeholder="e.g. RERA Approved"
                        value="{{ old('authority_approval', $property->authority_approval) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Possession Date</label>
                    <input type="date" name="possession_date" value="{{ old('possession_date', $property->possession_date?->format('Y-m-d')) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
            </div>
        </div>

        {{-- Section 8: SEO --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-900 mb-5">SEO</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Meta Title</label>
                    <input type="text" name="meta_title" placeholder="SEO title for search engines" value="{{ old('meta_title', $property->meta_title) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Meta Description</label>
                    <textarea name="meta_description" rows="3" placeholder="SEO description (150-160 chars)"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all resize-none">{{ old('meta_description', $property->meta_description) }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Meta Keywords</label>
                    <input type="text" name="meta_keywords" placeholder="keyword1, keyword2, keyword3" value="{{ old('meta_keywords', $property->meta_keywords) }}"
                        class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
                </div>
            </div>
        </div>

        {{-- Form Actions --}}
        <div class="flex flex-wrap items-center gap-3 mb-6">
            <a href="{{ route('admin.properties.index') }}"
                class="px-5 py-2.5 border border-gray-200 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">Cancel</a>
            <button type="submit" name="status" value="draft"
                class="px-5 py-2.5 border border-gray-200 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">Save
                as Draft</button>
            <button type="submit" name="status" value="published"
                class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">Publish</button>
        </div>

    </form>
    {{-- ============================================================ --}}
    {{-- END OF MAIN FORM                                             --}}
    {{-- ============================================================ --}}


    {{-- ============================================================ --}}
    {{-- INDEPENDENT SUB-FORMS (outside main form — no nesting!)      --}}
    {{-- ============================================================ --}}

    {{-- Section 7b: Floor Plans --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
        <h3 class="text-base font-semibold text-gray-900 mb-5">Floor Plans</h3>
        <p class="text-sm text-gray-500 mb-4">Add floor plan images for this property. They will appear on the property detail page.</p>
        <form action="{{ route('admin.properties.floor-plans.store', $property) }}" method="POST" enctype="multipart/form-data" class="flex flex-wrap items-end gap-4 mb-4">
            @csrf
            <div class="min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                <input type="text" name="title" placeholder="e.g. Ground Floor" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
            </div>
            <div class="min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Image</label>
                <input type="file" name="image" accept="image/*" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
            </div>
            <button type="submit" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg">Add Floor Plan</button>
        </form>
        @if($property->floorPlans->isNotEmpty())
        <table class="w-full text-sm border border-gray-100 rounded-lg overflow-hidden">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left px-4 py-2">Title</th>
                    <th class="text-left px-4 py-2">Preview</th>
                    <th class="w-24 px-4 py-2">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($property->floorPlans as $fp)
                <tr class="border-t border-gray-100">
                    <td class="px-4 py-2">{{ $fp->title ?: '—' }}</td>
                    <td class="px-4 py-2">
                        @if(str_starts_with($fp->image_path ?? '', 'http'))
                            <img src="{{ $fp->image_path }}" alt="" class="h-12 w-auto object-contain">
                        @else
                            <img src="{{ asset(ltrim($fp->image_path, '/')) }}" alt="" class="h-12 w-auto object-contain">
                        @endif
                    </td>
                    <td class="px-4 py-2">
                        <form action="{{ route('admin.properties.floor-plans.destroy', [$property, $fp]) }}" method="POST" onsubmit="return confirm('Remove this floor plan?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-600 text-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>

    {{-- Section 7c: File Attachments --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
        <h3 class="text-base font-semibold text-gray-900 mb-5">File Attachments</h3>
        <p class="text-sm text-gray-500 mb-4">Add documents (PDF, etc.) for this property. They will appear on the property detail page.</p>
        <form action="{{ route('admin.properties.attachments.store', $property) }}" method="POST" enctype="multipart/form-data" class="flex flex-wrap items-end gap-4 mb-4">
            @csrf
            <div class="min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                <input type="text" name="title" placeholder="e.g. Brochure" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
            </div>
            <div class="min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">File</label>
                <input type="file" name="file" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
            </div>
            <button type="submit" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg">Add Attachment</button>
        </form>
        @if($property->attachments->isNotEmpty())
        <table class="w-full text-sm border border-gray-100 rounded-lg overflow-hidden">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left px-4 py-2">Title</th>
                    <th class="text-left px-4 py-2">File</th>
                    <th class="w-24 px-4 py-2">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($property->attachments as $att)
                <tr class="border-t border-gray-100">
                    <td class="px-4 py-2">{{ $att->title ?: $att->file_name }}</td>
                    <td class="px-4 py-2">{{ $att->file_name }}</td>
                    <td class="px-4 py-2">
                        <form action="{{ route('admin.properties.attachments.destroy', [$property, $att]) }}" method="POST" onsubmit="return confirm('Remove this attachment?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-600 text-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>

    {{-- Section 7d: What's Nearby --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
        <h3 class="text-base font-semibold text-gray-900 mb-5">What's Nearby?</h3>
        <p class="text-sm text-gray-500 mb-4">Add nearby points of interest (schools, metro, etc.) for this property.</p>
        <form action="{{ route('admin.properties.nearby.store', $property) }}" method="POST" class="flex flex-wrap items-end gap-4 mb-4">
            @csrf
            <div class="min-w-[180px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Name</label>
                <input type="text" name="name" placeholder="e.g. Bandra Station" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
            </div>
            <div class="min-w-[140px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Type</label>
                <select name="type" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
                    <option value="">—</option>
                    <option value="school">School</option>
                    <option value="hospital">Hospital</option>
                    <option value="mall">Mall</option>
                    <option value="metro">Metro</option>
                    <option value="bus_stop">Bus Stop</option>
                    <option value="restaurant">Restaurant</option>
                    <option value="bank">Bank</option>
                    <option value="park">Park</option>
                </select>
            </div>
            <div class="min-w-[100px]">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Distance (km)</label>
                <input type="number" name="distance" step="0.1" placeholder="1.5" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm">
            </div>
            <button type="submit" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg">Add</button>
        </form>
        @if($property->nearby->isNotEmpty())
        <table class="w-full text-sm border border-gray-100 rounded-lg overflow-hidden">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left px-4 py-2">Name</th>
                    <th class="text-left px-4 py-2">Type</th>
                    <th class="text-left px-4 py-2">Distance</th>
                    <th class="w-24 px-4 py-2">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($property->nearby as $n)
                <tr class="border-t border-gray-100">
                    <td class="px-4 py-2">{{ $n->name }}</td>
                    <td class="px-4 py-2">{{ $n->type ?: '—' }}</td>
                    <td class="px-4 py-2">{{ $n->distance ? $n->distance . ' km' : '—' }}</td>
                    <td class="px-4 py-2">
                        <form action="{{ route('admin.properties.nearby.destroy', [$property, $n]) }}" method="POST" onsubmit="return confirm('Remove this?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-600 text-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>

@endsection

@section('scripts')
<script>
(function () {

    // ── Featured Image Preview ──────────────────────────────────────
    var featuredInput       = document.getElementById('featured_image');
    var featuredPreview     = document.getElementById('featured_preview');
    var featuredPreviewImg  = document.getElementById('featured_preview_img');
    var featuredPlaceholder = document.getElementById('featured_placeholder');

    if (featuredInput) {
        featuredInput.addEventListener('change', function () {
            var file = this.files[0];
            if (file && file.type.startsWith('image/')) {
                featuredPreviewImg.src = URL.createObjectURL(file);
                featuredPreview.style.display = 'block';
                featuredPlaceholder.style.display = 'none';
            } else {
                featuredPreview.style.display = 'none';
                featuredPlaceholder.style.display = 'block';
            }
        });
    }

    // ── Gallery Images Preview ──────────────────────────────────────
    var galleryInput       = document.getElementById('gallery_images');
    var galleryPreview     = document.getElementById('gallery_preview');
    var galleryPlaceholder = document.getElementById('gallery_placeholder');

    if (galleryInput) {
        galleryInput.addEventListener('change', function () {
            galleryPreview.innerHTML = '';
            var files = this.files;
            if (files && files.length > 0) {
                galleryPreview.style.display = 'grid';
                galleryPlaceholder.style.display = 'none';
                for (var i = 0; i < files.length; i++) {
                    if (!files[i].type.startsWith('image/')) continue;
                    var outer = document.createElement('div');
                    outer.style.cssText = 'border-radius:8px;overflow:hidden;border:1px solid #e5e7eb;background:#f9fafb;';
                    var inner = document.createElement('div');
                    inner.style.cssText = 'padding-bottom:100%;position:relative;';
                    var img = document.createElement('img');
                    img.src = URL.createObjectURL(files[i]);
                    img.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;';
                    inner.appendChild(img);
                    outer.appendChild(inner);
                    galleryPreview.appendChild(outer);
                }
            } else {
                galleryPreview.style.display = 'none';
                galleryPlaceholder.style.display = 'block';
            }
        });
    }

    // ── State → City Filter ─────────────────────────────────────────
    var stateSelect = document.getElementById('state');
    var citySelect  = document.getElementById('city');

    if (stateSelect && citySelect) {
        var initialState = stateSelect.value;
        if (initialState) {
            citySelect.querySelectorAll('option[data-state]').forEach(function (opt) {
                var belongs = opt.getAttribute('data-state') === initialState;
                opt.hidden   = !belongs;
                opt.disabled = !belongs;
            });
        }
        stateSelect.addEventListener('change', function () {
            var state = this.value;
            citySelect.querySelectorAll('option[data-state]').forEach(function (opt) {
                var belongs = !state || opt.getAttribute('data-state') === state;
                opt.hidden   = !belongs;
                opt.disabled = !belongs;
            });
            if (state) citySelect.value = '';
        });
    }

})();

// ── Delete Image via AJAX ───────────────────────────────────────────
function deleteImage(btn, wrapperId) {
    if (!confirm('Delete this image? This cannot be undone.')) return;

    var url  = btn.getAttribute('data-delete-image');
    var wrap = document.getElementById(wrapperId);

    btn.disabled = true;

    fetch(url, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(function (res) { return res.json(); })
    .then(function (data) {
        if (data.success) {
            wrap.style.transition = 'opacity 0.3s';
            wrap.style.opacity    = '0';
            setTimeout(function () { wrap.remove(); }, 320);
        } else {
            alert('Could not delete image. Please try again.');
            btn.disabled = false;
        }
    })
    .catch(function () {
        alert('Network error. Please try again.');
        btn.disabled = false;
    });
}
</script>
@endsection