@extends('layouts.app')

@section('content')
<div class="bg-white p-6 shadow rounded">
    <h2 class="text-2xl font-bold mb-4">Edit Property</h2>

    <form action="{{ route('properties.update', $property->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- Property Info --}}
        <h3 class="text-lg font-semibold mb-2">Property Info</h3>
        <div x-data="{ selected: '{{ old('category_name', $property->category_name) }}' }">
            @php
                $creator = auth()->user();
                $permissions = [
                    'sell' => $creator->can_sell,
                    'rent' => $creator->can_rent,
                    'lease' => $creator->can_lease,
                ];
            @endphp

            <div class="flex flex-wrap gap-3 sm:flex-nowrap sm:gap-4">
                @foreach(['sell', 'rent', 'lease'] as $option)
                    @if($permissions[$option])
                        <label class="cursor-pointer w-full sm:w-auto">
                            <input type="radio" name="category_name" x-model="selected" value="{{ $option }}" class="hidden peer">
                            <div class="w-full px-6 py-2 text-center rounded-md border border-gray-300 text-gray-700
                                        peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600
                                        transition-all duration-200">
                                {{ ucfirst($option) }}
                            </div>
                        </label>
                    @endif
                @endforeach
            </div>

            <div class="grid grid-cols-3 md:grid-cols-2 gap-4 pt-4">
                <label for="property_name" class="block text-sm font-medium text-gray-700">
                    Property Name <span class="text-red-500">*</span>
                   <input type="text" name="property_name" placeholder="Property Name" class="w-full mt-2 mb-2 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('property_name', $property->property_name) }}" required>
                </label>
                <label for="slug" class="block text-sm font-medium text-gray-700">
                    Slug <span class="text-red-500">*</span>
                   <input type="text" name="slug" placeholder="Slug"
                        class="w-full mt-2 mb-2 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition"
                        value="{{ old('slug', $property->slug) }}">
                </label>
                <label for="price" class="block text-sm font-medium text-gray-700">
                    Price <span class="text-red-500"></span>
                   <input type="text" name="price" placeholder="Price" class="w-full mt-2 mb-2 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('price', $property->price) }}" required>
                </label>
                <div x-show="selected === 'lease' || selected === 'rent'" >
                <label for="security_deposit" class="block text-sm font-medium text-gray-700">
                    Security Deposit <span class="text-red-500"></span>
                      <input type="text" name="security_deposit" placeholder="Security Deposit" class="w-full mt-2 mb-2 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('security_deposit', $property->security_deposit) }}">
                </label></div>
                <label for="youtube_url" class="block text-sm font-medium text-gray-700">
                    YouTube URL <span class="text-red-500"></span>
                <input type="text" name="youtube_url" placeholder="YouTube URL" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('youtube_url', $property->youtube_url) }}">
              </label>
            </div>
            <label for="description" class="block text-sm font-medium text-gray-700">
                    Description <span class="text-red-500"></span>
              <textarea name="description" placeholder="Description" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">{{ old('description', $property->description) }}</textarea>
            </label>
        </div>

        {{-- Address --}}
        <h3 class="text-lg font-semibold mt-4 mb-2">Address</h3>
         <div class="grid grid-cols-3 md:grid-cols-2 gap-4">
            <label for="street" class="block text-sm font-medium text-gray-700">
                    Street <span class="text-red-500"></span>
            <input type="text" name="address[street]" placeholder="Street" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('address.street', $property->address->street ?? '') }}">
            </label>
            <label for="city" class="block text-sm font-medium text-gray-700">
                    City <span class="text-red-500"></span>
            <input type="text" name="address[city]" placeholder="City" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('address.city', $property->address->city ?? '') }}">
            </label>
            <label for="state" class="block text-sm font-medium text-gray-700">
                    State <span class="text-red-500"></span>
            <input type="text" name="address[state]" placeholder="State" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('address.state', $property->address->state ?? '') }}">
            </label>
            <label for="zip_or_postal_code" class="block text-sm font-medium text-gray-700">
                   Zip Code <span class="text-red-500"></span>
            <input type="text" name="address[zip_or_postal_code]" placeholder="Zip Code" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('address.zip_or_postal_code', $property->address->zip_or_postal_code ?? '') }}">
            </label>
            <label for="area" class="block text-sm font-medium text-gray-700">
                    Area <span class="text-red-500"></span>
            <input type="text" name="address[area]" placeholder="Area" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('address.area', $property->address->area ?? '') }}">
            </label>
            <label for="country" class="block text-sm font-medium text-gray-700">
                    Country <span class="text-red-500"></span>
                <select name="address[country]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Country</option>
                    <option value="{{ $property->address->country }}" selected>{{ $property->address->country }}</option>
                    {{-- Paste all country options here like in create page --}}
                </select>
          </label>
         </div>
        {{-- Details --}}
        <h3 class="text-lg font-semibold mt-4 mb-2">Details</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <label for="property_size" class="block text-sm font-medium text-gray-700">
                  Property Size (e.g. 3410 Sq Ft) <span class="text-red-500"></span>
                <input type="text" name="details[property_size]" value="{{ old('details.property_size', $property->detail->property_size ?? '') }}" placeholder="Size (e.g. 3410 Sq Ft)" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
            </label>
            <label for="bedrooms" class="block text-sm font-medium text-gray-700">
                    Bedrooms <span class="text-red-500"></span>
               <select name="details[bedrooms]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Bedrooms</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ old('details.bedrooms', $property->detail['bedrooms'] ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </label>
            <label for="bathroom" class="block text-sm font-medium text-gray-700">
                Bathrooms <span class="text-red-500"></span>
                <select name="details[bathroom]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Bathrooms</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ old('details.bathroom', $property->detail['bathroom'] ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </label>
    
            <label for="kitchen" class="block text-sm font-medium text-gray-700">
                    Kitchen <span class="text-red-500"></span>
                <select name="details[kitchen]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled {{ empty($property->detail['kitchen']) ? 'selected' : '' }}>Select Kitchen</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ (old('details.kitchen', $property->detail['kitchen'] ?? '') == $i) ? 'selected' : '' }}>
                            {{ $i }}
                        </option>
                    @endfor
                </select>
           </label>
            <label for="garage" class="block text-sm font-medium text-gray-700">
                Garage <span class="text-red-500"></span>
                <select name="details[garage]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Garage</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ old('details.garage', $property->detail['garage'] ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </label>
            <label for="kitchen" class="block text-sm font-medium text-gray-700">
                    Garage Size (e.g. 320 Sq Ft) <span class="text-red-500"></span>
                <input type="text" name="details[garage_size]" value="{{ old('details.garage_size', $property->detail['garage_size'] ?? '') }}" placeholder="Garage Size (e.g. 320 Sq Ft)" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
            </label>
                <label for="car_parking" class="block text-sm font-medium text-gray-700">
                    Car Parking <span class="text-red-500"></span>
                <select name="details[car_parking]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Car Parking</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ old('details.car_parking', $property->detail['car_parking'] ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </label>
                <label for="total_floors" class="block text-sm font-medium text-gray-700">
                    Total Floors <span class="text-red-500"></span>
                <select name="details[total_floors]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Total Floors</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ old('details.total_floors', $property->detail['total_floors'] ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </label>
            <label for="year_built" class="block text-sm font-medium text-gray-700">
                   Year Built <span class="text-red-500"></span>
                @php $currentYear = date('Y'); @endphp
                <select name="details[year_built]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Year Built</option>
                    @for ($year = $currentYear; $year >= 1980; $year--)
                        <option value="{{ $year }}" {{ old('details.year_built', $property->detail['year_built'] ?? '') == $year ? 'selected' : '' }}>{{ $year }}</option>
                    @endfor
                </select>
            </label>
            <label for="property_type" class="block text-sm font-medium text-gray-700">
                    Property Type <span class="text-red-500"></span>
                <select name="details[property_type]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Property Type</option>
                    @foreach(['Apartments & Flats',
                                'Builder Floors',
                                'Farmhouses',
                                'Independent Houses & Villas',
                                'Residential Plots & Land',
                                'Studio Apartments',
                                'Penthouses',
                                'Shops & Showrooms',
                                'Office Spaces',
                                'Warehouses & Godowns'] as $type)
                        <option value="{{ $type }}" {{ old('details.property_type', $property->detail['property_type'] ?? '') == $type ? 'selected' : '' }}>{{ $type }}</option>
                    @endforeach
                </select>
            </label>
            <label for="property_status" class="block text-sm font-medium text-gray-700">
                    Property Status <span class="text-red-500"></span>
                <select name="details[property_status]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Property Status</option>
                    @foreach(['New Launch', 'Ready to Move', 'Under Construction'] as $status)
                        <option value="{{ $status }}" {{ old('details.property_status', $property->detail['property_status'] ?? '') == $status ? 'selected' : '' }}>{{ $status }}</option>
                    @endforeach
                </select>
            </label>
            <label for="furnishing" class="block text-sm font-medium text-gray-700">
                    Furnishing <span class="text-red-500"></span>
                <select name="details[furnishing]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Furnishing</option>
                    @foreach(['Furnished', 'Semi-Furnished', 'Unfurnished'] as $furnishing)
                        <option value="{{ $furnishing }}" {{ old('details.furnishing', $property->detail['furnishing'] ?? '') == $furnishing ? 'selected' : '' }}>{{ $furnishing }}</option>
                    @endforeach
                </select>
            </label>
            <label for="Facing" class="block text-sm font-medium text-gray-700">
                    Facing <span class="text-red-500"></span>
                <select name="details[facing]" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
                    <option value="" disabled>Select Facing</option>
                    @foreach(['East', 'North', 'North-East', 'North-West', 'South', 'South-East', 'South-West', 'West'] as $face)
                        <option value="{{ $face }}" {{ old('details.facing', $property->detail['facing'] ?? '') == $face ? 'selected' : '' }}>{{ $face }}</option>
                    @endforeach
                </select>
            </label>
            <label for="Maintenance" class="block text-sm font-medium text-gray-700">
                Maintenance Monthly <span class="text-red-500"></span>
            <input type="text" name="details[maintenance_monthly]" value="{{ old('details.maintenance_monthly', $property->detail['maintenance_monthly'] ?? '') }}" placeholder="Maintenance Monthly" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
            </label>
            <label for="project_name" class="block text-sm font-medium text-gray-700">
                    Project Name <span class="text-red-500"></span>
               <input type="text" name="details[project_name]" value="{{ old('details.project_name', $property->detail['project_name'] ?? '') }}" placeholder="Project Name" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">
            </label>
         </div>

        {{-- Repeat for other select/dropdown fields like bedrooms, bathroom, etc. just like the create view --}}
        {{-- Pre-select values using: value="{{ old(..., $property->detail->field ?? '') }}" or selected if using <option> --}}
        
        {{-- Amenities --}}
        <h3 class="text-lg font-semibold mt-4 mb-2">Amenities</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
            @php
                $amenitiesList = [
                    "gym", "spa", "security_24x7", "premium_lifts", "cctv_surveillance",
                    "club_house", "mivan_construction", "jogging_track", "rainwater_harvesting",
                    "power_backup", "water_supply_24x7", "swimming_area", "kids_play_area",
                    "yoga_area", "barbeque_area", "co_working_space", "ultra_luxury",
                    "gated_secured_homes", "basketball_court", "badminton_court",
                    "table_tennis", "tennis_court", "restaurant_bar", "meditation_area",
                    "spacious_parking", "multipurpose_hall", "fire_protection", "library",
                    "mini_theatre", "garden_park"
                ];
            @endphp

            @foreach($amenitiesList as $amenity)
                <label class="block">
                    <input type="checkbox" name="amenities[{{ $amenity }}]" value="1"
                        class="hidden peer"
                        {{ !empty($property->amenities->$amenity) ? 'checked' : '' }}>
                    
                    <div class="w-full px-4 py-2 text-center border border-gray-300 rounded-md
                                peer-checked:bg-blue-600 peer-checked:text-white
                                peer-checked:border-blue-600 transition-all duration-150 cursor-pointer">
                        {{ ucwords(str_replace('_', ' ', $amenity)) }}
                    </div>
                </label>
            @endforeach
        </div>

        {{-- Banner Image --}}
        <div x-data="imageUploader('{{ $property->banner_img ? asset('/' . $property->banner_img) : '' }}')" class="pt-5">
    <h3 class="text-lg font-semibold mt-4 mb-2">Feature Image</h3>

    <!-- Drop Area -->
    <div 
        class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-500 transition"
        x-on:dragover.prevent
        x-on:drop.prevent="handleDrop($event)"
        x-on:click="$refs.fileInput.click()"
    >
        <!-- Placeholder -->
        <template x-if="!previewUrl">
            <div>
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 16l4-4a4 4 0 015.656 0L21 4M16 21H8a4 4 0 01-4-4V8a4 4 0 014-4h8a4 4 0 014 4v9a4 4 0 01-4 4z"/>
                </svg>
                <p class="mt-2 text-sm text-gray-600">Click or drag an image to upload</p>
                <p class="text-xs text-gray-400">Only image files accepted</p>
            </div>
        </template>

        <!-- Preview -->
        <template x-if="previewUrl">
            <div class="relative w-full max-w-xs">
                <img :src="previewUrl" class="rounded-lg shadow-md">
                <button type="button"
                        class="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 hover:bg-red-700"
                        x-on:click="removeImage">
                    &times;
                </button>
            </div>
        </template>

        <!-- Hidden File Input -->
        <input type="file" x-ref="fileInput" name="banner_img" accept="image/*"
            class="hidden" x-on:change="handleFile($event)">
    </div>
