COMPONENT: App\Filament\Monitor\Resources\SitePresenceResource\Pages\ManageSitePresences
HTML:
<div wire:snapshot="{&quot;data&quot;:{&quot;mapSites&quot;:[[[{&quot;id&quot;:3,&quot;name&quot;:&quot;Kisumu Highway Bypass&quot;,&quot;location_name&quot;:&quot;Kisumu City&quot;,&quot;latitude&quot;:-0.1,&quot;longitude&quot;:34.75,&quot;radius&quot;:400},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;id&quot;:4,&quot;name&quot;:&quot;HOSPITAL&quot;,&quot;location_name&quot;:&quot;Upper Hill Road&quot;,&quot;latitude&quot;:-1.29291081,&quot;longitude&quot;:36.81607333,&quot;radius&quot;:200},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;id&quot;:2,&quot;name&quot;:&quot;Mombasa Bridge Project&quot;,&quot;location_name&quot;:&quot;Mombasa Port&quot;,&quot;latitude&quot;:-4.05104768,&quot;longitude&quot;:39.66630929,&quot;radius&quot;:50},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;id&quot;:6,&quot;name&quot;:&quot;Nairobi Office Tower&quot;,&quot;location_name&quot;:&quot;Upper Hill, Nairobi&quot;,&quot;latitude&quot;:-1.300556,&quot;longitude&quot;:36.814444,&quot;radius&quot;:200},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;id&quot;:1,&quot;name&quot;:&quot;CHRISCO NLC&quot;,&quot;location_name&quot;:&quot;BUNYALA&quot;,&quot;latitude&quot;:-1.29573982,&quot;longitude&quot;:36.82777289,&quot;radius&quot;:50},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;id&quot;:8,&quot;name&quot;:&quot;PROSEL HQ&quot;,&quot;location_name&quot;:&quot;ALBIZIA ESTATE, THIKA&quot;,&quot;latitude&quot;:-1.03158622,&quot;longitude&quot;:37.0237114,&quot;radius&quot;:20},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;mapWorkers&quot;:[[[{&quot;worker_id&quot;:3,&quot;worker_name&quot;:&quot;Bob Johnson&quot;,&quot;site_id&quot;:8,&quot;site_name&quot;:&quot;PROSEL HQ&quot;,&quot;latitude&quot;:-1.03236,&quot;longitude&quot;:37.02443833,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;gps&quot;,&quot;last_seen&quot;:&quot;15:13:56&quot;,&quot;last_seen_ago&quot;:317,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;worker_id&quot;:2,&quot;worker_name&quot;:&quot;Jane Hamisi&quot;,&quot;site_id&quot;:8,&quot;site_name&quot;:&quot;PROSEL HQ&quot;,&quot;latitude&quot;:-1.35,&quot;longitude&quot;:36.9,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;geofence&quot;,&quot;last_seen&quot;:&quot;14:08:49&quot;,&quot;last_seen_ago&quot;:382,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;worker_id&quot;:1,&quot;worker_name&quot;:&quot;John Muite&quot;,&quot;site_id&quot;:1,&quot;site_name&quot;:&quot;CHRISCO NLC&quot;,&quot;latitude&quot;:-1.031585,&quot;longitude&quot;:37.02371,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;gps&quot;,&quot;last_seen&quot;:&quot;01:30:36&quot;,&quot;last_seen_ago&quot;:1140,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;presenceRows&quot;:[[[{&quot;worker&quot;:&quot;Bob Johnson&quot;,&quot;site&quot;:&quot;PROSEL HQ&quot;,&quot;site_id&quot;:8,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;gps&quot;,&quot;last_seen_at&quot;:&quot;15:13:56&quot;,&quot;last_seen_ago&quot;:317,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;worker&quot;:&quot;Jane Hamisi&quot;,&quot;site&quot;:&quot;PROSEL HQ&quot;,&quot;site_id&quot;:8,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;geofence&quot;,&quot;last_seen_at&quot;:&quot;14:08:49&quot;,&quot;last_seen_ago&quot;:382,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;worker&quot;:&quot;Moses Mwaniki&quot;,&quot;site&quot;:&quot;Mombasa Bridge Project&quot;,&quot;site_id&quot;:2,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;nfc&quot;,&quot;last_seen_at&quot;:&quot;01:30:36&quot;,&quot;last_seen_ago&quot;:1140,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;worker&quot;:&quot;Joseph Omondi&quot;,&quot;site&quot;:&quot;CHRISCO NLC&quot;,&quot;site_id&quot;:1,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;geofence&quot;,&quot;last_seen_at&quot;:&quot;01:30:36&quot;,&quot;last_seen_ago&quot;:1140,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;worker&quot;:&quot;John Muite&quot;,&quot;site&quot;:&quot;CHRISCO NLC&quot;,&quot;site_id&quot;:1,&quot;status&quot;:&quot;away&quot;,&quot;last_event&quot;:&quot;gps&quot;,&quot;last_seen_at&quot;:&quot;01:30:36&quot;,&quot;last_seen_ago&quot;:1140,&quot;rssi&quot;:null},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;stats&quot;:[{&quot;present&quot;:0,&quot;away&quot;:5,&quot;sites&quot;:6},{&quot;s&quot;:&quot;arr&quot;}],&quot;parentRecord&quot;:null,&quot;mountedActions&quot;:[[],{&quot;s&quot;:&quot;arr&quot;}],&quot;defaultAction&quot;:null,&quot;defaultActionArguments&quot;:null,&quot;defaultActionContext&quot;:null,&quot;defaultTableAction&quot;:null,&quot;defaultTableActionRecord&quot;:null,&quot;defaultTableActionArguments&quot;:null,&quot;componentFileAttachments&quot;:[[],{&quot;s&quot;:&quot;arr&quot;}],&quot;areSchemaStateUpdateHooksDisabledForTesting&quot;:false,&quot;discoveredSchemaNames&quot;:[[&quot;headerWidgets&quot;,&quot;footerWidgets&quot;],{&quot;s&quot;:&quot;arr&quot;}]},&quot;memo&quot;:{&quot;id&quot;:&quot;JoUO0tZHNfRaGu15Htfj&quot;,&quot;name&quot;:&quot;app.filament.monitor.resources.site-presence-resource.pages.manage-site-presences&quot;,&quot;path&quot;:&quot;monitor\/site-presences&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;90ecf910277d2572f976dbd835eac60c639919a1be64b6c4064e2c4f6072050c&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;url&quot;:{&quot;defaultAction&quot;:{&quot;as&quot;:&quot;action&quot;,&quot;use&quot;:&quot;replace&quot;,&quot;alwaysShow&quot;:false,&quot;except&quot;:null},&quot;defaultActionArguments&quot;:{&quot;as&quot;:&quot;actionArguments&quot;,&quot;use&quot;:&quot;replace&quot;,&quot;alwaysShow&quot;:false,&quot;except&quot;:null},&quot;defaultActionContext&quot;:{&quot;as&quot;:&quot;actionContext&quot;,&quot;use&quot;:&quot;replace&quot;,&quot;alwaysShow&quot;:false,&quot;except&quot;:null},&quot;defaultTableAction&quot;:{&quot;as&quot;:&quot;tableAction&quot;,&quot;use&quot;:&quot;replace&quot;,&quot;alwaysShow&quot;:false,&quot;except&quot;:null},&quot;defaultTableActionRecord&quot;:{&quot;as&quot;:&quot;tableActionRecord&quot;,&quot;use&quot;:&quot;replace&quot;,&quot;alwaysShow&quot;:false,&quot;except&quot;:null},&quot;defaultTableActionArguments&quot;:{&quot;as&quot;:&quot;tableActionArguments&quot;,&quot;use&quot;:&quot;replace&quot;,&quot;alwaysShow&quot;:false,&quot;except&quot;:null}},&quot;listeners&quot;:[&quot;refresh-page&quot;]}" wire:id="JoUO0tZHNfRaGu15Htfj"
    class="fi-page"
