--- HTML OUTPUT ---
<div wire:snapshot="{&quot;data&quot;:{&quot;stats&quot;:[{&quot;onSiteCount&quot;:0,&quot;awayCount&quot;:0,&quot;totalWorkers&quot;:4,&quot;noRecord&quot;:4,&quot;checkInsToday&quot;:0,&quot;checkOutsToday&quot;:0,&quot;geofenceViolationsToday&quot;:0},{&quot;s&quot;:&quot;arr&quot;}],&quot;livePresence&quot;:[null,{&quot;keys&quot;:[],&quot;class&quot;:&quot;Illuminate\\Database\\Eloquent\\Collection&quot;,&quot;modelClass&quot;:null,&quot;s&quot;:&quot;elcln&quot;}],&quot;todayFeed&quot;:[null,{&quot;keys&quot;:[],&quot;class&quot;:&quot;Illuminate\\Database\\Eloquent\\Collection&quot;,&quot;modelClass&quot;:null,&quot;s&quot;:&quot;elcln&quot;}],&quot;siteBreakdown&quot;:[null,{&quot;keys&quot;:[],&quot;class&quot;:&quot;Illuminate\\Database\\Eloquent\\Collection&quot;,&quot;modelClass&quot;:null,&quot;s&quot;:&quot;elcln&quot;}],&quot;mapSites&quot;:[[[{&quot;id&quot;:1,&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;:300},{&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.05,&quot;longitude&quot;:39.666667,&quot;radius&quot;:500},{&quot;s&quot;:&quot;arr&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;s&quot;:&quot;arr&quot;}],&quot;mapPresence&quot;:[[],{&quot;s&quot;:&quot;arr&quot;}],&quot;mapLogs&quot;:[[],{&quot;s&quot;:&quot;arr&quot;}],&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;82pBS8dAfldsLC20khQt&quot;,&quot;name&quot;:&quot;app.filament.pages.workforce-monitoring&quot;,&quot;path&quot;:&quot;\/&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[&quot;2636106735-2&quot;],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;45b6be7d680267ca0f59464e6371ea74a9fa192c114737d3b9f7f6fd2d700e79&quot;}" wire:effects="{&quot;partials&quot;:[],&quot;scripts&quot;:{&quot;2636106735-2&quot;:&quot;            &lt;script&gt;\n                window.filamentErrorNotifications = JSON.parse(&#039;{\\u0022\\u0022:{\\u0022title\\u0022:\\u0022Error while loading page\\u0022,\\u0022body\\u0022:\\u0022There was an error while attempting to load this page. Please try again later.\\u0022,\\u0022isHidden\\u0022:false,\\u0022isDisabled\\u0022:false}}&#039;)            &lt;\/script&gt;\n            &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="82pBS8dAfldsLC20khQt"
    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"
>
    <div>
        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
        <!--[if BLOCK]><![endif]-->            <h1 class="fi-header-heading">
                Workforce Monitoring
            </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 wire:poll.30s="refreshData">

        
        <div class="grid grid-cols-2 xl:grid-cols-4 gap-3 mb-5">

            
            <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 shadow-sm group hover:shadow-md transition-shadow">
                <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-emerald-400 to-teal-400"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-[11px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">On-Site Now</p>
                        <p class="text-3xl font-black text-gray-900 dark:text-white tabular-nums leading-none">0</p>
                        <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-1.5">of 4 active workers</p>
                    </div>
                    <div class="flex-shrink-0 w-9 h-9 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 text-emerald-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.25 6.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM15.75 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM2.25 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM6.31 15.117A6.745 6.745 0 0 1 12 12a6.745 6.745 0 0 1 6.709 7.498.75.75 0 0 1-.372.568A12.696 12.696 0 0 1 12 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 0 1-.372-.568 6.787 6.787 0 0 1 1.019-4.38Z" clip-rule="evenodd"/>
  <path d="M5.082 14.254a8.287 8.287 0 0 0-1.308 5.135 9.687 9.687 0 0 1-1.764-.44l-.115-.04a.563.563 0 0 1-.373-.487l-.01-.121a3.75 3.75 0 0 1 3.57-4.047ZM20.226 19.389a8.287 8.287 0 0 0-1.308-5.135 3.75 3.75 0 0 1 3.57 4.047l-.01.121a.563.563 0 0 1-.373.486l-.115.04c-.567.2-1.156.349-1.764.441Z"/>