</div>

<!-- Alpine Script -->
<script>
    function imageUploader(existingImage = '') {
        return {
            previewUrl: existingImage || null,

            handleFile(event) {
                const file = event.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    this.previewUrl = URL.createObjectURL(file);
                }
            },

            handleDrop(event) {
                const file = event.dataTransfer.files[0];
                if (file && file.type.startsWith('image/')) {
                    this.$refs.fileInput.files = event.dataTransfer.files;
                    this.previewUrl = URL.createObjectURL(file);
                }
            },

            removeImage() {
                this.$refs.fileInput.value = '';
                this.previewUrl = null;
            }
        }
    }
</script>


{{-- Gallery Images --}}

@php
    $existingGalleryImages = $property->galleryImages->pluck('image_path')->map(fn($img) => asset('/' . $img));
@endphp

<div x-data="galleryUploader({{ Js::from($existingGalleryImages) }})" class="pt-5">
    <h3 class="text-lg font-semibold mt-4 mb-2">Gallery Images</h3>

    <!-- Drop area -->
    <div
        class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-500 transition"
        x-on:dragover.prevent
        x-on:drop.prevent="handleDrop($event)"
        x-on:click="$refs.galleryInput.click()"
    >
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" stroke-width="2"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M3 16l4-4a4 4 0 015.656 0L21 4M16 21H8a4 4 0 01-4-4V8a4 4 0 014-4h8a4 4 0 014 4v9a4 4 0 01-4 4z"/>
        </svg>
        <p class="mt-2 text-sm text-gray-600">Click or drag multiple images to upload</p>
        <p class="text-xs text-gray-400">Only image files are accepted</p>
    </div>

    <!-- Hidden file input -->
    <input type="file" name="gallery_images[]" accept="image/*" multiple x-ref="galleryInput" class="hidden"
        x-on:change="handleFiles($event)">

    <!-- Preview thumbnails -->
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
        <template x-for="(image, index) in allImages" :key="index">
            <div class="relative group">
                <img :src="image.url" class="rounded-lg shadow w-full h-32 object-cover">
                <button type="button"
                        class="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 text-sm hover:bg-red-700"
                        x-on:click="removeImage(index)">
                    &times;
                </button>
                <!-- Hidden input for deleted image tracking (optional) -->
                <template x-if="image.existing && image.markedForDelete">
                    <input type="hidden" name="deleted_gallery_images[]" :value="image.url">
                </template>
            </div>
        </template>
    </div>
