<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P2000 Meldingen</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Fira Code -->
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
      /* Voeg Fira Code toe als monospace-font in Tailwind */
      @layer base {
          body {
              font-family: 'Fira Code', monospace;
          }
      }
  </style>
</head>

<body class="bg-gray-900 text-black">
  
  <!-- Header -->
  <header class="fixed top-0 w-full bg-gray-800 text-white shadow-md z-50">
    <div class="flex items-center justify-between px-4 py-3">
      <h1 class="text-lg font-bold">P2000</h1>
      <!--<div id="status" class="text-white self-center text-sm font-semibold whitespace-nowrap dark:text-black">...</div>-->
      <div id="count" class="text-white self-center text-sm font-semibold whitespace-nowrap dark:text-black">0</div>
      <div class="flex items-center space-x-4">
        <!--<span class="text-sm bg-green-500 text-white py-1 px-2 rounded">Online</span>-->
        <button 
          id="soundButton" 
          class="text-sm bg-green-500 text-white py-1 px-2 rounded"
          onclick="toggleSound()">
          G
        </button>
        <button id="openSettingsRegios"
         class="text-sm bg-blue-500 text-white py-1 px-2 rounded">
          R
        </button>
        <button id="openSettingsDisciplines"
         class="text-sm bg-blue-500 text-white py-1 px-2 rounded">
          D
        </button>
      </div>
    </div>
  </header>
  <script type="module">
    // ================================================================
// FIREBASE
// ================================================================
// Import the functions you need from the SDKs you need
import { initializeApp }
from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";

import { getDatabase, onChildAdded, onChildRemoved, ref, 
         query, limitToLast, limitToFirst, orderByChild, startAt, endAt, 
         equalTo  }
from "https://www.gstatic.com/firebasejs/11.1.0/firebase-database.js";

const firebaseConfig = {
  authDomain: "p2kapp.firebaseapp.com",
  databaseURL: "https://p2kapp-default-rtdb.europe-west1.firebasedatabase.app",
};


// Firebase initialiseren
const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);

// Referentie naar de collectie 'meldingen'
const alarmReference = ref(db, 'meldingen');

let hourswindow = 2; // 1 uur

// Bepaal de huidige tijd en bereken de tijd van precies één uur geleden
const now = new Date();
const oneHourAgo = new Date(now.getTime() - hourswindow * (60 * 60 * 1000)).toISOString(); // ISO 8601-formaat
console.log(oneHourAgo);

// Query om de eerste 10 alarmen op te halen
const firstFiveAlarmsQuery = query(
  alarmReference,
  orderByChild('DatumTijd'),
  limitToLast(200),          // Haal de laatste X aantal alarmen op
  startAt(oneHourAgo),       // Haal alleen alarmen na dit tijdstip op
);


// ================================================================
// OVERIGE
// ================================================================
let cnt = 0;

let currentPage = 1; // Startpagina
const itemsPerPage = 20; // Aantal items per pagina

let alarms = [];
let filteredAlarms = [];

const allRegios     = ['Groningen', 'Friesland', 'Drenthe', 'IJsselland', 'Twente', 'Noord- en Oost-Gelderland', 'Gelderland-Midden', 'Gelderland-Zuid', 'Utrecht', 'Noord-Holland Noord', 'Zaanstreek-Waterland', 'Kennemerland', 'Amsterdam-Amstelland', 'Gooi en Vechtstreek', 'Haaglanden', 'Hollands-Midden', 'Rotterdam-Rijnmond', 'Zuid-Holland Zuid', 'Zeeland', 'Midden- en West-Brabant', 'Brabant-Noord', 'Brabant-Zuidoost', 'Limburg-Noord', 'Limburg-Zuid', 'Flevoland', 'Onbekend'];
const allDiscipline = ['Brandweer', 'Ambulance', 'Politie', 'MMT', 'KNRM', 'Bruggen', 'Test', 'Server', 'Onbekend'];

//let selectedDisciplines = ['Brandweer', 'Ambulance', 'Politie', 'MMT', 'KNRM', 'Bruggen', 'Test', 'Onbekend'];
loadSelectedDisciplinesRegios();
let selectedDisciplines = [];
let selectedRegios      = [];


let filteredAlarmsOud = 0;

// Element om de alarmen weer te geven
const alarmList = document.getElementById("alarm-list");

