<%- 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">Einsatzbericht</h1>

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

  <!-- Kunde -->
<!-- Kunde 
<div class="mb-3">
  <label class="form-label">Kunde</label>
  <select id="kunde" name="customer_id" class="form-control" autocomplete="off">
    <% customers.forEach(c => { %>
      <option value="<%= c.id %>">
        <%= c.customer_number %> - <%= c.name %>
      </option>
    <% }) %>
  </select>
</div>
-->
<!-- Datum + Kommission -->
<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">Kommission</label>
  <!-- Auswahl ODER Freitext -->
  <select id="kommission" name="commission_id" class="form-select" autocomplete="off">
    <option value="">Neue Kommission eingeben…</option>
    <% commissions.forEach(k => { %>
      <option value="<%= k.id %>">
        <!--<%= k.commission_number %>--><%= k.title %>
      </option>
    <% }) %>
  </select>

  <!-- Freitext wird hier gespeichert -->
  <input type="hidden" name="commission_text" id="commission_text">
</div>


</div>
  <!-- Einsatzadresse -->
  <h5 class="mt-4">Einsatz-Adresse</h5>
  <div class="row mb-3">
    <div class="col-md-12">
      <label class="form-label">Adresse</label>
      <input type="text" name="address" class="form-control">
    </div>
    <div class="col-md-4">
      <label class="form-label">PLZ</label>
      <input type="text" name="zip" class="form-control">
    </div>
    <div class="col-md-8">
      <label class="form-label">Ort</label>
      <input type="text" name="city" class="form-control">
    </div>
  </div>

  <!-- Gerätedaten -->
  <h5 class="mt-4">Gerätedaten</h5>
  <div class="row mb-3">
    <div class="col-md-6">
      <label class="form-label">XRGI-ID / Gerätetyp</label>
      <input type="text" name="device_type" class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">Betriebsstunden</label>
      <input type="text" name="operating_hours" class="form-control">
    </div>
    <div class="col-md-6 mt-3">
      <label class="form-label">Stromproduktion</label>
      <input type="text" name="power_production" class="form-control">
    </div>
    <div class="col-md-6 mt-3">
      <label class="form-label">Gaszähler</label>
      <input type="text" name="gas_meter" class="form-control">
    </div>
    <div class="col-md-6 mt-3">
      <label class="form-label">Abgasgegendruck</label>
      <input type="text" name="exhaust_pressure" class="form-control">
    </div>
    <div class="col-md-6 mt-3">
      <label class="form-label">Servicetechniker</label>
      <input type="text" disabled name="technician" class="form-control">
    </div>
  </div>

  <!-- Durchgeführte Arbeiten -->
  <h5 class="mt-4">Durchgeführte Arbeiten</h5>
  <textarea name="description" class="form-control" rows="6"></textarea>

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

  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" name="material_separate" value="1" id="matSeparate">
    <label class="form-check-label" for="matSeparate">
      siehe separate Materialliste
    </label>
  </div>

  <table class="table table-bordered">
    <thead>
      <tr>
        <th style="width: 15%">Menge</th>
        <th style="width: 25%">Art.-Nr.</th>
        <th>Bezeichnung</th>
      </tr>
    </thead>
    <tbody id="material-table">
      <% for (let i = 0; i < 3; i++) { %>
      <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>
      </tr>
      <% } %>
    </tbody>
  </table>

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

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Abfahrt</th>
        <th>Ankunft</th>
        <th>Fahrstunden</th>
        <th>Gefahrene km</th>
        <th>Servicestunden</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="time" class="form-control" name="time_departure"></td>
        <td><input type="time" class="form-control" name="time_arrival"></td>
        <td><input type="text" class="form-control" name="drive_hours"></td>
        <td><input type="number" class="form-control" name="drive_km"></td>
        <td><input type="text" class="form-control" name="service_hours"></td>
      </tr>
    </tbody>
  </table>

  <!-- Hidden Signatures -->
  <input type="hidden" name="signature_client" id="signature_client">
  <input type="hidden" name="signature_tech" id="signature_tech">

  <!-- 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="signatureClient.clear()">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="signatureTech.clear()">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>
  const signatureClient = new SignaturePad(document.getElementById('signature-pad-client'));
  const signatureTech = new SignaturePad(document.getElementById('signature-pad-tech'));

  function prepareForm() {
    document.getElementById('signature_client').value = signatureClient.toDataURL('image/png');
    document.getElementById('signature_tech').value = signatureTech.toDataURL('image/png');
  }
</script>
<script>
new TomSelect("#kunde", {
    create: true,
    sortField: "text",
    maxOptions: 1000,
    placeholder: "Kunde auswählen oder eingeben"
});

const kommissionSelect = new TomSelect("#kommission", {
    create: true,
    persist: false,
    allowEmptyOption: true,
    sortField: "text",
    maxOptions: 1000,
    placeholder: "Kommission auswählen oder eingeben",

    // WICHTIG: Freitext erzeugen
    create: function(input) {
        return {
            value: "free_" + input,   // künstliche ID
            text: input               // sichtbarer Text
        };
    }
});

// WICHTIG: Freitext oder DB-Wert in hidden field schreiben
kommissionSelect.on('change', function(value) {
    const item = kommissionSelect.options[value];

    if (!item) {
        document.getElementById('commission_text').value = "";
        return;
    }

    // Wenn Freitext → commission_id leer, commission_text = Text
    if (value.startsWith("free_")) {
        document.getElementById('commission_text').value = item.text;
        document.querySelector('select[name="commission_id"]').value = "";
    } 
    // Wenn DB-Wert → commission_text = Text, commission_id = ID
    else {
        document.getElementById('commission_text').value = item.text;
    }
});
</script>


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