>
    

    <div class="fi-page-header-main-ctn">
        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
        <!--[if BLOCK]><![endif]-->            
            <!--[if BLOCK]><![endif]-->                <header
    class="fi-header fi-header-has-breadcrumbs"
>
    <div>
        <!--[if BLOCK]><![endif]-->            <nav class="fi-breadcrumbs">
    <ol class="fi-breadcrumbs-list">
        <!--[if BLOCK]><![endif]-->            <li class="fi-breadcrumbs-item">
                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
                <!--[if BLOCK]><![endif]-->                    <a
                        href="http://127.0.0.1:8000/monitor/site-presences" wire:navigate
                        class="fi-breadcrumbs-item-label"
                    >
                        Site Presences
                    </a>
                <!--[if ENDBLOCK]><![endif]-->            </li>
                    <li class="fi-breadcrumbs-item">
                <!--[if BLOCK]><![endif]-->                    <svg class="fi-icon fi-size-md fi-breadcrumbs-item-separator fi-ltr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
</svg>

                    <svg class="fi-icon fi-size-md fi-breadcrumbs-item-separator fi-rtl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>
</svg>
                <!--[if ENDBLOCK]><![endif]-->
                <!--[if BLOCK]><![endif]-->                    <span class="fi-breadcrumbs-item-label">
                        Manage Site Presences
                    </span>
                <!--[if ENDBLOCK]><![endif]-->            </li>
        <!--[if ENDBLOCK]><![endif]-->    </ol>