let laatstWeergegevenTijdsspanne = null; // Houdt de laatst weergegeven tijdsspanne bij

// Hulpfunctie om een melding als card toe te voegen
function addAlarmCard(alarm)
{
  const datumtijd = formatDateTime(alarm.DatumTijd);
  
  const tijdNu  = new Date(); // Huidige tijd
  const tijdAlm = new Date(alarm.DatumTijd);

  var href = `#`;
  var onclick = `#`;
          
  if (alarm.Location && alarm.Location.Latitude !== 0.0 && alarm.Location.Longitude !== 0.0)
  {
    if (typeof map !== 'undefined')
    {
      onclick = `goToLocation(${alarm.Location.Latitude},${alarm.Location.Longitude}, 13); return false;`;
      
      addMarker(alarm.Location.Latitude,alarm.Location.Longitude, alarm.MessageText);
    }
    else
    {
      href=`https://www.google.com/maps?q=${alarm.Location.Latitude},${alarm.Location.Longitude}`;
    }
  }

  const card = document.createElement("div");
  //card.className = "";

  // Bereken het verschil in minuten
  const verschilInMinuten = Math.floor((tijdNu - tijdAlm) / (1000 * 60));
    // Bepaal de tijdsspanne
  let huidigeTijdsspanne  = '';
  if (verschilInMinuten > 60) {
    huidigeTijdsspanne  = '1 uur';
  } else if (verschilInMinuten > 10) {
    huidigeTijdsspanne  = '30 min';
  } else if (verschilInMinuten > 5) {
    huidigeTijdsspanne  = '5 min';
  }
  console.log(huidigeTijdsspanne);
  
  // Alleen een nieuwe tijdsspanne tonen als deze anders is dan de vorige
  if (huidigeTijdsspanne && huidigeTijdsspanne !== laatstWeergegevenTijdsspanne) {
    const tijdsspanneMarker = document.createElement('div');
    tijdsspanneMarker.className = "text-gray-500 text-sm text-center mb-2";
    //tijdsspanneMarker.textContent = huidigeTijdsspanne;

    tijdsspanneMarker.innerHTML = `
      <!-- Time Marker -->  
      <div class="flex items-center justify-center w-full text-xs px-8 py-4">
        <div class="h-px bg-gray-300 flex-[1]"></div>
          <span class="px-4 text-center text-gray-200">
            ${huidigeTijdsspanne}
          </span>
        <div class="h-px bg-gray-300 flex-[9]"></div>
      </div>
    `;

    alarmList.appendChild(tijdsspanneMarker);
    
    laatstWeergegevenTijdsspanne = huidigeTijdsspanne; // Update de laatst weergegeven tijdsspanne
  }
  
  
  card.innerHTML = `
    <!-- Card -->
    <div class="space-y-4 py-1">
      <div class="bg-gray-700 shadow border border-gray-600 rounded-lg overflow-hidden">
        
        <div class="flex justify-between items-center p-2">
          <div class="text-xs bg-${alarm.Colour}-500 text-white py-0.5 px-2 rounded self-start">${datumtijd.time}</div>
          <!--<div class="text-xs bg-red-600 text-white py-0.5 px-2 rounded">
              P 1
          </div>-->
          <div class="text-xs bg-gray-600 text-gray-200 py-0.5 px-2 rounded">
            ${datumtijd.date}
            <!--<span class="text-xs text-gray-300 self-start">${datumtijd.date}</span>-->
          </div>
        </div>

        <div class="flex justify-between items-center p-2">
          <div class="text-base font-semibold text-gray-100 px-2 flex-1">
            <h5>${alarm.MessageText}</h5>
          </div>
        </div>
        
        <div class="p-2 space-y-2 border-t border-gray-600">
          ${alarm.Capcodes.map(capcode => `
          <div class="text-xs text-gray-300 flex justify-between items-start">
            <span class="flex items-center text-gray-400">
              <span class="w-2 h-2 bg-${capcode.Colour}-500 inline-block mr-2"></span>
              ${capcode.CapcodeNr}
            </span>
            <span class="flex-1 text-left px-2">
            ${capcode.Omschrijving} ${capcode.Plaats ? `(<i>${capcode.Plaats}</i>)` : ""}
            </span>
          </div>
          `).join('')}
        </div>
        <div class="flex justify-between items-center p-2 text-[0.5rem] text-gray-400 border-t border-gray-600">
          <div>
          ${alarm.Location && alarm.Location.Latitude !== 0.0 && alarm.Location.Longitude !== 0.0 
            ? `
              <!--Latitude: ${alarm.Location.Latitude}, Longitude: ${alarm.Location.Longitude}-->
              <a 
                href="${href}"
                onclick="${onclick}"
                target="_blank" 
                rel="noopener noreferrer"
                class="block w-5 h-5 bg-gray-500 rounded-full hover:bg-gray-600 focus:ring-2 focus:ring-red-300"
                title="Open locatie in Google Maps"
              >
                <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-full h-full p-1">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 2c4.97 0 9 3.806 9 8.5S12 22 12 22s-9-7.07-9-11.5S7.03 2 12 2zM12 11a2 2 0 100-4 2 2 0 000 4z" />
                </svg>
              </a>                  
            ` 
            : ''}
          </div>
          <div class="text-xs bg-gray-600 text-gray-200 py-0.5 px-2 rounded">
            ${alarm.RegioNaam}
          </div>
        </div>
      </div>
    </div>
  `;




  alarmList.appendChild(card);
}

