<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <title>Godišnji odmori djelatnika</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #f4f6f8; padding: 20px; }
    .card { background: #fff; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 0 6px rgba(0,0,0,0.1); }
    h1 { color: #2c3e50; }
    input, button { margin: 5px; padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc; }
    button { background-color: #3498db; color: white; cursor: pointer; }
    button:hover { background-color: #2980b9; }
    .vacation-entry { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
    .delete-btn { background-color: #e74c3c; }
    .delete-btn:hover { background-color: #c0392b; }
    .exhausted { color: red !important; }
    #summaryBtn { background-color: #27ae60; }
    #summaryBtn:hover { background-color: #1e8449; }
  </style>
</head>
<body>

  <h1>Godišnji odmori djelatnika</h1>
  <button id="summaryBtn" onclick="generirajListu()">Pokaži sve djelatnike (status godišnjeg)</button>
  <button onclick="exportPDF()">Izvezi PDF</button>

  <div class="card">
    <h2>Dodaj djelatnika</h2>
    <input type="text" id="ime" placeholder="Ime djelatnika">
    <input type="number" id="ukupno" placeholder="Ukupno dana godišnjeg">
    <button onclick="dodajDjelatnika()">Dodaj</button>
  </div>

  <div id="djelatnici"></div>

  <script>
    const praznici = ["2025-01-01","2025-01-06","2025-04-20","2025-04-21",
      "2025-05-01","2025-05-30","2025-06-19","2025-08-05","2025-08-15",
      "2025-11-01","2025-12-25","2025-12-26"];

    let djelatnici = [];

    async function ucitajDjelatnike() {
      const res = await fetch('api.php');
      djelatnici = await res.json();
      prikaziDjelatnike();
    }

    function prikaziDjelatnike() {
      const kont = document.getElementById('djelatnici');
      kont.innerHTML = '';

      djelatnici.forEach(d => {
        let iskoristeno = d.godisnji.reduce((s, g) => s + izracunajRadneDane(g.datum_od, g.datum_do), 0);
        let preostalo = d.ukupno - iskoristeno;
        let exhausted = preostalo <= 0 ? 'exhausted' : '';

        let div = document.createElement('div');
        div.className = 'card';
        div.innerHTML = `
          <h2 class="${exhausted}">${d.ime}</h2>
          <p>Ukupno: ${d.ukupno} | Iskorišteno: ${iskoristeno} | Preostalo: ${preostalo}</p>
          <input type="date" id="od-${d.id}"><input type="date" id="do-${d.id}">
          <button onclick="dodajGodisnji(${d.id})">Dodaj</button>
          <div id="lista-${d.id}"></div>
        `;
        kont.appendChild(div);
        prikaziGodisnje(d, preostalo);
      });
    }

    function prikaziGodisnje(d, preostalo) {
      const lista = document.getElementById(`lista-${d.id}`);
      lista.innerHTML = '';
      d.godisnji.forEach(g => {
        let div = document.createElement('div');
        div.className = 'vacation-entry';
        div.innerHTML = `
          <input type="date" value="${g.datum_od}" id="edit-od-${g.id}">
          <input type="date" value="${g.datum_do}" id="edit-do-${g.id}">
          <button onclick="spremiGodisnji(${g.id})">Spremi</button>
          <button class="delete-btn" onclick="obrisiGodisnji(${g.id})">Obriši</button>
        `;
        lista.appendChild(div);
      });
    }

    async function dodajDjelatnika() {
      const ime = document.getElementById('ime').value.trim();
      const ukupno = parseInt(document.getElementById('ukupno').value);
      if(!ime||isNaN(ukupno)) return alert("Unesi ime i dane!");

      await fetch('api.php', {method:'POST',body:JSON.stringify({type:'djelatnik', ime, ukupno})});
      document.getElementById('ime').value='';
      document.getElementById('ukupno').value='';
      await ucitajDjelatnike();
    }

    async function dodajGodisnji(id) {
      const od = document.getElementById(`od-${id}`).value;
      const doDat = document.getElementById(`do-${id}`).value;
      if(!od||!doDat) return alert("Unesi datume!");

      await fetch('api.php',{method:'POST',
        body:JSON.stringify({type:'godisnji', djelatnik_id:id, datum_od:od, datum_do:doDat})
      });
      await ucitajDjelatnike();
    }

    async function spremiGodisnji(id) {
      const od = document.getElementById(`edit-od-${id}`).value;
      const doDat = document.getElementById(`edit-do-${id}`).value;
      if(!od||!doDat) return alert("Unesi datume!");

      await fetch('api.php',{method:'PUT',body:JSON.stringify({id, datum_od:od, datum_do:doDat})});
      await ucitajDjelatnike();
    }

    async function obrisiGodisnji(id) {
      if(!confirm("Brisati ovaj unos?")) return;
      await fetch('api.php?id='+id,{method:'DELETE'});
      await ucitajDjelatnike();
    }

    function izracunajRadneDane(od,doDat) {
      let s=new Date(od),e=new Date(doDat),cnt=0;
      while(s<=e){
        if(s.getDay()!==0 && !praznici.includes(s.toISOString().split('T')[0])) cnt++;
        s.setDate(s.getDate()+1);
      }
      return cnt;
    }

    function generirajListu(){
      let txt="Ime | Ukupno | Iskorišteno | Preostalo\n\n";
      djelatnici.forEach(d=>{
        let isk=d.godisnji.reduce((s,g)=>s+izracunajRadneDane(g.datum_od,g.datum_do),0);
        let pre=d.ukupno-isk;
        txt += `${d.ime} | ${d.ukupno} | ${isk} | ${pre}\n`;
      });
      alert(txt.replace(/\n/g,'\n'));
    }

    function exportPDF(){
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      let y=10;
      doc.text("Godišnji odmori djelatnika",20,y);
      y+=10;
      djelatnici.forEach(d=>{
        let isk=d.godisnji.reduce((s,g)=>s+izracunajRadneDane(g.datum_od,g.datum_do),0);
        let pre=d.ukupno-isk;
        doc.text(`${d.ime} – Ukupno: ${d.ukupno}, Iskoristeno: ${isk}, Preostalo: ${pre}`,20,y);
        y+=7;
      });
      doc.save("godisnji.pdf");
    }

    ucitajDjelatnike();
  </script>

</body>
</html>
