var orders_template = `

	<style>
		#main_table_next{
			background-color: #f0962c;
			color: white !important;
		}

		.paginate_button.previous.disabled{
		    display: none !important;
		}
		.paginate_button.next.disabled{
			display: none !important;
		}

		#main_table_previous{
			background-color: #6c757d;
			color: white !important;
		}


		.current{
			background-color: white !important;
			color: white !important;
		}

		/* Farben für das Diagramm */
		.ct-series-a .ct-slice-donut {
			stroke: #f0962c !important;
		}

		.ct-series-b .ct-slice-donut {
			stroke: #565857;
		}

		.ct-series-c .ct-slice-donut{
			stroke: #d8d9db;
		}
	</style>


	<div class="container-fluid">

		<p class="mb-3">Hier erhalten Sie eine Übersicht Ihrer Aufträge aus sämtlichen Projekten. Die Liste lässt sich nach Spaltentiteln sortieren.</p>

		{{@if(it.orders_array == "")}}

			<p>Noch sind keine Aufträge erstellt.</p>

		{{/if}}

		<div class="row mb-4">
			<div class="col-auto mt-2">
				<button id="btn_show_select_order_offer" class="btn btn-primary" onclick="show_select_order_offer();">Neuer Auftrag</button>
			</div>

			<div class="col-auto">
				<div id="select_order_offer" style="display:none;">
						<p>Was brauchen Sie?</p>
						<div class="form-check">
						  <input class="form-check-input" type="checkbox" value="" id="Feuerwehrlaufkarten" onclick="show_new_oder();">
						  <label class="form-check-label" for="Feuerwehrlaufkarten">Feuerwehrlaufkarten</label>
						</div>
						<div class="form-check">
						  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" onclick="show_new_offer();">
						  <label class="form-check-label" for="flexCheckChecked">
						    Feuerwehrpläne, Flucht- und Rettungspläne, Werk- und Montageplanung, Revisionspläne, Sonstiges
								<br>
								<i>Diese Leistung wird von uns für jeden Auftrag individuell kalkuliert. Bitte erstellen Sie hier eine Anfrage. Sie erhalten in Kürze Ihr maßgeschneidertes Angebot.</i>
						  </label>
						</div>

					</div>
				</div>
			</div>

		<div class="row">

			<div class="col-12">
				<div class="row">

					{{@if(it.orders_array != "")}}

						<div id="table_wrapper" style="overflow-x: auto;">
							<table id="main_table" class="table" style="min-width:400px;">
								<thead>
								 <tr>
									 <th scope="col">Name</th>
									 <th scope="col">Projekt-Nummer</th>
									 <th scope="col">Projekt</th>
									 <th scope="col">Ort</th>
									 <th scope="col">Datum</th>
									 <th scope="col">Status</th>
									 <th scope="col">Betrag</th>
									 <th scope="col">Pdf</th>
									 <th scope="col">Dateien</th>
								 </tr>
							 </thead>
								 <tbody>
									{{@each(it.orders_array) => val, index}}
									<tr>
										<td><b>{{val[1]}}</b></td>
										<td><a href="/app#show_project:{{val[5]}}" target="_blank" >{{val[5]}}</a></td>
										<td>{{val[7]}}</td>
										<td>{{val[6]}}</td>
										<td>{{val[2]}}</td>
										<td>{{val[3]}}</td>
										<td>{{val[4]}}€</td>
										<td><a href="/dl_order?id={{val[0]}}" target="_blank" class="text-dark"><img src="/img/download.svg"/></a></td>
										<td><span class="text-dark" onclick="dl_order_files('{{val[0]}}');" ><img src="/img/download.svg"/></span></td>
									</tr>

									{{/each}}
								</tbody>
						</table>
						</div>

					{{/if}}

		    </div>
			</div>

		</div>

  </div>


	<script>
		var global_table = null;

		function dl_order_files(in_order) {
		    // Anzeigen eines Lade-Dialogs
		    bootbox.dialog({
		        message: '<div><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="">&nbsp;Wird heruntergeladen...</span></div>',
		        closeButton: false
		    });

		    // AJAX-Anfrage, um die Download-URL zu bekommen
		    $.get("/create_dl_order_files?id=" + in_order, function(result_data) {
		        // Kurze Verzögerung, um die Benutzererfahrung zu verbessern
		        setTimeout(function() {
		            // Überprüfung, ob result_data ein gültiger SHA256-Hash ist
		            var isValidSHA256 = /^[a-f0-9]{64}$/i.test(result_data);
		            if (isValidSHA256) {
		                // Verstecken aller bootbox Dialoge
		                bootbox.hideAll();

		                // Dynamisches Erstellen eines unsichtbaren <a>-Elements für den Download
		                var downloadLink = document.createElement('a');
		                downloadLink.href = "/dl_order_files?id=" + result_data;
		                downloadLink.style.display = 'none';

		                document.body.appendChild(downloadLink);
		                downloadLink.click();
		                document.body.removeChild(downloadLink);
		            } else {
		                // Verstecken aller bootbox Dialoge und Anzeigen einer Fehlermeldung
		                bootbox.hideAll();
		                bootbox.alert("Fehler! Download aktuell nicht möglich!");
		            }
		        }, 500);
		    });
		}





		function show_select_order_offer(){
			$("#btn_show_select_order_offer").hide();
			$('#select_order_offer').show()
		}

		function filter_status(in_status){
			global_table.search(in_status).draw();
		}

		function show_new_oder(){
			window.location = "#order";
		}

		function show_new_offer(){
			window.location = "#offer";
		}

		if( $('#main_table').length )//Table exists
		{
			global_table = $('#main_table').DataTable({
			order: [0, 'desc'],
			language: {
						search: "",
						lengthMenu: "Einträge _MENU_ pro Seite",
						searchPlaceholder: "Suche...",
						autocomplete: 'off',
						zeroRecords: "Keine Ergebnisse!!",
						info:"_START_ bis _END_ von _TOTAL_ Einträgen",
						responsive: {
						  pagingType: "simple"
						},
						paginate: {
				        "first":      "Erste",
				        "last":       "Letzte",
				        "next":       "Weiter",
				        "previous":   "Zurück"
				    }
					}
			});


			{{@if(it.orders_array.length < 11)}}
				$(".dataTables_paginate").hide();
				$(".dataTables_info").hide();
				$(".dataTables_length").hide();
			{{/if}}

		}
	</script>
`;