onChildAdded(firstFiveAlarmsQuery, (alarmItem) => {
  cnt++;
  const alarm = alarmItem.val(); // Data van een alarm

  //console.log("Trigger(" + cnt + ") -> " + alarm.DatumTijd);
  //console.log(alarm);

  alarms.push(alarm); // Voeg de alarm toe aan de lijst

  // Sorteer de lijst van alarmen op DatumTijd (nieuwste bovenaan)
  alarms.sort((a, b) => new Date(b.DatumTijd) - new Date(a.DatumTijd));

  DisciplineRegioUpdate();

  if (filteredAlarms.length > filteredAlarmsOud)
  {
    if (sound)
    {
      var x = document.getElementById("p2000Sound");
      x.play();
    }

    //sendNotification(alarm.MessageText);
  }
  filteredAlarmsOud = filteredAlarms.length;
});


function updateFilteredAlarms()
{

}





function formatDateTime(dateTimeString) {
  const dateObj = new Date(dateTimeString);

  if (isNaN(dateObj)) {
    return "Ongeldige datum/tijd string"; // Foutafhandeling
  }

  const hours   = String(dateObj.getHours()).padStart(2, '0');
  const minutes = String(dateObj.getMinutes()).padStart(2, '0');
  const seconds = String(dateObj.getSeconds()).padStart(2, '0');

  const day = String(dateObj.getDate()).padStart(2, '0');
  const monthNames = ["JAN", "FEB", "MRT", "APR", "MEI", "JUN", "JUL", "AUG", "SEP", "OKT", "NOV", "DEC"];
  const month = monthNames[dateObj.getMonth()];
  const year = String(dateObj.getFullYear()).slice(-2); // Laatste twee cijfers van het jaar

  //const time = `${hours}:${minutes}:${seconds}`;
  const time = `${hours}:${minutes}`;
  const date = `${day}${month}${year}`;

  return { date, time };
}

















// Discipline: JavaScript om de overlay in te schakelen en instellingen op te slaan
const openSettingsButtonD = document.getElementById('openSettingsDisciplines');
const overlayD = document.getElementById('overlayDisciplines');
const closeOverlayButtonD = document.getElementById('closeOverlayD');
const saveSettingsButtonD = document.getElementById('saveSettingsD');

openSettingsButtonD.addEventListener('click', () => {
  overlayD.classList.remove('hidden');
});

closeOverlayButtonD.addEventListener('click', () => {
  overlayD.classList.add('hidden');
});

saveSettingsButtonD.addEventListener('click', () => {
  DisciplineRegioUpdate();

  // Voorbeeld: log de instellingen naar de console
  console.log("Instellingen opgeslagen");
  
  // Sluit de overlayD na het opslaan
  overlayD.classList.add('hidden');
});

// Regios: JavaScript om de overlay in te schakelen en instellingen op te slaan
const openSettingsButtonR = document.getElementById('openSettingsRegios');
const overlayR = document.getElementById('overlayRegios');
const closeOverlayButtonR = document.getElementById('closeOverlayR');
const saveSettingsButtonR = document.getElementById('saveSettingsR');
const selectallOverlayButtonR = document.getElementById('selectallOverlayR');

