@php
  $title = 'Timeline';
@endphp

@extends('layouts/layoutMaster')

@section('title', $title)

<!-- Vendor Styles -->
@section('vendor-style')
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css">
  @vite(['resources/assets/vendor/libs/select2/select2.scss'])
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"/>
  <style>
    .accordion.map-controls {
      max-width: 300px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 8px;
    }

    .accordion-button {
      font-size: 0.9rem;
    }

    .accordion-body .form-check {
      margin-bottom: 5px;
    }
  </style>
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite(['resources/assets/vendor/libs/select2/select2.js'])

  <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
@endsection

@section('content')

  <!-- 🗓️ Filters Section -->
  <div class="row mb-4 g-3">
    <div class="col-md-3">
      <label for="date" class="form-label">Filter by date</label>
      <input type="date" id="date" class="form-control" value="{{ now()->format('Y-m-d') }}">
    </div>
    <div class="col-md-4">
      <label for="emp" class="form-label">Filter by employee</label>
      <select class="form-select select2" id="emp">
        <option selected disabled>Please select an employee</option>
        @foreach($employees as $employee)
          <option value="{{ $employee->id }}" data-code="{{ $employee->code ?? '' }}">
            {{ $employee->first_name }} {{ $employee->last_name }}
          </option>
        @endforeach
      </select>
    </div>
    <div class="col-md-3 d-none mb-3" id="attendanceLogFilterDiv">
      <label for="attendanceLogFilter">Filter by Check-In/Out</label>
      <select id="attendanceLogFilter" class="form-select">
        <option value="">All Check-Ins</option>
      </select>
    </div>
    <div class="col-auto justify-content-end float-end">
      <button type="button" class=" mt-6 btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#helpModal">
        <i class="bi bi-question-circle"></i>
      </button>
    </div>
  </div>

  <!-- 📊 Stats Section -->
  <div class="row mb-4 g-3" id="statsSection">
    <div class="col-md-12 text-center text-muted">
      <p class="mt-3">Please select an employee and date to view their daily activity.</p>
    </div>
  </div>


  <div class="d-flex justify-content-end">

  </div>

  <!-- 📊 Main Content Layout -->
  <div class="row g-4">
    <!-- 📋 Left Column: Tabs Section -->
    <div class="col-md-4">
      <div class="card shadow-sm p-3" style="height: 700px; overflow-y: auto;">
        <h5 id="employeeName" class="text-center">Employee Details</h5>
        <ul class="nav nav-tabs mb-3">
          <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#timeline">Timeline</a></li>
          <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#activitys">Activities</a></li>
          <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#breaks">Breaks</a></li>
          <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#orders">Orders</a></li>
        </ul>
        <div class="tab-content" style="max-height: 700px; overflow-y: auto;">
          <div class="tab-pane fade show active" id="timeline">
            <p class="text-muted text-center">No timeline data available.</p>
          </div>
          <div class="tab-pane fade" id="activitys">
            <p class="text-muted text-center">No activitys data available.</p>
          </div>
          <div class="tab-pane fade" id="breaks">
            <p class="text-muted text-center">No breaks data available.</p>
          </div>
          <div class="tab-pane fade" id="orders">
            <p class="text-muted text-center">No orders data available.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 🗺️ Right Column: Map Section -->
    <div class="col-md-8">
      <div class="card shadow-sm position-relative">
        <!-- Map Controls Accordion - Floating Top-Right -->
        <div
          class="accordion map-controls position-absolute top-0 end-0 m-6 p-2 rounded shadow-lg bg-white"
          id="mapControlsAccordion" style="z-index: 999;">
          <!-- Markers Section -->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingMarkers">
              <button class="accordion-button" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapseMarkers">
                Markers
              </button>
            </h2>
            <div id="collapseMarkers" class="accordion-collapse collapse show">
              <div class="accordion-body">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="toggleDeviceMarkers" checked>
                  <label class="form-check-label" for="toggleDeviceMarkers">Device Markers</label>
                </div>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="toggleActivityMarkers" checked>
                  <label class="form-check-label" for="toggleActivityMarkers">Activity Markers</label>
                </div>
              </div>
            </div>
          </div>


          <!-- Route Line Section -->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingPolyline">
              <button class="accordion-button" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapsePolyline">
                Route Line
              </button>
            </h2>
            <div id="collapsePolyline" class="accordion-collapse collapse show">
              <div class="accordion-body">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="togglePolyline" checked>
                  <label class="form-check-label" for="togglePolyline">Show Route Line</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Map Container -->
        <div id="map" style="height: 700px;"
             class="text-muted text-center d-flex align-items-center justify-content-center">
          <p>Please select an employee to load the map.</p>
        </div>
      </div>
    </div>
  </div>



  <div class="modal fade" id="helpModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Map Controls Help</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p><strong>Device Markers:</strong> Show/hide device markers.</p>
          <p><strong>Device Heatmap:</strong> Display heatmap for device locations.</p>
          <p><strong>Route Line:</strong> Show/hide route path.</p>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('page-script')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  @vite(['resources/assets/js/timeline-polyline.js'])
  
  <script>
    let map, markers = {device: [], activitys: [], activity: []};
    let heatmap;

    $(function () {
      // Initialize Select2 for employee dropdown
      $('#emp').select2();
      
      // Handle employee filter change - update name immediately and fetch data
      $('#emp').on('change', function() {
        const userId = $(this).val();
        const selectedOption = $(this).find('option:selected');
        const employeeName = selectedOption.text().trim();
        
        // Update employee name immediately from dropdown selection
        if (userId && employeeName !== 'Please select an employee') {
          // Extract code from data attribute
          const employeeCode = selectedOption.data('code');
          if (employeeCode) {
            $('#employeeName').text(employeeName + ' (' + employeeCode + ')');
          } else {
            // Fallback: just use the name from dropdown text
            $('#employeeName').text(employeeName);
          }
        } else {
          // Reset to default if no employee selected
          $('#employeeName').text('Employee Details');
        }
        
        // Fetch all data for the selected employee
        fetchData();
      });
      
      // Also handle Select2 specific events for better compatibility
      $('#emp').on('select2:select', function() {
        // This will also trigger the change event, but we can add additional logic here if needed
        const userId = $(this).val();
        if (!userId) {
          resetUI();
        }
      });
      
      // Handle date filter change
      $('#date').on('change', function() {
        fetchData();
      });
    });

    // 🗺️ Initialize Map - must be in global scope for Google Maps callback
    window.initMap = function initMap() {

      const centerLat = '{{ $settings->center_latitude }}';
      const centerLng = '{{ $settings->center_longitude }}';
      const zoomLevel = parseInt('{{ $settings->map_zoom_level }}');

      var center = new google.maps.LatLng(centerLat, centerLng);

      map = new google.maps.Map(document.getElementById('map'), {
        zoom: zoomLevel,
        center: center,
        scrollWheel: true,
        draggable: true,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
        },
        streetViewControl: false,
        scaleControl: true,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        gestureHandling: 'greedy',
        fullscreenControlOptions: {
          position: google.maps.ControlPosition.RIGHT_BOTTOM // Move Full-Screen to Top-Left
        }
      });

    };
  </script>

  <script
    src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=geometry,visualization&callback=initMap&v=weekly"
    defer></script>

  <script>

    // Fetch Data
    function fetchData() {
      const userId = $('#emp').val();
      const date = $('#date').val();

      console.log('Fetching data for user: ' + userId + ' on date: ' + date);

      clearAllMarkers();

      if (!userId) {
        resetUI();
        return;
      }

      // Reset attendance log filter when employee or date changes (without triggering change event)
      $('#attendanceLogFilter').val('');
      $('#attendanceLogFilterDiv').addClass('d-none');

      loadAttendanceLogs(userId, date);
      loadStatsForTimeLine(userId, date);
      loadActivity(userId, date);
      loadDeviceLocation(userId, date);

    }

    $('#attendanceLogFilter').on('change', function () {
      const userId = $('#emp').val();
      const date = $('#date').val();
      const attendanceLog = $(this).val();

      if (attendanceLog === '') {
        loadStatsForTimeLine(userId, date);
        loadActivity(userId, date);
        loadDeviceLocation(userId, date);
      } else {
        loadStatsForTimeLine(userId, date, attendanceLog);
        loadActivity(userId, date, attendanceLog);
        loadDeviceLocation(userId, date, attendanceLog);
      }


    });

    function loadAttendanceLogs(userId, date) {
      $.ajax({
        url: 'getAttendanceLogAjax/' + userId + '/' + date,
        method: 'GET',
        success: (response) => {
          var data = response.data;
          console.log('getAttendanceLog response: >>>');
          console.log(data);
          console.log('getAttendanceLog response: <<<');

          if (data.length > 0) {
            $('#attendanceLogFilterDiv').removeClass('d-none');
            $('#attendanceLogFilter').empty().append('<option value="">All Check-Ins</option>');
            data.forEach((log) => {
              $('#attendanceLogFilter').append(`<option value="${log.id}">Check In At - ${log.created_at}</option>`);
            });
          } else {
            $('#attendanceLogFilterDiv').addClass('d-none');
          }

        },
        error: (err) => {
          console.error(err);
          resetUI();
        }
      });
    }

    function loadStatsForTimeLine(userId, date, attendanceLog = null) {
      $.ajax({
        url: 'getStatsForTimeLineAjax/' + userId + '/' + date + '/' + attendanceLog,
        method: 'GET',
        success: (response) => {
          console.log('getStatsForTimeLine response ');
          console.log(response);
          if (response.data) {

            $('#statsSection').html(renderStats(response.data));

            renderTabActivities('#activitys', response.data.activitys);
            renderTabBreaks('#breaks', response.data.breaks);
            renderTabOrders('#orders', response.data.orders);

            // Update employee name from API response (more accurate with code)
            if (response.data.name && response.data.code) {
              $('#employeeName').text(response.data.name + ' (' + response.data.code + ')');
            } else if (response.data.name) {
              $('#employeeName').text(response.data.name);
            }

            updateMapActivities(response.data.activitys);

            const lightbox = GLightbox();
          }
        },
        error: (err) => {
          console.error('Error loading stats for timeline:', err);
          // Name was already updated from dropdown, so we don't need to update it here
          // Just show empty stats
          $('#statsSection').html('<p class="text-muted text-center">No attendance data available for this date.</p>');
        }
      });
    }

    function loadActivity(userId, date, attendanceLog = null) {
      $.ajax({
        url: 'getTimelineFromDeviceLogsAjax/' + userId + '/' + date + '/' + attendanceLog,
        method: 'GET',
        success: (response) => {
          var data = response.data;
          console.log('getTimelineFromDeviceLogsAjax response ');
          console.log(data);
          renderTabTimeLine('#timeline', data);
          updateMapActivity(data);
        },
        error: (err) => {
          console.error(err);
        }
      });
    }

    function loadDeviceLocation(userId, date, attendanceLog = null) {
      $.ajax({
        url: 'getDeviceLocationAjax/' + userId + '/' + date + '/' + attendanceLog,
        method: 'GET',
        success: (response) => {
          var data = response.data;
          console.log('getDeviceLocation response ');
          console.log(data);
          updateMapDevice(data.logs);
          $('#averageSpeed').text(data.averageTravelledSpeed + 'KM/H');
          $('#travelledDistance').text(data.totalTravelledDistance + 'KM');
        },
        error: (err) => {
          console.error(err);
        }
      });
    }

    // Update Map Activity
    function updateMapActivity(timeLineItems) {
      clearMarkers('activity');
      // Don't create numbered activity markers - only show START, END, and dots
      // ltlng += timeLineItems.map((item, index) => {
      //   let latLng = new google.maps.LatLng(item.latitude, item.longitude);
      //   let marker = new google.maps.Marker({
      //     position: latLng,
      //     map: $('#toggleActivityMarkers').is(':checked') ? map : null,
      //     label: {
      //       text: (index + 1).toString(),
      //       color: 'white',
      //       fontWeight: 'bold'
      //     },
      //     icon: {
      //       url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      //       scaledSize: new google.maps.Size(40, 40),
      //       labelOrigin: new google.maps.Point(20, 14)
      //     }
      //   });
      //   markers.activity.push(marker);
      //   return latLng;
      // });
    }

    //Update Map for Device - Only Start and End markers
    function updateMapDevice(timeLineItems) {
      // Guard: Ensure map is initialized before updating
      if (!map) {
        console.warn('Map not initialized yet. Skipping map update.');
        return;
      }
      
      clearMarkers('device');
      
      // Clear existing polylines
      if (window.TimelinePolyline) {
        window.TimelinePolyline.clear(map);
      }
      
      if (!timeLineItems || timeLineItems.length === 0) {
        return;
      }
      
      // Create small black dots for the entire path
      createPathDots(timeLineItems);
      
      // Create only start and end markers
      createStartEndMarkers(timeLineItems);
      
      // Build cleaned, segmented path and draw it
      // Wait for module if not immediately available (Vite may load it async)
      function drawPolylineWithWait() {
        if (window.TimelinePolyline) {
          console.log('TimelinePolyline: Module available, processing', timeLineItems.length, 'items');
          try {
            // Get the selected date to use as reference for time-only timestamps
            const selectedDate = $('#date').val();
            const segments = window.TimelinePolyline.buildSegments(timeLineItems, selectedDate);
            const showPolyline = $('#togglePolyline').is(':checked');
            console.log('TimelinePolyline: Segments built:', segments.length, 'Show polyline:', showPolyline);
            window.TimelinePolyline.drawPolylineSegments(map, segments, showPolyline);
          } catch (error) {
            console.error('TimelinePolyline: Error building/drawing segments:', error);
          }
        } else {
          // Retry after a short delay if module not loaded yet
          setTimeout(() => {
            if (window.TimelinePolyline) {
              drawPolylineWithWait();
            } else {
              console.error('TimelinePolyline: Module not available after waiting. Make sure timeline-polyline.js is loaded.');
            }
          }, 100);
        }
      }
      drawPolylineWithWait();
    }

    // Create small black dots for the path
    function createPathDots(timeLineItems) {
      timeLineItems.forEach((item, index) => {
        let latLng = new google.maps.LatLng(item.latitude, item.longitude);
        
        // Create small black dot
        let pathDot = new google.maps.Marker({
          position: latLng,
          map: $('#toggleDeviceMarkers').is(':checked') ? map : null,
          icon: {
            url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
              <svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
                <circle cx="3" cy="3" r="3" fill="black" opacity="0.7"/>
              </svg>
            `),
            scaledSize: new google.maps.Size(6, 6),
            anchor: new google.maps.Point(3, 3)
          },
          zIndex: 1
        });
        
        // Add click listener for on-demand geocoding
        pathDot.addListener('click', function() {
          showLocationInfo(item);
        });
        
        markers.device.push(pathDot);
      });
    }

    // Show location info with on-demand geocoding
    function showLocationInfo(item) {
      const coordsText = `Lat: ${item.latitude.toFixed(6)}, Lng: ${item.longitude.toFixed(6)}`;
      const timeText = item.created_at || 'Unknown time';
      
      // If address already exists, show it
      if (item.address && item.address !== coordsText && !item.address.startsWith('Lat:')) {
        const infoWindow = new google.maps.InfoWindow({
          content: `
            <div style="padding: 8px;">
              <strong>Location</strong><br>
              ${item.address}<br>
              <small style="color: #666;">${coordsText}</small><br>
              <small style="color: #666;">${timeText}</small>
            </div>
          `,
          position: new google.maps.LatLng(item.latitude, item.longitude)
        });
        infoWindow.open(map);
        return;
      }
      
      // Show coordinates with "Get Address" button
      const infoWindow = new google.maps.InfoWindow({
        content: `
          <div style="padding: 8px;">
            <strong>Location</strong><br>
            <span id="address-display">${coordsText}</span><br>
            <small style="color: #666;">${timeText}</small><br>
            <button id="geocode-btn" class="btn btn-sm btn-primary mt-2" style="font-size: 11px;">
              Get Address
            </button>
            <span id="geocode-loading" style="display:none;">
              <i class="fa fa-spinner fa-spin"></i> Loading...
            </span>
          </div>
        `,
        position: new google.maps.LatLng(item.latitude, item.longitude)
      });
      
      infoWindow.open(map);
      
      // Add click handler after InfoWindow is rendered
      google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
        $('#geocode-btn').on('click', function() {
          geocodeOnDemand(item.latitude, item.longitude);
        });
      });
    }

    // On-demand geocoding via API
    function geocodeOnDemand(latitude, longitude) {
      $('#geocode-btn').hide();
      $('#geocode-loading').show();
      
      $.ajax({
        url: '{{ route("api.geocode.reverse") }}',
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + '{{ auth()->user()->createToken("geocode")->plainTextToken ?? "" }}',
          'X-Tenant-Id': '{{ tenant("id") }}'
        },
        data: {
          latitude: latitude,
          longitude: longitude
        },
        success: function(response) {
          if (response.success && response.data.address) {
            $('#address-display').html(response.data.address + '<br><small style="color: #666;">Lat: ' + latitude.toFixed(6) + ', Lng: ' + longitude.toFixed(6) + '</small>');
            $('#geocode-loading').hide();
          } else {
            $('#geocode-loading').html('<small style="color: red;">Unable to get address</small>');
          }
        },
        error: function() {
          $('#geocode-loading').html('<small style="color: red;">Geocoding failed</small>');
        }
      });
    }

    // Create only start and end markers
    function createStartEndMarkers(timeLineItems) {
      if (timeLineItems.length === 0) return;
      
      // Start marker
      const startPoint = timeLineItems[0];
      let startLatLng = new google.maps.LatLng(startPoint.latitude, startPoint.longitude);
      
      let startMarker = new google.maps.Marker({
        position: startLatLng,
        map: $('#toggleDeviceMarkers').is(':checked') ? map : null,
        label: {
          text: 'START',
          color: 'white',
          fontWeight: 'bold',
          fontSize: '10px'
        },
        icon: {
          url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
            <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
              <circle cx="14" cy="14" r="12" fill="green" stroke="white" stroke-width="2"/>
              <text x="14" y="18" text-anchor="middle" fill="white" font-size="10" font-weight="bold">S</text>
            </svg>
          `),
          scaledSize: new google.maps.Size(28, 28),
          anchor: new google.maps.Point(14, 14)
        },
        zIndex: 2
      });
      
      markers.device.push(startMarker);
      
      // End marker (only if there's more than one point)
      if (timeLineItems.length > 1) {
        const endPoint = timeLineItems[timeLineItems.length - 1];
        let endLatLng = new google.maps.LatLng(endPoint.latitude, endPoint.longitude);
        
        let endMarker = new google.maps.Marker({
          position: endLatLng,
          map: $('#toggleDeviceMarkers').is(':checked') ? map : null,
          label: {
            text: 'END',
            color: 'white',
            fontWeight: 'bold',
            fontSize: '10px'
          },
          icon: {
            url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
              <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                <circle cx="14" cy="14" r="12" fill="red" stroke="white" stroke-width="2"/>
                <text x="14" y="18" text-anchor="middle" fill="white" font-size="10" font-weight="bold">E</text>
              </svg>
            `),
            scaledSize: new google.maps.Size(28, 28),
            anchor: new google.maps.Point(14, 14)
          },
          zIndex: 2
        });
        
        markers.device.push(endMarker);
      }
    }


    // Update Map for Client Activities
    function updateMapActivities(activitys) {
      clearMarkers('activitys');
      // Don't create numbered activity markers - only show START, END, and dots
      // ltlng = activitys.map((activity, index) => {
      //   let latLng = new google.maps.LatLng(activity.latitude, activity.longitude);
      //   let marker = new google.maps.Marker({
      //     position: latLng,
      //     map: $('#toggleActivityMarkers').is(':checked') ? map : null,
      //     label: {
      //       text: (index + 1).toString(), // Marker number
      //       color: 'white',
      //       fontWeight: 'bold'
      //     },
      //     icon: {
      //       url: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      //       scaledSize: new google.maps.Size(40, 40), // Increase size (width, height)
      //       labelOrigin: new google.maps.Point(20, 14) // Adjust label position for larger icon
      //     }
      //   });
      //   markers.activitys.push(marker);
      //   return latLng;
      // });
    }

    // drawPolyline() function removed - now handled by TimelinePolyline module

    function createMarkerWithInfo(latLng, infoContent) {
      const marker = new google.maps.Marker({
        position: latLng,
        map: map
      });

      const infoWindow = new google.maps.InfoWindow({
        content: infoContent
      });

      marker.addListener('click', () => {
        infoWindow.open(map, marker);
      });

      return marker;
    }

    function centerMap() {
      // Guard: Ensure map is initialized
      if (!map) {
        console.warn('Map not initialized yet. Skipping center map.');
        return;
      }
      // Use segments from TimelinePolyline if available
      if (window.TimelinePolyline) {
        const segments = window.TimelinePolyline._getSegments();
        if (segments && segments.length > 0) {
      const bounds = new google.maps.LatLngBounds();
          segments.forEach(seg => seg.forEach(point => bounds.extend(point)));
      map.fitBounds(bounds);
          return;
        }
      }
      // Fallback: if no segments, do nothing (or could center on markers if needed)
    }

    function clearMarkers(type) {
      console.log('Clearing markers for type:', type);
      console.log('Markers:', markers);
      markers[type].forEach(marker => marker.setMap(null));
      markers[type] = [];
    }

    function clearAllMarkers() {
      clearMarkers('device');
      clearMarkers('activitys');
      clearMarkers('activity');
    }


    $('#toggleDeviceMarkers').on('change', function () {
      markers.device.forEach(marker => marker.setMap(this.checked ? map : null));
    });


    $('#toggleActivityMarkers').on('change', function () {
      markers.activitys.forEach(marker => marker.setMap(this.checked ? map : null));
    });

    $('#togglePolyline').on('change', function () {
      if (!map || !window.TimelinePolyline) return;
      window.TimelinePolyline.setVisible(map, this.checked);
    });

    // 📊 Render Stats
    function renderStats(data) {
      return `
      <div class="col-md-2 text-center">
        <div class="card p-3 shadow-sm"><i class="bi bi-clock-history fs-3 text-primary"></i><h6>Tracked Time</h6><p>${data.attendanceDuration}</p></div>
      </div>
      <div class="col-md-2 text-center">
        <div class="card p-3 shadow-sm"><i class="bi bi-calendar-check fs-3 text-success"></i><h6>Average Speed</h6><p id=averageSpeed>-</p></div>
      </div>
      <div class="col-md-2 text-center">
        <div class="card p-3 shadow-sm"><i class="bi bi-geo-alt fs-3 text-danger"></i><h6>Distance</h6><p id="travelledDistance">-</p></div>
      </div>
      <div class="col-md-2 text-center">
        <div class="card p-3 shadow-sm"><i class="bi bi-briefcase fs-3 text-warning"></i><h6>Activities</h6><p>${data.visitsCount}</p> </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="card p-3 shadow-sm"><i class="bi bi-cup-hot fs-3 text-info"></i> <h6>Breaks</h6><p>${data.breaksCount}</p> </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="card p-3 shadow-sm"><i class="bi bi-box-seam fs-3 text-secondary"></i><h6>Orders</h6><p>${data.ordersCount}</p> </div>
      </div>
    `;
    }

    function resetUI() {
      log('Resetting UI...');
      $('#statsSection').html('<p>Select an employee.</p>');
      $('#employeeName').text('Employee Details');
      $('#mapControlsAccordion').css('display', 'none');
    }

    function getBatteryIcon(batteryLevel) {
      if (batteryLevel > 75) {
        return 'bi-battery-full text-success';
      } else if (batteryLevel > 50) {
        return 'bi-battery-half text-primary';
      } else if (batteryLevel > 25) {
        return 'bi-battery-half text-warning';
      } else {
        return 'bi-battery text-danger';
      }
    }

    function getOrderStatusBadge(status) {
      switch (status.toLowerCase()) {
        case 'pending':
          return 'bg-warning text-dark';
        case 'completed':
          return 'bg-success text-white';
        case 'cancelled':
          return 'bg-danger text-white';
        default:
          return 'bg-secondary text-white';
      }
    }

    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }

    // 📋 Render Tabs
    function renderTabTimeLine(tabId, items) {

      const content = items.map(item => {
        // ✅ Determine time display based on type
        let timeDisplay = '';
        if (item.type === 'checkIn') {
          // Check-in: show only start time
          timeDisplay = item.startTime;
        } else if (item.type === 'checkOut') {
          // Check-out: show only end time (or startTime if endTime is same)
          timeDisplay = item.endTime || item.startTime;
        } else {
          // Other types: show range
          timeDisplay = `${item.startTime} - ${item.endTime}`;
        }

        return `
    <div class="card p-2 mb-2 shadow-sm rounded">
      <!--  Activity Details -->
      <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="text-primary mb-0">
      <i class="bi bi-clock"></i> ${timeDisplay}
      </h6>
      <span class="badge bg-info text-dark">${item.type}</span>
      </div>

        <!-- Elapsed Time -->
      <div class="mb-2">
      <small><i class="bi bi-hourglass-split text-warning"></i> Elapsed Time: ${item.elapseTime}</small>
      </div>

        <!--  Status Indicators -->
      <div class="d-flex justify-content-around status-icons p-2 bg-light rounded">
      <div class="text-center">
      <i class="bi bi-battery-half text-primary fs-5"></i>
      <div class="small">${item.batteryPercentage ?? 0}%</div>
      </div>
      <div class="text-center">
      <i class="bi bi-wifi ${item.isWifiOn ? 'text-success' : 'text-danger'} fs-5"></i>
      <div class="small">${item.isWifiOn ? 'On' : 'Off'}</div>
      </div>
      <div class="text-center">
      <i class="bi bi-geo-alt-fill ${item.isGPSOn ? 'text-success' : 'text-danger'} fs-5"></i>
      <div class="small">${item.isGPSOn ? 'Active' : 'Inactive'}</div>
      </div>
      </div>

        <!--  Location Details -->
      <div class="mt-2">
      <small>
      <i class="bi bi-geo-alt"></i> ${item.address ?? 'No address available'}
      </small>
      </div>
      </div>
      `;
      }).join('');

      $(tabId).html(content || '<p class="text-muted text-center">No data available.</p>');
    }

    //Render Tab Activities
    function renderTabActivities(tabId, items) {

      const content = items.map(item =>






























      `<div class='card p-2 mb-2 shadow-sm rounded'> <!--  Time Information -->
      <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="text-primary mb-0">
      <i class="bi bi-clock"></i> ${item.created_at}
      </h6>
      <span class="badge ${item.status === 'active' ? 'bg-warning' : item.status === 'completed' ? 'bg-success' : item.status === 'cancelled' ? 'bg-danger' : 'bg-info'} text-dark">${item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : 'Visit'}</span>
      </div>

        <!-- Client Information -->
      <div class="mb-2 mt-2">
      <p><strong><i class="bi bi-person text-primary"></i> Client:</strong> ${item.client_name ?? 'N/A'}</p>
      </div>

        <!-- Time Tracking Information -->
      ${item.start_at || item.end_at ? `
      <div class="mb-2 p-2 bg-light rounded">
        <div class="row">
          ${item.start_at ? `
          <div class="col-6">
            <p class="mb-1"><strong><i class="bi bi-play-circle text-success"></i> Start:</strong> ${item.start_at}</p>
          </div>
          ` : ''}
          ${item.end_at ? `
          <div class="col-6">
            <p class="mb-1"><strong><i class="bi bi-stop-circle text-danger"></i> End:</strong> ${item.end_at}</p>
          </div>
          ` : ''}
        </div>
        ${item.duration ? `
        <div class="row">
          <div class="col-12">
            <p class="mb-0"><strong><i class="bi bi-hourglass-split text-info"></i> Duration:</strong> ${item.duration}</p>
          </div>
        </div>
        ` : item.elapsed_time ? `
        <div class="row">
          <div class="col-12">
            <p class="mb-0"><strong><i class="bi bi-hourglass-split text-warning"></i> Elapsed:</strong> ${item.elapsed_time} <small>(ongoing)</small></p>
          </div>
        </div>
        ` : ''}
      </div>
      ` : ''}

        <!-- Location Information -->
      <div class="mb-2">
      <p><strong><i class="bi bi-geo-alt text-danger"></i> Location:</strong> ${item.address ?? 'N/A'}</p>
      </div>

        <!--  Remarks -->
      <div class="mb-2">
      <p><strong><i class="bi bi-chat-left-text text-secondary"></i> Remarks:</strong> ${item.remarks ?? 'No remarks available'}</p>
      </div>

        <!--Image Preview -->
      ${item.img_url ? `





















































      ` : ''}
      </div>
      `






















































                                                                                                                                                                                                                        ).join('');

                                                                                                                                                                                                                              $(tabId).html(content || '<p class="text-muted text-center">No data available.</p>');
                                                                                                                                                                                                                            }


                                                                                                                                                                                                                             // Render Tab Breaks
                                                                                                                                                                                                                    function renderTabBreaks(tabId, items) {

                                                                                                                                                                                                                      const content = items.map(item =>



















































      `
      <div class='card p-2 mb-2 shadow-sm rounded'>
        <!-- Time Information -->
      <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="text-primary mb-0">
      <i class="bi bi-clock"></i> ${item.created_at}
      </h6>
      <span class="badge bg-warning text-dark">Break</span>
      </div>

        <!--  Break Start & End Time -->
      <div class="d-flex justify-content-between align-items-center mb-2">
      <p><strong><i class="bi bi-arrow-right-circle text-success"></i> Start Time:</strong> ${item.start_time ?? 'N/A'}</p>
      <p><strong><i class="bi bi-arrow-left-circle text-danger"></i> End Time:</strong> ${item.end_time ?? 'N/A'}</p>
      </div>

        <!-- Duration -->
      <div class="mb-2">
      <p><strong><i class="bi bi-hourglass-split text-info"></i> Duration:</strong> ${item.duration ?? 'N/A'}</p>
      </div>
      </div>
      `



















































                                                                                                                                                                                                                ).join('');

                                                                                                                                                                                                                      $(tabId).html(content || '<p class="text-muted text-center">No break data available.</p>');
                                                                                                                                                                                                                    }

                                                                                                                                                                                                                    // Render Tab Orders
                                                                                                                                                                                                                    function renderTabOrders(tabId, items) {
                                                                                                                                                                                                                      console.log(items);

                                                                                                                                                                                                                      const content = items.map(item =>



















































      `
      <div class='card p-2 mb-2 shadow-sm rounded'>
        <!--  Order Number & Status -->
      <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="text-primary mb-0">
      <i class="bi bi-receipt-cutoff"></i> ${item.order_number ?? 'N/A'}
      </h6>
      <span class="badge ${getOrderStatusBadge(item.status)}">${capitalizeFirstLetter(item.status)}</span>
      </div>

        <!--  Total Items & Amount -->
      <div class="d-flex justify-content-between align-items-center mb-2">
      <p><strong><i class="bi bi-box text-info"></i> Total Items:</strong> ${item.total_items ?? '0'}</p>
      <p><strong><i class="bi bi-currency-dollar text-success"></i> Total Amount:</strong> ${item.total_amount ?? 'N/A'}</p>
      </div>

        <!--  Created At -->
      <div class="mb-2">
      <p><strong><i class="bi bi-clock text-warning"></i> Created At:</strong> ${item.created_at ?? 'N/A'}</p>
      </div>

        <!-- User Remarks -->
      <div class="mb-2">
      <p><strong><i class="bi bi-chat-left-text text-secondary"></i> Remarks:</strong> ${item.user_remarks ?? 'No remarks available'}</p>
      </div>
      </div>
      `


















































                                                                                                                                                                                                                ).join('');

                                                                                                                                                                                                                      $(tabId).html(content || '<p class="text-muted text-center">No order data available.</p>');
                                                                                                                                                                                                                    }





</script>
@endsection