<head>
<script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/citas.js"></script> 	
	<script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.js"></script>
	<meta charset='utf-8' />
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/styles.css'?>">
	<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/locale/es.js'></script>
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/validacion.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/animate.min.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/schedule.css'?>">
	<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/bootstrap-clockpicker.js'></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/bootstrap-clockpicker.min.js'></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/jquery-clockpicker.min.js'></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/jquery-clockpicker.js'></script>
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.min.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.min.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/srclock/clockpicker.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/srclock/standalone.css'?>">
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/srclock/clockpicker.js'></script>
	<script src='<?php echo base_url()?>assets/plugins/dateTimePicker/moment-with-locales.js'></script>
	<script src="<?php echo base_url().'assets/plugins/notify/notify.min.js'?>" type="text/javascript"></script>
  <link rel="stylesheet" href="<?php echo base_url().'assets/plugins/dateTimePicker/bootstrap-datetimepicker.css'?>">
  <script src="<?php echo base_url().'assets/plugins/dateTimePicker/bootstrap-datetimepicker.js'?>"></script>
  <link rel="stylesheet" href="<?php echo base_url().'assets/plugins/dateTimePicker/jquery.timepicker.css'?>">
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/select/bootstrap-select.min.css'?>">
<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url().'assets/plugins/select/bootstrap-select.min.js'?>"></script>
<script src="<?php echo base_url().'assets/plugins/dateTimePicker/jquery.timepicker.js'?>"></script>
<link rel="stylesheet" href="<?php echo base_url().'assets/dist/js/jquery/jquery-ui.css'?>">
 	
<script type="text/javascript">
	  var base_url="<?php echo base_url()?>";
	  var rol="<?php echo $this->session->userdata('Rol_IdRol')?>";
  </script>

</head>
<style type="text/css">
	input#txtFecha,
	input#txtHoraI,
	input#txtHoraF {
		background: rgba(0, 60, 166, 0.18) !important;
	}
	.datepicker.dropdown-menu {
		z-index: 1000000 !important;
	}
	.btn-dangerR {
		color: #fff !important;
		background-color: #d9534f !important;
		border-color: #d43f3a !important;
	}
	.btn-success {
		color: #fff;
		background-color: #449d44 !important;
	}
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(2),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(3),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(4),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(5),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(6)
	{
		display: none;
	}
	.ui-autocomplete { z-index:1000000 !important; }
