<?php

session_start();

//if(!isset($_SESSION['userid'])) {
    //die('Bitte zuerst <a href="/FOM/login.php">einloggen</a>');
//}
$aktjahr = date("Y");// aktuelles Jahr 		
	
//Abfrage der Nutzer ID vom Login
$userid = $_SESSION['userid'];
$php_variable_userid = $userid;

include('../FOM/lib/Database_con.php');

$sqluser = "SELECT ID, vorname, nachname,zugangsbereich FROM users  WHERE ID = '".$php_variable_userid."'";	
$resuser = mysqli_query($con, $sqluser);
$dsatzuser = mysqli_fetch_assoc($resuser);	

$zugangsbereich = $dsatzuser["zugangsbereich"];
global $benutzer;
$benutzer = $dsatzuser["nachname"].' ' .$dsatzuser["vorname"];

global $php_variable_feuerwehrname;
$php_variable_feuerwehrname = '%';
$zugangsID = 0;

if($zugangsbereich == 'Master') {
	$zugangsID = 0;	
	$php_variable_feuerwehrname = 'Master';
}else if($zugangsbereich == 'JugendAnhausen') {	
	$zugangsID = 1;															
	$php_variable_feuerwehrname = 'Anhausen';
}else if($zugangsbereich == 'JugendBiburg') {
	$zugangsID = 2;		
	$php_variable_feuerwehrname = 'Biburg';
}else if($zugangsbereich == 'JugendDiedorf') {																	
	$zugangsID = 3;	
	$php_variable_feuerwehrname = 'Diedorf';
}else if($zugangsbereich == 'JugendWillishausen') {																	
	$zugangsID = 4;	
	$php_variable_feuerwehrname = 'Willishausen';
}

global $php_variable_einsatzid;
global $php_variable_feuerwehrid;
global $php_variable_feuerwehrrinsatznr;
global $php_variable_einsatzjahr;

$bereits_geladen = '0';

//Neu EinsatzID abfragen
$sqleinid = "SELECT id FROM ffweinsatz ORDER BY ID DESC LIMIT 1";	
$reseinid = mysqli_query($con, $sqleinid);
$dsateinid = mysqli_fetch_assoc($reseinid);	
$letzteEinsatznummer = $dsateinid["id"];
$php_variable_einsatzid = $letzteEinsatznummer;
$php_variable_einsatzid = $php_variable_einsatzid+1;
$php_variable_einsatzjahr = $aktjahr;


?>

<!DOCTYPE html>

