<?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>GRAFICACIÓN DE HORARIOS</h2></div>
@endsection

<style media="screen">
#panel{min-height: 650px;width: 220px;float: left;margin-right: 20px;padding-left: 10px;padding-right: 10px;  }
#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>
      <div class="showColors" style="padding-top: 10px;"></div>
    </div>
    <div>
      <canvas id="myCanvas" width="700" height="625" style="border:1px solid #000000;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </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

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

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

  consultorios.addEventListener("change", 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") {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      printCanvas();
      let show = document.querySelector(".showColors");
      show.innerHTML = "";
    }else{
      getHorarios(idConsultorio, fecha, ausente, idMedico);
    }
  });

  function getConsultorios(centro) {
    $.ajax({
      url:  'getConsultorios',
      type: 'GET',
      data:  {"consultorio": centro},
      dataType: "xml",
      success:  function (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>`
        });

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        printCanvas();
        
        consultorios.innerHTML = newOptions;
      },
      error : function(xhr, status) {
        console.log(xhr);
      },
    });
  }

  let docColors = [];

  function getHorarios(idConsultorio, fecha, ausente, idMedico) {
    $.ajax({
      url:  'getHoraConsultoriosCanvas',
      type: 'GET',
      data:  {"idConsultorio" : idConsultorio, "fecha" : fecha, "ausente" : ausente, "idMedico" : idMedico},
      dataType: "xml",
      success:  function (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_medico')[0].textContent;
          array.push({ 
                      "medico": medico,
                      "dia": dia,
                      "horaInicio": hora_inicio,
                      "horaFin": hora_fin,
                      "ausente": ausente,
                      "especialidad": especialidad,
                      "fecha": fecha,
                      "idMedico": id_med
                    });
        }
        if (idMedico == "") {
          let showDoctorColors = "";
          let filterArray = removerDuplicados(x => x.medico, array);
          let docColors2 = [];
          filterArray.map((consultorio, i) => {
            docColors.push({medico:consultorio.medico, color:colors[i]});
            docColors2.push({medico:consultorio.medico, color:colors[i]});
            showDoctorColors += `
            <li style="list-style:none"><span style="background-color:${docColors2[i].color}; width: 25px;
            height: 25px; float: left;"></span><p style="padding-left: 30px;">${docColors2[i].medico}</p></li> <br>
            `;
          });
          let show = document.querySelector(".showColors");
          show.innerHTML = showDoctorColors;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        printCanvas();
        array.map(consultorio => {
          docColors.map(med => {
            if(med.medico == consultorio.medico){
              setCoordinates(consultorio,med.color);
            }
          });
        });
        rowsAndColumns(25, 93);
      },
      error : function(xhr, status) {
        alert(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;
    });
  }

  // Canvas

  let colors = [
    "#3498db",
    "#9b59b6",
    "#34495e",
    "#1abc9c",
    "#e74c3c",
    "#e67e22",
    "#f1c40f",
    "#7f8c8d",
    "#2ecc71",
    "#4B8A08",
    "#FF0000"
  ];

  let times = [
    "--",
    "--", 
    "00:00",
    "1:00",
    "2:00",
    "3:00",
    "4:00",
    "5:00",
    "6:00",
    "7:00",
    "8:00",
    "9:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
    "22:00",
    "23:00",
  ];

  let days = [
    "--",
    "--",
    "Lunes",
    "Martes",
    "Miercoles",
    "Jueves",
    "Viernes",
    "Sabado",
    "Domingo"
  ];

  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  printCanvas();

  function  rowsAndColumns(rowSize, columnSize){
    // Columns
    for (var i = 0; i <= 7; i++) {
      if (i == 0) {
        ctx.moveTo(50,0);
        ctx.lineTo(50,625);
        ctx.stroke();
      }else{
        let point = columnSize * i + 50;
        ctx.moveTo(point,0);
        ctx.lineTo(point,625);
        ctx.stroke();
      }
    }
    // Rows
    for (var i = 1; i <= 25; i++) {
      let point = rowSize * i;
      ctx.moveTo(0,point);
      ctx.lineTo(1200,point);
      ctx.stroke();
    }
  }

  function printCanvas(){
    // Table Background
    ctx.fillStyle="rgba(222, 241, 248, 0.53)";
    ctx.fillRect(50,25,650,1200);
    
    var columnSize =93
    var rowSize = 25 
    
    rowsAndColumns(rowSize, columnSize);

    // Schedules
    for (var i = 1; i <= 25; i++) {
      // Time
      let point = rowSize * i;
      ctx.fillStyle="rgba(236, 115, 115, 0.41)";
      ctx.fillRect(0,point,50,25);
      
      if (i > 1) {
        ctx.fillStyle="#000000";
        ctx.fillText(times[i],10,point-7)
      }
    }

    for (var i = 1; i <= 8; i++) {
      // Day
      let point = columnSize * i;
      ctx.fillStyle="rgba(236, 115, 115, 0.41)";
      ctx.fillRect(point-45,0,93,25);
      
      if (i > 1) {
        ctx.fillStyle="#000000";
        ctx.fillText(days[i],point-110,15)
      }
    }
  }
  
  function setCoordinates(consultorio, color){
    switch(consultorio.dia) {
      case "LUNES":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin)+minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = (endtHour-startHour)*25;
        ctx.fillRect(50,startHourPosition,94,endHourPosition);
        break;
      case "MARTES":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin)+minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = (endtHour-startHour)*25;
        ctx.fillRect(142,startHourPosition,95,endHourPosition);
        break;
      case "MIERCOLES":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin) +minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = (endtHour-startHour)*25;
        ctx.fillRect(235,startHourPosition,95,endHourPosition);
        break;
      case "JUEVES":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin) + minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = (endtHour-startHour)*25;
        ctx.fillRect(328,startHourPosition,95,endHourPosition);
        break;
      case "VIERNES":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin) + minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = ((endtHour-startHour)*25);
        ctx.fillRect(421,startHourPosition,95,endHourPosition);
        break;
      case "SABADO":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin)+minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = (endtHour-startHour)*25;
        ctx.fillRect(514,startHourPosition,95,endHourPosition);
        break;
      case "DOMINGO":
        minutosi=(consultorio.horaInicio).substr(3);  
        minutosi =  minutosi/60;
        minutosi = minutosi*.90;
        minutosf=(consultorio.horaFin).substr(3);  
        minutosf =  minutosf/60;
        minutosf = minutosf*.90;
        ctx.fillStyle=color;
        startHour= parseInt(consultorio.horaInicio)+minutosi;
        endtHour= parseInt(consultorio.horaFin)+minutosf;
        startHourPosition = (startHour*25)+25;
        endHourPosition = (endtHour-startHour)*25;
        ctx.fillRect(607,startHourPosition,95,endHourPosition);
        break;
    }
  }

</script>
@endsection
