@extends('layouts.app')

@section('content')
<div class="bg-white p-6 shadow rounded">
    <h2 class="text-2xl font-bold mb-4">Add New Property</h2>
  
    @if ($errors->any())
    <div class="bg-red-100 text-red-700 p-4 rounded mb-4">
        <ul class="list-disc pl-5">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if(session('success'))
    <div class="bg-green-100 text-green-800 p-4 rounded mb-4">
        {{ session('success') }}
    </div>
@endif
    <form action="{{ route('properties.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- Property Info --}}
        <h3 class="text-lg font-semibold mb-2">Property Info</h3>
     
        <div x-data="{ selected: '' }" class="mb-3 mt-4">
            <div class="flex gap-4">
                @php
                    $options = [
                        'sell' => 'can_sell',
                        'rent' => 'can_rent',
                        'lease' => 'can_lease',
                    ];
                @endphp

                @foreach($options as $option => $field)
                    @if(auth()->user()->$field)
                        <label class="cursor-pointer">
                            <input type="radio" name="category_name"
                                x-model="selected"
                                value="{{ $option }}"
                                class="hidden peer" required>

                            <div class="px-6 py-2 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>
            <!-- Section to show/hide based on selected value -->
            <div class="mt-6 space-y-4">
                <div class="pt-4">
                   <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <input type="text" name="property_name" placeholder="Property Name" class="w-full 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" required>
                        <input type="text" name="price" placeholder="Price" class="w-full 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" required>
                        <div x-show="selected === 'lease' || selected === 'rent'" >
                            <input type="text" name="security_deposit" placeholder="Security Deposit" class="w-full 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">
                        </div>
                        <input type="text" name="youtube_url" placeholder="YouTube URL" class="w-full 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">
                    </div>  
                    <textarea name="description" placeholder="Description" class="w-full 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"></textarea>
                </div>
            </div>
        </div>
        {{-- Address --}}
        <h3 class="text-lg font-semibold mt-4 mb-2">Address</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input type="text" name="address[street]" placeholder="Street" class="w-full 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">
            <input type="text" name="address[city]" placeholder="City" class="w-full 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">
            <input type="text" name="address[state]" placeholder="State" class="w-full 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">
            <input type="text" name="address[zip_or_postal_code]" placeholder="Zip Code" class="w-full 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">
            <input type="text" name="address[area]" placeholder="Area" class="w-full 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">
            <select name="address[country]" class="w-full 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 selected>Select Country</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="Andorra">Andorra</option>
                <option value="Angola">Angola</option>
                <option value="Argentina">Argentina</option>
                <option value="Armenia">Armenia</option>
                <option value="Australia">Australia</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Bahamas">Bahamas</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Bangladesh">Bangladesh</option>
                <option value="Belarus">Belarus</option>
                <option value="Belgium">Belgium</option>
                <option value="Bhutan">Bhutan</option>
                <option value="Brazil">Brazil</option>
                <option value="Bulgaria">Bulgaria</option>
                <option value="Cambodia">Cambodia</option>
                <option value="Canada">Canada</option>
                <option value="Chile">Chile</option>
                <option value="China">China</option>
                <option value="Colombia">Colombia</option>
                <option value="Croatia">Croatia</option>
                <option value="Czech Republic">Czech Republic</option>
                <option value="Denmark">Denmark</option>
                <option value="Egypt">Egypt</option>
                <option value="Finland">Finland</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Greece">Greece</option>
                <option value="Hong Kong">Hong Kong</option>
                <option value="Hungary">Hungary</option>
                <option value="India" selected>India</option>
                <option value="Indonesia">Indonesia</option>
                <option value="Iran">Iran</option>
                <option value="Iraq">Iraq</option>
                <option value="Ireland">Ireland</option>
                <option value="Israel">Israel</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="Jordan">Jordan</option>
                <option value="Kazakhstan">Kazakhstan</option>
                <option value="Kenya">Kenya</option>
                <option value="Kuwait">Kuwait</option>
                <option value="Laos">Laos</option>
                <option value="Latvia">Latvia</option>
                <option value="Lebanon">Lebanon</option>
                <option value="Lithuania">Lithuania</option>
                <option value="Luxembourg">Luxembourg</option>
                <option value="Malaysia">Malaysia</option>
                <option value="Maldives">Maldives</option>
                <option value="Mexico">Mexico</option>
                <option value="Monaco">Monaco</option>
                <option value="Mongolia">Mongolia</option>
                <option value="Morocco">Morocco</option>
                <option value="Nepal">Nepal</option>
                <option value="Netherlands">Netherlands</option>
                <option value="New Zealand">New Zealand</option>
                <option value="Nigeria">Nigeria</option>
                <option value="Norway">Norway</option>
                <option value="Oman">Oman</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Peru">Peru</option>
                <option value="Philippines">Philippines</option>
                <option value="Poland">Poland</option>
                <option value="Portugal">Portugal</option>
                <option value="Qatar">Qatar</option>
                <option value="Romania">Romania</option>
                <option value="Russia">Russia</option>
                <option value="Saudi Arabia">Saudi Arabia</option>
                <option value="Serbia">Serbia</option>
                <option value="Singapore">Singapore</option>
                <option value="Slovakia">Slovakia</option>
                <option value="Slovenia">Slovenia</option>
                <option value="South Africa">South Africa</option>
                <option value="South Korea">South Korea</option>
                <option value="Spain">Spain</option>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="Sweden">Sweden</option>
                <option value="Switzerland">Switzerland</option>
                <option value="Syria">Syria</option>
                <option value="Taiwan">Taiwan</option>
                <option value="Thailand">Thailand</option>
                <option value="Turkey">Turkey</option>
                <option value="UAE">UAE</option>
                <option value="Ukraine">Ukraine</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
                <option value="Vietnam">Vietnam</option>
                <option value="Yemen">Yemen</option>
            </select>
        </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-3">
            <input type="text" name="details[property_size]" placeholder="Size (e.g. 3410 Sq Ft)" class="w-full 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">
            <select name="details[bedrooms]" class="w-full 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 selected>Select Bedrooms</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
            <select name="details[bathroom]" class="w-full 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 selected>Select Bathrooms</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
            <select name="details[kitchen]" class="w-full 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 selected>Select Kitchen</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
            <select name="details[garage]" class="w-full 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 selected>Select Garage</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
            <input type="text" name="details[garage_size]" placeholder="Garage Size (e.g. 320 Sq Ft)" class="w-full 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">
            <select name="details[car_parking]" class="w-full 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 selected>Select Car Parking</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
            <select name="details[total_floors]" class="w-full 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 selected>Select Total Floors</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
            @php
                $currentYear = date('Y');
            @endphp

            <select name="details[year_built]" class="w-full 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 selected>Select Year Built</option>
                @for ($year = $currentYear; $year >= 1980; $year--)
                    <option value="{{ $year }}">{{ $year }}</option>
                @endfor
            </select>
            <select name="details[property_type]" class="w-full 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 selected>Select Property Type</option>
                <option value="Apartments & Flats">Apartments & Flats</option>
                <option value="Builder Floors">Builder Floors</option>
                <option value="Farmhouses">Farmhouses</option>
                <option value="Independent Houses & Villas">Independent Houses & Villas</option>
                <option value="Residential Plots & Land">Residential Plots & Land</option>
                <option value="Studio Apartments">Studio Apartments</option>
                <option value="Penthouses">Penthouses</option>
                <option value="Shops & Showrooms">Shops & Showrooms</option>
                <option value="Office Spaces">Office Spaces</option>
                <option value="Warehouses & Godowns">Warehouses & Godowns</option>
            </select>

            <select name="details[property_status]" class="w-full 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 selected>Select Property Status</option>
                <option value="New Launch">New Launch</option>
                <option value="Ready to Move">Ready to Move</option>
                <option value="Under Construction">Under Construction</option>
            </select>
            <select name="details[furnishing]" class="w-full 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 selected>Select Furnishing</option>
                <option value="Furnished">Furnished</option>
                <option value="Semi-Furnished">Semi-Furnished</option>
                <option value="Unfurnished">Unfurnished</option>
            </select>

            <select name="details[facing]" class="w-full 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 selected>Select facing</option>
                <option value="East">East</option>
                <option value="North">North</option>
                <option value="North-East">North-East</option>
                <option value="North-West">North-West</option>
                <option value="South">South</option>
                <option value="South-East">South-East</option>
                <option value="South-West">South-West</option>
                <option value="West">West</option>
            </select>
            <input type="text" name="details[maintenance_monthly]" placeholder="Maintenance Monthly" class="w-full 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">
            <input type="text" name="details[project_name]" placeholder="Project Name" class="w-full 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">
         </div>

        {{-- Amenities --}}
        <h3 class="text-lg font-semibold mt-4 mb-2">Amenities (Check what applies)</h3>
        @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

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
            @foreach($amenitiesList as $amenity)
                <label class="block">
                    <input type="checkbox" name="amenities[{{ $amenity }}]" value="1"
                        class="hidden peer">
                    <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>

    <div x-data="imageUploader()" 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()"
        >
            <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() {
            return {
                previewUrl: 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>


        <div x-data="galleryUploader()" 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 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 previewImages" :key="index">
                    <div class="relative group">
                        <img :src="image" 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>
                    </div>
                </template>
            </div>
        </div>

        <!-- Alpine.js script -->
        <script>
            function galleryUploader() {
                return {
                    previewImages: [],
                    fileList: [],

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

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

                    setFiles(files) {
                        this.previewImages = [];
                        this.fileList = files;

                        files.forEach(file => {
                            if (file && file.type.startsWith('image/')) {
                                const reader = new FileReader();
                                reader.onload = e => {
                                    this.previewImages.push(e.target.result);
                                };
                                reader.readAsDataURL(file);
                            }
                        });
                    },

                    removeImage(index) {
                        this.previewImages.splice(index, 1);
                        this.fileList.splice(index, 1);

                        // Rebuild FileList and update the input
                        const dt = new DataTransfer();
                        this.fileList.forEach(file => dt.items.add(file));
                        this.$refs.galleryInput.files = dt.files;
                    }
                }
            }
        </script>

        <div x-data="floorPlanUploader()" class="pt-5">
            <h3 class="text-lg font-semibold mt-4 mb-2">Floor Plans</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 multiple 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)">

            <!-- Preview thumbnails -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
                <template x-for="(image, index) in previewImages" :key="index">
                    <div class="relative group">
                        <img :src="image" 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>
                    </div>
                </template>
            </div>
        </div>

        <script>
            function floorPlanUploader() {
                return {
                    previewImages: [],
                    fileList: [],

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

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

                    setFiles(files) {
                        this.previewImages = [];
                        this.fileList = files;

                        files.forEach(file => {
                            if (file && file.type.startsWith('image/')) {
                                const reader = new FileReader();
                                reader.onload = e => {
                                    this.previewImages.push(e.target.result);
                                };
                                reader.readAsDataURL(file);
                            }
                        });
                    },

                    removeImage(index) {
                        this.previewImages.splice(index, 1);
                        this.fileList.splice(index, 1);

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


        <div class="pt-5"> 
             <h3 class="text-lg font-semibold mt-4 mb-2">For Seo</h3>
            <input type="text" name="meta_title" placeholder="Meta Title" class="w-full 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">
            <textarea name="meta_description" placeholder="Meta Description" class="w-full 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"></textarea>
        </div>

        <button type="submit" class="mt-4 bg-green-600 text-white px-4 py-2 rounded">Save Property</button>
    </form>
</div>
<script>
function slugify(text) {
    return text.toString().toLowerCase()
        .trim()
        .replace(/\s+/g, '-')           // Replace spaces with -
        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
        .replace(/\-\-+/g, '-');        // Replace multiple - with single -
}

document.getElementById('property_name').addEventListener('input', function () {
    const slug = slugify(this.value);
    document.getElementById('slug').value = slug;
});
</script>

@endsection