<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Jugend Mitglieder pflegen</title>
    <meta name="description" content="FireOfficeManager">


    <link rel="apple-touch-icon" href="img/fom.png">	
	<link rel="shortcut icon" type="image/x-icon" href="img/fom.png" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css">	
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css">
	<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="resources/demo.css">
	<link rel="stylesheet" href="css/dashstyle.css"> 
	<link rel="stylesheet" href="css/cs-skin-elastic.css">
    <link href="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/jqvmap@1.5.1/dist/jqvmap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="fonts/fontawesome/css/all.min.css" /> 
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>	
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>	
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/keytable/2.7.0/js/dataTables.keyTable.min.js"></script>	
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script><!--Für Druck-->
	<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script><!--Für PDF Export-->
	<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>	
	<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <!--Für Excel Export-->
	<script type="text/javascript" language="javascript" src="js/dataTables.editor.min.js"></script>
	<script type="text/javascript" language="javascript" src="resources/syntax/shCore.js"></script>
	<script type="text/javascript" language="javascript" src="resources/hort_tabs.js"></script>	

	
	<script type="text/javascript" language="javascript" class="init">
	
	$(document).ready(function() {
		
		js_variable_feuerwehrname = "<?php echo $php_variable_feuerwehrname; ?>";
		
		var nextg26global;
		var mgid;

		const editorpw = new DataTable.Editor({					
			ajax:{		 
				url: "/FOM/controllers/jugend.php",
				type: 'post',			 
				data: {feuerwehrname: js_variable_feuerwehrname}				
			},
			table: "#benver",
			template: '#details',
			fields: [  {
				label: "ID:",
				name: "ID"
			}, {
				label: "Nachname:",
				name: "NACHNAME"
			}, {
				label: "Vorname:",
				name: "VORNAME"
			}, {
				label: "Mobilnummer:",
				name: "MOBIL"	
			}, {
				label:     "Atemschutzgeräteträger:",
				name:      "AGT",
				type:      "checkbox",
				separator: "|",
				options:   [
					{ label: '', value: 1 }
				]
			}, {
				label:     "Führungsdienstgrad:",
				name:      "FDG",
				type:      "checkbox",
				separator: "|",
				options:   [
					{ label: '', value: 1 }
				]
			}, {
				label:     "SMS Termin AGT:",
				name:      "SMS",
				type:      "checkbox",
				separator: "|",
				options:   [
					{ label: '', value: 1 }
				]
			}, {
				label:     "SMS Termin Gerätewart:",
				name:      "SMSGW",
				type:      "checkbox",
				separator: "|",
				options:   [
					{ label: '', value: 1 }
				]
			},			
			{	
				type: 'datetime',				
				label: "Geburtsdatum:",
				name: "GEBURTS_DAT",
				def: () => new Date(),						
				format: 'D.M.YYYY',				
				keyInput: true	
				
			},
			{	
				type: 'datetime',				
				label: "MTA Basismodul:",
				name: "MTABASIS",
				//def: () => new Date(),						
				format: 'D.M.YYYY',				
				keyInput: true	
				
			},			
			{	
				type: 'datetime',				
				label: "MTA Ende:",
				name: "MTAFERTIG",
				//def: () => new Date(),						
				format: 'D.M.YYYY',				
				keyInput: true	
				
			},	
			{				
               label: "Status:",  
                name: "STATUS",
                type: "select",
                options: [ "Jugend", "Aktiv"],
                def: "Jugend"
			},			
			{				
               label: "Feuerwehr:",  
                name: "FEUERWEHR"
			}
		],			
			
		} );
	
		var tablebenutzerverwaltung = $('#benver').DataTable( {
		"language": {
		url: "./resources/ger.json"
		},		
		//Für diese Einstellung muss im css eine Definition gemacht werden siehe DOM-Tabelle
		dom: '<"top"<"left-col"B><"center-col"l><"right-col"f>>rtip',
		ajax:{		 
			url: "/FOM/controllers/jugend.php",
			type: 'post',			 
			data: {feuerwehrname: js_variable_feuerwehrname} 				
		},
		columns: [
			{
				data: null,
				defaultContent: '',
				className: 'select-checkbox',
				orderable: false
			},					
			{ data: "NACHNAME"},
			{ data: "VORNAME"},
			{ data: "MOBIL"},
			{ data: "GEBURTS_DAT", title: "Geburtsdatum", render: DataTable.render.datetime('DD.MM.YYYY')},
			{ data: "MTABASIS", title: "MTA Basismodul", render: DataTable.render.datetime('DD.MM.YYYY')},	
			{ data: "MTAFERTIG", title: "MTA Ende", render: DataTable.render.datetime('DD.MM.YYYY')},				
			{ data: "FEUERWEHR" }
		],
		order: [ 1, 'asc' ],
		keys: {
			columns: ':not(:first-child):not(:nth-child(3)),:not(:nth-child(4))',
			keys: [ 9 ],
			editorpw: editorpw,
			editOnFocus: true
		},
		 paging: true, //Alle Datensätze auf einer Seite anzeigen
		select: {
			style:    'os',
			selector: 'td' //Ganze Tabellenzeile markieren
		},
		buttons: [				
			{ extend: "create", titleAttr: 'Mitglied anlegen', editor: editorpw,
				formButtons: [
                   'Speichern',
                   { text: 'Abbrechen', action: function () { this.close(); } }
            ]},
			{ extend: "edit",  titleAttr: 'Mitglied bearbeiten',  editor: editorpw,
				formButtons: [
					'Speichern',
                   { text: 'Abbrechen', action: function () { this.close(); } }
            ]},	
			{ extend: "remove", titleAttr: 'Mitglied löschen', editor: editorpw,
				formButtons: [
					'Löschen',
					{ text: 'Abbrechen', action: function () { this.close(); } } 
			]},	
			
			 {
                extend: 'collection',
                text: 'Export',
                buttons: [			
					{extend: 'excel',
						title: 'Übersicht Jugendfeuerwehr '+js_variable_feuerwehrname,
						exportOptions: {
						orthogonal: "myExport",
						columns: [ 1,2,3,4,5,6 ]   //Angegebene Spalten werden exportiert
						}
					},	
					{extend: 'pdf',
					    text: 'Jugendliste drucken',
					    title: 'Übersicht Jugendfeuerwehr '+js_variable_feuerwehrname ,
						customize: function ( doc ) {

							var counternew=0;	
							var now = new Date();
							var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
							var months = ["Januar","February","March","April","May","June","July","August","September","October","November","December"];
							var hour=( now.getHours() < 10 ? "0" : "") + now.getHours()-12;
							var myDate = now.getDate()+"." + (now.getMonth()+1)  + "." + now.getFullYear();// + " Time: "  +hour+ ":" + (now.getMinutes() < 10 ? "0" : "") + now.getMinutes() + ":" + (now.getSeconds() < 10 ? "0" : "") + now.getSeconds() ;
							
							doc.pageMargins = [50,50,30,50];//left,top,right,bottom Seitenrändereinstellung
							doc.defaultStyle.fontSize = 10; //Schriftgröße Tabellen
							doc.styles.tableHeader.fontSize = 10; //Schriftgröße Tabellen-Header
							doc.styles.title.fontSize = 14; //Schriftgröße Überschrift
							doc.styles.title.alignment = "left";
							
							// Remove spaces around page title
							doc.content[0].text = doc.content[0].text.trim();

							for (var i = 0; i < doc.content[2].table.body.length; i++) {
								counternew++;									
							}	
								counternew=counternew-1;								
									
									// Create a header						
									 doc['header']=(function() {
										  
											return {
												columns: [
													{
														//alignment: 'left',
														//text:'FireOfficeManager 2023', //text:'(c) FTA 2023',
														//fontSize: 8
													},										
													{
														alignment: 'right',
														fontSize: 8,
														text: 'FireOfficeManager 2024'
													}
						 
												],
												margin: 20
											}
										});
							
									// Create a footer
									doc['footer']=(function(page, pages) {
									return {
										columns: [
											//This is left column
											{
												alignment: 'left',
												///text:'FireOfficeManager 2023', //text:'(c) FTA 2023',
												text: 'Anzahl Datensätze: '+counternew, // js_variable, //text:'(c) FTA 2023',
												fontSize: 8
											},
											//This is middle column
											{
												alignment: 'center',
												text: ['Seite ', { text: page.toString() },  ' von ', { text: pages.toString() }], //text:'FireOfficeManager 2023',
												fontSize: 8
											}, 
											{
											// This is the right column
												alignment: 'right',
												fontSize: 8,
												//text: ['Created on: ', { text: jsDate.toString() }]
												//text:'FireOfficeManager 2023'
												text: ['Erstellt am: ', { text: myDate.toString() }]
											}
										],
										margin: [50, 0] //Linksausrichtung der Fußzeile
									}
									});
						   
							},							
							messageTop: 'Liste Jugend',
							//messageBottom: '\n\n\n\n\n\n\n hier ist Platz für weiteren Text',
							orientation: 'portrait', //'landscape',
							exportOptions: {
							orthogonal: "myExport",
							columns: [ 1,2,3,4,5,6 ]   //Angegebene Spalten werden exportiert
						}
					}					
                ]
            }
			
		],
		rowCallback: function ( row, data ) {

			},
			"lengthMenu": [ 10, 25, 50, 75, 100, 200, 500, 1000 ]
		} );				

	
		editorpw.on('open', function(e , mode, action){	
			
				if(action == 'create'){	
					$.ajax({
							async: false,				
							url: "./controllers/naechsteAktivenID.php",
							type: 'post',			 
							data: {jahr:2024}, // {Feld in php Datei:Datenfeld das gesendet werden soll}			  
							success: function (data) {
								const myArr = JSON.parse(data);						
								letzteID = $.trim(myArr[0]);	
							   return status; 					   
							}
					})
					
					editorpw.field('ID').set(1000000);
					editorpw.field('FEUERWEHR').val(js_variable_feuerwehrname);			
					editorpw.field('FEUERWEHR').disable();
										
				}else if(action == 'edit'){	
				
					var gebbegin = editorpw.field( 'GEBURTS_DAT' ).val();	
				
					if ( gebbegin == '' ) {	
						 var gebbegin2  = '';
						editorpw.field( 'GEBURTS_DAT' ).val(gebbegin2);	
					} else {
						var gebbegin2  = moment(gebbegin).format("DD.MM.YYYY")
						editorpw.field( 'GEBURTS_DAT' ).val(gebbegin2);	
					}
					
					var mtabasis = editorpw.field( 'MTABASIS' ).val();	
				
					if ( mtabasis == '' ) {	
						 var gebbegin2  = '';
						editorpw.field( 'MTABASIS' ).val(gebbegin2);	
					} else {
						var gebbegin2  = moment(mtabasis).format("DD.MM.YYYY")
						editorpw.field( 'MTABASIS' ).val(gebbegin2);	
					}

					var mtafertig = editorpw.field( 'MTAFERTIG' ).val();	
				
					if ( mtafertig == '' ) {	
						 var gebbegin2  = '';
						editorpw.field( 'MTAFERTIG' ).val(gebbegin2);	
					} else {
						var gebbegin2  = moment(mtafertig).format("DD.MM.YYYY")
						editorpw.field( 'MTAFERTIG' ).val(gebbegin2);	
					}
					
					mgid = editorpw.field( 'ID' ).val();
					
					var alter2 = getAge(gebbegin);
					editorpw.field( 'GEBURTS_DAT' ).label('Alter: '+alter2+'    /  Geburtsdatum:');
					editorpw.field('FEUERWEHR').disable();					
					//editorpw.field( 'GEBURTS_DAT' ).focus();					
					
				}else if(action == 'remove'){	
							
				}
		
				editorpw.on('close', function(e , mode, action){				
						 
							$.ajax({
									async: false,				
									url: "./controllers/letzteAktivenID.php",
									type: 'post',			 
									data: {jahr:2024}, // {Feld in php Datei:Datenfeld das gesendet werden soll}			  
									success: function (data) {
										const myArr = JSON.parse(data);						
										letzteID = $.trim(myArr[0]);										
									   return status; 					   
									}
							})							
				});	
			
					
		});

	// Ende Tabelle Aktive

}); // ********************************* Ende -> $(document).ready(function()
	
	function getAge(DOB) {
		var today = new Date();
		var birthDate = new Date(DOB);
		var age = today.getFullYear() - birthDate.getFullYear();
		var m = today.getMonth() - birthDate.getMonth();
		if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
		age = age - 1;
	}
		return age;
	}

	function deltaDays(date1, date2) {
		if(!(date1 instanceof Date)) throw('Parameter must be an instance of Date!');
		if(!(date2 instanceof Date)) throw('Parameter must be an instance of Date!');
	 
		var check1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
		var check2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
		return Math.round(Math.abs(check1 - check2) / (1000 * 60 * 60 * 24 ));
	}

	function preg_match (regex, str) {
	  return (new RegExp(regex).test(str))
	}

	function fill(number) {
	  var out = '';  
	  var x = parseInt(number);  
	  if (x < 10){	 
		out = '0' + x.toString();	
	  }else{	 
		out = x.toString();
	  return out;}  
	} 

	</script>	

	<style>	
		/* Wichtig für Inlineedit in Geräteliste */
		table.dataTable div.DTE div.DTE_Field > div.DTE_Field_Input {
		  float: none;
		  width: 100%;
		}
		 
		table.dataTable div.DTE div.DTE_Field > div.DTE_Field_Input input {
		  border: none;
		}

		/* Einstellungen für Formular */

		/*################################## */
		
		/*Fenstergröße Einstellungen und auf Bildschirm zentrieren - Label und  Eingabefelder linksbündig*/	
		/*zu beachten: className: 'full block' oder className: 'full' darf bei Editorfeldern nicht aktiv sein */	
		
			div.DTE_Body div.DTE_Body_Content div.DTE_Field {
			width: 180%;              /*Abstand Eingabefelder vom linken Rand aus */	
			padding: 5px 1px;        /*5px=Abstand zwischen den Eingabefedern - 20px=Einzug der Labels von linker Seite */	
			box-sizing: border-box;
			}
 
			div.DTE_Body div.DTE_Form_Content {
			display:flex;
			flex-direction: row;
			flex-wrap: wrap;
			}		
		/*################################## */	
		
		
		#einsatz {
			display: flex;
			flex-flow: row wrap;
		}
		 
		#einsatz fieldset {
			flex: 1;
			border: 0px solid #aaa; /*Rahmen um Box*/
			margin: 1.5em; /*Abstand zwischen Tab und Box*/
			font-size: 14px; /*Label und Eingabefeld Schriftgröße*/
		}
		 
		#einsatz fieldset legend {
			padding: 5px 10px;
			border: 0px solid #aaa; /*Rahmen um Überschrift der Box*/			
			font-weight: bold; /*Schriftstärke der Box*/
			font-size: 14px; /*Schriftgröße der Box*/
		}
		 
		#einsatz fieldset.grunddaten {
			flex: 2 100%;
		}
		 
		#einsatz fieldset.grunddaten legend {
			background: #E8E8E8; /*Hintergrundfarbe Überschrift der Box*/
			
		}
		
		#einsatz fieldset.usf {
			flex: 1 20%;
		}
		
		#einsatz fieldset.usf legend {
			background: #E8E8E8;
		}
		 
		#einsatz fieldset.foto {
			flex: 1 20%;
		}
		
		#einsatz fieldset.foto legend {
			background: #E8E8E8;
		}

		#einsatz fieldset.abholb {
			flex: 1 20%;
		}
		
		#einsatz fieldset.abholb legend {
			background: #E8E8E8;
		}
		
		#einsatz div.DTE_Field {
			padding: 5px;
			
		}
		
		/*Ende Einstellungen für Einsatzformular*/		
	
		.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
		  background: red;
		  border-bottom: 0px solid red;
		  font-size: 18px;
		  
		}
		.nav-tabs {
		  
			background: #E8E9EB;
			border-bottom: 0px solid red;
			font-size: 18px;
		  
		}

		td.checkboxanwesenheiten{ /*Sonderspalte*/	
			text-align: center;
			/*background-color:rgb(17, 212, 319); Editierbare Felder grün darstellen*/			
		}
		
		td.fzgauswahl{ /*Sonderspalte*/	
			text-align: left;
			/*background-color:rgb(17, 212, 319); Editierbare Felder blau darstellen*/		
			background-color: #FFFFEE;	
			font-size: 16px;
						left: 0.2em;
			right: 0.2em;
			margin-left: 0;
			height: auto;
			width: auto;
			
		}
		td.kraftname{ /*Sonderspalte*/	
			text-align: left;
			/*background-color:rgb(17, 212, 319); Editierbare Felder blau darstellen*/		
					
			font-size: 16px; /* font-size: 16px;*/
		}

		td.kraftnamestyle{ /*Sonderspalte*/	
			text-align: left;
			background-color:rgb(17, 212, 319); /*Editierbare Felder blau darstellen*/		
			font-size: 10px;
			padding: 60 70px 7px 20px;
			
		}
		
		#kräfte th {text-align: left;} /* Header der Tabelle kräfte zentieren*/
		
		/*Spalte Zeit/min in Tabelle Kräfte Feldeinstellungen*/
		.GetZEIT{ 
			text-align: left;
			font-size: 14px; /* Schriftgröße Eingabefeld*/
			height: auto;
			width: 40%;
			background-color: #FFFFEE;				
		}		
		/*Spalte Anzahl in Tabelle eingesetzte Geräte Brand Feldeinstellungen*/
		.GetANZAHL{ 
			text-align: left;
			font-size: 14px; /* Schriftgröße Eingabefeld*/
			height: auto;
			width: 40%;
			background-color: #FFFFEE;				
		}
		/*Spalte KM in Tabelle Fahrzeuge Feldeinstellungen*/
		.GetKM{ 
			text-align: left;
			font-size: 14px; /* Schriftgröße Eingabefeld*/
			height: auto;
			width: 40%;
			background-color: #FFFFEE;				
		}
		/*Spalte BST (Betriebsstunden) in Tabelle Fahrzeuge Feldeinstellungen*/
		.GetBST{ 
			text-align: left;
			font-size: 14px; /* Schriftgröße Eingabefeld*/
			height: auto;
			width: 40%;
			background-color: #FFFFEE;				
		}
		
		.card-body-kopf{ 
			background: #C82333;
			margin-left: -20px;
			margin-right: -20px;
			padding: 15px;
			padding-top: 15px;
			overflow: hidden;
			color:#FFFFFF;
		}	
		
		.btn-green {
			background: #60c724;
		}
		.btn-grau {
			background: #F0F0F0;
		}	



		.GetKRAFT {
			background: #FFFFFF;
		}
		
		/*Einstellung DOM für Einsatztabelle*/
		.left-col {
			float: left;
			width: 35%;
		}
		 
		.center-col {
			float: left;
			width: 30%;
		}
		 
		.right-col {
			float: left;
			width: 35%;
		}

		/*----------------------------------*/

		th { font-size: 15px; } /*Schriftgröße Tabellenüberschrift*/
		td { font-size: 14px; } /*Schriftgröße in Tabelle*/

		myspan {
		  display: flex;
		  align-items: center;
		}
		
		
				table#special {	font-family: arial, sans-serif; border-collapse: separate; width: 100%;}
				table#special th,table#special td {	border: 1px solid #black; text-align: right; font-size: 14pt;}
				table#special thead th {background-image: linear-gradient(to top, red 10%, blue ); 	color: white; }


    </style>
