<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DATI</title>
  <link rel="stylesheet" href="styles.css" />
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
      background-color: #fff;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 60%;
    }

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th, td {
      padding: 8px;
    }
  </style>
</head>
<body>
  <h1 class="title">DATI</h1>

  <button id="myBtn">Jauns</button> <button id="Reset">Reset</button>

  <table id="dataTable">
    <thead>
      <tr>
        <th>Vards</th>
        <th>Uzvards</th>
        <th>Tautiba</th>
        <th>Dzimums</th>
        <th>Izglitiba</th>
        <th>Gimenes-st.</th>
        <th>Darbibas</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <form id="dataForm">
        <label for="vards">Vārds:</label>
        <input type="text" id="vards" required><br>

        <label for="uzvards">Uzvārds:</label>
        <input type="text" id="uzvards" required><br>

        <label for="tautiba">Tautība:</label>
        <select id="tautiba">
          <option value="Latvietis">Latvietis</option>
          <option value="Krievs">Krievs</option>
          <option value="Cits">Cits</option>
        </select><br>

        <label>Dzimums:</label>
        <input type="radio" name="dzimums" value="Vīrietis"> Vīrietis
        <input type="radio" name="dzimums" value="Sieviete"> Sieviete<br>

        <label>Izglītība:</label>
        <input type="checkbox" value="Vidusskola"> Vidusskola
        <input type="checkbox" value="Augstākā"> Augstākā<br>

        <label for="gimenesSt">Ģimenes stāvoklis:</label>
        <select id="gimenesSt">
          <option value="Neprecējies">Neprecējies</option>
          <option value="Precējies">Precējies</option>
          <option value="Šķīries">Šķīries</option>
        </select><br><br>

        <button type="submit" id="saveBtn">Saglabāt</button>
        <button type="button" id="resetBtn" style="display:none">Vecie dati</button>
        <button type="button" id="closeBtn" style="display:none">Aizvērt</button>
      </form>
    </div>
  </div>

  <script>
    const modal = document.getElementById("myModal");
    const btn = document.getElementById("myBtn");
    const closeBtn = document.getElementById("closeBtn");
    const resetBtn = document.getElementById("resetBtn");
    const form = document.getElementById("dataForm");
    const table = document.getElementById("dataTable").getElementsByTagName("tbody")[0];

    let editingRow = null;
    let originalData = {};

    btn.onclick = () => {
      editingRow = null;
      form.reset();
      resetBtn.style.display = "none";
      closeBtn.style.display = "none";
      modal.style.display = "block";
    };

    closeBtn.onclick = () => {
      modal.style.display = "none";
    };

    resetBtn.onclick = () => {
      for (const key in originalData) {
        const el = document.getElementById(key);
        if (el) el.value = originalData[key];
      }
    };

    form.onsubmit = function(e) {
      e.preventDefault();

      const vards = document.getElementById("vards").value.trim();
      const uzvards = document.getElementById("uzvards").value.trim();
      const tautiba = document.getElementById("tautiba").value;
      const dzimums = document.querySelector('input[name="dzimums"]:checked')?.value || "";
      const izgl = Array.from(form.querySelectorAll('input[type=checkbox]:checked')).map(cb => cb.value).join(", ");
      const gimenesSt = document.getElementById("gimenesSt").value;

      if (editingRow) {
        editingRow.cells[0].textContent = vards;
        editingRow.cells[1].textContent = uzvards;
        editingRow.cells[2].textContent = tautiba;
        editingRow.cells[3].textContent = dzimums;
        editingRow.cells[4].textContent = izgl;
        editingRow.cells[5].textContent = gimenesSt;
      } else {
        const row = table.insertRow();
        row.innerHTML = `
          <td>${vards}</td>
          <td>${uzvards}</td>
          <td>${tautiba}</td>
          <td>${dzimums}</td>
          <td>${izgl}</td>
          <td>${gimenesSt}</td>
          <td>
            <button class="edit">Labot</button>
            <button class="delete">Dzēst</button>
          </td>`;

        row.querySelector(".delete").onclick = () => row.remove();
        row.querySelector(".edit").onclick = () => {
          editingRow = row;
          document.getElementById("vards").value = row.cells[0].textContent;
          document.getElementById("uzvards").value = row.cells[1].textContent;
          document.getElementById("tautiba").value = row.cells[2].textContent;
          [...form.querySelectorAll('input[name="dzimums"]')].forEach(el => el.checked = el.value === row.cells[3].textContent);
          [...form.querySelectorAll('input[type=checkbox]')].forEach(el => el.checked = row.cells[4].textContent.includes(el.value));
          document.getElementById("gimenesSt").value = row.cells[5].textContent;

          
          

          resetBtn.style.display = "inline";
          closeBtn.style.display = "inline";
          modal.style.display = "block";
        };
      }
      modal.style.display = "none";
    };
  </script>
</body>
</html>
