<html>
<div id="page-content-wrapper">
<div class="page-content inset">
<div class="row">
 <div class="col-md-10 div-centrado">
    
 
 
<head>
  
<!-- Manda a traer el javascript para validar el formulario -->
<!-- jQuery library -->

<!-- jQuery timepicker library -->
<!-- <link rel="stylesheet" href="jquery-timepicker/jquery.timepicker.min.css"> -->
<!-- <script src="jquery-timepicker/jquery.timepicker.min.js"></script> -->
    <!-- <script src="http://code.jquery.com/jquery-1.0.4.js"/> -->
    
    <link rel="stylesheet" href="<?php echo base_url().'assets/dist/js/jquery/jquery-ui.css'?>">
  <link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/styles.css'?>">
    <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.js"></script>
    <script src="<?php echo base_url().'assets/plugins/notify/notify.min.js'?>" type="text/javascript"></script>
    <script src='<?php echo base_url();?>assets/plugins/lib/moment.min.js'></script>
	<script src='<?php echo base_url();?>assets/plugins/lib/moment-with-locales.min.js'></script>

<script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/nuevaCita.js"></script> 
     <link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/validacion.css'?>"> 
    <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>
	<link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/styleTable.css' /> 
   <link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/table.css' />

  <link rel="stylesheet" href="<?php echo base_url().'assets/plugins/select2/select2.min.css'?>">
  <script src="<?php echo base_url().'assets/plugins/select2/select2.min.js'?>" type="text/javascript"></script>
  

  <script type="text/javascript">
      var base_url="<?php echo base_url()?>";
      var rol="<?php echo $this->session->userdata('Rol_IdRol')?>";
  </script>
  <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>
</head>
<style type="text/css">
  /*form#Agregarcita {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
   form#Agregarcita .form-group {
    width: 50%;
  }*/
  .date-picker#name1, #txthorai, #txthoraf{
    background: rgba(0, 60, 166, 0.18) !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;
  }
</style>
 <div class="title_right">
<div class="x_panel"> 
<br>

<center class="col-md-10"><h1>Nueva cita</h1></center>

<form name="Agregarcita" id="Agregarcita">

