<?php
include_once(__DIR__."/../../core.php");
?><script src="<?php echo $js ?>/bootstrap-colorpicker.min.js"></script>
<link rel="stylesheet" href="<?php echo $css ?>/bootstrap-colorpicker.min.css">

<form action="" method="post" id="add-form">
	<input type="hidden" name="op" value="update">
	<input type="hidden" name="backto" value="record-edit">
	<input type="hidden" name="id_record" value="<?php echo $id_record ?>">

	
	<div class="panel panel-<?php echo $_SESSION['profilo_pannello'] ?>">
		<div class="clearfix"></div>
		</br>	
		<div class="col-md-4">				
			<div class="pull-left">		
				<button type="submit" class="btn-app btn-success"><i class="fa fa-check"></i> Salva </button>	
			</div>
		</div>
		<div class="col-md-4">				
			<div class="pull-right">								
				<div class="pull-left showcase sweet"> 		
				<button type="button" class="btn-app btn-danger"  ><i class="fa fa-trash-o"></i> Elimina</span></button>	
				</div>				
			</div>	
		</div>
		
		<div class="col-md-4">
			<div class="pull-right">								
				<a class="btn btn-app btn-info " target="_blank" href="https://www.w3schools.com/icons/fontawesome_icons_text.asp"><i class="fa fa-mobile"></i> Esempi Icone</a> 	
			</div>				
			
		</div>			
		<div class="clearfix"></div>
		
	</div>
	
	<div class="clearfix"></div>
	

	
	<div class="panel panel-<?php echo $_SESSION['profilo_pannello'] ?>">
		<div class="panel-heading">
			<h3 class="panel-title">Impostazione Widget</h3>
		</div>	
		<div class="panel-body">		
			<div class="row">
				<div class="col-md-3">
					{[ "type": "text", "label": "Nome", "name": "name", "required": 1, "class": "", "value": "$name$", "extra": "" ]}
				</div>
				<div class="col-md-3">
					{[ "type": "select", "label": "Parente", "name": "id_newmodule", "required": 0, "class": "", "values": "query=SELECT id as id ,  CONCAT(name2,' ',name) AS descrizione  FROM zz_modules", "value": "$id_module$", "extra": "" ]}
				</div>    
				<div class="col-md-2">
					{[ "type": "select", "label": "Dimensione ", "name": "class", "required": 0, "class": "", "values": "list= \"col-md-1\": \"col-md-1\", \"col-md-2\": \"col-md-2\", \"col-md-3\": \"col-md-3\" , \"col-md-4\": \"col-md-4\", \"col-md-5\": \"col-md-5\", \"col-md-6\": \"col-md-6\"", "value": "$class$", "extra": "" ]}
				</div>
				<div class="col-md-2">
					{[ "type": "checkbox", "label": "Visibile", "name": "enabled", "required": 0, "class": "", "values": "$enabled$", "value": "$enabled$", "extra": "", "help": "", "placeholder": "ATTIVO" ]}
				</div>		    	
			</div>	
			<div class="row">
				<div class="col-md-2">
					{[ "type": "select", "label": "Posizione ", "name": "location", "required": 0, "class": "", "values": "list= \"controller_top\": \"controller_top\", \"controller_right\": \"controller_right\"", "value": "$location$", "extra": "" ]}
				</div>
				<div class="col-md-2">
					{[ "type": "text", "label": "Colore", "name": "colore", "required": 0, "class": "colorpicker text-center", "value": "$bgcolor$", "extra": "maxlength='7'", "icon-after": "<div class='img-circle square'></div>" ]}
				</div>
				<div class="col-md-2">								
					{[ "type": "text", "label": "Icona", "name": "icon", "required": 0, "class": "", "value": "$icon$", "extra": "" ]}
				</div>
			</div>
		</div>
	</div>
			
</form>


<script>
	$(document).ready( function(){
		$('.colorpicker').colorpicker().on('changeColor', function(){
			$('#colore').parent().find('.square').css( 'background', $('#colore').val() );
		});

		$('#colore').parent().find('.square').css( 'background', $('#colore').val() );
	});
</script>