</style>
<!-- <div id="page-content-wrapper">	 -->
	<!-- <div class="page-content inset"> -->
		<!-- <div class="row"> -->
			<!-- <div class="col-xs-12"> -->
				<center>
					<h1>Agenda</h1> 

					<form id="form" class="col-md-10 col-xs-12 div-centrado sin-margenNB navbar-form navbar" action="#">
						<div class="col-md-6 col-xs-12 div-centrado">
						<label for="name1">Cabinas  </label>
						<select class="col-md-7 col-xs-12 selectpicker" id="queryCabina" name="querycabina"> 
							<option value="">Selecciona una cabina</option>
							<?php foreach ($cabinas as  $cabina)    
							echo '<option data-icon="colores '.$cabina['color'].'" value="',$cabina['id'],'">',$cabina['nombre'],'</option>'; ?>
							<option value="-100">TODOS</option>
						</select>
						<button type="submit" class="btn btn-primary col-md-3 col-xs-12 pull-right" id="filtrarCabinas" >BUSCAR</button>
						</div>

					</form>
				</center>	
				<!-- <div class="col-md-2 col-xs-12 pull-right"> -->
					<!-- <a href="<?=base_url()?>agenda/franquiciatario/listacitasF/citasCanceladas">
						<button type="button" class="btn btn-primary col-md-2 col-xs-12 pull-right" id="citasC" > CITAS </button>
					</a> -->
				<!-- </div>	 -->
				<!-- <div class="col-md-10">
				</div>  -->
				<!-- <div class="row"> -->
					<!-- <div class="col-md-12"> -->
						<form id="form" class=" navbar-form navbar buscador" action="#">
							<a class="agregarbtn" href="<?=base_url()?>agenda/cosmetologo/listacitasC/agregar"><button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a>
							<input type="text" class="form-control"  id="buscarCitasCliente" name="buscarCitasCliente" />
							<input type="submit" class="btn btn-primary alinear" id="buscarCitasboton" value="Buscar" />
							<input type="submit" class="btn btn-primary alinear" id="AnteriorCitaCliente" value="Anterior" style=" display: none;" />
							<input type="submit" class="btn btn-primary alinear" id="siguenteCitaCliente" value="Siguiente" style=" display: none;" />
							<input type="submit" class="btn btn-primary alinear" id="reset" value="Siguiente" style=" display: none;"/>	
							<!-- <a href="<?=base_url()?>agenda/franquiciatario/listacitasF/citasCanceladas" class="alinear col-md-1 pull-right">
							<button type="button" class="btn btn-primary" id="citasC" > CITAS </button>
					    	</a>						 -->
						</form>
						

					<!-- </div> -->
					<div class="col-md-12" id="cargando" style=" text-align: center;">
							<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
							<center class="cargando2"> Cargando...</center>
							</div>
				
					<div class="div-centrado col-md-6 " id='calendarF'></div>
	
					<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 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">


													<select class="form-control" name="txtBandaRP" id="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" disabled="">
												</div>
											</div>
											<!-- <div class="form-group invisible">
												<label for="inputEmail3" class="col-sm-2 control-label">Categoria</label>
												<div class="col-sm-10 ">
													<select class="form-control" name="txtCategoria" id="txtCategoria"><?php foreach ($ReCategoria as $i => $categoria)    
													echo '<option value="',$i,'">',$categoria,'</option>'; ?> </select>
												</div>


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

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

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

												<div class="col-sm-10">
													<input type="text" class="form-control date-picker" id="txtFecha" readonly="readonly">
												</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 time-picker" id="txtHoraI"   min="8:00" max="23:00"required="">
												</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 time-picker" id="txtHoraF"  min="8:00" max="23:00" required="">
												</div>
											</div>
											<div class="form-group">
												<label for="inputEmail3" class="col-sm-2 control-label">Estado Cita</label>
												<div class="col-sm-10">
													<select class="form-control" name="txtEstado" id="txtEstado"><?php foreach ($ReEstatusCita as $i => $estatuscitas)    
													echo '<option value="',$i,'">',$estatuscitas,'</option>'; ?> </select>
												</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">Cosmetólogo(a)</label>

												<div class="col-sm-10">
													<select class="form-control" name="txtUsuario" id="txtUsuario"><?php foreach ($ReUsuario as $i => $usuarios)    
													echo '<option value="',$i,'">',$usuarios,'</option>'; ?> </select>
												</div>
											</div>
											<!-- <div class="col-md-4"> -->
												<!-- <button type="button" class="btn label-warning boton-dcliente" id="verCliente">
													<i class="glyphicon glyphicon-eye-open"></i> Ver cliente
												</button> -->
											<!-- </div>
											<div class="col-md-4" >	 -->
																							
											<!-- </div>
											<div class="col-md-4 invisible" id="div-adeudoE"> -->
												<!-- <button type="button" class="btn btn-danger boton-dcliente pull-right" id="adeudoCliente">
													<i class="glyphicon glyphicon-list-alt"></i> Adeudos
												</button> -->
											<!-- </div> -->
										</div>
										
											<div class="col-md-4 col-sm-6 col-xs-12 cosmetologo" id="div-cancelar">
											<button type="button" class="btn btn-danger col-md-12 col-xs-12" id="btnCerrarModal" data-dismiss="modal">
											<i class="glyphicon glyphicon-remove"></i> Cancelar
											</button>
											</div>
											<div class="col-md-4 col-sm-6 col-xs-12" id="div-ver"> 
												<button type="button" class="btn label-warning btn-danger col-md-12 col-xs-12" id="verCliente">
													<i class="glyphicon glyphicon-eye-open"></i> Ver cliente
												</button>
											</div>
											<div class="col-md-3 col-sm-6 col-xs-12 invisible" id="div-adeudoE">
												<button type="button" class="btn btn-danger  col-md-12 col-xs-12" id="adeudoCliente">
													<i class="glyphicon glyphicon-list-alt"></i> Adeudos
												</button>
											</div>
											<div class="col-md-4 col-sm-6 col-xs-12" id="div-guardar">
												<button type="button" class="btn btn-danger btn-warning col-md-12 col-xs-12" id="btnUpdEvento">
													<i class="fa fa-save"></i> Guardar
												</button>
											</div>
											<div class="col-md-1 col-sm-6 col-xs-12">
											<label id="id-cliente" class="invisible"></label>
											<button type="button" class="btn btn-danger btn-warning col-md-12 col-xs-12 oculto" >
												</button>
											</div>
										
									</form>
								</div>

								<div class="modal-footer">									
								</div>
							</div>
						</div>
					</div>
				<!-- </div> -->
			<!-- </div> -->
		<!-- </div> -->
	<!-- </div> -->
