@extends('layouts.admin')

@section('title', 'Sites')

@section('content')
<div class="space-y-4">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-900">Site Management</h1>
            <p class="text-slate-500 text-sm mt-0.5">Manage client locations and geofencing</p>
        </div>
        <button 
            onclick="window.dispatchEvent(new CustomEvent('open-modal-site'))" 
            class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors font-medium text-sm 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="M12 4v16m8-8H4"></path>
            </svg>
            <span>Add Site</span>
        </button>
    </div>
    
    <!-- Search -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-4">
        <form method="GET" class="flex gap-3">
            <div class="flex-1 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 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>
                </div>
                <input 
                    type="text" 
                    name="search" 
                    value="{{ request('search') }}" 
                    placeholder="Search by site name, address, or client..." 
                    class="w-full pl-10 pr-4 py-2 rounded-lg border-slate-300 focus:ring-emerald-500 focus:border-emerald-500"
                >
            </div>
            <button 
                type="submit" 
                class="px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 transition-colors font-medium text-sm"
            >
                Search
            </button>
            @if(request('search'))
                <a 
                    href="{{ route('admin.sites.index') }}" 
                    class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors font-medium text-sm flex items-center"
                >
                    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">Site</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Client</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Address</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Radius</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-right text-xs font-semibold text-slate-700 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($sites as $site)
                        <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-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center flex-shrink-0">
                                        <svg class="w-5 h-5 text-amber-600" 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>
                                    <div>
                                        <p class="font-semibold text-sm text-slate-900">{{ $site->name }}</p>
                                    </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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                    <span class="text-sm text-slate-600">{{ $site->client?->name ?? 'N/A' }}</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-1.5 text-sm text-slate-600 max-w-xs">
                                    <svg class="w-4 h-4 text-slate-400 flex-shrink-0" 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 class="truncate">{{ $site->address }}</span>
                                </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="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>
                                    <span class="text-sm font-medium text-slate-900">{{ $site->radius_meters }}m</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs font-medium rounded-full {{ $site->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                                    {{ $site->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </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="editSite({{ $site->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.sites.destroy', $site) }}" class="inline w-full" onsubmit="return confirm('Are you sure you want to delete this site? This will also delete all associated inspections and clock events.')">
                                                @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="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>
                                <p class="text-slate-500 text-sm font-medium">No sites found</p>
                                <p class="text-slate-400 text-xs mt-1">
                                    @if(request('search'))
                                        Try adjusting your search criteria
                                    @else
                                        Get started by adding your first site
                                    @endif
                                </p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- Pagination -->
    @if($sites->hasPages())
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm px-4 py-3">
            {{ $sites->links() }}
        </div>
    @endif
</div>

<!-- Add/Edit Site Modal -->
<div x-data="{ 
    open: false,
    isEdit: false, 
    siteId: null,
    modalTitle: 'Add Site',
    submitLabel: 'Add',
    formData: { client_id: '', name: '', address: '', latitude: '', longitude: '', radius_meters: 150, is_active: true },
    map: null,
    marker: null,
    circle: null,
    geocodeTimeout: null
}"
     x-cloak 
         x-on:open-modal-site.window="
            isEdit = false;
            siteId = null;
            modalTitle = 'Add Site';
            submitLabel = 'Add';
            formData = { client_id: '', name: '', address: '', latitude: '', longitude: '', radius_meters: 150, is_active: true };
            open = true;
         "
         x-on:edit-site.window="
            const site = window.siteData ? window.siteData.find(s => s.id === event.detail.id) : null;
            if (site) {
                isEdit = true;
                siteId = site.id;
                modalTitle = 'Edit Site';
                submitLabel = 'Update';
                const location = site.location || null;
                formData = {
                    client_id: site.client_id,
                    name: site.name || '',
                    address: site.address || '',
                    latitude: (location && location.latitude) ? location.latitude : '',
                    longitude: (location && location.longitude) ? location.longitude : '',
                    radius_meters: site.radius_meters || 150,
                    is_active: site.is_active !== undefined ? site.is_active : true
                };
                open = true;
                // Update map location after a short delay to ensure formData is set
                $nextTick(() => {
                    setTimeout(() => {
                        if (formData.latitude && formData.longitude && window.updateMapLocation) {
                            window.updateMapLocation(parseFloat(formData.latitude), parseFloat(formData.longitude));
                            setTimeout(() => {
                                if (window.updateRadius) {
                                    window.updateRadius(formData.radius_meters);
                                }
                            }, 200);
                        }
                    }, 400);
                });
            }
         "
         x-effect="
            if (open) {
                $nextTick(() => {
                    // Wait for modal to be fully visible and rendered
                    setTimeout(() => {
                        const mapElement = document.getElementById('siteMap');
                        if (mapElement && mapElement.offsetWidth > 0 && mapElement.offsetHeight > 0) {
                            if (window.initMap) {
                                window.initMap();
                                // If editing and we have coordinates, update map location
                                if (isEdit && formData.latitude && formData.longitude) {
                                    setTimeout(() => {
                                        if (window.updateMapLocation) {
                                            window.updateMapLocation(parseFloat(formData.latitude), parseFloat(formData.longitude));
                                            setTimeout(() => {
                                                if (window.updateRadius) {
                                                    window.updateRadius(formData.radius_meters);
                                                }
                                            }, 200);
                                        }
                                    }, 100);
                                }
                            }
                        } else {
                            // Retry if element not ready
                            setTimeout(() => {
                                const retryElement = document.getElementById('siteMap');
                                if (retryElement && retryElement.offsetWidth > 0 && retryElement.offsetHeight > 0) {
                                    if (window.initMap) {
                                        window.initMap();
                                        // If editing and we have coordinates, update map location
                                        if (isEdit && formData.latitude && formData.longitude) {
                                            setTimeout(() => {
                                                if (window.updateMapLocation) {
                                                    window.updateMapLocation(parseFloat(formData.latitude), parseFloat(formData.longitude));
                                                    setTimeout(() => {
                                                        if (window.updateRadius) {
                                                            window.updateRadius(formData.radius_meters);
                                                        }
                                                    }, 200);
                                                }
                                            }, 100);
                                        }
                                    }
                                }
                            }, 200);
                        }
                    }, 300);
                });
            } else {
                // Clean up map when modal closes
                window.siteMapState = null;
                const mapElement = document.getElementById('siteMap');
                if (mapElement) {
                    mapElement.removeEventListener('click', handleMapClick);
                }
            }
         "
     x-on:close-modal.window="open = false"
     x-show="open"
     x-cloak
     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-2xl transition-all" @click.stop>
            <!-- Header -->
            <div class="flex items-center justify-between p-6 border-b border-slate-200 bg-gradient-to-r from-amber-50 to-amber-100/50">
                <div class="flex items-center space-x-3">
                    <div class="p-2 bg-amber-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="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>
                    <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 site information and location' : 'Add a new site location with geofencing'"></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 
                x-ref="siteForm"
                method="POST" 
                :action="isEdit ? `/admin/sites/${siteId}` : '{{ route('admin.sites.store') }}'"
                @submit.prevent="
                    const latVal = $refs.latitude.value;
                    const lngVal = $refs.longitude.value;
                    console.log('Validating site form...', { lat: latVal, lng: lngVal });

                    if (!latVal || !lngVal) {
                        alert('Please set a location on the map by clicking on it or using the Find button.');
                        return;
                    }

                    // If you still want formData to have these values for debugging, you can sync them:
                    // formData.latitude = latVal;
                    // formData.longitude = lngVal;

                    $el.submit();
                "
                class="p-6">
                @csrf
                <template x-if="isEdit">
                    <input type="hidden" name="_method" value="PUT">
                </template>
                
                <div class="space-y-5">
                    <!-- Client -->
                    <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                            <span>Client</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="client_id" 
                            x-model="formData.client_id"
                            required 
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all bg-white"
                        >
                            <option value="">Select a client...</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <!-- Site Name -->
                    <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 Name</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="text" 
                            name="name" 
                            x-model="formData.name"
                            required 
                            class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all bg-white"
                            placeholder="Main Office Building"
                        >
                    </div>
                    
                    <!-- Address -->
                    <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>Address</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <div class="flex items-center space-x-2">
                            <input 
                                type="text" 
                                name="address" 
                                x-model="formData.address"
                                @keydown.enter.prevent="window.geocodeAddress && window.geocodeAddress(formData.address)"
                                required 
                                class="flex-1 px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all bg-white"
                                placeholder="123 Main Street, City, State 12345"
                            >
                            <button 
                                type="button"
                                @click="
                                    console.log('Find button clicked, address:', formData.address);
                                    if (window.geocodeAddress) {
                                        window.geocodeAddress(formData.address);
                                    } else {
                                        console.error('geocodeAddress function not found on window');
                                        alert('Geocoding function not available. Please refresh the page.');
                                    }
                                "
                                class="px-4 py-2.5 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors shadow-sm flex items-center space-x-2 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
                                title="Find location on map"
                            >
                                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                                <span class="text-sm font-medium">Find</span>
                            </button>
                        </div>
                        <p class="text-xs text-slate-500 mt-1.5">Type an address and click Find, or press Enter to locate it on the map</p>
                    </div>
                    
    <!-- Map -->
    <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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
            </svg>
            <span>Location & Geofence</span>
            <span class="text-red-500">*</span>
        </label>
        <div 
            id="siteMapContainer" 
            class="w-full h-64 rounded-lg border border-slate-300 overflow-hidden bg-slate-100 relative"
            style="position: relative;"
        >
            <div id="siteMap" class="w-full h-full" style="position: relative; cursor: crosshair;"></div>
            <div id="mapMarker" class="absolute pointer-events-none" style="display: none; transform: translate(-50%, -100%); z-index: 10;">
                <svg class="w-8 h-8 text-amber-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div id="mapCircle" class="absolute pointer-events-none border-2 border-amber-500 rounded-full opacity-20" style="display: none; z-index: 5;"></div>
            
            <!-- Zoom Controls -->
            <div class="absolute top-2 right-2 z-20 flex flex-col space-y-1">
                <button 
                    type="button"
                    onclick="window.zoomIn && window.zoomIn()"
                    class="w-8 h-8 bg-white rounded shadow-md hover:bg-slate-50 flex items-center justify-center border border-slate-300 transition-colors"
                    title="Zoom in"
                >
                    <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                </button>
                <button 
                    type="button"
                    onclick="window.zoomOut && window.zoomOut()"
                    class="w-8 h-8 bg-white rounded shadow-md hover:bg-slate-50 flex items-center justify-center border border-slate-300 transition-colors"
                    title="Zoom out"
                >
                    <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                    </svg>
                </button>
            </div>
        </div>
        <p class="text-xs text-slate-500 mt-1.5">Click on the map to set the location. The circle shows the geofence radius.</p>
        <input type="hidden" name="latitude" x-ref="latitude">
        <input type="hidden" name="longitude" x-ref="longitude">
    </div>
                    
                    <!-- Radius -->
                    <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="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>
                            <span>Geofence Radius</span>
                            <span class="text-red-500">*</span>
                            <span class="ml-auto text-sm font-medium text-amber-600" x-text="formData.radius_meters + 'm'"></span>
                        </label>
                        <div class="space-y-2">
                            <input 
                                type="range" 
                                name="radius_meters" 
                                x-model="formData.radius_meters"
                                @input="window.updateRadius && window.updateRadius(formData.radius_meters)"
                                min="10"
                                max="1000"
                                step="10"
                                value="150" 
                                required 
                                class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer slider"
                            >
                            <div class="flex justify-between text-xs text-slate-400">
                                <span>10m</span>
                                <span>500m</span>
                                <span>1000m</span>
                            </div>
                        </div>
                        <p class="text-xs text-slate-500 mt-1.5">Drag the slider to adjust the geofence radius. The circle on the map updates in real-time.</p>
                    </div>
                    
                    <!-- Active Status -->
                    <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
                        <div class="flex items-start space-x-3">
                            <input 
                                type="hidden" 
                                name="is_active" 
                                value="0"
                            >
                            <input 
                                type="checkbox" 
                                name="is_active" 
                                id="is_active" 
                                x-model="formData.is_active"
                                value="1"
                                class="mt-0.5 rounded border-slate-300 text-amber-600 focus:ring-amber-500 focus:ring-2 w-4 h-4"
                            >
                            <div class="flex-1">
                                <label for="is_active" class="text-sm font-semibold text-slate-700 cursor-pointer block">
                                    Active Status
                                </label>
                                <p class="text-xs text-slate-500 mt-1">Allow cleaners to clock in/out at this site location</p>
                            </div>
                        </div>
                    </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-amber-600 rounded-lg hover:bg-amber-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>

@push('styles')
<style>
    #siteMapContainer { 
        min-height: 256px;
        height: 256px;
        width: 100%;
    }
    
    #siteMap {
        width: 100%;
        height: 100%;
        background-color: #e5e7eb;
    }
    
    /* Prevent Tailwind from affecting map tiles */
    #siteMap img {
        max-width: none !important;
        width: 256px !important;
        height: 256px !important;
    }
    
    /* Custom range slider styling */
    input[type="range"].slider {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }
    
    input[type="range"].slider::-webkit-slider-track {
        background: #e2e8f0;
        height: 8px;
        border-radius: 4px;
    }
    
    input[type="range"].slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #f59e0b;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        margin-top: -6px;
        transition: all 0.2s ease;
    }
    
    input[type="range"].slider::-webkit-slider-thumb:hover {
        background: #d97706;
        transform: scale(1.1);
    }
    
    input[type="range"].slider::-moz-range-track {
        background: #e2e8f0;
        height: 8px;
        border-radius: 4px;
    }
    
    input[type="range"].slider::-moz-range-thumb {
        background: #f59e0b;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    input[type="range"].slider::-moz-range-thumb:hover {
        background: #d97706;
        transform: scale(1.1);
    }
