<?xml version="1.0" encoding="UTF-8"?>
<?page contentType="text/html;charset=UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="winGestaoPricing"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

<zk xmlns="http://www.zkoss.org/2005/zul">
	<window id="winGestaoPricing"
		title="${c:l('busquedaPricingController.window.title')}"
		apply="${gestaoPricingController}" contentStyle="overflow:auto"
		width="1200px" height="570px" forward="onCreate=onCreateWindow"  border="normal" sizable="true">
		<toolbar>
			
			
			<button id="btnCerrar" onClick="winGestaoPricing.detach()"
				image="/gui/img/exit.png" width="35px"
				tooltiptext="${c:l('busquedaPricingController.btnCerrar.tooltiptext')}" />
		</toolbar>

		<grid fixedLayout="true">
			<columns>
				<column width="20%" />
				<column width="30%" />
				<column width="20%" />
				<column width="30%" />
			</columns>
			<rows>
				<row >
                    <label value="${c:l('editarPricingController.mercadoOrigen.value')}"/>
                    <combobox id="cmbOrigen" autodrop="false" use="com.rjconsultores.ventaboletos.web.utilerias.MyComboboxParada"
                                    mold="rounded" buttonVisible="true" width="96%" 
                                     />
                    <label value="${c:l('editarPricingController.mercadoDestino.value')}"/>
                    <combobox id="cmbDestino" autodrop="false" use="com.rjconsultores.ventaboletos.web.utilerias.MyComboboxParada"
                                    mold="rounded" buttonVisible="true" width="96%"
                                    />
                </row>
                			
				<row >
					<label
						value="${c:l('busquedaPricingController.lhEmpresa.label')}" />
					<combobox id="cmbEmpresa"
						use="com.rjconsultores.ventaboletos.web.utilerias.MyComboboxEstandar"
						mold="rounded" buttonVisible="true" width="96%"
						model="@{winGestaoPricing$composer.lsEmpresa}">
					</combobox>
					
					<label value="${c:l('editarPricingController.windowTipoServicio.title')}"/>
                    <combobox id="cmbTipoServicio" use="com.rjconsultores.ventaboletos.web.utilerias.MyComboboxEstandar"
                              mold="rounded" buttonVisible="true" width="96%"
                              model="@{winGestaoPricing$composer.lsClaseServicio}"/>
				</row>
				
				<row spans="1,3">
                    <label
                    	value="${c:l('editarPricingController.ruta.value')}" />
                    <combobox id="cmbRuta" use="com.rjconsultores.ventaboletos.web.utilerias.MyComboboxEstandar" 
                                    mold="rounded" buttonVisible="true" width="98.5%"
                                    model="@{winGestaoPricing$composer.lsRuta}"
                                     >
                    </combobox>
                </row>
                
                <row>
					<label value="${c:l('gestaoPricing.dataSemana.label')}" />
					<datebox width="96%" id="fechaSemana" mold="rounded" format="dd/MM/yyyy" />
					
					<label value="${c:l('gestaoPricing.numeroSemana.label')}" />
					<intbox width="96%" id="numeroSemana" />
				</row>
              							
				<row>
					<label value="${c:l('editarPricingController.vigHoraInicioViaje.value')}" />
					<datebox width="96%" id="fechaInicio" mold="rounded" format="dd/MM/yyyy" disabled="true" />

					<label value="${c:l('editarPricingController.vigHoraFinViaje.value')}" />
					<datebox width="96%" id="fechaFin" mold="rounded" format="dd/MM/yyyy" disabled="true"/>

				</row>
			</rows>
		</grid>

		<toolbar>
			<button id="btnPesquisa" image="/gui/img/find.png"
				label="${c:l('busquedaPricingController.btnPesquisa.label')}" />

			<button id="btnReturn" image="/gui/img/return.gif"
				width="35px"  height="20"
				tooltiptext="Voltar ao estado da pesquisa antes de adicionar e salvar." />

			<button id="btnSalvar" height="20"
					image="/gui/img/save.png" width="35px"
					tooltiptext="${c:l('editarPricingController.btnSalvar.tooltiptext')}" />
					

		</toolbar>