</head>

<body>


<!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
    <script src="assets/js/main.js"></script>
    <!--  Chart js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.bundle.min.js"></script>
    <!--Chartist Chart-->
    <script src="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartist-plugin-legend@0.6.2/chartist-plugin-legend.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery.flot@0.8.3/jquery.flot.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flot-pie@1.0.0/src/jquery.flot.pie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flot-spline@0.0.1/js/jquery.flot.spline.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.js"></script>
    <script src="assets/js/init/fullcalendar-init.js"></script>	
						
			    <div class="row" >
                    <div class="col-lg-12">
                        <div class="card" >   
							 <div class="row">
                                <div class="col-lg-12">
                                    <div class="card-body">																								

										<div class="demo-html">
											<?php 
												echo '
													
													<div class="card" >						
														<div class="card-body-kopf">	
															<h4 class="box-title">Jugend der Feuerwehren Markt Diedorf</h4>
														</div>  
													</div>';																							
											?>	
											
											<table id="benver" class="display" cellspacing="0" width="100%">
												<thead>
													<tr>
														<th></th>														
														<th>Nachname</th>
														<th>Vorname</th>
														<th>Mobil</th>
														<th>Geburtsdatum</th>
														<th>MTA Basis</th>
														<th>MTA Ende</th>
														<th>Feuerwehr</th>
													</tr>
												</thead>
											</table>
											
										</div>
										
										<?php 											
											//echo '<div style="display:block; text-align:right;"><a href="index.php" class="btn btn-info mr-3 btn-sm" title="zurück" >Start</a></div><br>';	
										?>		 
                                    </div>
                                </div>                                
                            </div>
                            
                            <div class="card-body"></div>
                        </div>
                    </div>
                </div>	
	
				<div id="details"> <!-- Formular  -->
									
					<div class="modal-body" id="einsatzbody">
												
						<div class="tab-content">
						
							<div class="tab-pane active" id="ESDATEN">	
								<fieldset class="grunddaten">
									<legend></legend>											
											<div data-editor-template="NACHNAME"></div>
											<div data-editor-template="VORNAME"></div>
											<div data-editor-template="JAHR"></div>
											<div data-editor-template="MOBIL"></div>	
											<div data-editor-template="GEBURTS_DAT"></div>
											<div data-editor-template="MTABASIS"></div>
											<div data-editor-template="MTAFERTIG"></div>
											<div data-editor-template="STATUS"></div>		
											<div data-editor-template="FEUERWEHR"></div>											
								</fieldset>																					
							</div>		
											
						</div>			
						
						
					</div>
					
				</div>				
</body>
 
</html>