</nav>
        <!--[if ENDBLOCK]><![endif]-->
        <!--[if BLOCK]><![endif]-->            <h1 class="fi-header-heading">
                Manage Site Presences
            </h1>
        <!--[if ENDBLOCK]><![endif]-->
        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->    </div>

    
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--></header>
            <!--[if ENDBLOCK]><![endif]-->        <!--[if ENDBLOCK]><![endif]-->
        <div class="fi-page-main">
            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
            <div class="fi-page-content">
                

                

                

                <div
        x-data="{ selectedSiteId: null, selectedSiteName: null }"
        @filter-site.window="selectedSiteId = ($event.detail.id === selectedSiteId ? null : $event.detail.id); selectedSiteName = (selectedSiteId ? $event.detail.name : null)"
    >
        

    
    <div wire:poll.10s="refreshLiveData">
        <style>[x-cloak] { display: none !important; }</style>

        
        <div class="flex flex-wrap gap-3 mb-5">

            <div class="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm">
                <span class="relative flex h-2.5 w-2.5">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                </span>
                <span class="text-xs font-bold text-gray-700 dark:text-gray-200">0 On-Site</span>
            </div>

            <div class="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm">
                <span class="w-2.5 h-2.5 rounded-full bg-rose-400 flex-shrink-0"></span>
                <span class="text-xs font-bold text-gray-700 dark:text-gray-200">5 Away</span>
            </div>

            <div class="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm">
                <svg class="w-3.5 h-3.5 text-amber-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="m11.54 22.351.07.04.028.016a.76.76 0 0 0 .723 0l.028-.015.071-.041a16.975 16.975 0 0 0 1.144-.742 19.58 19.58 0 0 0 2.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 0 0-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 0 0 2.682 2.282 16.975 16.975 0 0 0 1.145.742ZM12 13.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd"/>
</svg>                <span class="text-xs font-bold text-gray-700 dark:text-gray-200">6 Active Sites</span>
            </div>

            <div class="ml-auto flex items-center gap-1.5 text-[10px] font-semibold text-gray-400 dark:text-gray-500">
                <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                Live · Refreshes every 10s
            </div>
        </div>

        
        <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden mb-5">

            
            <div class="px-5 py-3.5 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M8.161 2.58a1.875 1.875 0 0 1 1.678 0l4.993 2.498c.106.052.23.052.336 0l3.869-1.935A1.875 1.875 0 0 1 21.75 4.82v12.485c0 .71-.401 1.36-1.037 1.677l-4.875 2.437a1.875 1.875 0 0 1-1.676 0l-4.994-2.497a.375.375 0 0 0-.336 0l-3.868 1.935A1.875 1.875 0 0 1 2.25 19.18V6.695c0-.71.401-1.36 1.036-1.677l4.875-2.437ZM9 6a.75.75 0 0 1 .75.75V15a.75.75 0 0 1-1.5 0V6.75A.75.75 0 0 1 9 6Zm6.75 3a.75.75 0 0 0-1.5 0v8.25a.75.75 0 0 0 1.5 0V9Z" clip-rule="evenodd"/>
