<head>
   <!-- Direcciona al javascript para hacer las validaciones correspondientes -->
 <!--  <script src="http://code.jquery.com/jquery-1.0.4.js"></script>  -->
 <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.js"></script>

 <meta charset='utf-8' />
<script src='<?php echo base_url()?>assets/fullcalendar/lib/moment.min.js'></script>
<script src='<?php echo base_url()?>assets/fullcalendar/lib/jquery.min.js'></script>
<script src='<?php echo base_url()?>assets/fullcalendar/fullcalendar.js'></script>
<!-- <script src='<?php echo base_url()?>assets/fullcalendar/fullcalendar.min.js'></script> -->
<script src='<?php echo base_url()?>assets/fullcalendar/locale/es.js'></script>
 </head>

<div id="page-content-wrapper">	
<div class="page-content inset">
<div class="row">
<div class="col-xs-12">
	<div class="btn-group pull-right">
 
 	
	<input type="submit" class="btn btn-primary" id="buscar" value="Ver Citas Canceladas" />

	</div>

	

  	 
<center>
<h1>Vista de Agendas Generales </h1>
</br>

<form id="form" class="navbar-form navbar" method="GET" action="<?=base_url()?>agenda/administrador/listacistasA/buscarporfranquicia">
  
    <label for="name1">Franquicia  </label>
    <select class="form-control" id="query" name="query"> 
      <option value=" x">--- Selecciona la opción---</option>
      <?php foreach ($ReFranq as $i => $franquicia)    
    echo '<option value="',$i,'">',$franquicia,'</option>'; ?> </select>
    <input type="submit" class="btn btn-primary" id="buscar" value="Acceder" />

</form>
</center>

<div class="col-md-10">
	<!-- <div class="btn-group pull-right">
 
 
	<input type="submit" class="btn btn-primary" id="buscar" value="Ver Citas Canceladas" />
	</form>
	</div> -->

<div class="row">

<!-- <center>
<input type="submit" class="btn app" id="buscar" value="Facial" />
<input type="submit" class="btn warning" id="buscar" value="Corporal" />
<input type="submit" class="btn app" id="buscar" value="Reductivo" />
<input type="submit" class="btn app" id="buscar" value="Reafirmante" />

</center> -->




<div class="col-md-10">
<form id="form" class="navbar-form navbar" method="GET" action="<?=base_url()?>clientes/clienteF/buscar">
<a href="<?=base_url()?>agenda/administrador/listacitasA/agregar"><button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a>
<input type="text" class="form-control"  id="query" name="query" />
<input type="submit" class="btn btn-primary" id="buscar" value="Buscar" />

</form>
</div>

<script language= "javascript">
	$(document).ready(function() {
		
		$.post('<?php echo base_url();?>agenda/administrador/listacitasA/getEventos',
			function(data){
				//alert(data);

				$('#calendar').fullCalendar({
					header: {

						left: 'prev,today,next',
						center: 'title',
						right: 'month,basicWeek,basicDay,listMonth'
					},
					defaultDate: new Date(),
					//defaultView: 'agendaWeek',
					slotDuration: '00:30:00',
					
					 //es para sobrear sabado y domingo
					navLinks: true, // can click day/week names to navigate views
					weekNumbers: true,
					editable: true,
					eventLimit: true, // allow "more" link when too many events
					//selectHelper: true,
					selectable: true,
					editable: true,
					events: $.parseJSON(data),
					select: function(start, end) {
						var title = prompt('Event Title:');
						var eventData;
						if (title) {
							eventData = {
								title: title,
								start: start,
								end: end
							};
							$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
						}
					$('#calendar').fullCalendar('unselect');
					},
					
					
					
					eventDrop: function(event, delta, revertFunc){
						var id = event.id;
						var fi = event.start.format();
						var ff = event.end.format();

						if (!confirm("Esta seguro??")) {
							revertFunc();
						}else{
							$.post("<?php echo base_url();?>agenda/administrador/listacitasA/updEvento",
							{
								id:id,
								fecini:fi,
								fecfin:ff
							},
							function(data){
								if (data == 1) {
									alert('Se actualizo correctamente');
									$("#calendar").fullCalendar("refetchEvents");
								}else{
									alert('ERROR.');
								}
							});
						}
					},
					eventResize: function(event, delta, revertFunc) {
				        var id = event.id;
						var fi = event.start.format();
						var ff = event.end.format();

						if (!confirm("Esta seguro de cambiar la fecha?")) {
							revertFunc();
						}else{
							$.post("<?php echo base_url();?>agenda/administrador/listacitasA/updEvento",
							{
								id:id,
								fecini:fi,
								fecfin:ff
							},
							function(data){
								if (data == 1) {
									alert('Se cambio correctamente');
									$("#calendar").fullCalendar("refetchEvents");
								}else{
									alert('ERROR.');
								}
							});
						}
						//$('#calendar').fullCalendar('refresh')
				    },
				    eventClick: function(event, jsEvent, view) {

				    	// alert(event.title);
				    	$('#mhdnIdEvento').val(event.id);
				    	$('#mtitulo').html(event.title);
				    	$('#txtBandaRP').val(event.title);
				    	$('#txtClientes').val(event.clientes);
				    	$('#txtCategoria').val(event.categoria);
				    	$('#txtPromociones').val(event.promociones);
				    	$('#txtFecha').val(event.fecha);
				    	$('#txtHoraI').val(event.hoi);
				    	$('#txtHoraF').val(event.hof);
				    	$('#txtObservaciones').val(event.obs);
				    	$('#txtUsuario').val(event.usu);
				    	$('#modalEvento').modal();

				    	if (event.url) {
				    		
				    		
				    		return false;
				    	}

				    },
				    eventRender: function(event, element) {
				        var el = element.html();
				        element.html("<div style='width:90%;float:left;'>" + el + "</div>" + 
						        	"<div style='color:red;text-align:right;' class='closeE'>" +
						        		"<i class='fa fa-trash'></i>" +
						        	"</div>");

				        element.find('.closeE').click(function(){
				        	if (!confirm("Esta seguro de eliminar el evento?")) {
								return false;
							}else{
								var id = event.id;
								$.post("<?php echo base_url();?>agenda/administrador/listacitasA/deleteEvento",
								{
									IdAgenda:id
								},
								function(data){
									alert(data);
									if (data == 1) {
										$('#calendar').fullCalendar( 'removeEvents', event.id);
										alert('Se elimino correctamente');
									}else{
										alert('ERROR.');
									}
								});
					        	
					        }

				        });
				    }
					
				});
			});

		
	});


