const affichageNb = document.getElementById("nb_vehicules");
const affichageGéo = document.getElementById("géolocalisation");
const affichageConso = document.getElementById("consommation");
const boutonPlus = document.getElementById("plus");
const boutonMoins = document.getElementById("moins");
const mot_vehicules = document.getElementById("mot_vehic");
const PRIX_GPS = 30;
const PRIX_CONSOMMATION = 15;
const zoneMsg = document.getElementById("msg");
const txt_restant = document.getElementById("txt_restant");
const MAX = 500;
const formulaire = document.querySelector("form");
console.log("dans le local : ", localStorage.getItem("nbVehicules"));
const services = [
  {
    nom: "Géolocalisation",
    description: "Suivi en temps réel",
    prix: "30€/véhicule/mois",
  },
  { nom: "Odomètre", description: "Kilométrage précis", prix: "200€" },
  {
    nom: "Consommation",
    description: "Carburant consommé",
    prix: "15€/véhicule/mois",
  },
  {
    nom: "Impact carbone",
    description: "CO₂ rejeté",
    prix: "30€/véhicule/mois",
  },
];
const corps = document.getElementById("services");
const horloge = document.getElementById("horloge");
let lignes = "";
let nbVehicules;
if (localStorage.getItem("nbVehicules") !== null) {
  nbVehicules = parseInt(localStorage.getItem("nbVehicules"));
  mettreAJourTOTAL();
} else {
  nbVehicules = 1;
}
function mettreAJourTOTAL() {
  affichageNb.textContent = nbVehicules;
  affichageGéo.textContent = nbVehicules * PRIX_GPS;
  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
  mot_vehicules.textContent = nbVehicules === 1 ? "véhicule" : "véhicules";
}
boutonPlus.addEventListener("click", function () {
  nbVehicules = nbVehicules + 1;
  if (nbVehicules > 99) {
    nbVehicules = nbVehicules - 1;
  }
  console.log("rajout en cours :", nbVehicules);
  localStorage.setItem("nbVehicules", nbVehicules);
  mettreAJourTOTAL();
});
boutonMoins.addEventListener("click", function () {
  if (nbVehicules > 1) {
    nbVehicules = nbVehicules - 1;
  }
  localStorage.setItem("nbVehicules", nbVehicules);
  mettreAJourTOTAL();
});
zoneMsg.addEventListener("input", function () {
  const reste = MAX - zoneMsg.value.length;
  txt_restant.textContent = reste;
  txt_restant.style.color = reste < 50 ? "red" : "black";
});
formulaire.addEventListener("submit", function (evenement) {
  if (zoneMsg.value.trim() === "") {
    evenement.preventDefault();
    alert("Merci d'écrire un message");
  }
});
for (const service of services) {
  console.log(service.nom + " _ " + service.description + " _ " + service.prix);
}
for (const service of services) {
  lignes =
    lignes +
    `
    <tr>
  <td>${service.nom}</td>
  <td>${service.description}</td>
  <td>${service.prix}</td>
  </tr>`;
}
corps.innerHTML = lignes;
document.getElementById("color").addEventListener("click", function () {
  document.body.classList.toggle("sombre");
});
function heure() {
  horloge.textContent = new Date().toLocaleTimeString();
}
{
  heure();
  setInterval(heure, 1000);
}
{
  async function Flotte() {
    const message = document.getElementById("message_flotte");
    const corps = document.getElementById("corps_flotte");
    try {
      const reponse = await fetch("vehicules.json");
      const vehicules = await reponse.json();
      for (const v of vehicules) {
        const tr = document.createElement("tr");
        tr.textContent = `${v.modele} — ${v.immatriculation} — ${v.km} km`;
        corps.append(tr);
      }
    } catch (erreur) {
      message.textContent =
        "Impossible de charger la flotte (bahahaha mimimimimi)";
      console.error(erreur);
    }
  }
  Flotte();
}