<!--     <select class="form-control" name="txtcliente" required>   <option value="">Selecione un cliente</option> <?php foreach ($ReCliente as $i => $cliente)    
    echo '<option value="',$i,'">',$cliente,'</option>'; ?> </select> -->
    <!-- <div class="form-group col-md-5"> 
      <label for="name1">Categoría </label>
      <select class="form-control" name="txtcategoria" required>    <option value="">Seleciona una categoria</option><?php foreach ($ReCategoria as $i => $categoria)    
      echo '<option value="',$i,'">',$categoria,'</option>'; ?> </select>
    </div> -->

    <div class="form-group col-md-4"> 
      <label for="name1">Cliente  </label>
      <input type="text" class="form-control" disabled id="clienteNC" name="clienteNC" required="" onchange="cambioCliente();" placeholder="Nombre del cliente" onkeypress="return validaLetra(event)"  >
      <input type="text" class="invisible" id="idClienteO" name="idClienteO" onchange="cambioCliente();">
      <input type="text" class="invisible" id="nombreClienteO" name="nombreClienteO" onchange="cambioCliente();">
    </div>
    <div class="row">
      <div class="form-group col-md-4"> 
        <label for="name1">Servicio/Promoción  </label>
        <select name="tratamientoNC" id="tratamientoNC" onchange="onchangeSesiones(); fechaCitaCO();" class="js-example-basic-single"></select>
        <input type="text" id="duracionServicio" name="duracionServicio" class="invisible">
      </div>
      <div class="form-group col-md-2 centrar" > 
        <label >Duración cita </label>
        <span class="col-md-12 col-xs-12" id="duracionNC"></span>
      </div>
    </div>
    <div class="form-group col-md-5" id='numeroSesion'>
					<label class="labels">Sesión</label><br>
					<select name="numeroSesiones" id="numeroSesiones" class="form-control"></select>
				</div>
    <div id="botonAdeudos" class="form-group col-md-5 invisible"> 
          <button type="button" id="bAdeudos" class="btn btn-primary alinAdeudos col-md-12">
          <span class="glyphicon glyphicon-list-alt"></span> Adeudos
          </button>
    </div> 
    <div class="form-group col-md-5"> 
    <label for="name1">Fecha</label>
    <input type="text" class="form-control date-picker"  id="fechaNC" name="fechaNC" onchange="fechaCitaCO();" placeholder="dd/mm/aaaa" autocomplete="off" required> 
    </div>
    <div class="form-group col-md-5">
    <label for="name1">Hora inicio</label>
    <input type="time" class="form-control time-picker" id="inicioNC"  name="inicioNC" onchange="fechaCitaCO();" maxlength='11' placeholder="00:00" onKeyup="validaHora();" autocomplete="off" required >

    </div>

    <!--<div class="form-group col-md-5"> 
      <label for="name1">Hora fin </label>
      <input type="time" class="form-control time-picker" id="finNC"   name="finNC" onchange="fechaCitaCO();" maxlength='11' placeholder="00:00" onKeyup="validaHora();" autocomplete="off" required>
    </div>-->

    <div class="form-group col-md-5"> 
    <label for="txtstatus">Estado</label>
    <select id= "statusNC" name="statusNC" class="form-control" required>
    <option 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-5"> 
    <label>Cosmetolog@ </label>
						<select class="form-control" id="cosmetologoNC" name="cosmetologoNC" required> 
						</select>
    </div>

    <div class="form-group col-md-5"> 
    <label for="name1">Cabina </label>
    <select class="form-control" name="cabinaNC" id="cabinaNC" required>   
      <option value="">Selecione una cabina</option> 
      <?php foreach ($ReCabina as $i => $cabina)    
        echo '<option value="',$i,'">',$cabina,'</option>'; ?> 
    </select>
    </div>

   <!-- <div class="form-group col-md-5"> 
    <label for="name1">Franquicia  </label>
    <select class="form-control" name="txt_franquicia" readonly=""> <?php foreach ($ReFranquicia as $i => $franquicia)    
    echo '<option value="',$i,'">',$franquicia,'</option>'; ?> </select>
    </div> -->

    <div class="form-group col-md-5"> 
    <label >Observaciones </label>
					<input type="text" class="form-control" id="observacionesNC" placeholder="OBSERVACIONES">
    </div>
   

    <div class="form-group col-md-10 "> 
      <button type="button" id="guardarCita" name="guardarCita" class="btn btn-primary col-md-4 pull-right"> <span class="glyphicon glyphicon-floppy-disk"> </span> Guardar</button>
      <a href="javascript:window.history.back()" ><button type="button" class="btn btn-danger col-md-4 pull-left"> <span class="glyphicon glyphicon-circle-arrow-left"> </span> Regresar</button></a>  
    </div>
    
    <div>
 <!-- Input invisible para cachar los ID -->
      <input class="form-control invisible" type="text"  id="idcliente" name="idcliente">
      <input class="form-control invisible" type="text"  id="cliente1" name="cliente1">
      <input class="form-control invisible" type="text"  id="idpromo" name="idpromo">
      <input class="form-control invisible" type="text"  id="promo1" name="promo1">
      <input class="form-control invisible" type="text"  id="idservi" name="idservi">
      <input class="form-control invisible" type="text"  id="servi1" name="servi1">

    </div>
<br>
<br>
<br>

</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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" data-dismiss="modal">Cerrar</button>
       
      </div>
    </div>
  </div>
</div>
<!-- Fin modal adeudos -->
</html>

