<?php
  use App\Libraries\ejLib;
  $var = ejLib::getInstance();
?>

@extends('layouts.master')
@section('titulo')
  {{ 'Home' }}
@endsection

@section('navegacion_admin')
  @include('layouts.navegacion_admin')
@endsection

@section('titulo_pagina')
  <div class="titulo_pagina"><h2>LISTA CONSULTORIOS</h2></div>
@endsection

<style media="screen">
#panel{min-height: 650px;width: 220px;float: left;margin-right: 20px;padding-left: 10px;padding-right: 10px; height: 100%;}
#fecha{margin-bottom: 40px;}
.container {
  border: 1px solid transparent !important;
}
#horarios{
  width: 70%;
  float: left;
  text-align: center !important;
}
td, th{
  text-align: center !important;
}
</style>

<link rel="stylesheet" href="css/AdminConsultorios.css">
<link rel="stylesheet" href="css/usuariocm.css">
<link rel="stylesheet" href="css/usuariogeneral.css">
<link rel="stylesheet" href="css/jquery.datepick.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/jquery.plugin.min.js"></script>
<script src="js/jquery.datepick.js"></script>
<script src="js/jquery.datepick-es.js"></script>

@section('content')
  <div class="container">
    <div id="panel">
      <div id="fecha"></div>
      @if($rol == 1)
        <b>Centro de salud</b>
        <select class="form-control" id="selectCentro">
          <option value="">SELECCIONAR CENTRO</option>
          @foreach( $centros->respuesta as $centro)
            <option value="{!! $centro->centro_sal !!}">{!! utf8_decode($centro->desc_centr ) !!}</option>
          @endforeach
        </select>
      @endif
      <b>Consultorio</b>
       <select class="form-control" id="selectConsultorio">
          <option>SELECCIONAR CONSULTORIO</option>
          @foreach( $listaConsultorios->respuesta as $consultorio)
            <option value="{!! $consultorio->id_consultorio !!}">{!! utf8_decode($consultorio->no) !!}</option>
          @endforeach
      </select>
      <b>Médico</b>
      <select class="form-control"  id="selectDoctor">
      </select>
      <input class="chkAusentes" type="checkbox" value="1">Ausentes<br>
    </div>
    <div id="horarios">
      <table id="tablaHorarios" style="width:100%">
        <tr>
          <th>Fecha</th>
          <th>Ausente</th> 
          <th>Medico</th>
          <th>Especialidad</th>
          <th>Dia Semana</th>
          <th>Hora Inicio</th>
          <th>Hora Fin</th>
        </tr>
        <tr>
          <td></td>
          <td></td> 
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td> 
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div> 
  </div>
  