</svg>                    <h2 class="text-sm font-bold text-gray-900 dark:text-white">Live Site Presence Map</h2>
                </div>
                <div class="flex items-center gap-4 text-xs font-semibold text-gray-400">
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-amber-500/20 border border-amber-500 flex-shrink-0"></span>
                        <span>Site Geofence</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 flex-shrink-0"></span>
                        <span>Worker (Present)</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-gray-400 flex-shrink-0"></span>
                        <span>Worker (Away)</span>
                    </div>
                </div>
            </div>

            
            <div class="relative w-full"
                 x-data="window.sitePresenceMapComponent({
                    sites: window.Livewire.find('JoUO0tZHNfRaGu15Htfj').entangle('mapSites'),
                    workers: window.Livewire.find('JoUO0tZHNfRaGu15Htfj').entangle('mapWorkers')                 })"
                 x-init="initMap()"
                 wire:ignore>

                <div id="site-presence-leaflet-map"
                     style="height: 480px; width: 100%; z-index: 1;"
                     class="bg-gray-100 dark:bg-gray-950">
                </div>

                
                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
                <script>
                    window.sitePresenceMapComponent = function({ sites, workers }) {
                        return {
                            sites: sites,
                            workers: workers,
                            map: null,
                            siteLayers: [],
                            workerMarkers: [],
                            hasFitBounds: false,

                            initMap() {
                                this.$nextTick(() => {
                                    // Destroy existing Leaflet instance if navigating back
                                    const container = L.DomUtil.get('site-presence-leaflet-map');
                                    if (container && container._leaflet_id) {
                                        this.map && this.map.remove();
                                    }

                                    this.map = L.map('site-presence-leaflet-map').setView([-1.2921, 36.8219], 12);

                                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                        maxZoom: 19,
                                        attribution: '© OpenStreetMap contributors'
                                    }).addTo(this.map);

                                    this.hasFitBounds = false;
                                    this.renderMap();

                                    // Watch for Livewire data updates and re-render markers
                                    this.$watch('sites',   () => this.renderMap());
                                    this.$watch('workers', () => this.renderMap());

                                    setTimeout(() => this.map.invalidateSize(), 300);
                                });
                            },

                            renderMap() {
                                if (!this.map) return;

                                // --- Clear existing layers ---
                                this.siteLayers.forEach(l => this.map.removeLayer(l));
                                this.siteLayers = [];
                                this.workerMarkers.forEach(m => this.map.removeLayer(m));
                                this.workerMarkers = [];

                                if (!this.sites || this.sites.length === 0) return;

                                const bounds = [];

                                // ── 1. Site markers + geofence circles ──────────────────
                                this.sites.forEach(site => {
                                    if (!site.latitude || !site.longitude) return;
                                    const latLng = [site.latitude, site.longitude];
                                    bounds.push(latLng);

                                    // Count workers at this site
                                    const workersHere = (this.workers || []).filter(w => w.site_id === site.id);
                                    const count = workersHere.length;

                                    // Site marker icon
                                    const siteIcon = L.divIcon({
                                        className: 'custom-site-icon-container',
                                        html: `
                                            <div style="
                                                display:flex; align-items:center; justify-content:center;
                                                width:44px; height:44px; border-radius:50%;
                                                background:rgba(245,158,11,0.15);
                                                border: 2.5px solid #f59e0b;
                                                box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
                                                font-size:18px; position:relative;
                                            ">
                                                🏗️
                                                ${count > 0 ? `<span style="
                                                    position:absolute; top:-6px; right:-6px;
                                                    background:#10b981; color:white;
                                                    border-radius:999px; font-size:10px;
                                                    font-weight:800; min-width:18px; height:18px;
                                                    padding: 0 4px;
                                                    display:flex; align-items:center; justify-content:center;
                                                    border:2px solid white; font-family:sans-serif;
                                                ">${count}</span>` : ''}
                                            </div>
                                        `,
                                        iconSize:   [44, 44],
                                        iconAnchor: [22, 22],
                                        popupAnchor: [0, -24],
                                    });

                                    let popup = `
                                        <div style="font-family:sans-serif; min-width:170px; padding:4px;">
                                            <h3 style="font-weight:800; font-size:13px; margin:0 0 4px; color:#111;">${site.name}</h3>
                                            <p style="font-size:11px; color:#6b7280; margin:0 0 8px;">📍 ${site.location_name || 'No location'}</p>
                                            <div style="display:flex; align-items:center; justify-content:space-between; font-size:11px; margin-bottom:6px;">
                                                <span style="color:#374151; font-weight:600;">Present Workers:</span>
                                                <span style="
                                                    background:${count > 0 ? '#d1fae5' : '#f3f4f6'};
                                                    color:${count > 0 ? '#065f46' : '#6b7280'};
                                                    border-radius:999px; padding:1px 8px; font-weight:700;
                                                ">${count}</span>
                                            </div>
                                    `;

                                    if (count > 0) {
                                        popup += `<ul style="list-style:none; margin:0; padding:0; font-size:11px; border-top:1px solid #f0f0f0; padding-top:6px;">`;
                                        workersHere.forEach(w => {
                                            popup += `
                                                <li style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
                                                    <span style="
                                                        width:22px; height:22px; border-radius:50%; background:#d1fae5;
                                                        color:#065f46; display:flex; align-items:center; justify-content:center;
                                                        font-weight:800; font-size:10px; flex-shrink:0;
                                                    ">${w.worker_name.charAt(0).toUpperCase()}</span>
                                                    <div>
                                                        <div style="font-weight:700; color:#111;">${w.worker_name}</div>
                                                        <div style="color:#9ca3af; font-size:10px;">${w.last_event?.toUpperCase() ?? ''} · ${w.last_seen ?? '—'}${w.rssi ? ' · ' + w.rssi + 'dBm' : ''}</div>
                                                    </div>
                                                </li>
                                            `;
                                        });
                                        popup += `</ul>`;
                                    } else {
                                        popup += `<p style="font-size:11px; color:#9ca3af; font-style:italic; margin:0;">No workers currently present.</p>`;
                                    }
                                    popup += `</div>`;

                                    const siteMarker = L.marker(latLng, { icon: siteIcon })
                                        .bindPopup(popup, { maxWidth: 260 })
                                        .addTo(this.map);

                                    siteMarker.on('click', () => {
                                        window.dispatchEvent(new CustomEvent('filter-site', {
                                            detail: { id: site.id, name: site.name }
                                        }));
                                    });

                                    this.siteLayers.push(siteMarker);

                                    // Geofence circle
                                    const circle = L.circle(latLng, {
                                        color: '#f59e0b',
                                        fillColor: '#fef3c7',
                                        fillOpacity: 0.18,
                                        weight: 1.5,
                                        radius: site.radius || 200,
                                        dashArray: '6 4',
                                    }).addTo(this.map);
                                    this.siteLayers.push(circle);
                                });

                                // ── 2. Worker pins (positioned at site with spread offset) ──
                                (this.workers || []).forEach(w => {
                                    if (!w.latitude || !w.longitude) return;
                                    const latLng = [w.latitude, w.longitude];
                                    bounds.push(latLng);

                                    const initials = w.worker_name
                                        .split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();

                                    const isPresent = w.status === 'present';
                                    const bgColor   = isPresent ? '#10b981' : '#ef4444';
                                    const ringColor = isPresent ? 'rgba(16,185,129,0.3)' : 'rgba(239,68,68,0.3)';

                                    const workerIcon = L.divIcon({
                                        className: 'custom-worker-icon-container',
                                        html: `
                                            <div style="position:relative;">
                                                <span style="
                                                    position:absolute; inset:-5px; border-radius:50%;
                                                    background:${ringColor};
                                                    animation: presencePulse 1.8s ease-in-out infinite;
                                                "></span>
                                                <div style="
                                                    position:relative; width:30px; height:30px;
                                                    border-radius:50%; background:${bgColor};
                                                    border:2.5px solid white;
                                                    box-shadow:0 2px 8px rgba(0,0,0,0.25);
                                                    display:flex; align-items:center; justify-content:center;
                                                    color:white; font-weight:800; font-size:10px;
                                                    font-family:sans-serif;
                                                ">${initials}</div>
                                            </div>
                                        `,
                                        iconSize:   [30, 30],
                                        iconAnchor: [15, 15],
                                        popupAnchor: [0, -18],
                                    });

                                    const formatAgo = (m) => {
                                        if (m === null || m === undefined) return '—';
                                        if (m < 1) return 'just now';
                                        if (m < 60) return m + 'm ago';
                                        if (m < 1440) return Math.floor(m / 60) + 'h ago';
                                        return Math.floor(m / 1440) + 'd ago';
                                    };
                                    const minutesText = formatAgo(w.last_seen_ago);

                                    const rssiBar = w.rssi
                                        ? `<div style="margin-top:6px; font-size:10px; color:#6b7280;">
                                            Signal: <strong style="color:${w.rssi >= -60 ? '#10b981' : w.rssi >= -80 ? '#f59e0b' : '#ef4444'}">${w.rssi} dBm</strong>
                                           </div>`
                                        : '';

                                    const workerPopup = `
                                        <div style="font-family:sans-serif; padding:4px; min-width:160px;">
                                            <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                                <div style="
                                                    width:32px; height:32px; border-radius:50%;
                                                    background:${bgColor}; color:white;
                                                    display:flex; align-items:center; justify-content:center;
                                                    font-weight:800; font-size:11px; flex-shrink:0;
                                                ">${initials}</div>
                                                <div>
                                                    <div style="font-weight:800; font-size:13px; color:#111;">${w.worker_name}</div>
                                                    <div style="font-size:10px; background:${isPresent ? '#d1fae5' : '#f3f4f6'};
                                                        color:${isPresent ? '#065f46' : '#6b7280'};
                                                        border-radius:999px; padding:1px 7px; display:inline-block; font-weight:700; margin-top:2px;">
                                                        ${isPresent ? '● Present' : '● Away'}
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="font-size:11px; color:#374151; margin-bottom:3px;">
                                                🏗️ <strong>${w.site_name}</strong>
                                            </div>
                                            <div style="font-size:10px; color:#6b7280;">
                                                🕒 ${w.last_seen ?? '—'} <span style="color:#9ca3af;">(${minutesText})</span>
                                            </div>
                                            <div style="font-size:10px; color:#6b7280; margin-top:2px;">
                                                Method: <strong>${(w.last_event ?? '').toUpperCase()}</strong>
                                            </div>
                                            ${rssiBar}
                                        </div>
                                    `;

                                    const wm = L.marker(latLng, { icon: workerIcon, zIndexOffset: 100 })
                                        .bindPopup(workerPopup, { maxWidth: 240 })
                                        .addTo(this.map);
                                    this.workerMarkers.push(wm);
                                });

                                // Fit map to all markers
                                if (bounds.length > 0 && !this.hasFitBounds) {
                                    this.map.fitBounds(bounds, { padding: [60, 60], maxZoom: 16 });
                                    this.hasFitBounds = true;
                                }
                            }
                        };
                    };
                </script>

                
                <style>
                    @keyframes presencePulse {
                        0%, 100% { transform: scale(1); opacity: 0.6; }
                        50%       { transform: scale(1.5); opacity: 0; }
                    }
                </style>
            </div>
        </div>

        
        <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
            <div class="px-5 py-3.5 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <div class="flex items-center gap-2.5">
                    <span class="relative flex h-2.5 w-2.5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                    </span>
                    <h2 class="text-sm font-bold text-gray-900 dark:text-white">Live Worker Presence</h2>
                </div>
                <span class="text-[10px] font-medium text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 px-2.5 py-1 rounded-full">
                    Auto-refresh every 10s
                </span>
            </div>

            
            <div x-show="selectedSiteId !== null" x-cloak class="px-5 py-2 bg-amber-50/60 dark:bg-amber-950/20 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between text-xs">
                <span class="font-medium text-amber-800 dark:text-amber-300">
                    Filtering by site: <strong x-text="selectedSiteName"></strong>
                </span>
                <button @click="selectedSiteId = null; selectedSiteName = null" class="text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-200 font-bold hover:underline">
                    Clear Filter
                    </button>
            </div>

            <!--[if BLOCK]><![endif]-->                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-100 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-800/40">
                                <th class="text-left px-5 py-2.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Worker</th>
                                <th class="text-left px-5 py-2.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Site</th>
                                <th class="text-left px-4 py-2.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="text-left px-4 py-2.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Method</th>
                                <th class="text-left px-4 py-2.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Last Seen</th>
                                <th class="text-left px-4 py-2.5 text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Signal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50 dark:divide-gray-800/60">
                            <!--[if BLOCK]><![endif]-->                            <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-800/30 transition-colors"
                                x-show="selectedSiteId === null || selectedSiteId == 8"
                                x-cloak>
                                <td class="px-5 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0
                                            bg-gray-100 dark:bg-gray-800 text-gray-500">
                                            B
                                        </div>
                                        <span class="font-semibold text-gray-900 dark:text-white text-sm">Bob Johnson</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap font-medium">PROSEL HQ</td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></span>Away
                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-50 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-300">📍 GPS</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-[11px] font-mono text-gray-600 dark:text-gray-300">15:13:56</span>
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">
                                            5h ago                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-gray-300 dark:text-gray-600">—</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                            </tr>
                                                        <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-800/30 transition-colors"
                                x-show="selectedSiteId === null || selectedSiteId == 8"
                                x-cloak>
                                <td class="px-5 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0
                                            bg-gray-100 dark:bg-gray-800 text-gray-500">
                                            J
                                        </div>
                                        <span class="font-semibold text-gray-900 dark:text-white text-sm">Jane Hamisi</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap font-medium">PROSEL HQ</td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></span>Away
                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-300">📍 GEO</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-[11px] font-mono text-gray-600 dark:text-gray-300">14:08:49</span>
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">
                                            6h ago                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-gray-300 dark:text-gray-600">—</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                            </tr>
                                                        <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-800/30 transition-colors"
                                x-show="selectedSiteId === null || selectedSiteId == 2"
                                x-cloak>
                                <td class="px-5 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0
                                            bg-gray-100 dark:bg-gray-800 text-gray-500">
                                            M
                                        </div>
                                        <span class="font-semibold text-gray-900 dark:text-white text-sm">Moses Mwaniki</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap font-medium">Mombasa Bridge Project</td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></span>Away
                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">⬡ NFC</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-[11px] font-mono text-gray-600 dark:text-gray-300">01:30:36</span>
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">
                                            19h ago                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-gray-300 dark:text-gray-600">—</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                            </tr>
                                                        <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-800/30 transition-colors"
                                x-show="selectedSiteId === null || selectedSiteId == 1"
                                x-cloak>
                                <td class="px-5 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0
                                            bg-gray-100 dark:bg-gray-800 text-gray-500">
                                            J
                                        </div>
                                        <span class="font-semibold text-gray-900 dark:text-white text-sm">Joseph Omondi</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap font-medium">CHRISCO NLC</td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></span>Away
                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-300">📍 GEO</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-[11px] font-mono text-gray-600 dark:text-gray-300">01:30:36</span>
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">
                                            19h ago                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-gray-300 dark:text-gray-600">—</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                            </tr>
                                                        <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-800/30 transition-colors"
                                x-show="selectedSiteId === null || selectedSiteId == 1"
                                x-cloak>
                                <td class="px-5 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2.5">
                                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0
                                            bg-gray-100 dark:bg-gray-800 text-gray-500">
                                            J
                                        </div>
                                        <span class="font-semibold text-gray-900 dark:text-white text-sm">John Muite</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap font-medium">CHRISCO NLC</td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></span>Away
                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-50 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-300">📍 GPS</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="text-[11px] font-mono text-gray-600 dark:text-gray-300">01:30:36</span>
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">
                                            19h ago                                        </span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                                <td class="px-4 py-3">
                                    <!--[if BLOCK]><![endif]-->                                        <span class="text-gray-300 dark:text-gray-600">—</span>
                                    <!--[if ENDBLOCK]><![endif]-->                                </td>
                            </tr>
                            <!--[if ENDBLOCK]><![endif]-->                        </tbody>
                    </table>
                </div>
            <!--[if ENDBLOCK]><![endif]-->        </div>

    </div>

    </div>

                

                

                
            </div>

            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->        </div>

        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->    </div>

    <!--[if BLOCK]><![endif]-->        <!--[if BLOCK]><![endif]-->    <div
        wire:partial="action-modals"
        x-data="filamentActionModals({
                    livewireId: 'JoUO0tZHNfRaGu15Htfj',
                })"
        style="height: 0"
    >
        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->    </div>

    <!--[if ENDBLOCK]><![endif]-->    <!--[if ENDBLOCK]><![endif]-->
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
    

    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--></div>