</svg>                    </div>
                </div>
                <div class="mt-3 h-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                        <div class="h-full bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full transition-all duration-700" style="width: 0%"></div>
                </div>
            </div>

            
            <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 shadow-sm hover:shadow-md transition-shadow">
                <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-rose-400 to-pink-400"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-[11px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">Away / Out</p>
                        <p class="text-3xl font-black text-gray-900 dark:text-white tabular-nums leading-none">0</p>
                        <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-1.5">4 no record yet</p>
                    </div>
                    <div class="flex-shrink-0 w-9 h-9 rounded-xl bg-rose-50 dark:bg-rose-900/20 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 text-rose-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="M16.5 3.75a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5V15a.75.75 0 0 0-1.5 0v3.75a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5.25a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3V9A.75.75 0 1 0 9 9V5.25a1.5 1.5 0 0 1 1.5-1.5h6Zm-5.03 4.72a.75.75 0 0 0 0 1.06l1.72 1.72H2.25a.75.75 0 0 0 0 1.5h10.94l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 0 0-1.06 0Z" clip-rule="evenodd"/>
</svg>                    </div>
                </div>
                <div class="mt-3 h-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                        <div class="h-full bg-gradient-to-r from-rose-400 to-pink-400 rounded-full transition-all duration-700" style="width: 0%"></div>
                </div>
            </div>

            
            <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 shadow-sm hover:shadow-md transition-shadow">
                <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-primary-400 to-amber-400"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-[11px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">Check-Ins Today</p>
                        <p class="text-3xl font-black text-gray-900 dark:text-white tabular-nums leading-none">0</p>
                        <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-1.5">0 check-outs</p>
                    </div>
                    <div class="flex-shrink-0 w-9 h-9 rounded-xl bg-primary-50 dark:bg-primary-900/20 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 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="M7.502 6h7.128A3.375 3.375 0 0 1 18 9.375v9.375a3 3 0 0 0 3-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 0 0-.673-.05A3 3 0 0 0 15 1.5h-1.5a3 3 0 0 0-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6ZM13.5 3A1.5 1.5 0 0 0 12 4.5h4.5A1.5 1.5 0 0 0 15 3h-1.5Z" clip-rule="evenodd"/>
  <path fill-rule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V9.375Zm9.586 4.594a.75.75 0 0 0-1.172-.938l-2.476 3.096-.908-.907a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.116-.062l3-3.75Z" clip-rule="evenodd"/>
