<?php include('meta.php');
date_default_timezone_set('America/Bogota');
 ?>
<?php $bg_header = "bg_sala"; include('header.php') ?>
<style type="text/css">
  #box_html{
    width: 1024px;
  }
</style>
	<div id="box_body"><!-- body center -->

<script type="text/javascript" language="javascript">
 $(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar({
	editable: false,
	defaultView: 'agendaDay',
 	customButtons: {
        	new_event: {
		text: 'Nueva Cita',
		click: function() {   $("#dialogContent").dialog("open")   }
                }
	},
	header: {
	left: 'prev,next today new_event',
	center: 'title',
	right: 'month,agendaWeek,agendaDay',
	},
    events: "events.php", 
    eventBackgroundColor: "black",
    // por colores los eventos
    eventAfterRender: function (event, element, view) {
        if (event.status == "creado") {
              element.css('background-color', '#21AEDD');
		element.css('color', 'black');
        } else if (event.status == "Sala de espera") {
		element.css('background-color', '#FFD025');
		element.css('color', 'black');
        } else if (event.status == "Finalizada") {
              element.css('background-color', '#666666');
        } else if (event.status == "Confirmada") {
              element.css('background-color', 'green');
        } else if (event.status == "Cancelada") {
              element.css('background-color', 'red');
        } else if (event.status == "Reagendado") {
              element.css('background-color', '#7D26CD');
        } else if (event.status == "No contesta") {
              element.css('background-color', '#F095CD');
        }
    },    
    // Convert the allDay from string to boolean
	eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },

  });
 });
    $(function () {
      $("#dialogContent").dialog({
      autoOpen: false,
      modal: true,
      height: 'auto',
      width: 'auto',
      resizable: true,
      title: 'Nueva Cita'
      });
     $('#dialog').click(function () {
       $("#dialogContent").dialog( "open" );
     });
    });
    /*  */    
    $(function() {
        $.datetimepicker.setLocale('es');
        $('#datetimepicker').datetimepicker({
          format:'Y-m-d H:i',
        });
    });
