var lieferschein_template = `


  <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="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="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="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>



            <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</button>
            <button class="btn btn-primary float-end me-3" id="openAsPDF" onclick="create_pdf();">PDF herunterladen</button>

            <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() {

    // Sammeln der Basisdaten
    var lieferadresse = document.getElementById('lieferadresse').value;
    var artikel = [];

    document.querySelectorAll('table 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?secret={{it.secret}}",
			    type: "POST",
			    data: { json: json_string },
			    xhrFields: {responseType: 'blob' },
			    success: function(blob) {
			        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) {bootbox.alert("Fehler!")}
			});
	}


function create_pdf() {

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

    document.querySelectorAll('table 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?secret={{it.secret}}",
			    type: "POST",
			    data: { json: json_string },
			    xhrFields: {responseType: 'blob' },
			    success: function(blob) {
			        var downloadUrl = URL.createObjectURL(blob);
			        var a = document.createElement("a");
			        a.href = downloadUrl;
			        a.download = "Lieferschein.pdf";
			        document.body.appendChild(a);
			        a.click();
			        window.URL.revokeObjectURL(downloadUrl);
			        a.remove();
			    },
			    error: function(error) {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>
`;