</svg>                    </div>
                </div>
                <div class="mt-3 flex items-center gap-1.5">
                    <span class="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-0.5 rounded-full">
                        Ôåæ 0 in
                    </span>
                    <span class="inline-flex items-center gap-1 text-[10px] font-semibold text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/20 px-2 py-0.5 rounded-full">
                        Ôåô 0 out
                    </span>
                </div>
            </div>

            
            <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 p-5 shadow-sm hover:shadow-md transition-shadow">
                <div class="absolute inset-x-0 top-0 h-0.5 bg-gray-200 dark:bg-gray-700"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-[11px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">Geofence Alerts</p>
                        <p class="text-3xl font-black tabular-nums leading-none text-gray-900 dark:text-white">0</p>
                        <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-1.5">violations today</p>
                    </div>
                    <div class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 dark:bg-gray-800 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 text-gray-400" 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>                    </div>
                </div>
                <!--[if BLOCK]><![endif]-->                <div class="mt-3 h-1 bg-gray-100 dark:bg-gray-800 rounded-full"></div>
                <!--[if ENDBLOCK]><![endif]-->            </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 Operations 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>Inside Geofence</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-rose-500 flex-shrink-0"></span>
                        <span>Geofence Violation</span>
                    </div>
                </div>
            </div>
            
            <div class="relative w-full"
                 x-data="liveOperationsMap({
                    sites: window.Livewire.find('82pBS8dAfldsLC20khQt').entangle('mapSites'),
                    presence: window.Livewire.find('82pBS8dAfldsLC20khQt').entangle('mapPresence'),
                    logs: window.Livewire.find('82pBS8dAfldsLC20khQt').entangle('mapLogs')                 })"
                 x-init="initMap()"
                 wire:ignore>


                <div id="live-ops-leaflet-map" style="height: 400px; width: 100%; z-index: 1;" class="bg-gray-100 dark:bg-gray-950"></div>
                
                <script>
                    document.addEventListener('alpine:init', () => {
                        if (window.liveMapInitialized) return;
                        window.liveMapInitialized = true;

                        Alpine.data('liveOperationsMap', ({ sites, presence, logs }) => ({
                            map: null,
                            siteLayers: [],
                            logMarkers: [],
                            
                            initMap() {
                                this.$nextTick(() => {
                                    // Initial center (Nairobi coordinates)
                                    this.map = L.map('live-ops-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.renderMapElements();

                                    // Watch datasets for updates
                                    this.$watch('sites', () => this.renderMapElements());
                                    this.$watch('presence', () => this.renderMapElements());
                                    this.$watch('logs', () => this.renderMapElements());

                                    // Refresh size
                                    setTimeout(() => {
                                        this.map.invalidateSize();
                                    }, 200);
                                });
                            },

                            renderMapElements() {
                                // Clear old layers
                                this.siteLayers.forEach(layer => this.map.removeLayer(layer));
                                this.siteLayers = [];

                                this.logMarkers.forEach(marker => this.map.removeLayer(marker));
                                this.logMarkers = [];

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

                                const bounds = [];

                                // 1. Render Sites & Geofence Circles
                                this.sites.forEach(site => {
                                    const siteLatLng = [site.latitude, site.longitude];
                                    bounds.push(siteLatLng);

                                    // Get present workers count & list
                                    const workersAtSite = this.presence[site.id] || [];
                                    const headcount = workersAtSite.length;
                                    
                                    let popupContent = `
                                        <div class="p-1 font-sans text-gray-900">
                                            <h3 class="font-bold text-sm border-b border-gray-100 pb-1 mb-1.5">${site.name}</h3>
                                            <p class="text-xs text-gray-500 mb-2">­ƒôì ${site.location_name || 'No location details'}</p>
                                            <div class="mb-1.5 flex items-center justify-between text-xs">
                                                <span class="font-semibold text-gray-700">Present Workers:</span>
                                                <span class="px-2 py-0.5 rounded-full font-bold bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">${headcount}</span>
                                            </div>
                                    `;

                                    if (headcount > 0) {
                                        popupContent += '<ul class="list-disc pl-4 text-xs text-gray-600 space-y-1 mt-1">';
                                        workersAtSite.forEach(w => {
                                            popupContent += `<li><strong>${w.worker_name}</strong> <span class="text-gray-400">(${w.last_seen})</span></li>`;
                                        });
                                        popupContent += '</ul>';
                                    } else {
                                        popupContent += '<p class="text-xs text-gray-400 italic">No workers currently present.</p>';
                                    }
                                    popupContent += '</div>';

                                    // Div Icon for Site
                                    const siteIcon = L.divIcon({
                                        className: 'custom-site-icon',
                                        html: `
                                            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-white border-2 border-white shadow-md font-bold text-sm">
                                                ­ƒÅù´©Å
                                            </div>
                                        `,
                                        iconSize: [32, 32],
                                        iconAnchor: [16, 16]
                                    });

                                    // Add marker
                                    const marker = L.marker(siteLatLng, { icon: siteIcon })
                                        .bindPopup(popupContent)
                                        .addTo(this.map);
                                    
                                    this.siteLayers.push(marker);

                                    // Add geofence boundary circle
                                    const circle = L.circle(siteLatLng, {
                                        color: '#eab308',
                                        fillColor: '#fef08a',
                                        fillOpacity: 0.15,
                                        radius: site.radius
                                    }).addTo(this.map);

                                    this.siteLayers.push(circle);
                                });

                                // 2. Render Check-In Logs (GPS)
                                this.logs.forEach(log => {
                                    const logLatLng = [log.latitude, log.longitude];
                                    bounds.push(logLatLng);
                                    
                                    const color = log.geofence_ok ? '#10b981' : '#ef4444';
                                    const badge = log.geofence_ok ? 'Within Geofence' : 'Violation (Outside)';
                                    const badgeClass = log.geofence_ok ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800';
                                    const iconSymbol = log.direction === 'in' ? 'Ôåæ' : 'Ôåô';
                                    
                                    const logIcon = L.divIcon({
                                        className: 'custom-log-icon',
                                        html: `
                                            <div class="flex items-center justify-center w-6 h-6 rounded-full text-white border-2 border-white shadow-md font-bold text-xs" style="background-color: ${color}">
                                                ${iconSymbol}
                                            </div>
                                        `,
                                        iconSize: [24, 24],
                                        iconAnchor: [12, 12]
                                    });

                                    let logPopup = `
                                        <div class="p-1 font-sans text-gray-900">
                                            <div class="flex items-center gap-1.5 mb-1.5">
                                                <span class="text-xs font-bold">${log.worker_name}</span>
                                                <span class="px-2 py-0.5 rounded text-[10px] font-bold ${badgeClass}">${badge}</span>
                                            </div>
                                            <p class="text-xs text-gray-500 mb-1">­ƒÅó Site: ${log.site_name}</p>
                                            <p class="text-[10px] text-gray-400">­ƒòÆ Event: ${log.direction === 'in' ? 'Check-In' : 'Check-Out'} at ${log.timestamp}</p>
                                            <p class="text-[9px] text-gray-400 font-mono mt-1">Coords: ${log.latitude.toFixed(6)}, ${log.longitude.toFixed(6)}</p>
                                        </div>
                                    `;

                                    const logMarker = L.marker(logLatLng, { icon: logIcon })
                                        .bindPopup(logPopup)
                                        .addTo(this.map);

                                    this.logMarkers.push(logMarker);
                                });

                                // Fit bounds
                                if (bounds.length > 0) {
                                    this.map.fitBounds(bounds, { padding: [50, 50] });
                                }
                            }
                        }));
                    });
                </script>
            </div>
        </div>

        
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-4">

            
            <div class="xl:col-span-2 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">Refreshes every 30s</span>
                </div>

                <!--[if BLOCK]><![endif]-->                    <div class="py-14 text-center">
                        <div class="w-12 h-12 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-3">
                            <svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>
</svg>                        </div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">No presence records yet</p>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                            <a href="/simulator" class="text-primary-500 hover:underline">Open the Simulator</a> to trigger events
                        </p>
                    </div>
                <!--[if ENDBLOCK]><![endif]-->            </div>

            
            <div class="space-y-4">

                
                <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">
                        <h2 class="text-sm font-bold text-gray-900 dark:text-white 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="M4.5 2.25a.75.75 0 0 0 0 1.5v16.5h-.75a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5h-.75V3.75a.75.75 0 0 0 0-1.5h-15ZM9 6a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H9Zm-.75 3.75A.75.75 0 0 1 9 9h1.5a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75ZM9 12a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H9Zm3.75-5.25A.75.75 0 0 1 13.5 6H15a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM13.5 9a.75.75 0 0 0 0 1.5H15A.75.75 0 0 0 15 9h-1.5Zm-.75 3.75a.75.75 0 0 1 .75-.75H15a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM9 19.5v-2.25a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 9 19.5Z" clip-rule="evenodd"/>
</svg>                            Site Headcount
                        </h2>
                    </div>
                    <!--[if BLOCK]><![endif]-->                        <div class="px-5 py-8 text-center">
                            <p class="text-xs text-gray-400">No workers on-site</p>
                        </div>
                    <!--[if ENDBLOCK]><![endif]-->                </div>

                
                <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm p-4">
                    <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">Quick Access</p>
                    <div class="space-y-0.5">
                        <!--[if BLOCK]><![endif]-->                        <a href="/admin/attendance-logs" class="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors group">
                            <div class="w-7 h-7 rounded-lg bg-primary-50 dark:bg-primary-900/20 flex items-center justify-center flex-shrink-0">
                                <svg class="w-3.5 h-3.5 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"/>
</svg>                            </div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">Attendance Logs</span>
                            <svg class="w-3.5 h-3.5 text-gray-300 dark:text-gray-600 ml-auto group-hover:text-gray-500 transition-colors" 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>                        </a>
                                                <a href="/admin/presence-logs" class="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors group">
                            <div class="w-7 h-7 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center flex-shrink-0">
                                <svg class="w-3.5 h-3.5 text-purple-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.348 14.652a3.75 3.75 0 0 1 0-5.304m5.304 0a3.75 3.75 0 0 1 0 5.304m-7.425 2.121a6.75 6.75 0 0 1 0-9.546m9.546 0a6.75 6.75 0 0 1 0 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.807 3.808 9.98 0 13.788M12 12h.008v.008H12V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
</svg>                            </div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">BLE Presence Logs</span>
                            <svg class="w-3.5 h-3.5 text-gray-300 dark:text-gray-600 ml-auto group-hover:text-gray-500 transition-colors" 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>                        </a>
                                                <a href="/admin/worker-timesheet" class="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors group">
                            <div class="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 flex items-center justify-center flex-shrink-0">
                                <svg class="w-3.5 h-3.5 text-emerald-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
</svg>                            </div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">Timesheets</span>
                            <svg class="w-3.5 h-3.5 text-gray-300 dark:text-gray-600 ml-auto group-hover:text-gray-500 transition-colors" 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>                        </a>
                                                <a href="/simulator" class="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors group">
                            <div class="w-7 h-7 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                                <svg class="w-3.5 h-3.5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"/>
</svg>                            </div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">Supervisor Simulator</span>
                            <svg class="w-3.5 h-3.5 text-gray-300 dark:text-gray-600 ml-auto group-hover:text-gray-500 transition-colors" 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>                        </a>
                        <!--[if ENDBLOCK]><![endif]-->                    </div>
                </div>

            </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">
                    <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="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/>
</svg>                    <h2 class="text-sm font-bold text-gray-900 dark:text-white">Today's NFC Activity</h2>
                </div>
                <a href="/admin/attendance-logs" class="text-[11px] font-semibold text-primary-600 dark:text-primary-400 hover:underline flex items-center gap-1">
                    View All <svg class="w-3 h-3" 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="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/>
</svg>                </a>
            </div>

            <!--[if BLOCK]><![endif]-->                <div class="py-12 text-center">
                    <div class="w-12 h-12 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-3">
                        <svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/>
</svg>                    </div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">No NFC events today</p>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                        <a href="/simulator" class="text-primary-500 hover:underline">Open Simulator</a> and trigger some check-ins
                    </p>
                </div>
            <!--[if ENDBLOCK]><![endif]-->        </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: '82pBS8dAfldsLC20khQt',
                })"
        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>

--- END HTML ---