<div id="page-content-wrapper">
  <div class="page-content inset">
<div class="row">
<div class="col-md-7">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- jQuery timepicker library -->
<link rel="stylesheet" href="jquery-timepicker/jquery.timepicker.min.css">
<script src="jquery-timepicker/jquery.timepicker.min.js"></script>
  <!-- Manda a traer el javascript para validar el formulario -->
  <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.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/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{
  
  }
  .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>
<!-- Codigo Bootstrap Va AQUI -->
<center><h1>Agregar Promoción Emergente</h1></center>
<form action="<?php echo base_url();?>promociones/franquiciatario/promocionEmergenteF/guardar" method="POST">
 <div class="form-group">
  
  <script type="text/javascript">
     $(document).ready(function(){
        $('#txt_idfranquicia').on('change',function(){
            var IdFranquicias =$(this).val();
            if(IdFranquicias == ""){
              $('#txt_idzona').prop('disabled',true);
            }else
            {
                $('#txt_idzona').prop('disabled',false);
                $.ajax({
                  url:'MostrarZona',
                  type:"POST",
                  data:{'IdFranquicias': IdFranquicias},
                  success: function(data){
                   $('#txt_idzona').html(data);
                  },
                      error: function(){
                        alert('Ocurrio un error!!!!!!');
                      }
                });
            }

        });
    });
    
  function clase(){
    let clase = document.getElementById('f').value;
    alert(clase)
    if (clase==="SERVICIO") {
      document.getElementById('contTiempo').style.display="block";
    }else{
      document.getElementById('contTiempo').style.display="none";
    }
  }
  </script>


     <label for="name1">Tipo Promoción </label>
     <select class="form-control" name="txt_idtipopro"> <?php foreach ($ReTipoPromocion as $i => $tipopromocion)    
      echo '<option value="',$i,'">',$tipopromocion,'</option>'; ?> </select>
  
      <label for="name1">Nombre Promoción</label>
      <input type="text" class="form-control" id="name1" maxlength='60' name="txt_NombrePromocionpro" placeholder="Nombre Promoción"  required>

      <label for="name1">Categoría </label>
      <select class="form-control" name="txtcategoria" required="">
      <option value="">--- Selecciona una opción ---</option>
       <?php foreach ($ReCategoria as $i => $categoria)    
      echo '<option value="',$i,'">',$categoria,'</option>'; ?> </select>

       <label for="name1" placeholder="" >Clasificación</label>
    <select id="f"   class="form-control" name="Clasificacion">
      <option value="">--- Selecciona una opción ---</option>
      <option value="UNITARIO">UNITARIO</option>
      <option value="PAQUETE">PAQUETE</option>
    </select>

        <label for="name1" placeholder="" >Clase</label>
    <select id="f"   class="form-control" name="Clase">
      <!-- <option value="">--- Selecciona una opción ---</option> -->
      <!-- <option value="PRODUCTO">PRODUCTO</option> -->
      <option value="SERVICIO">SERVICIO</option>
    </select>
    

      <label for="name1">Sesiones</label>
      <input type="text" class="form-control" id="name1" maxlength='11' name="txt_cantidad" placeholder="Sesiones" required>

      <label for="nombre">Duración por sesión</label>
     <input type="number" class="form-control" id="tiempo" value="<?=$DuracionPromocion?>" name="tiempo" placeholder="MINUTOS POR SESIÓN" required="">
       
      <label for="name1">Precio</label>
      <input type="text" class="form-control" id="name1" maxlength='11' name="txtnumero_servicios" placeholder="Precio" required>

        <label for="name1">Descripción</label>
     <textarea class="form-control" rows="3" id="name1" name="txt_DescripcionPromocion"   required > </textarea>
     
      <label for="name1">Fecha Inicio</label>
      <input type="date" class="form-control date-picker readonly" id="name1" maxlength='70' name="txt_fechai" placeholder="dd/mm/aaaa" autocomplete="off" required="">
      <!-- <input type="text" class="form-control date-picker "  id="name1" name="txtfecha" placeholder="dd/mm/aaaa" autocomplete="off" required> --> 

      <label for="name1">Fecha Termino</label>
      <input type="date" class="form-control date-picker readonly" id="name1" maxlength='70' name="txt_fechaf" placeholder="dd/mm/aaaa" autocomplete="off" required="">
      
       <label for="name1">Estado </label>
      <select class="form-control" name="txt_estatus"> 
      <option value="ACTIVA">Activa</option>
      <option value="DESACTIVA">Desactiva</option>
      </select>

      <label for="name1">Franquicia  </label>
      <select class="form-control" name="txt_idfranquicia" id="txt_idfranquicia" disabled="disabled"> 
        <option value="">--- Selecciona una opción ---</option>
        <?php foreach ($ReFranquicia as $i => $franquicias)    
       echo '<option value="',$i,'" selected="true" disabled="disabled">',$franquicias,'</option>'; ?>
       <input type="hidden" name="idfranquicia" value="<?php echo $i?>">  
        </select>

      <label for="name1">Zona  </label>
      <select class="form-control" name="txt_idzona" id="txt_idzona" disabled="disabled" > 
          <?php foreach ($zonaFranquicia as $i => $zona)    

          echo '<option value="',$zona->Zona_IdZona,'" selected="true" disabled="disabled">',$zona->NombreZona,'</option>'; ?> 
      </select>
      
        <input type="hidden" name="zonaid" value="<?php echo $zona->Zona_IdZona?>">

    </div>
  <button type="submit" class="btn btn-primary">Guardar</button>

 <a href="<?php echo base_url();?>promociones/franquiciatario/promocionEmergenteF?>"><button type="button" class="btn btn-danger">Cancelar</button></a>


</form>
</div>
</div>
</div>
</div>
</body>

</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,
        });

      });
</script>