<div id="corsi"></div><div id="window"></div><script id="popupTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="Inizio">Inizio:</label>
    </div>
    <div class="k-edit-field">
        <input id="Inizio" name="datainizio" data-bind="value:datainizio" required />
        <span class="k-invalid-msg" data-for="Inizio"></span>
    </div>
    <div class="k-edit-label">
        <label for="products">Fine:</label>
    </div>
    <div class="k-edit-field">
        <input id="Fine" name="datafine" data-bind="value:datafine" required />
        <span class="k-invalid-msg" data-for="Fine"></span>
    </div>
    <div class="k-edit-label">
        <label for="Turno">Turno:</label>
    </div>
    <div class="k-edit-field">
        <input id="Turno" name="turno" data-bind="value:turno" required />
        <span class="k-invalid-msg" data-for="Turno"></span>
    </div>
</script><script type="text/x-kendo-template" id="windowTemplate">
    <p>Eliminare il corso <strong>#= datainizio # - #= datafine # (#= turno #)</strong>?</p>
    <p style="color: red; font-weight: bold;">Eliminerai anche tutte le prenotazioni!</p>
    <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="yesCancelButton"><span class="k-button-text">Si</span></button>
    <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="noCancelButton"><span class="k-button-text">No</span></button>
</script><script type="x/kendo-template" id="page-template">
      <div class="page-template">
        <div class="header">
          <div style="float: right">Report Corsi Scuola Vela <?=(isset($_GET["anno"]) ? $_GET["anno"] : date("Y"));?></div>
        </div>
        <div class="footer">
          Pagina #: pageNum # di #: totalPages #
        </div>
      </div>
    </script><script>
 $(document).ready(function () {
	 var windowTemplate = kendo.template($("#windowTemplate").html());
	const dataSource = new kendo.data.DataSource({
		
        transport: {
             read: {
		 url: "/gest/ajax/corsiScuolaVela-view.php<?=(isset($_GET["anno"]) ? "?anno=" . $_GET["anno"] : NULL);?>",
                 dataType: "json"
             },
	     update: {
		 url: "/gest/ajax/corsiScuolaVela-update.php<?=(isset($_GET["anno"]) ? "?anno=" . $_GET["anno"] : NULL);?>",
                 method: "post",
		 dataType: "json"
             },
             destroy: {
             	 url: "/gest/ajax/corsiScuolaVela-destroy.php",
		 method: "post",
                 dataType: "json"
             },
             create: {
             	 url: "/gest/ajax/corsiScuolaVela-create.php<?=(isset($_GET["anno"]) ? "?anno=" . $_GET["anno"] : NULL);?>",
		 method: "post",
             	 dataType: "json"
             },
         },
                    batch: false,
                    schema: {
                        model: {
                              id: "id",
  			      fields: {
								id: { type: "number", editable: false },
								datainizio: { type: "date", validation: { required: true } },
								datafine: { type: "date" , validation: { required: true }},
								turno: { type: "string" },
								prenotazioni: { type: "string", editable: false },
							  }
						}
                    }
                });
 
	 function initDropDownLists() {
            var inizio = $("#Inizio").kendoDatePicker({format: "dd/MM/yyyy", dateInput: true}).data("kendoDatePicker");
            var fine = $("#Fine").kendoDatePicker({format: "dd/MM/yyyy", dateInput: true}).data("kendoDatePicker");


            var turni = $("#Turno").kendoDropDownList({
                autoBind: false,
                optionLabel: "Seleziona Turno...",
 		dataTextField: "text",
          	dataValueField: "value",
		dataSource: [
            { text: "Mattina", value: "Mattina" },
            { text: "Pomeriggio", value: "Pomeriggio" }
          ]
            }).data("kendoDropDownList");
    }
	
    let grid = $("#corsi").kendoGrid({
		sortable: {
        	mode: "multiple"
    	},
		resizable: true,
		dataBound: function() {
            for (var i = 0; i < this.columns.length; i++) {
              this.autoFitColumn(i);
            }
          },
		toolbar: [
    		{ name: "create", text: "Nuovo" },
    		{ name: "excel", text: "Esporta Excel" },
    		{ name: "pdf", text: "Esporta PDF" },
		],
		excel: {
                fileName: "Report Corsi Scuola Vela <?=(isset($_GET["anno"]) ? $_GET["anno"] : date("Y"));?>.xlsx"
            },
		pdf: {
                    allPages: true,
                    avoidLinks: false,
                    paperSize: "A4",
                    margin: { top: "2cm", left: "0.6cm", right: "0.6cm", bottom: "1cm" },
                    landscape: true,
                    repeatHeaders: true,
                    template: $("#page-template").html(),
                    scale: 1
                },
                pdfExport: function(e) {
                    e.sender.wrapperClone.addClass('k-clone');
                },
		columnMenu: {
			messages: {
				sortAscending: "Ordina Crescente",
				sortDescending: "Ordina Decrescente",
				filter: "Filtra",
				columns: "Colonne"
			}
		},
        width: "98%",
        height: "860px",
		editable: { mode: "popup", window: { width: 600 }, template: $("#popupTemplate").html() },
        edit: function (e) {
            initDropDownLists();
        },
		columns: [
          { field: "id", title: "Prog.", exportable: { pdf: true, excel: true }},
		  { field: "datainizio", title: "DATA INIZIO", format: "{0:dd/MM/yyyy}", exportable: { pdf: true, excel: true } },
		  { field: "datafine", title: "DATA FINE", format: "{0:dd/MM/yyyy}", exportable: { pdf: true, excel: true } },
          { field: "turno", title: "TURNO", exportable: { pdf: true, excel: true }},
          { field: "prenotazioni", title: "PRENOTAZIONI", exportable: { pdf: true, excel: true }},
		  { command: [
			  {
				  className: "btnEdit",
				  name: "edit",
			   		text: {
                    edit: "Modifica",
                    update: "Salva / Aggiorna",
                    cancel: "Annulla"
                }
			  },
			  {
				  name: "delete",
			   	  text: "Elimina",
                  click: function(e){
			var window = $("#window").kendoWindow({
							title: "Sei sicuro di voler eliminare questo Corso?",
							visible: false,
							width: "400px",
							height: "200px",
						}).data("kendoWindow");
					  
                        e.preventDefault(); //prevent page scroll reset

			var tr = $(e.target).closest("tr"); //get the row for deletion
                        var data = this.dataItem(tr); //get the row data so it can be referred later
                        window.content(windowTemplate(data)); //send the row data object to the template and render it
                        window.center().open();

                        $("#yesCancelButton").click(function(){
							
							grid.dataSource.remove(data)  //prepare a "destroy" request
							grid.dataSource.sync()  //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
							window.close();
                        });
                        $("#noCancelButton").click(function(){
                            window.close();
                        });
			
                    }
                }
		  ], exportable: { pdf: false, excel: false }
		  }
        ],
		filterable: {
    messages: {

        filter: "Filtra", // Sets the text for the "Filter" button.
        clear: "Annulla Filtro", // Sets the text for the "Clear" button.

        // When filtering Boolean numbers.
        isTrue: "è vero", // Sets the text for "isTrue" radio button.
        isFalse: "è falso", // Sets the text for "isFalse" radio button.

        // Changes the text of the "And" and "Or" of the Filter menu.
        and: "E",
        or: "O"
    },
    operators: {
        // The filter menu for "string" type columns.
        string: {
            eq: "è uguale a",
            neq: "è diverso da",
            startswith: "comincia per",
            contains: "contiene",
            endswith: "finisce con"
        },
        // The filter menu for "number" type columns.
        number: {
            eq: "è uguale a",
            neq: "è diverso da",
            gte: "è maggiore o uguale a",
            gt: "è maggiore di",
            lte: "è minore o uguale a",
            lt: "è minore di"
        },
        // The filter menu for "date" type columns.
        date: {
            eq: "è uguale a",
            neq: "è diverso da",
            gte: "è successiva o uguale a",
            gt: "è successiva a",
            lte: "è precedente o uguale a",
            lt: "è precedente a"
        },
          // The filter menu for foreign key values.
          enums: {
              eq: "è uguale a",
              neq: "è diverso da"
          }
    }
},
        filterable: true,
		dataSource: dataSource
    }).data("kendoGrid");
 });