</script>
	
<style>
	#calendar {
		max-width: 1000px;
		margin: 0 auto;
	}

    .example-modal .modal {
      position: relative;
      top: auto;
      bottom: auto;
      right: auto;
      left: auto;
      display: block;
      z-index: 1;
    }

    .example-modal .modal {
      background: transparent !important;
    }
  </style>
</head>

	<div id='calendar'></div>
 

	<!-- Modal Cierre -->
	<div class="modal fade" id="modalEvento" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content">
	      <div class="modal-header bg-red">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="mtitulo"></h4>
	      </div>

	      <div class="modal-body">

	            <!-- form start -->
	            <form class="form-horizontal">
	            	<input type="hidden" id="mhdnIdEvento">
	              <div class="box-body">
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Cabina</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtBandaRP">
	                   
<!-- 	                   <select class="form-control" name="txtBandaRP"> <?php foreach ($ReCabina as $i => $cabina)echo '<option value="',$i,'">',$cabina,'</option>'; ?> </select> 
 -->	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Cliente</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtClientes">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Categoria</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtCategoria">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Promociones</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtPromociones">
	                  </div>
	                </div>
	                 <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Servicio</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtServicios">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Fecha</label>

	                  <div class="col-sm-10">
	                    <input type="date" class="form-control" id="txtFecha">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Hora Inicio</label>

	                  <div class="col-sm-10">
	                    <input type="time" class="form-control" id="txtHoraI">
	                  </div>
	                </div>
	                 <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Hora fin</label>

	                  <div class="col-sm-10">
	                    <input type="time" class="form-control" id="txtHoraF">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Estado Cita</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtEstado">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Observaciones</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtObservaciones">
	                  </div>
	                </div>

	                <div class="form-group">
	                  <label for="inputEmail3" class="col-sm-2 control-label">Usuario</label>

	                  <div class="col-sm-10">
	                    <input type="text" class="form-control" id="txtUsuario">
	                  </div>
	                </div>
	              </div>
	              <!-- /.box-body -->
	             <!--  <div class="box-footer">
	                <button type="submit" class="btn btn-default">Cancel</button>
	                <button type="submit" class="btn btn-info pull-right">Sign in</button>
	              </div> -->
	              <!-- /.box-footer -->
	            </form>
	          <!-- /.box -->
	      </div>

	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" id="btnCerrarModal" data-dismiss="modal">Cancelar</button>
	        <button type="button" class="btn btn-danger" id="btnUpdEvento">Guardar</button>
	      </div>
	    </div>
	  </div>
	</div>
</div>
</div>
</div>
</div>
</div>
</div>


<script type="text/javascript">
	$('#btnUpdEvento').click(function(){
		var nome = $('#txtBandaRP').val();
		var clientes = $('#txtClientes').val();
		var categoria = $('#txtCategoria').val();
		var promociones = $('#txtPromociones').val();
		var servcios = $('#txtServicios').val();
		var fecha = $('#txtFecha').val();
		var horai = $('#txtHoraI').val();
		var horaf = $('#txtHoraF').val();
		var observaciones = $('#txtObservaciones').val();
		var usuario = $('#txtUsuario').val();
		var ide = $('#mhdnIdEvento').val();

		$.post("<?php echo base_url();?>agenda/administrador/listacitasA/updEvento2",
		{
			nom: nome,
			clientes: clientes,
			categoria: categoria,
			promociones: promociones,
			fecha: fecha,
			horai: horai,
			horaf: horaf,
			observaciones: observaciones,
			usuario: usuario,
			id: ide
		},
		function(data){
			if (data == 1) {
				$('#btnCerrarModal').click();
			}
		})
	})	
</script>