</div>
<script>
    function galleryUploader(existing = []) {
        return {
            allImages: [],
            fileList: [],

            init() {
                // Push existing images into the preview array
                this.allImages = existing.map(url => ({
                    url,
                    existing: true,
                    markedForDelete: false,
                }));
            },

            handleFiles(event) {
                const files = Array.from(event.target.files);
                this.addNewFiles(files);
            },

            handleDrop(event) {
                const files = Array.from(event.dataTransfer.files);
                this.$refs.galleryInput.files = event.dataTransfer.files;
                this.addNewFiles(files);
            },

            addNewFiles(files) {
                files.forEach(file => {
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = e => {
                            this.allImages.push({
                                url: e.target.result,
                                file: file,
                                existing: false
                            });
                            this.fileList.push(file);
                            this.syncFileInput();
                        };
                        reader.readAsDataURL(file);
                    }
                });
            },

            removeImage(index) {
                const image = this.allImages[index];

                if (image.existing) {
                    this.allImages[index].markedForDelete = true;
                } else {
                    this.allImages.splice(index, 1);
                    this.fileList.splice(index - this.existingCount(), 1);
                    this.syncFileInput();
                }
            },

            existingCount() {
                return this.allImages.filter(img => img.existing && !img.markedForDelete).length;
            },

            syncFileInput() {
                const dt = new DataTransfer();
                this.fileList.forEach(file => dt.items.add(file));
                this.$refs.galleryInput.files = dt.files;
            }
        };
    }