<!-- </div> -->
<!-- modal confirmar agenda -->
<div class="modal" role="dialog" id="modal-agendar">
<div class="vertical-alignment-helper">
  <div class="modal-dialog vertical-align-center">
    <div class="modal-content">
      <div class="modal-header">
		  <button id="nuevoClienteMC" data-toggle="tooltip" data-placement="top" title="Nuevo cliente" ><i class="fas fa-user-plus"></i></button>
		  <button id="adeudoClienteMC" class="pull-right invisible" data-toggle="tooltip" data-placement="top" title="Cliente con adeudos"><i class="glyphicon glyphicon-list-alt"></i></button>
        <center> <h4> Nueva cita</h4></center>
      </div>
      
      <div class="modal-body">
          <!-- <div class="col-md-6 div-centrado"> -->
		  	 <div class="form-group col-md-6" id="div-cliente"> 
                <label >Cliente </label>
                  <input type="text" class="form-control" id="clienteNC" name="clienteNC" placeholder="NOMBRE DEL CLIENTE">
				  <input type="text" class="invisible" id="idClienteO" name="idClienteO">
				  <input type="text" class="invisible" id="nombreClienteO" name="nombreClienteO">
			  </div>
			  <div class="form-group col-md-6" id="div-tratamiento"> 
                <label >Servicio</label>
				<input type="text" class="form-control" id="tratamientoNC" name="tratamientoNC" placeholder="SERVICIO">
				<input type="text" class="invisible" id="idServicio" name="idServicio">
				<input type="text" class="invisible" id="nombreServicio" name="nombreServicio">
				<input type="text" class="invisible" id="idPromocion" name="idPromocion">
				<input type="text" class="invisible" id="nombrePromocion" name="nombrePromocion">
              </div>
			  <div class="form-group col-md-4" id="div-cabina"> 
                <label>Cabina </label>
					<select class="form-control selectpicker" id="cabinaNC" name="cabinaNC" required>   <option disabled selected value="">Selecione una cabina</option> <?php foreach ($cabinas as  $cabina)    
         		 	echo '<option data-icon="colores '.$cabina['color'].'" value="',$cabina['id'],'">',$cabina['nombre'],'</option>'; ?> </select>
			  </div>
			  <div class="form-group col-md-4" id="div-status"> 
                <label>Estado </label>
					<select id= "statusNC" name="statusNC" class="form-control" required>
					<option disabled selected value="">Selecione un estado</option>
					<?php foreach ($ReEstatusCita as $i => $estatuscita)   
					if($i!=3){echo '<option value="',$i,'">',$estatuscita,'</option>'; }?> </select>
			  </div>
			  <div class="form-group col-md-4" id="div-cosmetologo"> 
                <label>Cosmetolog@ </label>
					<select class="form-control" id="cosmetologoNC" name="cosmetologoNC" required> <option disabled selected value="">Selecione un Cosmetologo</option><?php foreach ($ReUsuario as $i => $usuario)   
   					 echo '<option value="',$i,'">',$usuario,'</option>'; ?> </select>
			  </div>
			  <div class="form-group col-md-4" id="div-fecha"> 
                <label>Fecha </label>
                  <input type="text" class="form-control date-picker" id="fechaNC" data-provide="datepicker" data-date-format="dd/mm/yyyy"  data-date-start-date='0d'>
              </div>
              <div class="form-group col-md-4" id="div-inicio"> 
                <label >Hora inicio </label>
                  <input type="text" class="form-control" id="inicioNC">
              </div>
              <div class="form-group col-md-4" id="div-fin"> 
                <label >Hora fin </label>
                  <input type="text" class="form-control" id="finNC">
			  </div>
              <div class="form-group col-md-6" id="div-observaciones"> 
                <label >Observaciones </label>
                  <input type="text" class="form-control" id="observacionesNC" placeholder="OBSERVACIONES">
              </div>
              <div class="form-group col-md-6 centrar" > 
                <label >Duración cita </label>
                  <span class="col-md-12 col-xs-12" id="duracionNC"></span>
              </div>
          </div>
          <!-- <div class="col-md-12 ">
            <button type="button" class="btn btn-danger pull-left" id="cerrarModalCita">Cancelar</button>  
            <button type="button" class="btn btn-primary pull-right" id="guardarCita" >Aceptar</button> 
          </div> -->
<!-- 
	  </div> -->
		<div class="col-md-12"></div>
      <div class="modal-footer ">
	  		<button type="button" class="btn btn-danger ajustar pull-left" id="cerrarModalCita" data-dismiss="modal">Cancelar</button>  
            <button type="button" class="btn btn-primary ajustar pull-right" id="guardarCita" >Aceptar</button> 
      </div>
    </div>
  </div>
