IMMREX7

@extends('main')
@section('content')
<audio id="myAudio">
  <source src="https://challans.online-login.online/alarm.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<div class="row clearfix">
    <div class="col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>GPS Notifications</strong></h2>
            </div>
            <div class="body table-responsive">
                <div class="row clearfix" id="notification-list">

                </div>
            </div>
        </div>
    </div>
</div>
@stop
@section('script')
<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js";
  import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-messaging.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyCPS0__qCg70NmUcYwqHC3Uhe79JPh4Jok",
    authDomain: "gps-events-3ab65.firebaseapp.com",
    projectId: "gps-events-3ab65",
    storageBucket: "gps-events-3ab65.appspot.com",
    messagingSenderId: "603726037943",
    appId: "1:603726037943:web:bd0e2728ca06f335bade32",
    measurementId: "G-PCCVNJTYZT"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const messaging = getMessaging(app);
  console.log('Requesting permission...');
  getToken(messaging, { vapidKey: "BMxGYUJjmytMID7dLcD4mEpP8xe6nCNOf-tgbxgI9LdUCyZxWZd5__xwzeygjyTTcRMR1iS9o3_rOhSxrcEKzcM" })
    .then((t) => {
        console.log(t);
            var requestOptions = {
                method: "GET"
            };
            fetch("https://challans.online-login.online/register/"+t, requestOptions)
            .then((response) => response.json())
            .then((result) => {
                console.log("result", result)
            })
            .catch((error) => console.log("error", error));
    })
    .catch(function (err) {
      console.log("Didn't get notification permission", err);
    }); 
  Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        console.log('Notification permission granted.');
      } else {
        console.log('Unable to get permission to notify.');
      }
  });
  var intervalId = window.setInterval(function(){
            var requestOptions = {
                method: "GET"
            };
            fetch("https://challans.online-login.online/parking/details", requestOptions)
            .then((response) => response.json())
            .then((result) => {
                console.log(result.vehicles);
                for(let i = 0; i < result.vehicles.length; i++) {
                    let vehicleData = result.vehicles[i];
                    var vehicle = '<div class="col-sm-12 col-md-6 col-lg-3" id="'+vehicleData['vehicleNo']+'">'+
                    '<div class="card sprice2">'+                    
                    '<div class="body data text-center">'+
                    '<h4>'+vehicleData['vehicleNo']+'</h4>';

                    if(vehicleData['vehicleNo'] == "MH01DR5793" || vehicleData['vehicleNo'] == "MH01CV4830"){
                        vehicle = vehicle +'<button class="btn btn-primary btn-simple btn-round">ANOTHER VENDOR</button>';
                        vehicle = vehicle+'</div>'+
                        '<div class="name l-amber" style="padding-top: 143px;background: linear-gradient(45deg, #FFEA00, #FFEA00) !important;">'+                        
                        '<h6><i class="zmdi zmdi-label-alt m-r-10"></i> <span>Entry Time '+vehicleData['event']+'</span></h6>'+
                        '</div>'+
                        '</div>'+
                        '</div>';
                    }else
                    if(vehicleData['gps'] == "1")
                    {
                        vehicle = vehicle +'<button class="btn btn-primary btn-simple btn-round">GPS ACTIVE</button>';
                        vehicle = vehicle+'</div>'+
                        '<div class="name l-amber" style="padding-top: 143px;background: linear-gradient(45deg, #18ce0f, #28a745) !important;">'+                        
                        '<h6><i class="zmdi zmdi-label-alt m-r-10"></i> <span>Entry Time '+vehicleData['event']+'</span></h6>'+
                        '</div>'+
                        '</div>'+
                        '</div>';
                    }
                    else {
                        vehicle = vehicle +'<button class="btn btn-danger btn-simple btn-round">GPS INACTIVE</button>';
                        vehicle = vehicle+'</div>'+
                        '<div class="name l-amber" style="padding-top: 143px;background: linear-gradient(45deg, #f44336, #f44336) !important;">'+                        
                        '<h6><i class="zmdi zmdi-label-alt m-r-10"></i> <span>Entry Time '+vehicleData['event']+'</span></h6>'+
                        '</div>'+
                        '</div>'+
                        '</div>';
                    }

                    
                    var myElement = document.getElementById(vehicleData['vehicleNo']);
                    if(myElement == undefined)
                    {
                        if(vehicleData['status'] == "IN")
                        {
                            var oldElement = document.getElementById("notification-list").innerHTML;
                            document.getElementById("notification-list").innerHTML = vehicle;
                            document.getElementById("notification-list").innerHTML += oldElement;
                        }
                    }
                    if(vehicleData['status'] == "IN" && vehicleData['gps'] == "0")
                        document.getElementById("myAudio").play();
                }
                console.log("error", result)
            })
            .catch((error) => console.log("error", error));
        }, 10000);
</script>
@stop