</script>

@php
    $existingFloorPlans = $property->floorPlans->pluck('image_path')->map(fn($img) => asset('/' . $img));
@endphp

<div x-data="floorPlanUploader({{ Js::from($existingFloorPlans) }})" class="pt-5">
    <h3 class="text-lg font-semibold mt-4 mb-2">Floor Plan Images</h3>

    <!-- Drop area -->
    <div
        class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-500 transition"
        x-on:dragover.prevent
        x-on:drop.prevent="handleDrop($event)"
        x-on:click="$refs.floorPlanInput.click()"
    >
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" stroke-width="2"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M3 16l4-4a4 4 0 015.656 0L21 4M16 21H8a4 4 0 01-4-4V8a4 4 0 014-4h8a4 4 0 014 4v9a4 4 0 01-4 4z"/>
        </svg>
        <p class="mt-2 text-sm text-gray-600">Click or drag floor plan images to upload</p>
        <p class="text-xs text-gray-400">Only image files are accepted</p>
    </div>

    <!-- Hidden input -->
    <input type="file" name="floor_plans[]" accept="image/*" multiple x-ref="floorPlanInput" class="hidden"
           x-on:change="handleFiles($event)">

    <!-- Thumbnails -->
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
        <template x-for="(image, index) in allImages" :key="index">
            <div class="relative group" x-show="!image.markedForDelete">
                <img :src="image.url" class="rounded-lg shadow w-full h-32 object-cover">
                <button type="button"
                    class="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 text-sm hover:bg-red-700"
                    x-on:click="removeImage(index)">
                    &times;
                </button>
                <!-- Hidden input to tell server which images to delete -->
                <template x-if="image.existing && image.markedForDelete">
                    <input type="hidden" name="deleted_floor_plans[]" :value="image.url">
                </template>
            </div>
        </template>

    </div>