</style>
@endpush

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

        function editSite(id) {
            window.dispatchEvent(new CustomEvent('edit-site', { detail: { id: id } }));
        }
        
        // Make editSite globally available
        window.editSite = editSite;

// Map initialization and management using OpenStreetMap static tiles
function initMap() {
    const mapElement = document.getElementById('siteMap');
    if (!mapElement) {
        console.warn('Map element not found');
        return;
    }
    
    // Check if element is visible
    if (mapElement.offsetWidth === 0 || mapElement.offsetHeight === 0) {
        console.warn('Map element not visible yet, retrying...');
        setTimeout(() => initMap(), 200);
        return;
    }
    
    // Default center (New York)
    let centerLat = 40.7128;
    let centerLng = -74.0060;
    let zoom = 13;
    
    // Check if we have existing coordinates
    const modal = document.querySelector('[x-data*="open"]');
    if (modal && modal._x_dataStack && modal._x_dataStack[0]) {
        const alpineData = modal._x_dataStack[0];
        if (alpineData && alpineData.formData && alpineData.formData.latitude && alpineData.formData.longitude) {
            centerLat = parseFloat(alpineData.formData.latitude);
            centerLng = parseFloat(alpineData.formData.longitude);
            zoom = 15;
        }
    }
    
    // Load OpenStreetMap tiles using static tile approach
    loadMapTiles(centerLat, centerLng, zoom);
    
    // Set up click handler
    mapElement.addEventListener('click', handleMapClick);
    
    // Update location if we have coordinates
    if (centerLat !== 40.7128 || centerLng !== -74.0060) {
        setTimeout(() => {
            updateMapLocation(centerLat, centerLng);
            // Show circle after map location is updated
            setTimeout(() => {
                if (window.updateRadius) {
                    window.updateRadius();
                }
            }, 300);
        }, 300);
    }
    
    console.log('Map initialized successfully');
}

