<%- include('../layout') %>
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

<h1 class="mb-4">Materialliste</h1>

<form method="POST" action="/materials/new" onsubmit="prepareForm()">

  <!-- Hidden JSON Felder -->
  <input type="hidden" name="items_json" id="items_json">
  <input type="hidden" name="signature_client" id="signature_client">
  <input type="hidden" name="signature_tech" id="signature_tech">

  <!-- Datum + Projekt -->
  <div class="row mb-3">
    <div class="col-md-6">
      <label class="form-label">Datum</label>
      <input type="date" name="date" class="form-control"  required>
    </div>
    <div class="col-md-6">
      <label class="form-label">Kunde</label>
      <select id="kunde" name="customer_id" class="form-control" autocomplete="off" required>
        <% customers.forEach(c => { %>
          <option value="<%= c.id %>"><%= c.name %></option>
        <% }) %>
      </select>
      <label class="form-label">Kommission</label>
      <select id="kommission" name="commission_id" class="form-control" autocomplete="off" required>
        <% commissions.forEach(k => { %>
          <option value="<%= k.id %>">
            <%= k.commission_number %> – <%= k.title %>
          </option>
        <% }) %>
      </select>
    </div>
  </div>

  <!-- Materialaufwand -->
  <h5 class="mt-4">Materialaufwand</h5>

  <table class="table table-bordered" id="material-table">
    <thead>
      <tr>
        <th style="width: 15%">Menge</th>
        <th style="width: 25%">Art.-Nr.</th>
        <th>Bezeichnung</th>
        <th style="width: 5%"></th>
      </tr>
    </thead>
    <tbody id="material-body">
      <tr>
        <td><input type="text" class="form-control" name="mat_qty[]"></td>
        <td><input type="text" class="form-control" name="mat_number[]"></td>
        <td><input type="text" class="form-control" name="mat_name[]"></td>
        <td>
          <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">X</button>
        </td>
      </tr>
    </tbody>
  </table>

  <button type="button" class="btn btn-secondary btn-sm" onclick="addRow()">+ Position hinzufügen</button>

  <!-- Unterschriften -->
  <h5 class="mt-4">Unterschriften</h5>

  <div class="row">
    <div class="col-md-6">
      <label class="form-label">Unterschrift Auftraggeber</label>
      <canvas id="signature-pad-client" style="border:1px solid #ccc; width:100%; height:200px;"></canvas>
      <button type="button" class="btn btn-sm btn-outline-danger mt-2" onclick="clearSignatureClient()">Löschen</button>
    </div>

    <div class="col-md-6">
      <label class="form-label">Unterschrift Servicetechniker</label>
      <canvas id="signature-pad-tech" style="border:1px solid #ccc; width:100%; height:200px;"></canvas>
      <button type="button" class="btn btn-sm btn-outline-danger mt-2" onclick="clearSignatureTech()">Löschen</button>
    </div>
  </div>

  <button class="btn btn-primary mt-4" type="submit">Speichern</button>
</form>

<script src="/js/signature_pad.umd.min.js"></script>

<script>
  // Dynamische Materialzeilen
  function addRow() {
    const tbody = document.getElementById('material-body');
    const row = document.createElement('tr');

    row.innerHTML = `
      <td><input type="text" class="form-control" name="mat_qty[]"></td>
      <td><input type="text" class="form-control" name="mat_number[]"></td>
      <td><input type="text" class="form-control" name="mat_name[]"></td>
      <td><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">X</button></td>
    `;

    tbody.appendChild(row);
  }

  function removeRow(btn) {
    btn.closest('tr').remove();
  }

  // Signatur-Pads
  let canvasClient = document.getElementById('signature-pad-client');
  let canvasTech = document.getElementById('signature-pad-tech');

  let signatureClient = new SignaturePad(canvasClient);
  let signatureTech = new SignaturePad(canvasTech);

  function clearSignatureClient() { signatureClient.clear(); }
  function clearSignatureTech() { signatureTech.clear(); }

  // JSON + Signaturen erzeugen
  function prepareForm() {
    // Signaturen speichern
    document.getElementById('signature_client').value =
      signatureClient.toDataURL('image/png');

    document.getElementById('signature_tech').value =
      signatureTech.toDataURL('image/png');

    // Materialdaten sammeln
    const qty = [...document.querySelectorAll('input[name="mat_qty[]"]')].map(i => i.value);
    const num = [...document.querySelectorAll('input[name="mat_number[]"]')].map(i => i.value);
    const name = [...document.querySelectorAll('input[name="mat_name[]"]')].map(i => i.value);

    const items = {
      mat_qty: qty,
      mat_number: num,
      mat_name: name
    };

    document.getElementById('items_json').value = JSON.stringify(items);
  }
</script>
<script>
new TomSelect("#kunde", {
    create: true,        // erlaubt Freitext
    sortField: "text",
    maxOptions: 1000,
    placeholder: "Kunde auswählen oder eingeben"
});

new TomSelect("#kommission", {
    create: true,        // erlaubt Freitext
    sortField: "text",
    maxOptions: 1000,
    placeholder: "Kommission auswählen oder eingeben"
});
</script>


<%- include('../footer') %>