</div>
</div>
<!-- Fin confirmar agenda-->
<!-- modal adeudos -->
<div class="modal" tabindex="-1" role="dialog" id="modal-adeudos" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <center> <h4> Adeudos</h4></center>
      </div>
      <div class="modal-body scroll scrollbar-primary">
      <table class="table">
        <thead>
          <tr>
			<th>Fecha venta</th>
            <th>Nombre</th>
            <th>Abono</th>
            <th>Adeudo</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="listaAdeudos">
        </tbody>
      </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" id="cerrarModalAdeudos" >Cerrar</button>
       
      </div>
    </div>
  </div>
</div>
<!-- Fin modal adeudos -->
<!-- modal nuevo cliente -->
<div class="modal" tabindex="-1" role="dialog" id="modal-nuevoCliente">
<div class="vertical-alignment-helper">
  <div class="modal-dialog vertical-align-center">
    <div class="modal-content">
      <div class="modal-header">
        <center> <h4> Nuevo cliente</h4></center>
      </div>
      <div class="modal-body">
          <div>
            <div class="form-group" id="contenedorNc">
              <label for="nombreCompleto">Nombre completo</label>
              <input type="text" class="form-control" id="nombreCompleto" name="nombreCompleto" aria-describedby="emailHelp" placeholder="Ingresar nombre completo" maxlength="69">
              <small id="ayudaNombre" class="form-text text-muted error-ocurrido"></small>
            </div>
            <div class="form-group">
              <label for="celular">Celular</label>
              <input type="text" class="form-control" id="celular" name="celular" placeholder="Ingresar número celular" maxlength="10" onkeypress="return validaPunto(event)">
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger ajustar pull-left" id="cancelarNuevoCliente" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary ajustar" id="guardarNuevoCliente">Guardar</button>
       
      </div>
    </div>
  </div>
</div>
</div>
<!-- Fin modal cliente -->
<!-- Modal loading -->
<div class="modal fade" id="modal-loader" data-backdrop="static" data-keyboard="false">
<div class="vertical-alignment-helper">
  <div class="modal-dialog vertical-align-center modal-sm">
	  	<div style=" text-align: center;">
		<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<center class="cargando"> Cargando...</center>
		</div>
  </div>
</div>
</div>
<!-- <head>
	<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/locale/es.js'></script>
	<script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js"></script>
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/validacion.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/animate.min.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/schedule.css'?>">
	<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/bootstrap-clockpicker.js'></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/bootstrap-clockpicker.min.js'></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/jquery-clockpicker.min.js'></script>
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/clock/jquery-clockpicker.js'></script>
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.min.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/clock/bootstrap-clockpicker.min.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/srclock/clockpicker.css'?>">
	<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/srclock/standalone.css'?>">
	<script type="text/javascript" src='<?php echo base_url()?>assets/plugins/srclock/clockpicker.js'></script>

</head>
<style type="text/css">
	input#txtFecha,
	input#txtHoraI,
	input#txtHoraF  {
		background: rgba(0, 60, 166, 0.18) !important;
	}
	.datepicker.dropdown-menu {
		z-index: 1000000 !important;
	}
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(2),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(3),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(4),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(5),
	.clockpicker-dial.clockpicker-hours  > div.clockpicker-tick:nth-child(6)
	 {
		display: none;
	}
	/*.btn-warning {
		background-color: #ffc107 !important;
		border-color: #ffc107 !important;
	}*/