function loadMapTiles(centerLat, centerLng, zoom) {
    const mapElement = document.getElementById('siteMap');
    if (!mapElement) return;
    
    // Calculate tile coordinates for center
    const n = Math.pow(2, zoom);
    const latRad = centerLat * Math.PI / 180;
    const tileX = Math.floor((centerLng + 180) / 360 * n);
    const tileY = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n);
    
    // Calculate pixel position within center tile
    const tileSize = 256;
    const pixelX = ((centerLng + 180) / 360 * n * tileSize) % tileSize;
    const pixelY = ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n * tileSize) % tileSize;
    
    // Clear existing content
    mapElement.innerHTML = '';
    mapElement.style.position = 'relative';
    mapElement.style.overflow = 'hidden';
    
    // Create tile container
    const container = document.createElement('div');
    container.style.position = 'absolute';
    container.style.width = '100%';
    container.style.height = '100%';
    
    const containerWidth = mapElement.offsetWidth;
    const containerHeight = mapElement.offsetHeight;
    const centerX = containerWidth / 2;
    const centerY = containerHeight / 2;
    
    // Calculate how many tiles we need to cover the container
    const tilesNeededX = Math.ceil(containerWidth / tileSize) + 2;
    const tilesNeededY = Math.ceil(containerHeight / tileSize) + 2;
    
    const startTileX = tileX - Math.floor(tilesNeededX / 2);
    const startTileY = tileY - Math.floor(tilesNeededY / 2);
    
    // Calculate offset to center the map
    const offsetX = centerX - pixelX - (tileX - startTileX) * tileSize;
    const offsetY = centerY - pixelY - (tileY - startTileY) * tileSize;
    
    container.style.left = offsetX + 'px';
    container.style.top = offsetY + 'px';
    
    // Load tiles in a grid
    for (let y = 0; y < tilesNeededY; y++) {
        for (let x = 0; x < tilesNeededX; x++) {
            const tx = startTileX + x;
            const ty = startTileY + y;
            
            if (tx >= 0 && ty >= 0 && tx < n && ty < n) {
                const img = document.createElement('img');
                img.src = `https://tile.openstreetmap.org/${zoom}/${tx}/${ty}.png`;
                img.style.position = 'absolute';
                img.style.left = (x * tileSize) + 'px';
                img.style.top = (y * tileSize) + 'px';
                img.style.width = tileSize + 'px';
                img.style.height = tileSize + 'px';
                img.style.display = 'block';
                img.style.maxWidth = 'none';
                img.style.objectFit = 'none';
                img.alt = '';
                img.onerror = function() {
                    console.warn('Failed to load tile:', img.src);
                };
                container.appendChild(img);
            }
        }
    }
    
    mapElement.appendChild(container);
    
    // Store map state for click calculations and zoom
    window.siteMapState = {
        centerLat,
        centerLng,
        zoom,
        tileX,
        tileY,
        pixelX,
        pixelY,
        startTileX,
        startTileY,
        offsetX,
        offsetY,
        container
    };
}

