@extends('admin.layouts.app')

@section('title', 'Add 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">Add Property</span></li>
@endsection
@section('heading', 'Add Property')
@section('subheading', 'Create a new property listing with comprehensive 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.store') }}" method="POST" enctype="multipart/form-data">
@csrf

{{-- 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') }}" 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') }}" 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') == $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') }}</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') == $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') == $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') == 'sale' ? 'selected' : '' }}>Sale</option>
                <option value="rent" {{ old('listing_type') == 'rent' ? 'selected' : '' }}>Rent</option>
                <option value="lease" {{ old('listing_type') == 'lease' ? 'selected' : '' }}>Lease</option>
                <option value="pg" {{ old('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" 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" 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)</label>
            <input type="number" name="area" placeholder="0" 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" 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" 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 (sq.ft)</label>
            <input type="number" name="plot_area" placeholder="0" 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">
                <option value="">Select</option>
                @for($i = 1; $i <= 10; $i++) <option value="{{ $i }}">{{ $i }}</option> @endfor
                <option value="99">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">
                <option value="">Select</option>
                @for($i = 1; $i <= 10; $i++) <option value="{{ $i }}">{{ $i }}</option> @endfor
                <option value="99">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 }}">{{ $i }}</option> @endfor
                <option value="5+">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 }}">{{ $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" 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">Unfurnished</option>
                <option value="semi">Semi Furnished</option>
                <option value="fully">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">North</option>
                <option value="s">South</option>
                <option value="e">East</option>
                <option value="w">West</option>
                <option value="ew">East-West</option>
                <option value="ne">North-East</option>
                <option value="nw">North-West</option>
                <option value="se">South-East</option>
                <option value="sw">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">Under Construction</option>
                <option value="new">New (0-1 year)</option>
                <option value="1-5">1-5 years</option>
                <option value="5-10">5-10 years</option>
                <option value="10+">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"></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" 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') === $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') === $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') }}" 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', '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" 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" 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/..." 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_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</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_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 multiple</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/..." 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://..." 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">
        @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, old('amenity_ids', [])) ? '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') == $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">Freehold</option>
                <option value="leasehold">Leasehold</option>
                <option value="cooperative">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" 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" 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" 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"></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" 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">
    <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>
@endsection

@section('scripts')
<script>
(function() {
    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.classList.remove('hidden');
                featuredPlaceholder.classList.add('hidden');
            } else {
                featuredPreview.classList.add('hidden');
                featuredPlaceholder.classList.remove('hidden');
            }
        });
    }

    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) {
                for (var i = 0; i < files.length; i++) {
                    if (!files[i].type.startsWith('image/')) continue;
                    var div = document.createElement('div');
                    div.className = 'w-20 h-20 rounded-lg overflow-hidden border border-gray-200 shrink-0';
                    var img = document.createElement('img');
                    img.src = URL.createObjectURL(files[i]);
                    img.className = 'w-full h-full object-cover';
                    div.appendChild(img);
                    galleryPreview.appendChild(div);
                }
                galleryPreview.classList.remove('hidden');
                galleryPlaceholder.classList.add('hidden');
            } else {
                galleryPreview.classList.add('hidden');
                galleryPlaceholder.classList.remove('hidden');
            }
        });
    }

    var stateSelect = document.getElementById('state');
    var citySelect = document.getElementById('city');
    if (stateSelect && citySelect) {
        stateSelect.addEventListener('change', function() {
            var state = this.value;
            citySelect.querySelectorAll('option[data-state]').forEach(function(opt) {
                opt.hidden = state ? opt.getAttribute('data-state') !== state : false;
                opt.disabled = state ? opt.getAttribute('data-state') !== state : false;
            });
            if (state) citySelect.value = '';
        });
    }
})();
</script>
@endsection