<script type="text/javascript">

  function formatDate(d) {
    date = new Date(d)
    var dd = date.getDate(); 
    var mm = date.getMonth()+1;
    var yyyy = date.getFullYear(); 
    if(dd<10){dd='0'+dd} 
    if(mm<10){mm='0'+mm};
    return d = dd+'/'+mm+'/'+yyyy
  }

  $("#fecha").datepick().datepick("setDate", new Date()); // Asignar fecha del dia por default

  console.log($('#fecha').datepick("getDate"));

  let consultorios = document.querySelector("#selectConsultorio");
  let medicos = document.querySelector("#selectDoctor");
  let tablaHorarios = document.querySelector("#tablaHorarios");
  let checkbox = document.querySelector(".chkAusentes");
  let centros = document.querySelector("#selectCentro");

 if (centros != null) {
    centros.addEventListener("change", function() {
      let idCentro = this.value;
      getConsultorios(idCentro);
    });
  }

  checkbox.addEventListener("click", function() {
    let idConsultorio = consultorios.value;
    var checkedValue = $('.chkAusentes:checked').val();
    if(checkedValue == null) {
      ausente = 0;
    }else {
      ausente = 1;
    }
    let fechaFormat = $('#fecha').datepick("getDate");
    let fecha = formatDate(fechaFormat);
    let idMedico = medicos.value; // Vacio por default para traer todos los medicos
    if (idMedico == "TODOS LOS MEDICOS") {
      idMedico = "";
    }
    if(idConsultorio == "SELECCIONAR CONSULTORIO") {
      limpiarTabla();
    }else{
      getHorarios(idConsultorio, fecha, ausente, idMedico);
    }
  });

  consultorios.addEventListener("click", function() {
    let idConsultorio = this.value;
    var checkedValue = $('.chkAusentes:checked').val();
    if(checkedValue == null) {
      ausente = 0;
    }else {
      ausente = 1;
    }
    let fechaFormat = $('#fecha').datepick("getDate");
    let fecha = formatDate(fechaFormat);
    let idMedico = ""; // Vacio por default para traer todos los medicos
    if(idConsultorio == "SELECCIONAR CONSULTORIO") {
      limpiarTabla();
    }else{
      getHorarios(idConsultorio, fecha, ausente, idMedico);
      getMedicos(idConsultorio, fecha);
    }
  });

  medicos.addEventListener("click", function() {
    let idConsultorio = consultorios.value; // consultorio.value; El consultorio seleccionado
    var checkedValue = $('.chkAusentes:checked').val();
    if(checkedValue == null) {
      ausente = 0;
    }else {
      ausente = 1;
    }
    let fechaFormat = $('#fecha').datepick("getDate");
    let fecha = formatDate(fechaFormat);
    let idMedico = this.value;
    if(idMedico == "TODOS LOS MEDICOS") {
      getHorarios(idConsultorio, fecha, ausente, "");
    }else{
      getHorarios(idConsultorio, fecha, ausente, idMedico, 0);
    }
  });

  function limpiarTabla() {
    let newRows = 
        `<tr>
          <th>Fecha</th>
          <th>Ausente</th> 
          <th>Medico</th>
          <th>Especialidad</th>
          <th>Dia Semana</th>
          <th>Hora Inicio</th>
          <th>Hora Fin</th>
        </tr>
        <tr>
          <td></td>
          <td></td> 
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td> 
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>`;
    tablaHorarios.innerHTML = newRows;
  }

  function getConsultorios(centro) {
    $.ajax({
      url:  'getConsultorios',
      type: 'GET',
      data:  {"consultorio": centro},
      dataType: "xml",
      success:  function (response) {
        console.log(response);
        let array = [];
        x = response.getElementsByTagName('respuesta');
        for (i = 0; i < x.length; i++) {
          let idConsultorio = x.item(i).getElementsByTagName('id_consultorio')[0].textContent;
          let numero = x.item(i).getElementsByTagName('no')[0].textContent;
          array.push({ 
                      "idConsultorio": idConsultorio,
                      "numero": numero
                    });
        }
        let newOptions = "<option>SELECCIONAR CONSULTORIO</option>";
        array.map( consultorio => {
          newOptions += `<option value="${consultorio.idConsultorio}">${consultorio.numero}</option>`
        });
        
        consultorios.innerHTML = newOptions;
      },
      error : function(xhr, status) {
        console.log(xhr);
      },
    });
  }

  function getMedicos(idConsultorio, fecha) {
    $.ajax({
      url:  'getMedicos',
      type: 'GET',
      data:  {"idConsultorio" : idConsultorio, "fecha" : fecha},
      dataType: "xml",
      success:  function (response) {
        console.log(response);
        let array = [];
        x = response.getElementsByTagName('respuesta');
        for (i = 0; i < x.length; i++) {
          let nombre = x.item(i).getElementsByTagName('nombre')[0].textContent;
          let paterno = x.item(i).getElementsByTagName('paterno')[0].textContent;
          let materno = x.item(i).getElementsByTagName('materno')[0].textContent;
          let idMedico = x.item(i).getElementsByTagName('id_medico')[0].textContent;
          let listaMedCon = x.item(i).getElementsByTagName('lista_med_con')[0].textContent;
          array.push({ 
                        "nombre": nombre,
                        "paterno": paterno,
                        "materno": materno,
                        "idMedico": idMedico,
                        "listaMedCon": listaMedCon
                      });
        }
        let newOptions = "<option>TODOS LOS MEDICOS</option>";
        array.map(doc => {
          newOptions += `<option value="${doc.listaMedCon}">${doc.nombre} ${doc.paterno} ${doc.materno}</option>`;
        });
        medicos.innerHTML = newOptions;
      },
      error : function(xhr, status) {
        alert(xhr);
      },
    });
  }

  let tempSchedule = "";
  function getHorarios(idConsultorio, fecha, ausente, idMedico, haveDoc = 1) {
    $.ajax({
      url:  'getHoraConsultorios',
      type: 'GET',
      data:  {"idConsultorio" : idConsultorio, "fecha" : fecha, "ausente" : ausente, "idMedico" : idMedico},
      dataType: "xml",
      success:  function (response) {
        console.log(response)
        let array = [];
        x = response.getElementsByTagName('respuesta');
        for (i = 0; i < x.length; i++) {
          let medico = x.item(i).getElementsByTagName('medico')[0].textContent;
          let dia = x.item(i).getElementsByTagName('dia_semana')[0].textContent;
          let hora_inicio = x.item(i).getElementsByTagName('hora_inicio')[0].textContent;
          let hora_fin = x.item(i).getElementsByTagName('hora_fin')[0].textContent;
          let ausente = x.item(i).getElementsByTagName('ausente')[0].textContent;
          let especialidad = x.item(i).getElementsByTagName('especialidad')[0].textContent;
          let fecha = x.item(i).getElementsByTagName('fecha')[0].textContent;
          let id_med = x.item(i).getElementsByTagName('id_med_con')[0].textContent;
          array.push({ 
                        "medico": medico,
                        "dia": dia,
                        "horaInicio": hora_inicio,
                        "horaFin": hora_fin,
                        "ausente": ausente,
                        "especialidad": especialidad,
                        "fecha": fecha,
                        "idMedico": id_med
                      });
        }
        let newRows = `<tr>
                        <th>Fecha</th>
                        <th>Ausente</th> 
                        <th>Medico</th>
                        <th>Especialidad</th>
                        <th>Dia Semana</th>
                        <th>Hora Inicio</th>
                        <th>Hora Fin</th>
                      </tr>`;
        array.map(consultorio => {
          // hacer condicion de fechas, si es menor a la fecha actual bloquear input
          if(consultorio.ausente == 0)
            var checkbox =  `<input class="statusAusente" value="activo" data-id="${consultorio.idMedico}" data-fecha="${consultorio.fecha}" type="checkbox"><br>`;
          else
            var checkbox =  `<input class="statusAusente" value="ausente" data-id="${consultorio.idMedico}" data-fecha="${consultorio.fecha}" type="checkbox" checked><br>`;
          newRows += `<tr>
                        <td>${consultorio.fecha}</td>
                        <td>${checkbox}</td>
                        <td>${consultorio.medico}</td>
                        <td>${consultorio.especialidad}</td>
                        <td>${consultorio.dia}</td>
                        <td>${consultorio.horaInicio}</td>
                        <td>${consultorio.horaFin}</td>
                      <tr>
                      `; 
        });
        if(haveDoc == 1){
          tempSchedule += checkbox;
        }
        tablaHorarios.innerHTML = newRows;
        checkboxEvent();
        ////
      },
      error : function(xhr, status) {
        alert(xhr);
      },
    });
  }

  function checkboxEvent() {
    statusAusentes = document.querySelectorAll(".statusAusente");
    statusAusentes.forEach(ausente =>{
      ausente.addEventListener("click", function() {
        if(ausente.checked){
          let idMedico = ausente.getAttribute("data-id");
          let fecha = ausente.getAttribute("data-fecha");
          postAustente(idMedico, fecha, 1);
        }else{
          let idMedico = ausente.getAttribute("data-id");
          let fecha = ausente.getAttribute("data-fecha");
          postAustente(idMedico, fecha, 0);
        }
      });
    });
  }

  function postAustente(idMedico, fecha, ausente) {
    $.ajax({
      url:  'postMedicoAusente',
      type: 'POST',
      data:  {"idMedico" : idMedico, "fecha" : fecha, "ausente" : ausente },
      dataType: "xml",
      success:  function (response) {
        x = response.getElementsByTagName('respuesta');
        error = x.item(0).getElementsByTagName('tituloerror')[0].textContent;
        if (error == "Fecha no válida") {
          alert("La fecha tiene que ser igual o mayor a la actual");
        }
      },
      error : function(xhr, status) {
        console.log(xhr);
      },
    });
  }

  function removerDuplicados(keyFn, array) {
    var mySet = new Set();
    return array.filter(function(x) {
      var key = keyFn(x), isNew = !mySet.has(key);
      if (isNew) mySet.add(key);
      return isNew;
    });
  }
</script>
@endsection