openSettingsButtonR.addEventListener('click', () => {
  overlayR.classList.remove('hidden');
});

closeOverlayButtonR.addEventListener('click', () => {
  overlayR.classList.add('hidden');
});

selectallOverlayButtonR.addEventListener('click', () => {
  const regios = ['Groningen', 'Friesland', 'Drenthe', 'IJsselland', 'Twente', 'Noord- en Oost-Gelderland', 'Gelderland-Midden', 'Gelderland-Zuid', 'Utrecht', 'Noord-Holland Noord', 'Zaanstreek-Waterland', 'Kennemerland', 'Amsterdam-Amstelland', 'Gooi en Vechtstreek', 'Haaglanden', 'Hollands-Midden', 'Rotterdam-Rijnmond', 'Zuid-Holland Zuid', 'Zeeland', 'Midden- en West-Brabant', 'Brabant-Noord', 'Brabant-Zuidoost', 'Limburg-Noord', 'Limburg-Zuid', 'Flevoland'];
  regios.forEach(regio => {
    var regioID = 'regio_' + regio.replace(/ /g, '_');
    const checkbox = document.getElementById(regioID);
    checkbox.checked = !checkbox.checked;
  });
});

saveSettingsButtonR.addEventListener('click', () => {
  DisciplineRegioUpdate();

  // Voorbeeld: log de instellingen naar de console
  console.log("Instellingen opgeslagen");
  
  // Sluit de overlayR na het opslaan
  overlayR.classList.add('hidden');
});



function DisciplineRegioUpdate()
{
  // Verkrijg de geselecteerde disciplines
  selectedDisciplines = allDiscipline.filter(d => document.getElementById(`discipline_${d}`).checked);
  
  // Verkrijg de geselecteerde regio's
  selectedRegios = allRegios.filter(r => document.getElementById(`regio_${r.replace(/ /g, '_')}`).checked);

  saveSelectedDisciplinesRegios();

  // Filter de alarmen op basis van geselecteerde disciplines
  filteredAlarms = alarms.filter(alarm => 
    selectedDisciplines.includes(alarm.DisciplineNaam) && 
    selectedRegios.includes(alarm.RegioNaam)
  );

  // Update de alarmlijst met de gefilterde resultaten
  updateAlarmList(filteredAlarms);
}


// Functie om de alarmenlijst bij te werken
function updateAlarmList(filteredAlarms) {
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const paginatedAlarms = filteredAlarms.slice(startIndex, endIndex);

  alarmList.innerHTML = ""; // Verwijder bestaande alarmen

  paginatedAlarms.forEach(addAlarmCard); // Voeg alleen de alarmen van de huidige pagina toe
  //filteredAlarms.forEach(addAlarmCard); // Voeg de gefilterde alarmen toe
  
  document.getElementById('count').textContent = `${filteredAlarms.length} / ${alarms.length} (pagina ${currentPage})`;

  // Update de navigatieknoppen
  updateNavigationButtons(filteredAlarms.length);

  //document.getElementById('count').textContent = `${filteredAlarms.length} / ${alarms.length}` ;
}

const prevPageButton = document.getElementById('prevPage');
prevPageButton.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    updateAlarmList(filteredAlarms); // Vernieuw de lijst
  }
});

const nextPageButton = document.getElementById('nextPage');
nextPageButton.addEventListener('click', () => {
  const totalPages = Math.ceil(filteredAlarms.length / itemsPerPage);
  if (currentPage < totalPages) {
    currentPage++;
    updateAlarmList(filteredAlarms); // Vernieuw de lijst
  }
});


function updateNavigationButtons(totalItems) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  document.getElementById('prevPage').disabled = currentPage === 1;
  document.getElementById('nextPage').disabled = currentPage === totalPages;
}


