<x-app-layout>
    <x-slot name="title">Properties</x-slot>
    <div x-data="{ tab: 'details' }">
        <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Property: {{ $property->plot_number }}</h1>
                <p class="text-sm text-gray-500 mt-1">{{ $property->block->name ?? '' }} - {{ $property->block->project->name ?? '' }}</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('properties.index') }}" class="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
                    &larr; Back to Inventory
                </a>
                <a href="{{ route('properties.edit', $property) }}" class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50">
                    Edit Property
                </a>
                @if(in_array($property->status, ['Sold', 'Reserved']))
                    <a href="{{ route('property-transfers.create', ['property_id' => $property->id]) }}" class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700">
                        Transfer Plot
                    </a>
                @endif
            </div>
        </div>

        <!-- Tabs -->
        <div class="border-b border-gray-200 mb-6">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                <button @click="tab = 'details'" :class="tab === 'details' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Property Details
                </button>
                <button @click="tab = 'gallery'" :class="tab === 'gallery' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center">
                    Gallery & Documents
                    <span class="ml-2 bg-gray-100 text-gray-600 py-0.5 px-2 rounded-full text-xs">{{ $property->documents()->count() ?? 0 }}</span>
                </button>
            </nav>
        </div>

        <!-- Details Tab -->
        <div x-show="tab === 'details'" class="space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Information</h3>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-6">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Property Type</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $property->property_type }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Status</dt>
                        <dd class="mt-1 text-sm">
                            <span class="px-2 py-1 text-xs font-medium rounded-full {{ $property->status === 'Available' ? 'bg-green-100 text-green-800' : ($property->status === 'Sold' ? 'bg-red-100 text-red-800' : ($property->status === 'Reserved' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')) }}">
                                {{ $property->status }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Size & Dimensions</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $property->size ?? 'N/A' }} ({{ $property->dimensions ?? 'N/A' }})</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Base Price</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-semibold">{{ $property->base_price ? 'PKR ' . number_format($property->base_price) : 'N/A' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Latitude / Longitude</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $property->latitude ?? 'N/A' }}, {{ $property->longitude ?? 'N/A' }}
                            @if($property->latitude && $property->longitude)
                                <a href="https://maps.google.com/?q={{ $property->latitude }},{{ $property->longitude }}" target="_blank" class="ml-2 text-primary-600 hover:underline text-xs">View on Map</a>
                            @endif
                        </dd>
                    </div>

                    <!-- Land Records -->
                    <div class="sm:col-span-2 border-t pt-4 mt-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="sm:col-span-2 lg:col-span-4 mb-2">
                            <h4 class="text-sm font-semibold text-gray-800">Land Records & Details</h4>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Khasra</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $property->khasra ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Khewat</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $property->khewat ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Khatouni</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $property->khatouni ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Mouza</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $property->mouza ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Street / Road</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $property->street ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Category</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $property->category ?? 'General' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Installment Plan</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                @if($property->has_installment_plan)
                                    <span class="text-green-600 font-medium flex items-center">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                        Available
                                    </span>
                                @else
                                    <span class="text-gray-500">Not Available</span>
                                @endif
                            </dd>
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Features / Attributes</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $property->features ?? 'None recorded.' }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- Gallery Tab -->
        <div x-show="tab === 'gallery'" style="display: none;" class="space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex justify-between items-center mb-6 border-b pb-4">
                    <h3 class="text-lg font-medium text-gray-900">Property Documents & Media</h3>
                    <button onclick="document.getElementById('upload-modal').classList.remove('hidden')" class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700">
                        Upload Document
                    </button>
                </div>
                
                @if($property->documents->count() > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        @foreach($property->documents as $doc)
                            <div class="border border-gray-200 rounded-lg overflow-hidden flex flex-col relative group">
                                <div class="bg-gray-100 p-8 flex items-center justify-center flex-grow">
                                    <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                    </svg>
                                </div>
                                <div class="p-3 bg-white border-t border-gray-200">
                                    <p class="text-sm font-medium text-gray-900 truncate" title="{{ $doc->title }}">{{ $doc->title }}</p>
                                    <div class="flex justify-between items-center mt-1">
                                        <p class="text-xs text-gray-500">{{ $doc->document_type }}</p>
                                        <a href="{{ Storage::url($doc->file_path) }}" target="_blank" class="text-primary-600 hover:text-primary-800 text-xs font-medium">View</a>
                                    </div>
                                </div>
                                <form action="{{ route('properties.documents.destroy', [$property, $doc]) }}" method="POST" class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity" onsubmit="return confirm('Are you sure you want to delete this document?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1 bg-red-100 text-red-600 rounded-full hover:bg-red-200">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No documents</h3>
                        <p class="mt-1 text-sm text-gray-500">Get started by uploading media or legal documents.</p>
                        <div class="mt-6">
                            <button onclick="document.getElementById('upload-modal').classList.remove('hidden')" type="button" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700">
                                <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                                Upload Document
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Upload Document Modal -->
    <div id="upload-modal" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <form action="{{ route('properties.documents.store', $property) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">Upload Property Media/Document</h3>
                        <div class="mt-4 space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Document Title</label>
                                <input type="text" name="title" 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">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Document Type</label>
                                <select name="document_type" required class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                                    <option value="Image">Gallery Image</option>
                                    <option value="Map">Map / Location Plan</option>
                                    <option value="NOC">NOC / Legal Document</option>
                                    <option value="Floor Plan">Floor Plan / Blueprint</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">File</label>
                                <input type="file" name="document" required class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">Upload</button>
                        <button type="button" onclick="document.getElementById('upload-modal').classList.add('hidden')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