function zoomIn() {
    if (!window.siteMapState) {
        console.warn('Map state not found');
        return;
    }
    
    const currentZoom = window.siteMapState.zoom;
    if (currentZoom >= 19) {
        console.log('Already at maximum zoom');
        return;
    }
    
    const newZoom = currentZoom + 1;
    const centerLat = window.siteMapState.centerLat;
    const centerLng = window.siteMapState.centerLng;
    
    loadMapTiles(centerLat, centerLng, newZoom);
    
    // Update marker position
    const marker = document.getElementById('mapMarker');
    if (marker && marker.style.display !== 'none') {
        marker.style.display = 'block';
        marker.style.left = '50%';
        marker.style.top = '50%';
    }
    
    // Update circle after tiles load
    setTimeout(() => {
        if (window.updateRadius) {
            window.updateRadius();
        }
    }, 200);
}

function zoomOut() {
    if (!window.siteMapState) {
        console.warn('Map state not found');
        return;
    }
    
    const currentZoom = window.siteMapState.zoom;
    if (currentZoom <= 1) {
        console.log('Already at minimum zoom');
        return;
    }
    
    const newZoom = currentZoom - 1;
    const centerLat = window.siteMapState.centerLat;
    const centerLng = window.siteMapState.centerLng;
    
    loadMapTiles(centerLat, centerLng, newZoom);
    
    // Update marker position
    const marker = document.getElementById('mapMarker');
    if (marker && marker.style.display !== 'none') {
        marker.style.display = 'block';
        marker.style.left = '50%';
        marker.style.top = '50%';
    }
    
    // Update circle after tiles load
    setTimeout(() => {
        if (window.updateRadius) {
            window.updateRadius();
        }
    }, 200);
}