</div>
<script>
function floorPlanUploader(existing = []) {
    return {
        allImages: [],
        fileList: [],

        init() {
            // Initialize existing images (from DB)
            this.allImages = existing.map(url => ({
                url,
                existing: true,
                markedForDelete: false
            }));
        },

        handleFiles(event) {
            const files = Array.from(event.target.files);
            this.addNewFiles(files);
        },

        handleDrop(event) {
            const files = Array.from(event.dataTransfer.files);
            this.addNewFiles(files); // DO NOT manually assign to input
        },

        addNewFiles(files) {
            files.forEach(file => {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = e => {
                        this.allImages.push({
                            url: e.target.result,
                            file: file,
                            existing: false
                        });
                        this.fileList.push(file);
                        this.syncFileInput();
                    };
                    reader.readAsDataURL(file);
                }
            });
        },

        removeImage(index) {
            const image = this.allImages[index];

            if (image.existing) {
                // Mark for deletion only (will send hidden input)
                this.allImages[index].markedForDelete = true;
            } else {
                // Remove newly added image
                const fileIndex = index - this.existingCount();
                this.allImages.splice(index, 1);
                this.fileList.splice(fileIndex, 1);
                this.syncFileInput();
            }
        },

        existingCount() {
            return this.allImages.filter(img => img.existing && !img.markedForDelete).length;
        },

        syncFileInput() {
            const dt = new DataTransfer();
            this.fileList.forEach(file => dt.items.add(file));
            this.$refs.floorPlanInput.files = dt.files;
        }
    };
}
</script>


        {{-- SEO --}}
        <div class="pt-5">
            <h3 class="text-lg font-semibold mt-4 mb-2">For SEO</h3>
            <label for="meta_title" class="block text-sm font-medium text-gray-700">
                    Meta Title <span class="text-red-500"></span>
                <input type="text" name="meta_title" placeholder="Meta Title" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition" value="{{ old('meta_title', $property->meta_title) }}">
            </label>
            <label for="meta_description" class="block text-sm font-medium text-gray-700">
                    Meta Description <span class="text-red-500"></span>
                <textarea name="meta_description" placeholder="Meta Description" class="w-full mt-2 mb-4 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm transition">{{ old('meta_description', $property->meta_description) }}</textarea>
            </label>
            </div>

        <button type="submit" class="mt-4 bg-green-600 text-white px-4 py-2 rounded">Update Property</button>
    </form>
</div>
@endsection