@extends('layouts.admin')

@section('title', 'Inspections')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-900">Inspections</h1>
            <p class="text-slate-500 text-sm mt-0.5">Manage site inspections and track their progress.</p>
        </div>
        <button onclick="window.dispatchEvent(new CustomEvent('open-modal-inspection'))" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            Add Inspection
        </button>
    </div>

    <!-- Search & Filters -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-4">
        <form method="GET" class="flex items-center space-x-3">
            <div class="relative flex-1">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search inspections by title, description, or site..." class="w-full pl-9 pr-3 py-2 rounded-lg border-slate-300 focus:ring-indigo-500 focus:border-indigo-500 text-sm transition-all duration-200">
            </div>
            <select name="status" class="px-4 py-2 rounded-lg border-slate-300 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                <option value="">All Status</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                <option value="done" {{ request('status') === 'done' ? 'selected' : '' }}>Done</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 transition-colors text-sm">Search</button>
            @if(request('search') || request('status'))
                <a href="{{ route('admin.inspections.index') }}" class="px-4 py-2 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">Clear</a>
            @endif
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm">
        <div class="overflow-x-auto md:overflow-visible relative">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Inspection</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Site</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Created By</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Completed</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-slate-700 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($inspections as $inspection)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                                        <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm text-slate-900">{{ $inspection->title }}</p>
                                        @if($inspection->description)
                                            <p class="text-xs text-slate-500 mt-0.5 line-clamp-1">{{ Str::limit($inspection->description, 50) }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-1.5">
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                    <div>
                                        <span class="text-sm text-slate-900 font-medium">{{ $inspection->site->name }}</span>
                                        <p class="text-xs text-slate-500">{{ $inspection->site->client->name ?? 'N/A' }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-amber-100 text-amber-700',
                                        'in_progress' => 'bg-blue-100 text-blue-700',
                                        'done' => 'bg-emerald-100 text-emerald-700',
                                    ];
                                    @endphp
                                <span class="px-2 py-1 text-xs font-medium rounded-full {{ $statusColors[$inspection->status] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ ucfirst(str_replace('_', ' ', $inspection->status)) }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-1.5">
                                    <div class="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0">
                                        <span class="text-slate-600 font-semibold text-xs">{{ strtoupper(substr($inspection->creator->name, 0, 1)) }}</span>
                                    </div>
                                    <span class="text-sm text-slate-600">{{ $inspection->creator->name }}</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                @if($inspection->completed_at)
                                    <div>
                                        <p class="text-sm text-slate-900 font-medium">{{ $inspection->completer->name ?? 'N/A' }}</p>
                                        <p class="text-xs text-slate-500">{{ $inspection->completed_at->format('M d, Y H:i') }}</p>
                                    </div>
                                @else
                                    <span class="text-sm text-slate-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-end">
                                    <div class="relative" x-data="{ open: false }">
                                        <button 
                                            type="button"
                                            @click.stop="open = !open"
                                            class="p-1.5 text-slate-400 hover:text-slate-600 transition-colors"
                                        >
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                            </svg>
                                        </button>
                                        <div 
                                            x-show="open"
                                            @click.stop
                                            @click.away="open = false"
                                            x-transition
                                            class="absolute right-0 mt-1 w-48 bg-white rounded-lg shadow-lg border border-slate-200 py-1 z-50"
                                            style="display: none;"
                                        >
                                            <button
                                                onclick="viewInspection({{ $inspection->id }})"
                                                class="w-full text-left px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 flex items-center space-x-2"
                                            >
                                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                                </svg>
                                                <span>View</span>
                                            </button>
                                            <button
                                                onclick="editInspection({{ $inspection->id }})"
                                                class="w-full text-left px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 flex items-center space-x-2"
                                            >
                                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                                <span>Edit</span>
                                            </button>
                                            <div class="border-t border-slate-100 my-1"></div>
                                            <form method="POST" action="{{ route('admin.inspections.destroy', $inspection) }}" class="inline w-full" onsubmit="return confirm('Are you sure you want to delete this inspection? This will also delete all associated photos and notes.')">
                                                @csrf @method('DELETE')
                                                <button
                                                    type="submit"
                                                    class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
                                                >
                                                    <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>
                                                    <span>Delete</span>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-12 text-center">
                                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-3">
                                    <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                                    </svg>
                                </div>
                                <p class="text-slate-500 text-sm font-medium">No inspections found</p>
                                <p class="text-slate-400 text-xs mt-1">
                                    @if(request('search') || request('status'))
                                        Try adjusting your search criteria
                                    @else
                                        Get started by adding your first inspection
                                    @endif
                                </p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($inspections->hasPages())
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm px-4 py-3">
            {{ $inspections->links() }}
        </div>
    @endif
</div>

<!-- Add/Edit Inspection Modal -->
<div x-data="{ 
    open: false,
    isEdit: false,
    inspectionId: null,
    modalTitle: 'Add Inspection',
    submitLabel: 'Add',
    formData: { site_id: '', title: '', description: '', status: 'pending' }
}"
     x-cloak
     x-on:open-modal-inspection.window="
        isEdit = false;
        inspectionId = null;
        modalTitle = 'Add Inspection';
        submitLabel = 'Add';
        formData = { site_id: '', title: '', description: '', status: 'pending' };
        open = true;
     "
     x-on:edit-inspection.window="
        const inspection = window.inspectionData ? window.inspectionData.find(i => i.id === event.detail.id) : null;
        if (inspection) {
            isEdit = true;
            inspectionId = inspection.id;
            modalTitle = 'Edit Inspection';
            submitLabel = 'Update';
            formData = {
                site_id: inspection.site_id || '',
                title: inspection.title || '',
                description: inspection.description || '',
                status: inspection.status || 'pending'
            };
            open = true;
        }
     "
     x-on:close-modal.window="open = false"
     x-show="open"
     class="fixed inset-0 z-50 overflow-y-auto"
     style="display: none;"
     @keydown.escape.window="open = false">
    <!-- Overlay -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" @click="open = false"></div>

    <!-- Modal -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg transform transition-all" @click.stop>
            <!-- Header -->
            <div class="flex items-center justify-between p-6 border-b border-slate-200 bg-gradient-to-r from-indigo-50 to-indigo-100/50">
                <div class="flex items-center space-x-3">
                    <div class="p-2 bg-indigo-600 rounded-lg">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900" x-text="modalTitle"></h3>
                        <p class="text-xs text-slate-500 mt-0.5" x-text="isEdit ? 'Update inspection information' : 'Create a new inspection for a site'"></p>
                    </div>
                </div>
                <button @click="open = false" class="text-slate-400 hover:text-slate-600 transition-colors p-1 hover:bg-slate-100 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <!-- Content -->
            <form
                method="POST"
                :action="isEdit ? `/admin/inspections/${inspectionId}` : '{{ route('admin.inspections.store') }}'"
                enctype="multipart/form-data"
                class="p-6">
                @csrf
                <template x-if="isEdit">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <div class="space-y-5">
                    <!-- Site -->
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2 flex items-center space-x-1.5">
                            <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span>Site</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="site_id" 
                            x-model="formData.site_id"
                            required 
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white"
                        >
                            <option value="">Select a site...</option>
                            @foreach($sites as $site)
                                <option value="{{ $site->id }}">{{ $site->name }} - {{ $site->client->name ?? 'N/A' }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Title -->
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2 flex items-center space-x-1.5">
                            <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                            </svg>
                            <span>Title</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="text" 
                            name="title" 
                            x-model="formData.title"
                            required 
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white"
                            placeholder="Weekly Cleaning Inspection"
                        >
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2 flex items-center space-x-1.5">
                            <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
                            </svg>
                            <span>Description</span>
                            <span class="text-xs text-slate-400 font-normal">(optional)</span>
                        </label>
                        <textarea 
                            name="description" 
                            x-model="formData.description"
                            rows="4"
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white resize-none"
                            placeholder="Add any additional details or instructions for this inspection..."
                        ></textarea>
                    </div>

                    <!-- Photos (only for add) -->
                    <div x-show="!isEdit" x-data="{ photoPreviews: [] }">
                        <label class="block text-sm font-semibold text-slate-700 mb-2 flex items-center space-x-1.5">
                            <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <span>Photos</span>
                            <span class="text-xs text-slate-400 font-normal">(optional)</span>
                        </label>
                        <input 
                            type="file" 
                            name="photos[]" 
                            multiple 
                            accept="image/*"
                            @change="
                                photoPreviews = [];
                                if ($event.target.files && $event.target.files.length > 0) {
                                    Array.from($event.target.files).forEach((file, index) => {
                                        if (file.type.startsWith('image/')) {
                                            const reader = new FileReader();
                                            reader.onload = (e) => {
                                                photoPreviews.push({ index: index, src: e.target.result, name: file.name });
                                            };
                                            reader.readAsDataURL(file);
                                        }
                                    });
                                }
                            "
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
                        >
                        <p class="text-xs text-slate-500 mt-1.5">You can select multiple photos. Maximum 5MB per photo.</p>
                        <div x-show="photoPreviews.length > 0" class="mt-3 grid grid-cols-4 gap-2">
                            <template x-for="(preview, idx) in photoPreviews" :key="idx">
                                <div class="relative aspect-square rounded-lg overflow-hidden bg-slate-100">
                                    <img :src="preview.src" :alt="preview.name" class="w-full h-full object-cover">
                                    <button 
                                        type="button" 
                                        @click="
                                            const input = $el.closest('form').querySelector('input[name=\"photos[]\"]');
                                            const dt = new DataTransfer();
                                            Array.from(input.files).forEach((file, i) => {
                                                if (i !== preview.index) dt.items.add(file);
                                            });
                                            input.files = dt.files;
                                            photoPreviews = photoPreviews.filter((p, i) => i !== idx);
                                            // Update indices
                                            photoPreviews.forEach((p, i) => p.index = i);
                                        "
                                        class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600 transition-colors"
                                    >
                                        ×
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Status (only for edit) -->
                    <div x-show="isEdit">
                        <label class="block text-sm font-semibold text-slate-700 mb-2 flex items-center space-x-1.5">
                            <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>Status</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="status" 
                            x-model="formData.status"
                            x-bind:required="isEdit"
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white"
                        >
                            <option value="pending">Pending</option>
                            <option value="in_progress">In Progress</option>
                            <option value="done">Done</option>
                        </select>
                    </div>
                </div>

                <!-- Footer -->
                <div class="flex justify-end space-x-3 mt-8 pt-6 border-t border-slate-200">
                    <button type="button"
                            @click="open = false"
                            class="px-5 py-2.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-5 py-2.5 text-sm font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors shadow-sm hover:shadow-md flex items-center space-x-2">
                        <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="M5 13l4 4L19 7"></path>
                        </svg>
                        <span x-text="submitLabel"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Inspection Modal -->
<div x-data="{ 
    open: false,
    loading: false,
    inspection: null
}"
     x-cloak
     x-on:view-inspection.window="
        open = true;
        loading = true;
        inspection = null;
        fetch('/admin/inspections/' + event.detail.id + '?json=1')
            .then(response => response.json())
            .then(data => {
                inspection = data.inspection;
                loading = false;
            })
            .catch(error => {
                console.error('Error loading inspection:', error);
                loading = false;
                alert('Failed to load inspection details.');
            });
     "
     x-on:close-modal.window="open = false"
     x-show="open"
     class="fixed inset-0 z-50 overflow-y-auto"
     style="display: none;"
     @keydown.escape.window="open = false">
    <!-- Overlay -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" @click="open = false"></div>

    <!-- Modal -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col transform transition-all" @click.stop>
            <!-- Header -->
            <div class="flex items-center justify-between p-6 border-b border-slate-200 bg-gradient-to-r from-indigo-50 to-indigo-100/50 flex-shrink-0">
                <div class="flex items-center space-x-3">
                    <div class="p-2 bg-indigo-600 rounded-lg">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900" x-text="inspection ? inspection.title : 'Inspection Details'"></h3>
                        <p class="text-xs text-slate-500 mt-0.5" x-show="inspection" x-text="inspection ? (inspection.site.name + ' • ' + inspection.site.client) : ''"></p>
                    </div>
                </div>
                <button @click="open = false" class="text-slate-400 hover:text-slate-600 transition-colors p-1 hover:bg-slate-100 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-6">
                <!-- Loading State -->
                <div x-show="loading" class="flex items-center justify-center py-12">
                    <div class="text-center">
                        <svg class="animate-spin h-8 w-8 text-indigo-600 mx-auto mb-4" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <p class="text-slate-500 text-sm">Loading inspection details...</p>
                    </div>
                </div>

                <!-- Inspection Details -->
                <div x-show="!loading && inspection" class="space-y-6">
                    <!-- Status & Info -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <template x-if="inspection">
                                <span class="px-3 py-1 rounded-full text-sm font-medium"
                                      :class="{
                                          'bg-emerald-100 text-emerald-700': inspection.status === 'done',
                                          'bg-blue-100 text-blue-700': inspection.status === 'in_progress',
                                          'bg-amber-100 text-amber-700': inspection.status === 'pending'
                                      }"
                                      x-text="inspection.status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())"></span>
                            </template>
                        </div>
                        <div class="text-sm text-slate-500">
                            <p>Created: <span x-text="inspection ? inspection.created_at : ''"></span></p>
                            <p x-show="inspection && inspection.completed_at">Completed: <span x-text="inspection.completed_at"></span></p>
                        </div>
                    </div>

                    <!-- Description -->
                    <div x-show="inspection && inspection.description" class="bg-slate-50 rounded-lg p-4 border border-slate-200">
                        <h4 class="text-sm font-semibold text-slate-700 mb-2">Description</h4>
                        <p class="text-slate-600 text-sm whitespace-pre-wrap" x-text="inspection ? inspection.description : ''"></p>
                    </div>

                    <!-- Admin Section -->
                    <div class="border-t border-slate-200 pt-6">
                        <div class="flex items-center space-x-2 mb-4">
                            <div class="p-1.5 bg-indigo-100 rounded-lg">
                                <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                </svg>
                            </div>
                            <h3 class="text-base font-semibold text-slate-900">Admin Section</h3>
                            <span class="text-xs text-slate-500">(Created by <span x-text="inspection ? inspection.creator.name : ''"></span>)</span>
                        </div>

                        <!-- Admin Photos -->
                        <div x-show="inspection && inspection.admin_photos && inspection.admin_photos.length > 0" class="mb-6">
                            <h4 class="text-sm font-semibold text-slate-700 mb-3 flex items-center space-x-2">
                                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span>Photos (<span x-text="inspection ? inspection.admin_photos.length : 0"></span>)</span>
                            </h4>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <template x-for="photo in (inspection ? inspection.admin_photos : [])" :key="photo.id">
                                    <a :href="photo.path" target="_blank" class="aspect-square rounded-lg overflow-hidden bg-slate-100 hover:opacity-90 transition-opacity border-2 border-indigo-200">
                                        <img :src="photo.path" :alt="photo.caption || 'Admin photo'" class="w-full h-full object-cover">
                                    </a>
                                </template>
                            </div>
                        </div>

                        <!-- Admin Notes -->
                        <div x-show="inspection && inspection.admin_notes && inspection.admin_notes.length > 0">
                            <h4 class="text-sm font-semibold text-slate-700 mb-3 flex items-center space-x-2">
                                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                                <span>Notes (<span x-text="inspection ? inspection.admin_notes.length : 0"></span>)</span>
                            </h4>
                            <div class="space-y-3">
                                <template x-for="note in (inspection ? inspection.admin_notes : [])" :key="note.id">
                                    <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-indigo-50 rounded-r-lg">
                                        <p class="text-slate-700 text-sm whitespace-pre-wrap" x-text="note.note"></p>
                                        <p class="text-xs text-slate-500 mt-1.5" x-text="note.user + ' • ' + note.created_at"></p>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Admin Empty State -->
                        <div x-show="inspection && (!inspection.admin_photos || inspection.admin_photos.length === 0) && (!inspection.admin_notes || inspection.admin_notes.length === 0)" class="text-center py-6 text-slate-400 text-sm bg-slate-50 rounded-lg border border-slate-200">
                            <p>No admin photos or notes added yet.</p>
                        </div>
                    </div>

                    <!-- Cleaner Section -->
                    <div class="border-t border-slate-200 pt-6 mt-6">
                        <div class="flex items-center space-x-2 mb-4">
                            <div class="p-1.5 bg-emerald-100 rounded-lg">
                                <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                </svg>
                            </div>
                            <h3 class="text-base font-semibold text-slate-900">Cleaner Section</h3>
                            <span class="text-xs text-slate-500" x-show="inspection && inspection.completer">
                                (Completed by <span x-text="inspection.completer.name"></span>)
                            </span>
                            <span class="text-xs text-slate-400" x-show="inspection && !inspection.completer">
                                (Not completed yet)
                            </span>
                        </div>

                        <!-- Cleaner Photos -->
                        <div x-show="inspection && inspection.cleaner_photos && inspection.cleaner_photos.length > 0" class="mb-6">
                            <h4 class="text-sm font-semibold text-slate-700 mb-3 flex items-center space-x-2">
                                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span>Photos (<span x-text="inspection ? inspection.cleaner_photos.length : 0"></span>)</span>
                            </h4>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <template x-for="photo in (inspection ? inspection.cleaner_photos : [])" :key="photo.id">
                                    <a :href="photo.path" target="_blank" class="aspect-square rounded-lg overflow-hidden bg-slate-100 hover:opacity-90 transition-opacity border-2 border-emerald-200">
                                        <img :src="photo.path" :alt="photo.caption || 'Cleaner photo'" class="w-full h-full object-cover">
                                    </a>
                                </template>
                            </div>
                        </div>

                        <!-- Cleaner Notes -->
                        <div x-show="inspection && inspection.cleaner_notes && inspection.cleaner_notes.length > 0">
                            <h4 class="text-sm font-semibold text-slate-700 mb-3 flex items-center space-x-2">
                                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                                <span>Notes (<span x-text="inspection ? inspection.cleaner_notes.length : 0"></span>)</span>
                            </h4>
                            <div class="space-y-3">
                                <template x-for="note in (inspection ? inspection.cleaner_notes : [])" :key="note.id">
                                    <div class="border-l-4 border-emerald-500 pl-4 py-2 bg-emerald-50 rounded-r-lg">
                                        <p class="text-slate-700 text-sm whitespace-pre-wrap" x-text="note.note"></p>
                                        <p class="text-xs text-slate-500 mt-1.5" x-text="note.user + ' • ' + note.created_at"></p>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Cleaner Empty State -->
                        <div x-show="inspection && (!inspection.cleaner_photos || inspection.cleaner_photos.length === 0) && (!inspection.cleaner_notes || inspection.cleaner_notes.length === 0)" class="text-center py-6 text-slate-400 text-sm bg-slate-50 rounded-lg border border-slate-200">
                            <p>No cleaner photos or notes added yet.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Ensure Alpine is ready before initializing
(function() {
    function initializeInspectionManagement() {
        // Make inspectionData globally available for Alpine.js
        window.inspectionData = @json($allInspections);

        function editInspection(id) {
            window.dispatchEvent(new CustomEvent('edit-inspection', { detail: { id: id } }));
        }
        
        function viewInspection(id) {
            window.dispatchEvent(new CustomEvent('view-inspection', { detail: { id: id } }));
        }
        
        // Make functions globally available
        window.editInspection = editInspection;
        window.viewInspection = viewInspection;
    }
    
    // Wait for Alpine to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            if (window.Alpine && window.Alpine.version) {
                initializeInspectionManagement();
            } else {
                document.addEventListener('alpine:init', initializeInspectionManagement, { once: true });
            }
        });
    } else {
        // DOM already loaded
        if (window.Alpine && window.Alpine.version) {
            initializeInspectionManagement();
        } else {
            document.addEventListener('alpine:init', initializeInspectionManagement, { once: true });
        }
    }
})();
</script>
@endpush
@endsection