<html><![CDATA[
<head>

<style>


div.container {
    display: grid;
    grid-template-columns: 150px 20px auto;
    grid-template-rows: auto;

}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    padding-left: 29px;
    
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}


.btn-group .button {
		font-size: 14px;
	  border: 1px solid black;
	  color: white;
	  text-align: center;
	  text-decoration: none;
	  cursor: pointer;
	  width: 120px;
	  display: block;
	 
	}

	.btn-group .button:not(:last-child) {
	  border-bottom: none; /* Prevent double borders */
	}

	.btn-group .button:hover {
	}
	  

</style>

<link rel="stylesheet" type="text/css" href="gui/js/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="gui/js/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.0/dist/handsontable.full.min.js"></script>
</head>
<body>



<div class="container">
<div class="left">
<div id="buttons" class="btn-group" style="width: 140px; height: 300px; overflow-y: scroll;">
<label class="one">Cenários</label>


</div>
</div>
<div id="tabela" class="right hot head-gap handsontable htRowHeaders htColumnHeaders" style="height: 150px; overflow: hidden; width: 900px;" data-originalstyle="height: 150px; width: 900px;">
</div>
<div class="below"></div>
</div>

<script type="text/javascript" defer="true">  
$(document).ready(function loading() {

	
var tabela = document.getElementById('tabela');
var buttons = document.getElementById('buttons');
var divPricings = document.getElementById('divPricings');
var btnSalvar = document.getElementById("${btnSalvar.uuid}");

var data = ${arg.color};

var jsonParameter = JSON.stringify(data);

	var json = JSON.parse(jsonParameter);

	json.forEach(function(item){
		
		var id = item.id; 
	 	var cor = item.color; 
	 	var corBack = item.backgroundColor; 
	 	
	 	var btn = document.createElement("BUTTON");
	 	btn.innerHTML = item.id;
	 	var div = document.getElementById('buttons');

	 	btn.name = "button";
	 	btn.id = id;
	 	btn.setAttribute('type', 'button');
	 	btn.setAttribute('class', 'button');
	 	
	 	btn.style.color = cor;
	 	btn.style.backgroundColor = corBack;
	 	
	 	div.appendChild(btn);
	    
	});




var json = ${arg.json}
var
 container,
 hot3;
var settings3 = {
 data: json,
 readOnly: true,
 width: 1000,
 height: 300,
 colWidths: 125,
 rowHeights: 23,
 rowHeaders: false,
 colHeaders: true,
 className: "htCenter",
 outsideClickDeselects: false,
 colHeaders: ['Serviço', 'Domingo', 'Segunda', 'Terça', 'Quarta','Quinta','Sexta', 'Sábado'],
 licenseKey: 'non-commercial-and-evaluation',
 selectionMode: 'multiple', 
};
 hot3 = new Handsontable(tabela, settings3);
 
 hot3.updateSettings({
	 
		renderer: loadRenderer
	 
	  //  cells: function(row, col, prop, target, source) {
	   //   var cellProperties = {};
	      
	  //    cellProperties.renderer = loadRenderer;

	     // if (hot3.getDataAtCell(hot3.toVisualRow(row), 0) == 'CA') {
	    //    cellProperties.className = 'myClass';
	    //  } 
	    
	  // 	   var valor = hot3.getDataAtCell(row, col);
	 //	  if (valor === 'CA' ) {
	 	//	  cellProperties.className = 'vermelho';
	          //  cellProperties.renderer = 'myClass';
	          
	   //   }


	//      return cellProperties;
	//    },
	  })

 
 function loadRenderer(instance, td, row, col, prop, value, cellProperties) {
	    Handsontable.renderers.TextRenderer.apply(this, arguments);

     td.style.color = 'black';
     td.style.backgroundColor = 'white';
     
     var valor = hot3.getDataAtCell(row, col);
     
     if (valor === 'CA' ) {
    	 td.style.color = 'black';
         td.style.backgroundColor = 'red';
     }
     
     if (valor === 'TP' ) {
    	 td.style.color = 'white';
         td.style.backgroundColor = 'black';
     }
     
     
     
    var data = ${arg.color};
    
    var jsonParameter = JSON.stringify(data);

 	var json = JSON.parse(jsonParameter);

 	json.forEach(function(item){
 		
 		var id = item.id; 
 	 	var cor = item.color; 
 	 	var corBack = item.backgroundColor; 
 	 	
 	 	if (valor === id ) {
 	   	 td.style.color = cor;
 	     td.style.backgroundColor = corBack;
 	    }
 		
 	   // console.log(item.id + ' ' + item.color + ' ' + item.backgroundColor );
 	});
  
   //  var color = ${arg.color}
   //  console.log(color);
    // 
   //  alert(color)
     return td;
	    
	  }
 
 function firstRenderer(instance, td, row, col, prop, value, cellProperties) {
	    Handsontable.renderers.TextRenderer.apply(this, arguments);

		// get reference to data
        var data = instance.getData();
        // grab the value of the current row at the column we want to compare to
        var valueAtC = data[row][2];
  // alert(value)
        var button = document.getElementById(value);
        
        var style = getComputedStyle(button);
        
       // alert(style.backgroundColor);
        td.style.color = style['color'];
        td.style.backgroundColor = style['background-color'];
      //  console.log(style['background-color']);

       // if (valueAtC > value) {
       //     td.style.backgroundColor = value;
       // } else {
       // 	td.style.backgroundColor = value;
       // }

        return td;
	    
	  }
 
btnSalvar.addEventListener('click', function(event) {
	 
	 zAu.send(new zk.Event(zk.Widget.$('$winGestaoPricing'),
	 			'onNotifyServer',hot3.getSourceData()));
 });

buttons.addEventListener('click', function(event) {
	
 var selected = hot3.getSelected();
 var target = event.target.id;
 
 if (target == 'one' || target == 'buttons' || target == '' || selected == ''){
	 return
 }

 for (var index = 0; index < selected.length; index += 1) {

   var item = selected[index];
   var startRow = Math.min(item[0], item[2]);
   var endRow = Math.max(item[0], item[2]);
   var startCol = Math.min(item[1], item[3]);
   var endCol = Math.max(item[1], item[3]);

   for (var rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
     for (var columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {
    	 var selectedCell = hot3.getDataAtCell(rowIndex,columnIndex); 
    	 if (target !== 'salvar' && target !== 'carregar' && columnIndex > 0 && target !== 'Vazio' && target !== 'buttons' && target !== 'one' && selectedCell !== '' ) {
    		 hot3.setDataAtCell(rowIndex, columnIndex, target);
    		 hot3.setCellMeta(rowIndex, columnIndex, 'renderer', firstRenderer);
    	 }
        
     }
   }
 }

 if (target === 'salvar') {
	 zAu.send(new zk.Event(zk.Widget.$('$winGestaoPricing'),
	 			'onNotifyServer',hot3.getSourceData()));
 }
 
 if (target === 'carregar') {
	 zAu.send(new zk.Event(zk.Widget.$('$winGestaoPricing'),
	 			'onLoad',hot3.getSourceData()));
 }
 hot3.render();
});
});
</script>
</body>
    ]]></html>
		
	</window>
</zk>