<x-app-layout>
    <x-slot name="title">Properties</x-slot>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Edit Property: ') }} {{ $property->plot_number }}
            </h2>
            <a href="javascript:history.back()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm font-medium">
                Cancel
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form action="{{ route('properties.update', $property) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="block_id" class="block text-sm font-medium text-gray-700">Project / Block *</label>
                                    <select id="block_id" name="block_id" required class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                        @foreach($blocks as $block)
                                            <option value="{{ $block->id }}" {{ old('block_id', $property->block_id) == $block->id ? 'selected' : '' }}>
                                                {{ $block->project->name ?? 'Unknown' }} - {{ $block->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('block_id') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>
                                
                                <div>
                                    <label for="property_type" class="block text-sm font-medium text-gray-700">Property Type *</label>
                                    <select id="property_type" name="property_type" required class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                        <option value="">Select Type</option>
                                        @forelse($types as $type)
                                            <option value="{{ $type->name }}" {{ old('property_type', $property->property_type) == $type->name ? 'selected' : '' }}>{{ $type->name }}</option>
                                        @empty
                                            <option value="Plot" {{ old('property_type', $property->property_type) == 'Plot' ? 'selected' : '' }}>Plot</option>
                                            <option value="House" {{ old('property_type', $property->property_type) == 'House' ? 'selected' : '' }}>House</option>
                                            <option value="Commercial" {{ old('property_type', $property->property_type) == 'Commercial' ? 'selected' : '' }}>Commercial</option>
                                        @endforelse
                                    </select>
                                    @error('property_type') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="plot_number" class="block text-sm font-medium text-gray-700">Plot / Unit Number *</label>
                                    <input type="text" name="plot_number" id="plot_number" value="{{ old('plot_number', $property->plot_number) }}" required class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                    @error('plot_number') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="size" class="block text-sm font-medium text-gray-700">Size (e.g. 5 Marla)</label>
                                    <input type="text" name="size" id="size" value="{{ old('size', $property->size) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div>
                                    <label for="dimensions" class="block text-sm font-medium text-gray-700">Dimensions (L x W)</label>
                                    <input type="text" name="dimensions" id="dimensions" value="{{ old('dimensions', $property->dimensions) }}" placeholder="25x50" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div>
                                    <label for="base_price" class="block text-sm font-medium text-gray-700">Base Price (PKR)</label>
                                    <input type="number" step="0.01" name="base_price" id="base_price" value="{{ old('base_price', $property->base_price) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>

                                <div>
                                    <label for="status" class="block text-sm font-medium text-gray-700">Status *</label>
                                    <select id="status" name="status" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                        <option value="Available" {{ old('status', $property->status) == 'Available' ? 'selected' : '' }}>Available</option>
                                        <option value="Reserved" {{ old('status', $property->status) == 'Reserved' ? 'selected' : '' }}>Reserved</option>
                                        <option value="Sold" {{ old('status', $property->status) == 'Sold' ? 'selected' : '' }}>Sold</option>
                                        <option value="Blocked" {{ old('status', $property->status) == 'Blocked' ? 'selected' : '' }}>Blocked</option>
                                        <option value="Rented" {{ old('status', $property->status) == 'Rented' ? 'selected' : '' }}>Rented</option>
                                    </select>
                                </div>
                                
                                <div class="col-span-1 md:col-span-2 pt-4 border-t border-gray-100">
                                    <h4 class="text-sm font-medium text-gray-900 mb-4">Land Records & Location Details</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div>
                                            <label for="khasra" class="block text-sm font-medium text-gray-700">Khasra Number</label>
                                            <input type="text" name="khasra" id="khasra" value="{{ old('khasra', $property->khasra) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                        </div>
                                        <div>
                                            <label for="khewat" class="block text-sm font-medium text-gray-700">Khewat Number</label>
                                            <input type="text" name="khewat" id="khewat" value="{{ old('khewat', $property->khewat) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                        </div>
                                        <div>
                                            <label for="khatouni" class="block text-sm font-medium text-gray-700">Khatouni Number</label>
                                            <input type="text" name="khatouni" id="khatouni" value="{{ old('khatouni', $property->khatouni) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                        </div>
                                        <div>
                                            <label for="mouza" class="block text-sm font-medium text-gray-700">Mouza (Village/Area)</label>
                                            <input type="text" name="mouza" id="mouza" value="{{ old('mouza', $property->mouza) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                        </div>
                                        <div>
                                            <label for="street" class="block text-sm font-medium text-gray-700">Street / Road</label>
                                            <input type="text" name="street" id="street" value="{{ old('street', $property->street) }}" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                        </div>
                                        <div>
                                            <label for="category" class="block text-sm font-medium text-gray-700">Category</label>
                                            <select name="category" id="category" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                                <option value="">General</option>
                                                <option value="Corner" {{ old('category', $property->category) == 'Corner' ? 'selected' : '' }}>Corner</option>
                                                <option value="Park Facing" {{ old('category', $property->category) == 'Park Facing' ? 'selected' : '' }}>Park Facing</option>
                                                <option value="Main Boulevard" {{ old('category', $property->category) == 'Main Boulevard' ? 'selected' : '' }}>Main Boulevard</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-span-1 md:col-span-2 pt-4 border-t border-gray-100">
                                    <div class="flex items-start">
                                        <div class="flex items-center h-5">
                                            <input id="has_installment_plan" name="has_installment_plan" type="checkbox" value="1" {{ old('has_installment_plan', $property->has_installment_plan) ? 'checked' : '' }} class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
                                        </div>
                                        <div class="ml-3 text-sm">
                                            <label for="has_installment_plan" class="font-medium text-gray-700">Installment Plan Available</label>
                                            <p class="text-gray-500">Check this if the property can be sold via a monthly installment plan.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 gap-4 md:col-span-2 mt-2">
                                    <div>
                                        <label for="latitude" class="block text-sm font-medium text-gray-700">Latitude</label>
                                        <input type="text" name="latitude" id="latitude" value="{{ old('latitude', $property->latitude) }}" placeholder="31.5204" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                    </div>
                                    <div>
                                        <label for="longitude" class="block text-sm font-medium text-gray-700">Longitude</label>
                                        <input type="text" name="longitude" id="longitude" value="{{ old('longitude', $property->longitude) }}" placeholder="74.3587" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                    </div>
                                </div>

                                <div class="md:col-span-2">
                                    <label for="features" class="block text-sm font-medium text-gray-700">Features / Amenities (e.g., Gas, Electricity, Water)</label>
                                    <textarea name="features" id="features" rows="2" class="mt-1 focus:ring-primary-500 focus:border-primary-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">{{ old('features', $property->features) }}</textarea>
                                </div>
                            </div>

                            <div class="flex justify-end pt-4">
                                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                    Update Property
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