function handleMapClick(e) {
    const mapElement = document.getElementById('siteMap');
    if (!mapElement || !window.siteMapState) return;
    
    const rect = mapElement.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    
    // Convert pixel coordinates to lat/lng using stored map state
    const { zoom, startTileX, startTileY, offsetX, offsetY } = window.siteMapState;
    const tileSize = 256;
    const n = Math.pow(2, zoom);
    
    const relativeX = clickX - offsetX;
    const relativeY = clickY - offsetY;

    const tileX = startTileX + Math.floor(relativeX / tileSize);
    const tileY = startTileY + Math.floor(relativeY / tileSize);
    const pixelX = ((relativeX % tileSize) + tileSize) % tileSize;
    const pixelY = ((relativeY % tileSize) + tileSize) % tileSize;

    const worldX = (tileX + pixelX / tileSize) / n;
    const worldY = (tileY + pixelY / tileSize) / n;
    
    // Convert to lat/lng
    const newLng = worldX * 360 - 180;
    const newLat = Math.atan(Math.sinh(Math.PI * (1 - 2 * worldY))) * 180 / Math.PI;
    
    // --- UPDATE HIDDEN INPUTS DIRECTLY ---
    const form = document.querySelector('form[x-ref="siteForm"]') || document.querySelector('form');
    if (form) {
        const latInput = form.querySelector('input[name="latitude"]');
        const lngInput = form.querySelector('input[name="longitude"]');

        const latStr = newLat.toFixed(7);
        const lngStr = newLng.toFixed(7);

        if (latInput) latInput.value = latStr;
        if (lngInput) lngInput.value = lngStr;

        console.log('Updated coordinates from map click:', { latitude: latStr, longitude: lngStr });
    }

    updateMapLocation(newLat, newLng);
}