</script>
<!-- <button id="dialog">Open Dialog</button> <a href="#" id="dialog">aqui</a> -->
<!-- new event -->
<span style="background-color: #20A9D6; padding:3px;border-radius: 4px;font-size:9pt;color:white;">Cita creada</span>
<span style="background-color: #666666; padding:3px;border-radius: 4px;font-size:9pt;color:white">Cita finalizada</span>
<span style="background-color: green; padding:3px;border-radius: 4px;font-size:9pt;color:white;">Cita confirmada</span>
<span style="background-color: #F70000; padding:3px;border-radius: 4px;font-size:9pt">Cita cancelada</span>
<span style="background-color: #FFD025; padding:3px;border-radius: 4px;font-size:9pt">Cita en proceso</span>
<span style="background-color: #7D26CD; padding:3px;border-radius: 4px;font-size:9pt;color:white;">Cita reagendada</span>
<span style="background-color: #F095CD; padding:3px;border-radius: 4px;font-size:9pt">No contestada</span>
<script src="../js/search_event.js" language="javascript"></script>
<div style="float:right;"><input type="text" id="valor" onkeyup="Buscar();" placeholder="Buscar por cedula o nombre" style="width: 210px" /> <a class='btn btn-default btn-sm' href='allevents.php' alt="Ver todas las citas" title="Ver todas las citas"><span class='glyphicon glyphicon-list'></span></a> <div id="resultados" style="float:left;padding-right:80px;padding-top:30px"></div></div>
<br /><br />
<div id="dialogContent" >
<script language="javascript">
/* js para buscar paciente en BD y autorellanar cc y cell */
  $(document).ready(function(){ 
	$("#matricula").autocomplete({
		source: 'search_name.php',
		minLength: 2
          });         
          $("#matricula").focusout(function(){
            $.ajax({
              url:'search_name_cc.php',
              type:'POST',
              dataType:'json',
          data:{ matricula:$('#matricula').val()}
            }).done(function(respuesta){
              $("#cc").val(respuesta.cc);
              $("#cell").val(respuesta.cell);
            });
          });                 
    });
  </script>
  <form action="add_events.php" method="POST"><div style="font-size:11pt;"> 
    <p class="bloque_input">Nombre completo <input type="text" name="name"  style="text-transform:uppercase;width:240px"  id="matricula"  required>
    Teléfono <input type="text" name="cell" style="width:210px;" id="cell" required>   </p>
    <p class="bloque_input">Tipo de documento <select name="tipo_cc" >
                    <option value="Cédula">Cédula de Ciudadania</option>
                    <option value="Documento de Identidad">Tarjeta de Identidad</option>
                    <option value="Cédula de Extranjería">Cédula de Extranjería</option> 
                </select>
    &nbsp;&nbsp; Número &nbsp; <input type="text" name="title" style="width:210px;" id="cc" style="width:160px;"> 
    </p>
    <p class="bloque_input">Tipo de cita &nbsp; <select name="t_servicio" id="t_servicio" onchange="tipo_servicio()">
                    <option value=""></option>
                    <option value="Camara H">Cámara Hiperbárica - SCH</option>
                    <option value="Consulta MF">Consulta MF - CMF</option> 
                    <option value="Control MF">Control MF - CM</option> 
                    <option value="Control P.A.">Control P.A.</option>  <!--- grupo * -->
                    <option value="Estetica">Estética</option>          <!--- grupo -->
                    <option value="General">General</option>            <!--- grupo -->
                    <option value="Inicio P.A.">Inicio P.A.</option>    <!--- grupo * -->
                    <option value="Laboratorio">Laboratorio - LAB</option>
                    <option value="Terapia">Terapia - ST</option>
                    <option value="Valoracion">Valoración</option>      <!--- grupo *  -->
                </select>
    &nbsp;Medico/Esteticista <?php
                $sql=mysqli_query($con,"SELECT id,name FROM user");
                if(mysqli_num_rows($sql)){
                $select= '<select name="atendido"><option></option>';
                while($rs=mysqli_fetch_array($sql)){
                      $select.='<option value="'.$rs['name'].'">'.$rs['name'].'</option>';
                  }
                }
                $select.='</select>';
                echo $select;
                 ?>
    </p>
    <div style="display:none">
          <input type="checkbox" name="SCH" id="SCH" value="0" />
          <input type="checkbox" name="ST" id="ST" value="0" />
          <input type="checkbox" name="CMF" id="CMF" value="0" />
          <input type="checkbox" name="CM" id="CM" value="0" />
          <input type="checkbox" name="LAB" id="LAB" value="0" />
     </div>
    <div id="control_pa" style="display:none" class="well well-sm">
      <div class="row">
        <div class="col-xs-5">
            <input type="checkbox" name="CMD" id="CMD" value="0" /> Medidas - CMD<br />
            <input type="checkbox" name="CMT" id="CMT" value="0" /> Manta - CMT<br />
            <input type="checkbox" name="CTO" id="CTO" value="0" /> Terapia Ortomolecular - CTO<br />
            <input type="checkbox" name="CAT" id="CAT" value="0" /> Auriculoterapia - CAT<br />
        </div>
        <div class="col-xs-5">
            <input type="checkbox" name="CPA" id="CPA" value="0" /> Plan de Alimentación  - CPA<br />
            <input type="checkbox" name="CAF" value="0" /> Actividad Física - CAF<br /> 
            <input type="checkbox" name="CMA" id="CMA"  value="0" /> Médico Alimentación - CMA          
        </div>
      </div>        
    </div>
    <div id="estetica" style="display:none" class="well well-sm"> 
      <div class="row">
        <div class="col-xs-5">
          <input type="checkbox" name="SEF" value="0" /> Facial - SEF<br />
          <input type="checkbox" name="SEV" value="0" /> V-shape - SEV<br />
          <input type="checkbox" name="SEH" value="0" /> Hidro terapia - SEH<br />
          <input type="checkbox" name="SETT" value="0" /> Tonificación - SET<br />
        </div>
        <div class="col-xs-5">
          <input type="checkbox" name="SEG" value="0" /> Gluteos - SEG<br />
          <input type="checkbox" name="SEP" value="0" /> Post-Operatorios - SEP<br />
          <input type="checkbox" name="SEC" value="0" /> Celulitis - SEC<br />
          <input type="checkbox" name="SEL" value="0" /> Liposoft - SEL          
        </div>
      </div>          
    </div>
    <div id="inicio_pa" style="display:none" class="well well-sm"> 
        <input type="checkbox" name="CMD" id="CMD_pa" value="0" /> Medidas - CMD<br />
        <input type="checkbox" name="CTO" id="CTO_pa" value="0" /> Terapia Ortomolecular - CTO<br />
        <input type="checkbox" name="CAT" id="CAT_pa" value="0" /> Auriculoterapia - CAT<br />
        <input type="checkbox" name="CPA" id="CPA_pa" value="0" /> Plan de Alimentación  - CPA<br />
        <input type="checkbox" name="CMA" id="CMA"  value="0" /> Médico Alimentación - CMA
    </div>
    <div id="valoracion" style="display:none" class="well well-sm">
      <input type="checkbox" name="CHC"  id="CHC_va" value="0" /> Historía Clinica - CHC<br />
      <input type="checkbox" name="CMD" id="CMD_va" value="0" /> Medidas - CMD<br />
      <input type="checkbox" name="CEL" id="CEL" value="0" /> Exámenes Médicos - CEL<br />          
    </div>
    <div id="general" style="display:none" class="well well-sm">
      <div class="row">
        <div class="col-xs-6">
           <input type="checkbox" name="CMG" value="0" /> Consulta Médico General - CMG<br />
           <input type="checkbox" name="MG" value="0" /> Control Médico General - MG
           <br /> <br /> 
           <input type="checkbox" name="CAF" value="0" /> Actividad Física - CAF<br /> 
           <input type="checkbox" name="CAT" value="0" /> Auriculoterapia - CAT<br />
           <input type="checkbox" name="CEL" value="0" /> Exámenes Médicos - CEL<br />
           <input type="checkbox" name="CHC" value="0" /> Historía Clinica - CHC<br />
           <input type="checkbox" name="CMA" value="0" /> Médico Alimentación - CMA<br />
            <input type="checkbox" name="CMD" value="0" /> Medidas - CMD<br />
            <input type="checkbox" name="CMF" value="0" /> Consulta MF - CMF<br />
            <input type="checkbox" name="CMT" value="0" /> Manta - CMT<br />
            <input type="checkbox" name="CM"  value="0" /> Control MF - CM<br />
            <input type="checkbox" name="CPA" value="0" /> Plan de Alimentación- CPA            
        </div>
        <div class="col-xs-5">
          <input type="checkbox" name="CTO" value="0" /> Terapia Ortomolecular - CTO<br />
          <input type="checkbox" name="LAB" value="0" /> Laboratorio - LAB<br />
          <input type="checkbox" name="SCH" value="0" /> Camara Hiperbarica - SCH<br />
          <input type="checkbox" name="SEC" value="0" /> Celulitis - SEC<br />
          <input type="checkbox" name="SEF" value="0" /> Facial - SEF<br />
          <input type="checkbox" name="SEG" value="0" /> Gluteos - SEG<br />
          <input type="checkbox" name="SEH" value="0" /> Hidro terapia - SEH<br />
          <input type="checkbox" name="SEL" value="0" /> Liposoft - SEL<br />
          <input type="checkbox" name="SEP" value="0" /> Post-Operatorios - SEP<br />
          <input type="checkbox" name="SETT" value="0" /> Tonificación - SET<br />
          <input type="checkbox" name="SEV" value="0" /> V-shape - SEV<br />
          <input type="checkbox" name="ST"  value="0" /> Terapia - ST
        </div>
      </div>
     

    </div>

    <p>
    <script src="../js/search_event2.js" language="javascript"></script>
	Fecha y hora <input type="text" name="start" id="datetimepicker" style="width:160px;" onblur="Buscar_event();" required>
    &nbsp;&nbsp;Medio como se entero:<select name="como_entero">
          <option ></option> 
          <option value="Asesor Comercial">Asesor Comercial</option> 
          <option value="Radio">Radio</option> 
          <option value="TV" >TV</option>
          <option value="Prensa">Prensa</option>
          <option value="youtube">Youtube</option>
          <option value="google">Google</option>
          <option value="facebook">facebook</option>
          <option value="volante">Volante</option>
          <option value="referido">Referido</option>
          <option value="Aviso">Aviso</option>
        </select>
    <div id="resultados2"></div>
    </p>
	</p>Pago: <input type="radio" name="pay" value="Si" style="vertical-align:text-top;margin:0px;">Si &nbsp;  <input type="radio" name="pay" value="No" style="vertical-align:text-top;margin:0px;" checked>No </p>
    <p>Descripción:<br> <textarea rows="7" cols="61" name="description"></textarea></p>
    <p>Comentario para Sala de espera:<br> <input type="text" name="comments" id="comments" style="width:600px">   </p>
<!--     allday  <input type="text" name="allDay"> <br> -->
     <input type="submit" value="Guardar" class="btn btn-success btn-lg">
  </div></form>
</div>
<!-- END new event -->


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


	</div><!-- END body center -->
<?php include('../footer.php') ?>
