   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

   <script>
      let watchId = null;
      let clientCode = '<?= @$this->uri->segment('1') ?>';

      function sendLocation(position) {

         $.ajax({
            url: "<?= base_url('save-location') ?>",
            type: "POST",
            dataType: "json",
            data: {
               latitude: position.coords.latitude,
               longitude: position.coords.longitude,
               clientCode: clientCode
            },
            success: function(response) {
               console.log("Location Updated:", response);
               let html = "";
               const colors = ['bg-success', 'bg-primary', 'bg-warning'];
               console.log(response.statusCode);
               console.log(response.data);
               if (response.statusCode == '2') {
                  html = `
                    <div class="col-md-12 text-center">
                        <h1 class="text-danger">${response.msg}</h1>
                    </div>
                `;
               } else if (response.data) {

                  $.each(response.data, function(index, area) {

                     let badgeClass = (area.status === "ACTIVE" && area.availableAreaCount > 0) ?
                        colors[index % 3] :
                        "bg-danger";

                     let badgeText = (area.status === "ACTIVE" && area.availableAreaCount > 0) ?
                        area.availableAreaCount :
                        "FULL";

                     html += `
                        <div class="col-md-4">
                            <div class="card shadow-sm mb-3">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <span><b>${area.parkingLotType}</b></span>
                                    <span class="badge ${badgeClass} rounded-pill">${badgeText}</span>
                                </div>
                            </div>
                        </div>
                    `;
                  });

               } else {

                  html = `
                    <div class="col-md-12 text-center">
                        <h1 class="text-danger">No Data Found!</h1>
                    </div>
                `;
               }

               $("#parkingAreaList").html(html);
            }
         });

      }

      function getLocationAndSend() {

         if (!navigator.geolocation) {
            alert("Geolocation is not supported in this browser.");
            return;
         }

         navigator.geolocation.getCurrentPosition(

            function(position) {
               // Permission mil gayi
               sendLocation(position);
            },

            function(error) {

               switch (error.code) {

                  case error.PERMISSION_DENIED:

                     alert(
                        "Location permission is required.\n\n" +
                        "Please click 'Allow' when the browser asks for location access.\n\n" +
                        "If you have already blocked it, click the 🔒 icon in the address bar → Location → Allow, then refresh the page."
                     );
                     break;

                  case error.POSITION_UNAVAILABLE:
                     alert("Location information is unavailable.");
                     break;

                  case error.TIMEOUT:
                     alert("Location request timed out. Please try again.");
                     break;

                  default:
                     alert("Unable to get your location.");
               }

            },

            {
               enableHighAccuracy: true,
               timeout: 10000,
               maximumAge: 0
            }

         );
      }

      $(document).ready(function() {

         // First time
         getLocationAndSend();

         // Every 5 minutes
         setInterval(getLocationAndSend, 5 * 60 * 1000);

         function success(position) {
            console.log(position.coords.latitude);
            console.log(position.coords.longitude);

            sendLocation(position);
         }

         function error(err) {
            console.log(err);

            if (err.code === err.PERMISSION_DENIED) {
               // alert("Please allow location permission.");
            }
         }

         navigator.geolocation.getCurrentPosition(success, error);
      });
      navigator.permissions.query({ name: "geolocation" }).then(function(result) {
    console.log(result.state);
});
   </script>
   </body>

   </html>