function updateMapLocation(lat, lng) {
    if (!lat || !lng) {
        console.warn('Cannot update map location - coordinates missing');
        return;
    }
    
    // Use current zoom level if available, otherwise default to 15
    const currentZoom = window.siteMapState?.zoom || 15;
    
    // Reload map tiles centered on new location
    loadMapTiles(lat, lng, currentZoom);
    
    // Update marker position
    const marker = document.getElementById('mapMarker');
    if (marker) {
        marker.style.display = 'block';
        marker.style.left = '50%';
        marker.style.top = '50%';
    }
    
    // Update circle after a short delay to ensure Alpine data is synced
    setTimeout(() => {
        if (window.updateRadius) {
            window.updateRadius();
        }
    }, 100);
}

function updateRadius(currentRadius) {
    const circle = document.getElementById('mapCircle');
    const container = document.getElementById('siteMapContainer');

    if (!circle || !container) {
        console.warn('Circle or container not found');
        return;
    }

    const modal = document.querySelector('[x-data*="open"]');
    if (!modal) {
        console.warn('Modal not found');
        return;
    }

    // ----- Get radius (meters) -----
    let radius = parseInt(currentRadius);

    // If no radius passed in, fall back to Alpine / input value
    if (!radius || isNaN(radius)) {
        if (modal._x_dataStack && modal._x_dataStack[0]?.formData) {
            const alpineData = modal._x_dataStack[0];
            if (alpineData.formData.radius_meters) {
                radius = parseInt(alpineData.formData.radius_meters) || 150;
            }
        }

        if (!radius || isNaN(radius)) {
            const radiusInput = modal.querySelector('input[name="radius_meters"]');
            if (radiusInput) {
                radius = parseInt(radiusInput.value) || 150;
            } else {
                radius = 150;
            }
        }
    }

    // ----- Map radius 10–1000m -> pixels -----
    const maxRadiusMeters = 1000; // slider max
    const minRadiusMeters = 10;   // slider min

    const clampedRadius = Math.min(
        maxRadiusMeters,
        Math.max(minRadiusMeters, radius)
    );

    // Use smaller dimension so circle always fits
    const maxCircleDiameter =
        Math.min(container.offsetWidth, container.offsetHeight) - 20; // padding

    const radiusPixels =
        (clampedRadius / maxRadiusMeters) * (maxCircleDiameter / 2);

    // ----- Apply styles (GREEN) -----
    circle.style.display = 'block';
    circle.style.width = radiusPixels * 2 + 'px';
    circle.style.height = radiusPixels * 2 + 'px';
    circle.style.left = '50%';
    circle.style.top = '50%';
    circle.style.transform = 'translate(-50%, -50%)';

    // Nice green fill + border
    circle.style.backgroundColor = 'rgba(22, 163, 74, 0.15)'; // Tailwind emerald-600 with opacity
    circle.style.borderColor = '#16a34a';                      // emerald-600
    circle.style.borderWidth = '2px';
    circle.style.borderStyle = 'solid';
    circle.style.borderRadius = '50%';
}