<script type="text/javascript">

    $(document).ready(function(){
        
    //    $(".readonly").keydown(function(e){
    //     e.preventDefault();
    //    });

    //     $.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']);
    // console.log("sdafasdfasdf");
     
    //  var today = new Date();
    // /* $(".date-picker").attr("data-date-end-date","today+2m");*/
    //  $(".date-picker").datepicker({
    //         isRTL: false,
    //         format: "yyyy-mm-dd",
    //        /* yearRange: "0000",*/
    //         viewMode: "months,days", 
    //         minViewMode: "months,days",
    //         autoclose: true,
    //     startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
    //     todayHighlight: true,
    //     /*setDate:"getDate",*/
    //     /*startDate: today,*/
    //     /*endDate: "+3d"*/
                       
    //     });

    //     $('.time-picker').clockpicker({
    //       autoclose: true,
    //       minutestep: 1,
    //     });
        // $("#servicioP").autocomplete({
        //  source: "<?php echo site_url('agenda/franquiciatario/agregarcitaF/servicios/?');?>",

        //  select: function (event, ui) {
        //           if(ui.item.identificador=='SA' || ui.item.identificador=='SG')
        //           {
        //             $('[name="idservi"]').val(ui.item.id);
        //             $('[name="servi1"]').val(ui.item.label);

        //           }else
        //           {
        //           if(ui.item.identificador=='PI' || ui.item.identificador=='PF')
        //           {                    
        //             $('[name="idpromo"]').val(ui.item.sesiones);
        //             $('[name="promo1"]').val(ui.item.label);
        //           }
        //         }  
        //           }
        //     });

        // $("#txtcliente").autocomplete({
        //  source: "<?php echo site_url('agenda/franquiciatario/agregarcitaF/clientes/?');?>",

        //  select: function (event, ui) {
                  
        //              $('[name="idcliente"]').val(ui.item.id);
        //             $('[name="cliente1"]').val(ui.item.label);
        //             $('[name="txtcliente"]').val(ui.item.label);
        //            // $('[name="cliente1"]').val(ui.item.label);
        //            buscarAdeudos(ui.item.id);
                    
        //           }
        //     });
            // var botonAdeudos= document.querySelector('#bAdeudos');
          //   botonAdeudos.addEventListener('click', function(e){
          //   var id=document.getElementById('idcliente').value;
          //   console.log('clickeo adeudo');
          //   $.ajax({
          //     url:base_url+"caja/Franquiciatario/cajaF/todosAdeudos/",
          //     type:'POST',
          //     dataType: 'json',
          //     data:{id:id},
          //     success:function(result){
          //       console.log(result);
          //       ventanaAdeudos(result);
          //       },//end success ajax response
          //       error:function(xhr, textStatus, errorThrown, error){
          //         console.log(xhr.responseText);
          //         swal("¡No se pudo conectar con el servidor!","contacte al departamento de sistemas","error")
          //           .then((value) => {
          //           // location.href="";
          //           });
          //         },
          //       });//end ajax  
          // });
          });
          // function buscarAdeudos(id)
          //     {
          //       $.ajax({
          //         url:base_url+"caja/Franquiciatario/cajaF/buscarAdeudos/",
          //         type:'POST',
          //         dataType: 'json',
          //         data:{id:id},
          //         success:function(result){
          //           console.log(result);
          //           if(result=='adeudo')
          //           {
          //             document.getElementById("botonAdeudos").classList.remove('invisible');
          //             $('#bAdeudos').notify('Cliente con adeudos',{
          //               position:'bottom center',
          //               className:'error',
          //             });
          //           }else{
          //             document.getElementById("botonAdeudos").classList.add('invisible');
          //           }
          //         },//end success ajax response
          //         error:function(){
          //           console.log("No hay resultados");
          //           swal("¡No se pudo conectar con el servidor!","contacte al departamento de sistemas","error")
          //             .then((value) => {
          //             location.href="";
          //             });
          //           },
          //         });//end ajax   
          //     }
          //     function ventanaAdeudos(result)
          //       {
          //         var fila, tr;
          //         for(var i=0; i<result.length; i++)
          //         {
          //             if(result[i] != '')
          //             {
          //               fila="<tr><td class='invisible'>"+result[i][0]+"</td><td>"+result[i][1]+"</td><td>"+result[i][2]+"</td><td>$ "+result[i][3]+"</td><td>$ "+result[i][4]+"</td><td class='invisible'>"+result[i][5]+"</td><tr>";
          //               tr= document.createElement("TR");
          //               tr.innerHTML=fila;
          //               document.getElementById("listaAdeudos").appendChild(tr);
                  
          //             }
          //         }
          //         $("#modal-adeudos").modal();
          //       }
//         $(document).ready(function(){
//         $("#txt_serviciosAP").autocomplete({
//          source: "<?php echo site_url('agenda/franquiciatario/agregarcitaF/servicios/?');?>",

//          select: function (event, ui) {
//                     $('[name="txt_serviciosAP"]').val(ui.item.label);
//                     $('[name="servi1"]').val(ui.item.label);
//                     $('[name="idservi"]').val(ui.item.id);
//                 }
//         });

//       });

//          $(document).ready(function(){
//         $("#txt_serviciosGM").autocomplete({
//          source: "<?php echo site_url('agenda/franquiciatario/agregarcitaF/serviciosG/?'); ?>",


//          select: function (event, ui) {
//                     $('[name="txt_serviciosGM"]').val(ui.item.label); 
//                     $('[name="servi1"]').val(ui.item.label); 
//                     $('[name="idservi"]').val(ui.item.id);
//                 }
//         });
//       });

// //Función de autocomplete para Promociones Franquicias
//         $(document).ready(function(){
//         $("#txt_promocioneslocales").autocomplete({
//          source: "<?php echo site_url('agenda/franquiciatario/agregarcitaF/promocionesF/?');?>",

//          select: function (event, ui) {
//                     $('[name="txt_promocioneslocales"]').val(ui.item.label); 
//                     $('[name="promo1"]').val(ui.item.label); 
//                     $('[name="idpromo"]').val(ui.item.sesiones);                   
//                 }
//         });