</style>
 <div id="page-content-wrapper">	
 	<div class="page-content inset">
 		<div class="row">
 			<div class="col-xs-12">
 				<center>
 					<h3>Agenda Franquicia:  
 						<br/><?php foreach ($Franquicias as $i => $Franquicias)    
 						echo  $Franquicias; ?> </h3> 

 					<form id="form" class="navbar-form navbar" action="#">
 						<label for="name1">Cabinas  </label>
 						<select class="form-control" id="queryCabina" name="queryCabina"> 
 							<option value="">Selecciona una cabina</option>
 							<?php foreach ($ReCabina as $i => $cabina)    
 							echo '<option value="',$i,'">',$cabina,'</option>'; ?> 
 							<option value="-100">TODOS</option>
 						</select>
 						<input type="submit" class="btn btn-primary" id="filtrarCabinas" value="BUSCAR" />
 					</form>
				</center>

 					<div class="btn-group pull-right">

 					</div>

 					<div class="col-md-10">

 					</div> 

 					<div class="row">
 						<div class="col-md-10" style="width: 100%;">
 							<form id="form" class="navbar-form navbar buscador" action="#">
 								<a class="agregarbtn" href="<?=base_url()?>agenda/cosmetologo/listacitasC/agregar"><button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a>
 								<input type="text" class="form-control"  id="buscarCitasCliente" name="buscarCitasCliente" />
 								<input type="submit" class="btn btn-primary" id="buscarCitasboton" value="Buscar" />
 								<input type="submit" class="btn btn-primary" id="AnteriorCitaCliente" value="Anterior" style=" display: none;" />
 								<input type="submit" class="btn btn-primary" id="siguenteCitaCliente" value="Siguiente" style=" display: none;" />
 								<input type="submit" class="btn btn-primary" id="reset" value="Siguiente" style=" display: none;"/>
 							</form>
 						</div>


 						<div id='calendarF'></div>
 

	
 						<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">	                   
 														<select class="form-control" name="txtBandaRP" id="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" disabled="">
 													</div>
 												</div>
 												<div class="form-group">
 													<label for="inputEmail3" class="col-sm-2 control-label">Categoria</label>
 													<div class="col-sm-10">
 														<select class="form-control" name="txtCategoria" id="txtCategoria"><?php foreach ($ReCategoria as $i => $categoria)    
 														echo '<option value="',$i,'">',$categoria,'</option>'; ?> </select>
 													</div>
 												</div>
 												<div class="form-group contain-promocion">
 													<label for="inputEmail3" class="col-sm-2 control-label">Promociones</label>

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

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

 													<div class="col-sm-10">
 														<input type="text" class="form-control date-picker" id="txtFecha" readonly="readonly" required="">
 													</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 time-picker" id="txtHoraI"   min="8:00" max="23:00" required="">
 													</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 time-picker" id="txtHoraF"  min="8:00" max="23:00" required="">
 													</div>
 												</div>
 												<div class="form-group">
 													<label for="inputEmail3" class="col-sm-2 control-label">Estado Cita</label>
 													<div class="col-sm-10">
 														<select class="form-control" name="txtEstado" id="txtEstado"><?php foreach ($ReEstatusCita as $i => $estatuscitas)    
 														echo '<option value="',$i,'">',$estatuscitas,'</option>'; ?> </select>
 														  <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">Cosmetolog@</label>

 													<div class="col-sm-10">
 														<select class="form-control" disabled="" name="txtUsuario" id="txtUsuario"><?php foreach ($ReUsuario as $i => $usuarios)    
 														echo '<option value="',$i,'">',$usuarios,'</option>'; ?> </select>
 													</div>
 												</div>
 											</div>

 										</form>

 									</div>

 									<div class="modal-footer">
 										
 										<button type="button" class="btn btn-danger btn-warning" id="btnUpdEvento"><i class="fa fa-save"></i> Guardar</button>
 										<button type="button" class="btn btn-danger" id="btnCerrarModal" data-dismiss="modal">Cancelar</button>
 									</div>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