// ================================================================
// COOKIES
// ================================================================
// Opslaan van geselecteerde disciplines en regios in een cookie
function saveSelectedDisciplinesRegios() {
  // Opslaan van geselecteerde disciplines in een cookie
  document.cookie = `selectedDisciplines=${JSON.stringify(selectedDisciplines)}; path=/; max-age=31536000`; // 1 jaar geldig
  
  // Opslaan van geselecteerde regios in een cookie
  document.cookie = `selectedRegios=${JSON.stringify(selectedRegios)}; path=/; max-age=31536000`; // 1 jaar geldig
}
// Laden van geselecteerde disciplines uit een cookie
function loadSelectedDisciplinesRegios() {
  const cookies = document.cookie.split(';').reduce((acc, cookie) => {
    const [key, value] = cookie.split('=').map(c => c.trim());
    acc[key] = value;
    return acc;
  }, {});

  if (cookies.selectedDisciplines) {
    const selectedDisciplines = JSON.parse(cookies.selectedDisciplines);

    // Zet de checkboxes op basis van de opgeslagen disciplines
    allDiscipline.forEach(discipline => {
      const checkbox = document.getElementById(`discipline_${discipline}`);
      checkbox.checked = selectedDisciplines.includes(discipline);
    });
  }

  if (cookies.selectedRegios) {
    const selectedRegios = JSON.parse(cookies.selectedRegios);

    // Zet de checkboxes op basis van de opgeslagen regios
    allRegios.forEach(regio => {
      const checkbox = document.getElementById(`regio_${regio.replace(/ /g, '_')}`);
      checkbox.checked = selectedRegios.includes(regio);
    });
  }
}
  </script>

  


  <!-- Overlay Discipline -->
  <div id="overlayDisciplines" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50">
    <div class="bg-white p-4 rounded-lg w-full max-w-md max-h-full overflow-y-auto">
      <h2 class="text-lg font-bold mb-3">Disciplines</h2>
      <div class="space-y-2">
        <!-- Checkbox Settings -->
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Brandweer" class="form-checkbox" checked>
          <span>Brandweer</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Ambulance" class="form-checkbox" >
          <span>Ambulance</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Politie" class="form-checkbox" checked>
          <span>Politie</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_MMT" class="form-checkbox" checked>
          <span>MMT</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_KNRM" class="form-checkbox" >
          <span>KNRM</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Bruggen" class="form-checkbox" >
          <span>Bruggen</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Test" class="form-checkbox" >
          <span>Test</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Server" class="form-checkbox" >
          <span>Server</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="discipline_Onbekend" class="form-checkbox" >
          <span>Onbekend</span>
        </label>
      </div>
      <div class="mt-4 flex justify-end space-x-2">
        <button id="closeOverlayD" class="px-3 py-1 bg-gray-300 rounded text-sm">Annuleren</button>
        <button id="saveSettingsD" class="px-3 py-1 bg-green-500 text-white rounded text-sm">Opslaan</button>
      </div>
    </div>
  </div>




  <!-- Overlay Regio's -->
  <div id="overlayRegios" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50">
    <div class="bg-white p-4 rounded-lg w-full max-w-lg max-h-full overflow-y-auto">
      <div class="flex justify-end mb-3">
        <button id="selectallOverlayR" class="px-3 py-1 bg-blue-500 text-white rounded text-sm">Alles</button>
      </div>
      <h2 class="text-lg font-bold mb-3">Regio's</h2>
      <div class="grid grid-cols-2 gap-2">
        <!-- Checkbox Settings -->
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Groningen" class="form-checkbox" checked>
          <span>Groningen</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Friesland" class="form-checkbox" checked>
          <span>Friesland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Drenthe" class="form-checkbox" checked>
          <span>Drenthe</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_IJsselland" class="form-checkbox" checked>
          <span>IJsselland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Twente" class="form-checkbox" checked>
          <span>Twente</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Noord-_en_Oost-Gelderland" class="form-checkbox" checked>
          <span>Noord- en Oost-Gelderland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Gelderland-Midden" class="form-checkbox" checked>
          <span>Gelderland-Midden</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Gelderland-Zuid" class="form-checkbox" checked>
          <span>Gelderland-Zuid</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Utrecht" class="form-checkbox" checked>
          <span>Utrecht</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Noord-Holland_Noord" class="form-checkbox" checked>
          <span>Noord-Holland Noord</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Zaanstreek-Waterland" class="form-checkbox" checked>
          <span>Zaanstreek-Waterland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Kennemerland" class="form-checkbox" checked>
          <span>Kennemerland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Amsterdam-Amstelland" class="form-checkbox" checked>
          <span>Amsterdam-Amstelland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Gooi_en_Vechtstreek" class="form-checkbox" checked>
          <span>Gooi en Vechtstreek</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Haaglanden" class="form-checkbox" checked>
          <span>Haaglanden</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Hollands-Midden" class="form-checkbox" checked>
          <span>Hollands-Midden</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Rotterdam-Rijnmond" class="form-checkbox" checked>
          <span>Rotterdam-Rijnmond</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Zuid-Holland_Zuid" class="form-checkbox" checked>
          <span>Zuid-Holland Zuid</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Zeeland" class="form-checkbox" checked>
          <span>Zeeland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Midden-_en_West-Brabant" class="form-checkbox" checked>
          <span>Midden- en West-Brabant</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Brabant-Noord" class="form-checkbox" checked>
          <span>Brabant-Noord</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Brabant-Zuidoost" class="form-checkbox" checked>
          <span>Brabant-Zuidoost</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Limburg-Noord" class="form-checkbox" checked>
          <span>Limburg-Noord</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Limburg-Zuid" class="form-checkbox" checked>
          <span>Limburg-Zuid</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Flevoland" class="form-checkbox" checked>
          <span>Flevoland</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" id="regio_Onbekend" class="form-checkbox" checked>
          <span>Onbekend</span>
        </label>
      </div>
      <div class="mt-4 flex justify-end space-x-2">
        <button id="closeOverlayR" class="px-3 py-1 bg-gray-300 rounded text-sm">Annuleren</button>
        <button id="saveSettingsR" class="px-3 py-1 bg-green-500 text-white rounded text-sm">Opslaan</button>
      </div>
    </div>
  </div>


  

  <!-- Main Content -->
  <main class="pt-16 pb-16 px-4">
    <div class="max-w-3xl mx-auto space-y-4">
      <div class="flex items-center justify-between px-4 py-3">
        <button 
          id="prevPage" 
          class="text-sm bg-green-500 text-white py-1 px-2 rounded">
          <
        </button>
        <button 
          id="nextPage" 
          class="text-sm bg-green-500 text-white py-1 px-2 rounded">
          >
        </button>
      </div>
      <div id="alarm-list" class="z-10">
      </div>
    </div>
  </main>



  <!-- AUDIO -->
  <audio id="p2000Sound">
    <source src="p2000sound.mp3" type="audio/mpeg">
  </audio>

  <script>
    let sound = false;

    // Function to toggle the sound variable and update the button's style
    function toggleSound() {
        sound = !sound;
        updateButtonStyles();
    }

    // Function to update the button's style based on the sound variable
    function updateButtonStyles() {
      const buttonS = document.getElementById('soundButton');
      if (sound) {
          buttonS.classList.remove('bg-gray-500');
          buttonS.classList.add('bg-green-500');
      } else {
          buttonS.classList.remove('bg-green-500');
          buttonS.classList.add('bg-gray-500');
      }
    }

    // Ensure the buttons have the correct style on page load
    window.onload = updateButtonStyles;




    if (!("Notification" in window)) {
     alert("Deze browser ondersteunt geen notificaties.");
    }

    //requestNotificationPermission();
    

    function requestNotificationPermission() {
      if (Notification.permission === "granted") {
        // Toestemming is al gegeven
        console.log("Toestemming al gegeven voor meldingen.");
      } else if (Notification.permission !== "denied") {
        // Vraag toestemming aan de gebruiker
        Notification.requestPermission().then(permission => {
          if (permission === "granted") {
            console.log("Toestemming verleend voor meldingen.");
          } else {
            console.log("Toestemming geweigerd.");
          }
        });
      }
    }

    function sendNotification(title, options) {
      if (Notification.permission === "granted") {
        const notification = new Notification(title, options);

        // Voeg optioneel een click-event toe
        notification.onclick = () => {
          console.log("De gebruiker heeft op de notificatie geklikt.");
          window.focus(); // Focus op de huidige pagina
        };
      } else {
        console.log("Geen toestemming voor meldingen.");
      }
    }

    function sendTestNotification() {
      const title = "Nieuw Alarm!";
      const options = {
        body: "Er is een nieuw alarm ontvangen.",
        icon: "alarm-icon.png", // Optioneel: pad naar een pictogram
        vibrate: [200, 100, 200], // Vibratiepatroon (mobiele apparaten)
      };
      sendNotification(title, options);
    }








  </script>



  <!-- Footer -->
  <footer class="bg-gray-800 text-gray-400 text-center py-3">
    <p>&copy; 1975-2025 QUASSI. All rights reserved.</p>
  </footer>
</body>
</html>
