@extends('layouts.app')

@section('title', 'Edit Property - RealVest')

@section('content')
<div class="p-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-800">Edit Property</h1>
        <a href="{{ route('dashboard') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
            <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
        </a>
    </div>
    
    <!-- Form -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b">
            <h2 class="text-xl font-semibold text-gray-800">Edit Property Information</h2>
        </div>
        <form action="{{ route('properties.update', $property->id) }}" method="POST" class="p-6">
            @csrf
            @method('PUT')
            
            <!-- Basic Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Property Title *</label>
                    <input type="text" name="title" value="{{ old('title', $property->title) }}" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @error('title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Price *</label>
                    <input type="number" name="price" value="{{ old('price', $property->price) }}" step="0.01" min="0" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @error('price')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                    <input type="text" name="location" value="{{ old('location', $property->location) }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @error('location')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Property Type</label>
                    <select name="property_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Select Type</option>
                        <option value="apartment" {{ old('property_type', $property->property_type) == 'apartment' ? 'selected' : '' }}>Apartment</option>
                        <option value="house" {{ old('property_type', $property->property_type) == 'house' ? 'selected' : '' }}>House</option>
                        <option value="condo" {{ old('property_type', $property->property_type) == 'condo' ? 'selected' : '' }}>Condo</option>
                        <option value="commercial" {{ old('property_type', $property->property_type) == 'commercial' ? 'selected' : '' }}>Commercial</option>
                        <option value="land" {{ old('property_type', $property->property_type) == 'land' ? 'selected' : '' }}>Land</option>
                    </select>
                    @error('property_type')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Square Feet</label>
                    <input type="number" name="square_feet" value="{{ old('square_feet', $property->square_feet) }}" min="0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @error('square_feet')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="available" {{ old('status', $property->status) == 'available' ? 'selected' : '' }}>Available</option>
                        <option value="sold" {{ old('status', $property->status) == 'sold' ? 'selected' : '' }}>Sold</option>
                        <option value="pending" {{ old('status', $property->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="rented" {{ old('status', $property->status) == 'rented' ? 'selected' : '' }}>Rented</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Project Status</label>
                    <select name="project_status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="live" {{ old('project_status', $property->project_status) == 'live' ? 'selected' : '' }}>Live Project</option>
                        <option value="ongoing" {{ old('project_status', $property->project_status) == 'ongoing' ? 'selected' : '' }}>Ongoing Project</option>
                        <option value="future" {{ old('project_status', $property->project_status) == 'future' ? 'selected' : '' }}>Future Project</option>
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Categorize this property for project listings</p>
                </div>
                
                <div>
                    <label class="flex items-center">
                        <input type="checkbox" name="featured" value="1" {{ old('featured', $property->featured) ? 'checked' : '' }}
                               class="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <span class="text-sm font-medium text-gray-700">Featured Property</span>
                    </label>
                    <p class="text-xs text-gray-500 mt-1">Mark this property as featured to highlight it on the homepage</p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Bedrooms</label>
                    <input type="number" name="bedrooms" value="{{ old('bedrooms', $property->bedrooms) }}" min="0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @error('bedrooms')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Bathrooms</label>
                    <input type="number" name="bathrooms" value="{{ old('bathrooms', $property->bathrooms) }}" min="0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @error('bathrooms')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <!-- Description -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                <textarea name="description" rows="4" 
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('description', $property->description) }}</textarea>
                @error('description')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- SEO Section -->
            <div class="border-t pt-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">SEO Settings</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Title</label>
                        <input type="text" name="seo_title" value="{{ old('seo_title', $property->seo_title) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="Enter SEO title (max 60 characters)">
                        <p class="text-xs text-gray-500 mt-1">Recommended: 50-60 characters</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Focus Keyword</label>
                        <input type="text" name="focus_keyword" value="{{ old('focus_keyword', $property->focus_keyword) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="Main keyword for this property">
                        <p class="text-xs text-gray-500 mt-1">Primary keyword for SEO optimization</p>
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Description</label>
                        <textarea name="seo_description" rows="3" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="Enter SEO description (max 160 characters)">{{ old('seo_description', $property->seo_description) }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Recommended: 120-160 characters</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Keywords</label>
                        <input type="text" name="seo_keywords" value="{{ old('seo_keywords', $property->seo_keywords) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="keyword1, keyword2, keyword3">
                        <p class="text-xs text-gray-500 mt-1">Separate keywords with commas</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Canonical URL</label>
                        <input type="text" name="canonical_url" value="{{ old('canonical_url', $property->canonical_url) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="https://example.com/property-url">
                        <p class="text-xs text-gray-500 mt-1">Optional: Custom canonical URL</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Robots Meta</label>
                        <select name="robots_meta" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="index, follow" {{ old('robots_meta', $property->robots_meta) == 'index, follow' ? 'selected' : '' }}>Index, Follow</option>
                            <option value="noindex, follow" {{ old('robots_meta', $property->robots_meta) == 'noindex, follow' ? 'selected' : '' }}>No Index, Follow</option>
                            <option value="index, nofollow" {{ old('robots_meta', $property->robots_meta) == 'index, nofollow' ? 'selected' : '' }}>Index, No Follow</option>
                            <option value="noindex, nofollow" {{ old('robots_meta', $property->robots_meta) == 'noindex, nofollow' ? 'selected' : '' }}>No Index, No Follow</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">SEO Image</label>
                        <input type="text" name="seo_image" value="{{ old('seo_image', $property->seo_image) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="URL to custom SEO image">
                        <p class="text-xs text-gray-500 mt-1">Optional: Custom image for social sharing</p>
                    </div>
                </div>
            </div>
            
            <!-- Social Media Section -->
            <div class="border-t pt-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Social Media Settings</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Social Title</label>
                        <input type="text" name="social_title" value="{{ old('social_title', $property->social_title) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="Social media title (max 60 characters)">
                        <p class="text-xs text-gray-500 mt-1">Title for Facebook/Twitter sharing</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Social Image</label>
                        <input type="text" name="social_image" value="{{ old('social_image', $property->social_image) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                               placeholder="URL to social media image">
                        <p class="text-xs text-gray-500 mt-1">Image for social sharing (1200x630px recommended)</p>
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Social Description</label>
                        <textarea name="social_description" rows="3" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="Social media description">{{ old('social_description', $property->social_description) }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Description for Facebook/Twitter sharing</p>
                    </div>
                </div>
            </div>
            
            <!-- Floor Plans Management -->
            <div class="border-t pt-6 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">Floor Plans</h3>
                    <button type="button" id="addFloorPlan" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                        <i class="fas fa-plus mr-2"></i>Add Floor Plan
                    </button>
                </div>
                
                <div id="floorPlansContainer">
                    @if($property->floorPlans && $property->floorPlans->count() > 0)
                        @foreach($property->floorPlans as $index => $floorPlan)
                        <div class="floor-plan-item border rounded-lg p-4 mb-4" data-index="{{ $index }}">
                            <div class="flex justify-between items-center mb-3">
                                <h4 class="font-medium">Floor Plan {{ $index + 1 }}</h4>
                                <button type="button" class="remove-floor-plan text-red-600 hover:text-red-800">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Floor Name</label>
                                    <select name="floor_plans[{{ $index }}][floor_name]" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                        <option value="FIRST" {{ $floorPlan->floor_name == 'FIRST' ? 'selected' : '' }}>FIRST</option>
                                        <option value="SECOND" {{ $floorPlan->floor_name == 'SECOND' ? 'selected' : '' }}>SECOND</option>
                                        <option value="THIRD" {{ $floorPlan->floor_name == 'THIRD' ? 'selected' : '' }}>THIRD</option>
                                        <option value="FOURTH" {{ $floorPlan->floor_name == 'FOURTH' ? 'selected' : '' }}>FOURTH</option>
                                        <option value="FIFTH" {{ $floorPlan->floor_name == 'FIFTH' ? 'selected' : '' }}>FIFTH</option>
                                        <option value="SIXTH" {{ $floorPlan->floor_name == 'SIXTH' ? 'selected' : '' }}>SIXTH</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Flat Details</label>
                                    <input type="text" name="floor_plans[{{ $index }}][flat_details]" value="{{ $floorPlan->flat_details }}" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="2 BHK, 3 BHK">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Flat Number</label>
                                    <input type="text" name="floor_plans[{{ $index }}][flat_number]" value="{{ $floorPlan->flat_number }}" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="A-1, A-2">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Salable Area (sqft)</label>
                                    <input type="number" name="floor_plans[{{ $index }}][salable_area]" value="{{ $floorPlan->salable_area }}" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" step="0.01">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">UDS (sqft)</label>
                                    <input type="number" name="floor_plans[{{ $index }}][uds_sqft]" value="{{ $floorPlan->uds_sqft }}" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" step="0.01">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Availability Status</label>
                                    <select name="floor_plans[{{ $index }}][availability_status]" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                        <option value="Available" {{ $floorPlan->availability_status == 'Available' ? 'selected' : '' }}>Available</option>
                                        <option value="Sold Out" {{ $floorPlan->availability_status == 'Sold Out' ? 'selected' : '' }}>Sold Out</option>
                                        <option value="Land Owner" {{ $floorPlan->availability_status == 'Land Owner' ? 'selected' : '' }}>Land Owner</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Price (₹)</label>
                                    <input type="number" name="floor_plans[{{ $index }}][price]" value="{{ $floorPlan->price }}" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" step="0.01" placeholder="Optional">
                                </div>
                                
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                                    <textarea name="floor_plans[{{ $index }}][description]" rows="2" 
                                              class="w-full px-3 py-2 border border-gray-300 rounded-lg">{{ $floorPlan->description }}</textarea>
                                </div>
                            </div>
                            
                            <input type="hidden" name="floor_plans[{{ $index }}][id]" value="{{ $floorPlan->id }}">
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-8 text-gray-500">
                            <p>No floor plans added yet. Click "Add Floor Plan" to add one.</p>
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- Plan Images Section -->
            <div class="border-t pt-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Plan Images</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Floor Plan Image</label>
                        @if($property->floor_plan_image)
                            @if(Str::startsWith($property->floor_plan_image, 'http'))
                                <img src="{{ $property->floor_plan_image }}" alt="Current Floor Plan" class="img-thumbnail" style="max-height: 120px;">
                            @else
                                <img src="{{ asset($property->floor_plan_image) }}" alt="Current Floor Plan" class="img-thumbnail" style="max-height: 120px;">
                            @endif
                            <p class="text-xs text-gray-500 mt-1">Current image</p>
                        @endif
                        <input type="file" name="floor_plan_image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                        <p class="text-xs text-gray-500 mt-1">Upload new floor plan image</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Elevation Image</label>
                        @if($property->elevation_image)
                            @if(Str::startsWith($property->elevation_image, 'http'))
                                <img src="{{ $property->elevation_image }}" alt="Current Elevation" class="img-thumbnail" style="max-height: 120px;">
                            @else
                                <img src="{{ asset($property->elevation_image) }}" alt="Current Elevation" class="img-thumbnail" style="max-height: 120px;">
                            @endif
                            <p class="text-xs text-gray-500 mt-1">Current image</p>
                        @endif
                        <input type="file" name="elevation_image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                        <p class="text-xs text-gray-500 mt-1">Upload building elevation image</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Google Map Image</label>
                        @if($property->google_map_image)
                            @if(Str::startsWith($property->google_map_image, 'http'))
                                <img src="{{ $property->google_map_image }}" alt="Current Map" class="img-thumbnail" style="max-height: 120px;">
                            @else
                                <img src="{{ asset($property->google_map_image) }}" alt="Current Map" class="img-thumbnail" style="max-height: 120px;">
                            @endif
                            <p class="text-xs text-gray-500 mt-1">Current image</p>
                        @endif
                        <input type="file" name="google_map_image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                        <p class="text-xs text-gray-500 mt-1">Upload location map image</p>
                    </div>
                </div>
            </div>
            
            <!-- Submit Buttons -->
            <div class="flex justify-end space-x-4">
                <a href="{{ route('dashboard') }}" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    <i class="fas fa-save mr-2"></i>Update Property
                </button>
            </div>
        </form>
    </div>
</div>

<script>
let floorPlanIndex = {{ $property->floorPlans ? $property->floorPlans->count() : 0 }};

document.getElementById('addFloorPlan').addEventListener('click', function() {
    const container = document.getElementById('floorPlansContainer');
    const emptyMessage = container.querySelector('.text-center');
    if (emptyMessage) {
        emptyMessage.remove();
    }
    
    const floorPlanHtml = `
        <div class="floor-plan-item border rounded-lg p-4 mb-4" data-index="${floorPlanIndex}">
            <div class="flex justify-between items-center mb-3">
                <h4 class="font-medium">Floor Plan ${floorPlanIndex + 1}</h4>
                <button type="button" class="remove-floor-plan text-red-600 hover:text-red-800">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Floor Name</label>
                    <select name="floor_plans[${floorPlanIndex}][floor_name]" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                        <option value="FIRST">FIRST</option>
                        <option value="SECOND">SECOND</option>
                        <option value="THIRD">THIRD</option>
                        <option value="FOURTH">FOURTH</option>
                        <option value="FIFTH">FIFTH</option>
                        <option value="SIXTH">SIXTH</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Flat Details</label>
                    <input type="text" name="floor_plans[${floorPlanIndex}][flat_details]" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="2 BHK, 3 BHK">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Flat Number</label>
                    <input type="text" name="floor_plans[${floorPlanIndex}][flat_number]" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="A-1, A-2">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Salable Area (sqft)</label>
                    <input type="number" name="floor_plans[${floorPlanIndex}][salable_area]" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" step="0.01">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">UDS (sqft)</label>
                    <input type="number" name="floor_plans[${floorPlanIndex}][uds_sqft]" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" step="0.01">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Availability Status</label>
                    <select name="floor_plans[${floorPlanIndex}][availability_status]" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                        <option value="Available">Available</option>
                        <option value="Sold Out">Sold Out</option>
                        <option value="Land Owner">Land Owner</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Price (₹)</label>
                    <input type="number" name="floor_plans[${floorPlanIndex}][price]" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg" step="0.01" placeholder="Optional">
                </div>
                
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea name="floor_plans[${floorPlanIndex}][description]" rows="2" 
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg"></textarea>
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', floorPlanHtml);
    floorPlanIndex++;
});

document.addEventListener('click', function(e) {
    if (e.target.closest('.remove-floor-plan')) {
        const floorPlanItem = e.target.closest('.floor-plan-item');
        floorPlanItem.remove();
        
        const container = document.getElementById('floorPlansContainer');
        if (container.querySelectorAll('.floor-plan-item').length === 0) {
            container.innerHTML = `
                <div class="text-center py-8 text-gray-500">
                    <p>No floor plans added yet. Click "Add Floor Plan" to add one.</p>
                </div>
            `;
        }
    }
});
</script>
@endsection