<script language= "javascript">
	$(document).ready(function() {
		
		$.fn.datepicker.dates['en'] = {
            days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            daysShort: ["Dom", "Lun", "Mar", "Mier", "Jue", "Vier", "Sab"],
            daysMin: ["D", "L", "Ma", "Mi", "J", "V", "S"],
            months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
            monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
            today: "Today",
            clear: "Clear",

            weekStart: 0
        };

        $.datepicker.setDefaults($.datepicker.regional['en']);
		 
		 var today = new Date();
		 $(".date-picker").datepicker({
            isRTL: false,
            format: "yyyy-mm-dd",
            viewMode: "months,days", 
            minViewMode: "months,days",
            autoclose: true,
   			startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
   			todayHighlight: true,
                     
        });
 
		
		$('.time-picker').clockpicker({
			 autoclose: true,
			 minutestep: 1,
		});


		$('fc-list-table ').addClass('table table-striped');
		$( "#buscarCitasboton" ).click(function() {
			$('#siguenteCitaCliente').css('display','none');
			$('#AnteriorCitaCliente').css('display','none');
			var i = 0;	
		  console.log( "Handler for .click() called." );
		  var nameclient = $('#buscarCitasCliente').val();
		   console.log(nameclient);
		  if( nameclient != '') {


		  	$.ajax({
						            url:"<?php echo base_url();?>agenda/cosmetologo/BuscarcitasC/buscarporcliente",
						            type:'POST',
						            dataType: 'json',
						            data:{name : nameclient},
						            success:function(responseclienteName){
						            	console.log("success");
						                // Access the JSON response //
						                json_events = responseclienteName;
						                console.log(json_events);
						                console.log(responseclienteName.length);
						                // var fecha = responseclienteName[0].fecha;
						                // var respuesta =	fecha.split('-');
						                console.log(json_events);

						                /*var i = 0;*/
						                console.log("registros");
						                console.log(responseclienteName.length);
						                if(responseclienteName.length == 0){
						                   alert("No se han encontrado resultados para " + nameclient)
										   return false;
										}
						                if(responseclienteName.length == 1){
						                   $('#calendarF').fullCalendar('gotoDate',responseclienteName[0].fecha );
										   $('#calendarF').fullCalendar( 'removeEvents' );
										   $('#calendarF').fullCalendar( 'refetchEvents' );
										   $('#calendarF').fullCalendar( 'addEventSource',json_events );
										   return false;
										}

										//inicio
										if(responseclienteName.length > 1){
										if(i <=  responseclienteName.length) {
												
												$('#siguenteCitaCliente').css('display','block');
												$('#siguenteCitaCliente').addClass('fadeInDown animated');

												$('#calendarF').fullCalendar('gotoDate',responseclienteName[i].fecha );
												$('#calendarF').fullCalendar( 'removeEvents' );
												/*$('#calendarF').fullCalendar( 'refetchEvents' );*/
												$('#calendarF').fullCalendar( 'addEventSource',json_events );

											console.log("i ->" + i);
											/*if( i <= responseclienteName.length ){*/
												$("#siguenteCitaCliente" ).click(function() {
												  if( i < responseclienteName.length - 1 && i >= 0){
												  		i++;
												  		console.log("i ->" + i);
													    $('#calendarF').fullCalendar('gotoDate',responseclienteName[i].fecha );
												    	$('#calendarF').fullCalendar( 'removeEvents' );
												    	/*$('#calendarF').fullCalendar( 'refetchEvents' );*/
												    	$('#calendarF').fullCalendar( 'addEventSource',json_events );
													
												 		 console.log("Incremento " + i);
												 		 $('#AnteriorCitaCliente').css('display','block');
												 		 $('#AnteriorCitaCliente').addClass('fadeInDown animated');

												 		 
												 		 return false;	
												  		 	
												  }
												  else {  alert("No Existen más eventos"); 
												 		  console.log("i ->" + i);
												 		  return false;
													}
												});//end function click al hacer click en next



												$( "#AnteriorCitaCliente" ).click(function() {
													 if( i > 0 && i <= responseclienteName.length-1){
														i--;
														console.log("aqui");
														console.log(json_events[i]);
														console.log("Decremento" + i);	
													    $('#calendarF').fullCalendar('gotoDate',responseclienteName[i].fecha );
												    	$('#calendarF').fullCalendar( 'removeEvents' );
												    	/*$('#calendarF').fullCalendar( 'refetchEvents' );*/
												    	$('#calendarF').fullCalendar( 'addEventSource',json_events );
												    	return false;
													}
													else {  alert("No existen más eventos Anteriores");
															console.log("abt i ->" + i);
															return false;
														 }
												  		 
												});//end function click al hacer click en next
											/*}*/

											/*if(i >  responseclienteName.length ){
												alert("No hay mas citas");
											}*/
												
										   
											/*console.log("no hay mas");*/
										}//end else 2 o mas clientesen citas cambie por if
										return false;
									}//end else 1 raiz





										//inicio - fin




						            },//end success ajax response
						            error:function(){
						             	alert("No hay resultados para el nombre " + nameclient.toUpperCase());

						             },
						           
						        });//end ajax




		  	return false; //para q no haga reload 
			}// end if
			alert("Escribe un nombre");
			return false; //para q no haga reload 
		});//end#buscarcitasboton






		
		/*var json_events;*/
		$('#filtrarCabinas').click(function() {
			  /*alert('clic a cabinas');*/
			  
			  var idCabina = $('#queryCabina').val();
			 /* alert(idCabina);*/
			  if(idCabina != '' && idCabina != '-100'){
			  	
			  $.ajax({
						            url:"<?php echo base_url();?>agenda/cosmetologo/BuscarcitasC/buscarporcabina",
						            type:'POST',
						            dataType: 'json',
						            data:{codecabina : idCabina},
						            success:function(responseCabina){
						                // Access the JSON response //
						                /*console.log("aqui buscacabina");*/
						                json_events = responseCabina;
						                console.log(responseCabina);
						                
										   $('#calendarF').fullCalendar( 'removeEvents' );
										   $('#calendarF').fullCalendar( 'refetchEvents' );
										   $('#calendarF').fullCalendar( 'addEventSource',json_events );
						            },//end success ajax response
						           	error:function(){
						            	 var selectedOption = $('#queryCabina  option:selected').text();
						             	alert("No hay resultados para " + selectedOption.toUpperCase());

						             },
						        });//end ajax

			  	}//end if
			  	else if( idCabina == '-100'){
			  		/*alert("tods");*/

			  		$.ajax({
						            url:"<?php echo base_url();?>agenda/cosmetologo/listacitasC/getEventos",
						            type:'POST',
						            dataType: 'json',
						            data:{codecabina : idCabina},
						            success:function(responseCabina){
						                // Access the JSON response //
						                json_events1 = responseCabina;
						                console.log(responseCabina);
						                
										   $('#calendarF').fullCalendar( 'removeEvents' );
										   $('#calendarF').fullCalendar( 'refetchEvents' );
										   $('#calendarF').fullCalendar( 'addEventSource',json_events1 );
						            },//end success ajax response
						            error:function(){
						            	 var selectedOption = $('#queryCabina  option:selected').text();
						             	alert("No hay resultados para " + selectedOption.toUpperCase());

						             }
						           
						        });
			  	}
			  	else {
			  		alert("Selecciona una cabina");
			  	}

			  /*$('#calendarF').fullCalendar({
						     			  events: JSON.parse(JSON.stringify(json_events)),
						 	 			});*/
				return false; //para q no haga reload 

			});//end click filtrar cabinas






		$.post('<?php echo base_url();?>agenda/cosmetologo/listacitasC/getEventos',
			function(data){
				console.log("aqui");
				console.log( $.parseJSON(data));

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

						left: 'prev,today,next',
						center: 'title',
						right: 'month,agendaWeek,agendaDay,listMonth,'
					},
					businessHours: {
					  // days of week. an array of zero-based day of week integers (0=Sunday)
					  dow: [0, 1, 2, 3, 4, 5 ,6 ], // Monday - Thursday

					  start: '08:00:00', // a start time (10am in this example)
					  end: '22:00:00', // an end time (6pm in this example) s
					},
					contentHeight: 'auto',
					minTime: "08:00:00",
       				maxTime: "22:00:00",
					/*hiddenDays: [ 0 ],*/
					/*defaultView: 'timelineDay',*/
					defaultDate: new Date(),
					defaultView: 'agendaWeek',
					slotDuration:  '00:30:00',
      				snapDuration:  '00:30:00',
					editable: true,
					displayEventEnd: true,
					slotEventOverlap: false,
					aspectRatio: 1.5,
					 //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: false,
					events: $.parseJSON(data),

					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/cosmetologo/listacitasC/updEvento",
							{
								id:id,
								fecini:fi,
								fecfin:ff
							},
							function(data){
								if (data == 1) {
									alert('Se cambio correctamente');
									$("#calendarF").fullCalendar("refetchEvents");
								}else{
									alert('ERROR.');
								}
							});
						}
						//$('#calendarF').fullCalendar('refresh')
				    },
				    eventClick: function(event, jsEvent, view) {

				    	// alert(event.title);
				    	$('#mhdnIdEvento').val(event.id);
				    	$('#mtitulo').html(event.title);
				    	$('#txtBandaRP').val(event.cabina);
				    	$('#txtClientes').val(event.clientes);
				    	$('#txtCategoria').val(event.categoria);
				    	$('#txtFecha').val(event.fecha);
				    	$('#txtHoraI').val(event.hoi);
				    	$('#txtHoraF').val(event.hof);
				    	$('#txtEstado').val(event.est);
				    	$('#txtObservaciones').val(event.obs);
				    	$('#txtUsuario').val(event.usu);
				    	$('#modalEvento').modal();
				    	//herefecha
				    	var date = new Date();
			              year = date.getFullYear();
			              month = date.getMonth()+1;
			              dt = date.getDate();

			              if (dt < 10) {
			                dt = '0' + dt;
			              }
			              if (month < 10) {
			                month = '0' + month;
			              }
			              var FechaCompleta = year+'-' + month + '-'+dt;
				    	var dateVal = $("#txtFecha").val();
				    	console.log("hoy----" + FechaCompleta);
				    	if( FechaCompleta > dateVal){
				    		console.log("Fecha menor que hoy");
				    		 $('#txtFecha').val(event.fecha);
				    		/* $('.date-picker').datepicker('setDate', dateVal);*/
				    	}
				    	else {
				    		 $('.date-picker').datepicker('setDate', dateVal);	
				    	}
                        console.log("date ---------" + dateVal);
                       
				    	if (event.url) {
				    		
				    		
				    		return false;
				    	}


				    	
				    	if( event.servicio != '' ){
				    		console.log("servicio" + event.servicio + $('#txtServicios-hidden').val());
				    		console.log("deberia ser vacia" + event.promociones);
						$.ajax({
						            url:"<?php echo base_url();?>agenda/cosmetologo/listacitasC/service",
						            type:'POST',
						            dataType: 'json',
						            data:{codeService : event.servicio},
						            success:function(response){
						                // Access the JSON response //
						                console.log(response);
						                $('#txtServicios').val(response[0].NombreServicio);
						                 $('#txtServicios-hidden').val(event.servicio);
						                $('#txtPromociones').val("");
						                $('#txtServicios').parents('.contain-servicio').siblings('.contain-promocion').css('display','none');
						                $('#txtPromociones').parents('.contain-promocion').siblings('.contain-servicio').css('display','block');
						                /*console.log("Servicio ->" + event.servicio);*/
						            }
						        });

						}
						if( event.promociones != '' ){
						console.log("promocion" + event.promociones);
						console.log("deberia ser vacia" + event.servicio);
						$.ajax({
						            url:"<?php echo base_url();?>agenda/cosmetologo/listacitasC/loadNamePromo",
						            type:'POST',
						            dataType: 'json',
						            data:{codePromo : event.promociones},
						            success:function(response){
						                // Access the JSON response //
						                $('#txtServicios').val("");
						                /*console.log(response);*/
						               $('#txtPromociones').val(response[0].NombrePromocion);
						               /*console.log("miriame" + response[0].NombrePromocion);*/
						               $('#txtPromociones-hidden').val(event.promociones);
						               $('#txtServicios').val("");
						              	$('#txtServicios').parents('.contain-servicio').siblings('.contain-promocion').css('display','block');
						               /*$('.contain-servicio').css('display','none');*/
						               $('#txtPromociones').parents('.contain-promocion').siblings('.contain-servicio').css('display','none');
						                
						                /*console.log("promocion ->" + event.promociones);*/
						            }
						        });
						}
					

				    },
				   
					
				});
			});

		$('#btnUpdEvento').click(function(){
		/*alert("Desea realizar cambios");*/
		var fechaAgendada = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtFecha').val();
		if(fechaAgendada != ''){
			console.log(fechaAgendada);
		
		var idCabina = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtBandaRP').val();
		var nombreCliente = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtClientes').val();
		var idCategoria = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtCategoria').val();

		var codePromo = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtPromociones-hidden').val();
		var codeService =$(this).parents('.modal-footer').siblings('.modal-body').find('#txtServicios-hidden').val();

		var fechaAgendada = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtFecha').val();

		var horai = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtHoraI').val();
		var horaf = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtHoraF').val();
		var estado = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtEstado').val();
		var observaciones = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtObservaciones').val();
		var idUserchange = $(this).parents('.modal-footer').siblings('.modal-body').find('#txtUsuario').val();
		var idEvento = $(this).parents('.modal-footer').siblings('.modal-body').find('#mhdnIdEvento').val();
			/* console.log(nombreCliente + "->" + idEvento );*/


		$.ajax({
			    url:"<?php echo base_url();?>agenda/cosmetologo/listacitasC/updEvento2",
				type:'POST',
				dataType: 'json',
				data:{   
						idCabinaA      : idCabina         , 
						nombreClienteA : nombreCliente    ,
						idCategoriaA   : idCategoria      , 
						   codePromoA  : codePromo 	   , 
						 codeServiceA  : codeService  	   ,
						fechaAgendadaA : fechaAgendada	   ,
						  hourStart    : horai 	 	   ,
						 hourEnd	   : horaf 	 	   ,
						 status        : estado 	 	   ,
						 script		   : observaciones    ,
						user		   : idUserchange     ,
						idEventoA 	   : idEvento     ,
						            	  },
				success:function(response){
					// Access the JSON response //
					/*console.log("response");
					console.log(response);*/
					if( response == 1){
		
						/*console.log(response);*/
						location.reload();
						alert("cambios guardados correctamente");
					}
					/*location.reload();	 */               
				}
			});	
	}//end Fecha vacia
	else {
		console.log("else");
			console.log(fechaAgendada);
		alert("Elige una Fecha");
	}
	});
	});


</script> -->