//       });



// //Funcion de autocomplete para Promociones Institucionales
//         $(document).ready(function(){
//         $("#txt_promocionesinstitucionales").autocomplete({
//          source: "<?php echo site_url('agenda/franquiciatario/agregarcitaF/promocionesIn/?');?>",

//          select: function (event, ui) {
//                    $('[name="txt_promocionesinstitucionales"]').val(ui.item.label); 
//                    $('[name="promo1"]').val(ui.item.label); 
//                    $('[name="idpromo"]').val(ui.item.sesiones);

//                 }
//         });

//       });
//****************************************************************************************************
//***************************FUNCIONES*************************************************
        //****************funcion que valida que el cliente exista

        $(document).ready(function() {
            // $("#txtcliente").on("keyup", function() {
              
            //    if ($("#txtcliente").val() != $("#cliente1").val()) {
            //       document.getElementById("idcliente").value="";
            //       document.getElementById("botonAdeudos").classList.add('invisible');
            //     }
            // });
        }); 

    //funcion que valida que exista una promocion
    // $(document).ready(function() {
    //         $("#txt_promocioneslocales").on("keyup", function() {
    //            if ($("#txt_promocioneslocales").val() != $("#promo1").val()) {
    //                document.getElementById("idpromo").value="";
                 
    //              }
    //         });
    //     }); 
    //funcion que valida que exista una promocion
    // $(document).ready(function() {
    //         $("#txt_promocionesinstitucionales").on("keyup", function() {
    //            if ($("#txt_promocionesinstitucionales").val() != $("#promo1").val()) {
    //                document.getElementById("idpromo").value="";
                 
    //              }
    //         });
    //     }); 
        //funcion que valida que exista un servicio
    // $(document).ready(function() {
    //         $("#txt_serviciosGM").on("keyup", function() {
    //            if ($("#txt_serviciosGM").val() != $("#servi1").val()) {
    //                document.getElementById("idservi").value="";
                 
    //              }
    //         });
    //     });
        //funcion que valida que exista un servicio
    // $(document).ready(function() {
    //         $("#txt_serviciosAP").on("keyup", function() {
    //            if ($("#txt_serviciosAP").val() != $("#servi1").val()) {
    //                document.getElementById("idservi").value="";
                 
    //              }
    //         });
    //     });
//********Funcion que valida que los datos ingresados sean los correctos
        $(document).ready(function() {
          
            // $("#guarda").on("click", function() {
            //     if (($("#idcliente").val()=="")) {//vaida el cliente
            //        alert("El cliente no esta registrado");
            //        document.getElementById('txtcliente').focus();
            //        return false;
            //     }
                // if(($("#txt_promocionesinstitucionales").val()!="") || ($("#txt_promocioneslocales").val()!="")) {//valida que halla una promocion
                //   if(($("#idpromo").val()=="")){
                //    alert("Verifique que los datos ingresados correspondan a una promoción existente");
                //    //document.getElementById('txt_promocioneslocales').focus();
                //    window.location.assign("#txt_promocioneslocales");
                //    return false;
                //  }
                //  }

                // if(($("#txt_serviciosAP").val()!="") || ($("#txt_serviciosGM").val()!="")) {//valida que halla una promocion
                //   if(($("#idservi").val()=="")){
                //    alert("Verifique que los datos ingresados correspondan a un servicio existente");
                //    window.location.assign("#txt_promocioneslocales");
                //    return false;
                //  }
                //  }
                // if(($("#idpromo").val()=="") && ($("#idservi").val()=="")) {//valida que halla una promocion o un servicio
                //    alert("Verifique que los datos ingresados correspondan a una promocion");
                //    document.getElementById('txtcliente').focus();
                //    return false;
                //  }
            // });



        });  
</script>

<script type="text/javascript">

$(document).ready(function() {
  <?php 
    if(isset($IdClientes))
    {$var1= $IdClientes;}
    else{$var1='';}
  ?>
 var id='<?php if(isset($IdClientes)){echo $IdClientes;}else echo ""?>';
  var nombre='<?php if(isset($NombreCliente)){echo $NombreCliente;}else echo ""?>';
  if (id!='' && nombre!='') {
    $(function() {
      $("#txtcliente").keyup();
    });
        $('[name="idClienteO"]').val(id);
        $('[name="clienteNC"]').val(nombre);
        $('[name="cliente1"]').val(nombre);
        //var boton="bAdeudos";
        buscarAdeudos(id);
        //cambioCliente();
  }
  });

</script>

              