var lieferschein_template = `


  <style>
  .rotate-icon {
    transition: transform 0.3s ease;
  }
  .rotate-icon.rotate {
    transform: rotate(180deg);
  }
  </style>


  <div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 800px;">
      <div class="modal-content" >
        <div class="modal-header">
          <h5 class="modal-title" id="addressModalLabel">Adresse auswählen</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- Adressliste -->
          <ul class="list-group" id="addressList">
            <!-- Adressen werden hier dynamisch eingefügt -->
          </ul>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="conceptureModal" tabindex="-1" aria-labelledby="conceptureModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addressModalLabel">Mitarbeiter wählen</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <ul>
            <!--
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="l.soekefeld@concepture.de" data-phone="07223 808479-34" >Lukas Sökefeld</button></li>
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="k.gross@concepture.de" data-phone="07223 808479-35" >Kristina Groß</button></li>
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="t.schmalz@concepture.de" data-phone="07223 808479-26" >Thomas Schmalz</button></li>
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="a.marlin@concepture.de" data-phone="07223 808479-18" >Alisa Marlin</button></li>
            -->
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="m.beyazoglu@concepture.de" data-phone="07223 808479-14" >Mediha Beyazoglu</button></li>
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="a.schneider@concepture.de" data-phone="07223 808479-12" >Anke Schneider</button></li>
            <li><button class="btn btn-primary mb-2" onclick="set_user(this);" data-mail="d.muntean@concepture.de" data-phone="07223 808479-19" >Doris Muntean</button></li>
            <li><button class="btn btn-primary" onclick="set_user(this);" data-mail="s.basedow@concepture.de" data-phone="040-2286427-01" >Susanne Basedow</button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>


    <div class="container">

        <div>

            {{@if(it.artikel !== null)}}

            <h1 class="text-center mt-4 mb-2">Lieferschein</h1>


            {{@if(it.historie != null)}}

            <button class="btn btn-primary d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#historie_div" onclick="document.getElementById('arrowIcon').classList.toggle('rotate')"aria-expanded="false" aria-controls="meinDiv">
              <span class="me-2">Vergangene Lieferscheine <small style="font-size:0.7rem;">(Historie)</small></span>
              <i class="bi bi-chevron-down rotate-icon" id="arrowIcon"></i>
            </button>

            <!-- Der ausklappbare DIV -->
            <div class="collapse mt-3" id="historie_div">
              <div class="card card-body">

                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Dateiname</th>
                      <th scope="col">Datum / Uhrzeit</th>
                      <th scope="col">PDF</th>
                      <th scope="col">Word</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>

                      {{@each(it.historie) => val, index}}

                          <th scope="row">
                            <span>{{val.Name}}</span>
                         </th>

                          <td><i>{{val.Datum}}</i></td>

                          <td><a href="/route_admin_lieferschein_history_download?bill={{it.bill}}&id={{val.ID}}&name={{val.Name}}&type=pdf&secret={{it.secret}}" target="_blank" >PDF<i class="bi bi-download"></i> </a></td>
                          <td><a href="/route_admin_lieferschein_history_download?bill={{it.bill}}&id={{val.ID}}&name={{val.Name}}&type=word&secret={{it.secret}}" target="_blank" >Word<i class="bi bi-download"></i></a></td>

                        </tr>

                      {{/each}}

                  </tbody>
                </table>

              </div>
            </div>

            {{#else}}

            <div class="d-flex align-items-center gap-2">
              <button class="btn btn-primary d-flex align-items-center" disabled>
                <span class="me-2">
                  Vergangene Lieferscheine <small style="font-size:0.7rem;">(Historie)</small>
                </span>
              </button>

              <small><i>Noch keine Lieferscheine für diese Rechnung erstellt!</i></small>
            </div>
            {{/if}}

            <hr>


            <h4>Empfänger Firma</h4>
            <div class="row">
                <div class="col-12">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="firma" placeholder="Firma" value="{{it.firma}}" >
                            </div>
                        </div>
                </div>
                <div class="col-12">
                  <p>Bekannte Adresse: <button class="btn btn-secondary" onclick="select_address();">Auswählen</button></p>
                  <textarea class="form-control" id="lieferadresse"></textarea>
                </div>
            </div>


            <hr>

            <h4>Kopfzeile</h4>
            <div class="row">
                <div class="col-12">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="datum" placeholder="Datum" value="{{it.datum}}" >
                                <input type="text" class="form-control" id="kunden_nr" placeholder="Kunden-Nr" value="{{it.kunden_id}}" >
                                <input type="text" class="form-control" id="kunden_name" placeholder="Ihr Zeichen" value="{{it.kunden_name}}">
                                <input type="text" class="form-control" id="projekt_nr" placeholder="Projekt-Nr" value="{{it.projekt_nr}}">
                            </div>
                        </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                        <div class="mb-3">
                            <div class="input-group">
                              <button class="btn btn-primary" onclick="$('#conceptureModal').modal('show');" >X</button>
                                <input type="text" class="form-control" id="concepture_name" placeholder="Unser Zeichen">
                                <input type="text" class="form-control" id="concepture_phone" placeholder="Fon">
                                <input type="text" class="form-control" id="concepture_email" placeholder="E-Mail">
                                <input type="text" class="form-control" id="order_id" placeholder="Ihr Auftrag" value="{{it.orderid}}" >
                            </div>
                        </div>
                </div>
            </div>

            <hr>

            <h4>Lieferschein Nr</h4>

            <div class="row">
                <div class="col-12">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="lieferschein_nr" placeholder="Lieferschein Nr" value="{{it.lieferscheinid}}" >
                            </div>
                        </div>
                </div>
            </div>

            <hr>

						<p>Werden hier Artikel entfernt oder hinzugefügt, betrifft das nur den Lieferschein und hat keine Auswirkungen auf den Auftrag in Books!</p>
            <table class="table" id="artikelTabelle">
                <thead>
                    <tr>
                        <th style="width: 10%;">Anzahl</th>
                        <th style="width: 10%;">Einheit</th>
                        <th style="width: 60%;">Leistung</th>
                        <th style="width: 20%;">Aktion</th>
                    </tr>
                </thead>
                <tbody>
									{{@each(it.artikel) => val, index}}
									    <tr>
									        <td>
									            <input type="number" class="form-control" value="{{val.quantity}}" style="width: 100%;">
									        </td>
                          <td>
									            <input type="text" class="form-control" value="{{val.unit}}">
									        </td>
									        <td>
									            <textarea type="text" class="form-control" >{{val.name}}</textarea>
									        </td>
									        <td>
									            <button class="btn btn-danger" onclick="removeArticle(this)">Entfernen</button>
									        </td>
									    </tr>
									{{/each}}
                </tbody>
            </table>

            <button class="btn btn-secondary" onclick="addRow();">Zeile hinzufügen</button>

            <button class="btn btn-primary float-end" id="openAsWord" onclick="create_word();">Als Word öffnen <i id="word_loader" class="spinner-border" role="status" style="height:1em;width:1em;display:none;"></i></button>
            <button class="btn btn-primary float-end me-3" id="openAsPDF" onclick="create_pdf();">Als PDF öffnen <i id="pdf_loader" class="spinner-border" role="status" style="height:1em;width:1em;display:none;"></i>
            </button>

            <select class="float-end form-select me-3" style="width:10em" name="vorlage" id="vorlage">
              <option value="concepture">Concepture</option>
              <option value="brandschutz">Brandschutz</option>
            </select>


            <br><br>
            {{#else}}

                <h5>Ungültige Rechnung!</h5>

            {{/if}}

        </div>

    </div>

<script>

function set_user(in_e){

    var name = $(in_e).text();
    var mail = $(in_e).data("mail");
    var phone = $(in_e).data("phone");

    $("#concepture_name").val(name);
    $("#concepture_phone").val(phone);
    $("#concepture_email").val(mail);

    $('#conceptureModal').modal('hide');
}


function removeArticle(element) {
	    // Entfernen der übergeordneten Tabellenzeile
	    var row = element.closest("tr");
	    row.parentNode.removeChild(row);
	}


function addRow() {
	    var table = document.getElementById('artikelTabelle').getElementsByTagName('tbody')[0];
	    var newRow = table.insertRow(table.rows.length);

	    var cell1 = newRow.insertCell(0);
      var cell2 = newRow.insertCell(1);
	    var cell3 = newRow.insertCell(2);
	    var cell4 = newRow.insertCell(3);

	    cell1.innerHTML = '<input type="number" class="form-control" value="" style="width: 100%;">';
      cell2.innerHTML = '<input type="text" class="form-control" value="">';
	    cell3.innerHTML = '<textarea type="text" class="form-control"></textarea>';
	    cell4.innerHTML = '<button class="btn btn-danger" onclick="removeArticle(this)">Entfernen</button>';
	}


function create_word() {

    $("#word_loader").show();
    // Sammeln der Basisdaten
    var lieferadresse = document.getElementById('lieferadresse').value;
    var artikel = [];

    document.querySelectorAll('#artikelTabelle tbody tr').forEach(function(row) {
        var quantity = row.querySelector('input[type="number"]').value;
        var unit = row.querySelectorAll('input[type="text"]')[0].value;  // Zugriff auf das erste Textfeld
        var name = row.querySelectorAll('textarea')[0].value;  // Zugriff auf das zweite Textfeld
        artikel.push({ name: name, quantity: quantity, unit: unit });
    });

    // Basis-JSON-Objekt
    var data = {
        lieferadresse: lieferadresse,
        artikel: artikel
    };

    var inputIds = ['datum', 'kunden_nr', 'kunden_name', 'projekt_nr',
                        'concepture_name', 'concepture_phone', 'concepture_email', 'order_id',
                        'firma', 'firma_strasse', 'firma_ort', 'firma_land'];

    inputIds.forEach(function(id) {
            var inputElement = document.getElementById(id);
            if(inputElement) {
                data[id] = inputElement.value;
            }
    });

    data["lieferschein_nr"] = document.getElementById('lieferschein_nr').value;

    var json_string = JSON.stringify(data);

			$.ajax({
			    url: "/create_word?id={{it.bill}}&secret={{it.secret}}",
			    type: "POST",
			    data: { json: json_string },
			    xhrFields: {responseType: 'blob' },
			    success: function(blob) {
              $("#word_loader").hide();
			        var downloadUrl = URL.createObjectURL(blob);
			        var a = document.createElement("a");
			        a.href = downloadUrl;
			        a.download = "Lieferschein.docx";
			        document.body.appendChild(a);
			        a.click();
			        window.URL.revokeObjectURL(downloadUrl);
			        a.remove();
			    },
			    error: function(error) {$("#word_loader").hide();bootbox.alert("Fehler!")}
			});
	}


function create_pdf() {

    $("#pdf_loader").show();

    var lieferadresse = document.getElementById('lieferadresse').value;
    var artikel = [];

    document.querySelectorAll('#artikelTabelle tbody tr').forEach(function(row) {
        var quantity = row.querySelector('input[type="number"]').value;
        var unit = row.querySelectorAll('input[type="text"]')[0].value;  // Zugriff auf das erste Textfeld
        var name = row.querySelectorAll('textarea')[0].value;  // Zugriff auf das zweite Textfeld

        if( quantity == ""){ quantity = " ";}
        if( unit == ""){ unit = " ";}
        if( name == ""){ name = " ";}

        artikel.push({ name: name, quantity: quantity, unit: unit });
    });

    // Basis-JSON-Objekt
    var data = {
        lieferadresse: lieferadresse,
        artikel: artikel
    };

    var inputIds = ['datum', 'kunden_nr', 'kunden_name', 'projekt_nr',
                        'concepture_name', 'concepture_phone', 'concepture_email', 'order_id',
                        'firma', 'firma_strasse', 'firma_ort', 'firma_land'];

    inputIds.forEach(function(id) {
            var inputElement = document.getElementById(id);
            if(inputElement) {
                data[id] = inputElement.value;
            }
    });

    data["lieferschein_nr"] = document.getElementById('lieferschein_nr').value;

    var json_string = JSON.stringify(data);

    $.ajax({
      url: "/create_pdf?id={{it.bill}}&secret={{it.secret}}",
      type: "POST",
      data: { json: json_string },
      xhrFields: { responseType: 'blob' },
      success: function(blob) {
          var pdfUrl = URL.createObjectURL(blob);
          $("#pdf_loader").hide();
          window.open(pdfUrl);
      },
      error: function(error) {
          $("#pdf_loader").hide();
          bootbox.alert("Fehler!");
      }
   });

	}


function select_address() {
  // Füllen der Adressliste im Modal
  var addressList = document.getElementById('addressList');
  addressList.innerHTML = ''; // Liste zunächst leeren
  window.know_lieferadresses.forEach(function(address, index) {
    if( address != "" ){
      var li = document.createElement('li');
      li.className = 'list-group-item list-group-item-action';
      li.textContent = address[0] + " " + address[1];
      li.onclick = function() {
        document.getElementById('lieferadresse').value = address[1]; // Adresse ins Textfeld einfügen
        var modal = bootstrap.Modal.getInstance(document.getElementById('addressModal'));
        modal.hide(); // Modales Fenster schließen
      };
      addressList.appendChild(li);
    }
  });

  // Modales Fenster öffnen
  var myModal = new bootstrap.Modal(document.getElementById('addressModal'));
  myModal.show();
}




</script>
`;