async function geocodeAddress(address) {
    console.log('geocodeAddress called with:', address);
    
    // Prevent multiple simultaneous geocoding requests
    if (window.geocodingInProgress) {
        console.log('Geocoding already in progress, skipping...');
        return;
    }
    
    const modal = document.querySelector('[x-data*="open"]');
    if (!modal) {
        console.warn('Modal not found');
        alert('Modal not found. Please try again.');
        return;
    }
    
    const value = (address || '').trim();
    if (!value || value.length < 5) {
        alert('Please enter an address (at least 5 characters)');
        return;
    }
    
    // Set flag to prevent concurrent requests
    window.geocodingInProgress = true;
    
    const findButton = modal.querySelector('button[title="Find location on map"]');
    const buttonText = findButton?.querySelector('span');
    const originalText = buttonText?.textContent;
    
    if (findButton && buttonText) {
        findButton.disabled = true;
        buttonText.textContent = 'Finding...';
    }
    
    try {
        const response = await fetch(
            `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
                value
            )}&limit=1&addressdetails=1`
        );
        
        if (!response.ok) {
            throw new Error('Geocoding request failed');
        }
        
        const data = await response.json();
        console.log('Geocoding response:', data);
        
        if (!data || !data.length) {
            alert('Address not found. Please try a more specific address.');
            return;
        }
        
        const lat = parseFloat(data[0].lat);
        const lng = parseFloat(data[0].lon);

        const latStr = lat.toFixed(7);
        const lngStr = lng.toFixed(7);

        // --- UPDATE HIDDEN INPUTS DIRECTLY ---
        const form = document.querySelector('form[x-ref="siteForm"]') || document.querySelector('form');
        const latInput = form?.querySelector('input[name="latitude"]');
        const lngInput = form?.querySelector('input[name="longitude"]');

        if (latInput) latInput.value = latStr;
        if (lngInput) lngInput.value = lngStr;

        console.log('Updated coordinates from geocoding:', {
            latitude: latStr,
            longitude: lngStr,
            latInputFound: !!latInput,
            lngInputFound: !!lngInput
        });

        // Center map and update circle
        updateMapLocation(lat, lng);
        setTimeout(() => {
            if (window.updateRadius) window.updateRadius();
        }, 200);
    } catch (error) {
        console.error('Geocoding error:', error);
        alert('Failed to geocode address. Please try again.');
    } finally {
        // Clear the flag
        window.geocodingInProgress = false;
        
        if (findButton && buttonText && originalText) {
            findButton.disabled = false;
            buttonText.textContent = originalText;
        }
    }
}

// Make functions available globally for Alpine
window.initMap = initMap;
window.updateMapLocation = updateMapLocation;
window.updateRadius = updateRadius;
window.geocodeAddress = geocodeAddress;
window.zoomIn = zoomIn;
window.zoomOut = zoomOut;

// Initialize geocoding flag
window.geocodingInProgress = false;

        // Debug: Log that functions are available
        console.log('Map functions initialized:', {
            initMap: typeof window.initMap,
            updateMapLocation: typeof window.updateMapLocation,
            geocodeAddress: typeof window.geocodeAddress,
            zoomIn: typeof window.zoomIn,
            zoomOut: typeof window.zoomOut
        });
    }
    
    // Wait for Alpine to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            if (window.Alpine && window.Alpine.version) {
                initializeSiteManagement();
            } else {
                document.addEventListener('alpine:init', initializeSiteManagement, { once: true });
            }
        });
    } else {
        // DOM already loaded
        if (window.Alpine && window.Alpine.version) {
            initializeSiteManagement();
        } else {
            document.addEventListener('alpine:init', initializeSiteManagement, { once: true });
        }
    }
})();
</script>
@endpush
@endsection