<?php
  use App\Libraries\ejLib;
  $var = ejLib::getInstance();
  $soapclient = $var->getWs();
  $wsClave = $var->get_wsClave();

  $Centro_Sal = '0' ;
  $Numero = '' ;
  $Activos = '1' ;

  $Id_Consultorio='5000';
  $Fecha='04/04/2017';

  $getLstConsultorios = $soapclient->AdministrarConsultorios_getLstConsultorios($Centro_Sal, $Numero, $Activos, $wsClave);
  $LstConsultorios = new SimpleXMLElement(utf8_encode($getLstConsultorios));

  $getLstHorariosConsultorio = $soapclient->AdministrarConsultorios_getLstHorariosConsultorio($Id_Consultorio, $Fecha, $wsClave);
  $LstHorariosConsultorio = new SimpleXMLElement(utf8_encode($getLstHorariosConsultorio));

  echo $getLstHorariosConsultorio;
?>

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

<?php
  session_start();

  $usuario = $_SESSION['usuario'];
  $decoded = $var->desencriptar_AES($usuario['nombre'], $usuario['x']);
?>

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

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

<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>

<style media="screen">
  .contenedor{
    width: 990px;
    min-height: 630px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #datos{
    min-height: 520px;
    width: 220px;
    float: left;
    margin-right: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .btn_canvas{
    min-height: 80px;
    width: 200px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    bottom:-90px;
    padding-top: 10px;
  }

  #calendario{
    margin-bottom: 40px;
  }

  thead tr th span{
    color: #C5C7B6;
  }

  #myCanvas{
    overflow: scroll;
  }
</style>

<script>
  ///////////////////////////////////////////////////////////////////////////////////////
  //                                      Calendario
  ///////////////////////////////////////////////////////////////////////////////////////
  $(function() {
    $('#calendario').datepick({dateFormat: 'dd/mm/yyyy'});
  });

  ///////////////////////////////////////////////////////////////////////////////////////
  //                                    Cambiar Colores
  ///////////////////////////////////////////////////////////////////////////////////////
  $(document).ready(function(){
    $(document).on("change", ".large.gfield_select", function(){
      // function getRandomColor() {
      //   var letters = '0123456789ABCDEF';
      //   var color = '#';
      //   for (var i = 0; i < 6; i++ ) {
      //     color += letters[Math.floor(Math.random() * 16)];
      //   }
      //   return color;
      // }
      // Codigo en depuracion 05/04/2017
      var colors = ["#CCC58F","red", "#777", "#000", "gold", "grey", "blue", "green", "white", "yellow", "brown", "black", "silver", "orange", "#CCC58F","red", "#777", "#000", "gold", "grey", "blue", "green", "white", "yellow", "brown", "black", "silver", "orange", "#CCC58F","red", "#777", "#000", "gold", "grey", "blue", "green", "white", "#336699", "#f00"];
      var wth = $(this).find(":selected").index();
      var color = colors[ wth ];
      $(".color-bg").css("background-color", color );
      // $(".color-bg").css("background-color", getRandomColor );
    });
  });
</script>

@section('content')
  <div class="contenedor">
    <div id="datos">
      <div id="calendario"></div>
      <b>Consultorio</b>
      <select id="consultorio" name="consultorio" class="form-control">
        <option value="null" selected disabled>Selecciona un Consultorio</option>
        @foreach($LstConsultorios->respuesta as $consul)
          <option value="{!! $consul->id_consultorio !!}">{!! utf8_decode($consul->no) !!}</option>
        @endforeach
      </select>

      <b>Médico</b>
      <div class="input-group">
        <span id="sizing-addon2" class="color-bg input-group-addon"></span>
        <select id="colorPicker" name="colorPicker" class="large gfield_select form-control">
          <option value="null" selected disabled>Selecciona un Médico</option>
          @foreach($LstHorariosConsultorio->respuesta as $docn)
            <option value="{!! $docn->id_medico !!}">{!! utf8_decode($docn->nombre) !!}</option>
          @endforeach
        </select>
      </div>

      <div class="btn_canvas">
        <button type="button"  id="actualizar_grafica" class="btn-group btn-group-justified">Actualizar</button><br>
        <button type="button" class="btn-group btn-group-justified">Salir</button>
      </div>
    </div>

    <select id="city" name="city">
      <option value="0">Select City</option>
      <option value="1">Manchester</option>
      <option value="2">Leicester</option>
      <option value="3">Londra</option>
    </select>

    <select id="street" name="street">
      <option value="0">Select Street</option>
      <option value="1">Street 1</option>
      <option value="1">Street 2</option>
      <option value="1">Street 3</option>
      <option value="2">Street 4</option>
      <option value="2">Street 5</option>
      <option value="2">Street 6</option>
      <option value="1200">Street 7</option>
      <option value="1200">Street 8</option>
      <option value="1200">Street 9</option>
    </select>

    <script type="text/javascript">
      ///////////////////////////////////////////////////////////////////////////////////////
      //                           Opciones de Seleccion Dependientes
      ///////////////////////////////////////////////////////////////////////////////////////
      $('#city').change(function(){
        $('#street option')
          .hide()
          .filter('[value="'+$(this).val()+'"]')
            .show();
      });

      $('#consultorio').change(function(){
        var consultorio = $('#consultorio').val();
        alert(consultorio);
        var colorPicker = $('#colorPicker').val();
        alert(colorPicker);
        $('#colorPicker option')
          .hide()
          .filter('[value="'+$(this).val()+'"]')
            .show();
      });

      // $('#consultorio').change(function() {
      //   $('#colorPicker option').hide();
      //   $('#colorPicker option[value="' + $(this).val() + '"]').show();
      //   // add this code to select 1'st of colorPicker automaticaly
      //   // when consultorio changed
      //   if ($('#colorPicker option[value="' + $(this).val() + '"]').length) {
      //     $('#colorPicker option[value="' + $(this).val() + '"]').first().prop('selected', true);
      //   }
      //   // in case if there's no corresponding colorPicker:
      //   // reset select element
      //   else {
      //     $('#colorPicker').val('');
      //   };
      // });
    </script>

    {{-- ------------------------- Codigo base y datos ------------------------- --}}
    <canvas id="myCanvas" width="725" height="520" style="border:1px solid #aaa;">El navegador no soporta canvas</canvas>
    <script>
      // Esta funcion sirve para recuperar un objeto que podemos utilizar para manipular el canvas
      // Nota: Actualmente solo es posible el 2d
      window.onload = function() {
        var elemento = document.getElementById('myCanvas');
        //comprobamos si encontramos un elemento
        //y si éste es compatible con canvas mediante getContext()
        if (elemento && elemento.getContext) {
          //Accedemos al contexto de '2d' de canvas
          // var imageObj = new Image();
          var context = elemento.getContext('2d');

          function writeMessage(elemento, message) {
            // Se utiliza para limpiar el espacio en el que se iran mostrando las coordenadas
            context.clearRect(610, 500, 725, 20);
            context.font = '12px Arial';
            context.fillStyle = 'black';
            context.fillText(message, 615, 515);
          }

          function getMousePos(elemento, evt) {
            var rect = elemento.getBoundingClientRect();
            return {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top
            };
          }

          elemento.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(elemento, evt);


            if (mousePos.x > 0 && mousePos.x <= 95)    {var dia = "No válido";}
            if (mousePos.x > 95 && mousePos.x <= 185)  {var dia = "Domingo";   var diaCoor="95";}
            if (mousePos.x > 185 && mousePos.x <= 275) {var dia = "Lunes";     var diaCoor="185";}
            if (mousePos.x > 275 && mousePos.x <= 365) {var dia = "Martes";    var diaCoor="275";}
            if (mousePos.x > 365 && mousePos.x <= 455) {var dia = "Miércoles"; var diaCoor="365";}
            if (mousePos.x > 455 && mousePos.x <= 545) {var dia = "Jueves";    var diaCoor="455";}
            if (mousePos.x > 545 && mousePos.x <= 635) {var dia = "Viernes";   var diaCoor="545";}
            if (mousePos.x > 635 && mousePos.x <= 725) {var dia = "Sábado";    var diaCoor="635";}

            if (mousePos.y > 0 && mousePos.y <= 20)    {var hora = "No válido";}
            if (mousePos.y > 20 && mousePos.y <= 40)   {var hora = "00:00 AM"; var horaCoor="20";}
            if (mousePos.y > 40 && mousePos.y <= 60)   {var hora = "01:00 AM"; var horaCoor="40";}
            if (mousePos.y > 60 && mousePos.y <= 80)   {var hora = "02:00 AM"; var horaCoor="60";}
            if (mousePos.y > 80 && mousePos.y <= 100)  {var hora = "03:00 AM"; var horaCoor="80";}
            if (mousePos.y > 100 && mousePos.y <= 120) {var hora = "04:00 AM"; var horaCoor="100";}
            if (mousePos.y > 120 && mousePos.y <= 140) {var hora = "05:00 AM"; var horaCoor="120";}
            if (mousePos.y > 140 && mousePos.y <= 160) {var hora = "06:00 AM"; var horaCoor="140";}
            if (mousePos.y > 160 && mousePos.y <= 180) {var hora = "07:00 AM"; var horaCoor="160";}
            if (mousePos.y > 180 && mousePos.y <= 200) {var hora = "08:00 AM"; var horaCoor="180";}
            if (mousePos.y > 200 && mousePos.y <= 220) {var hora = "09:00 AM"; var horaCoor="200";}
            if (mousePos.y > 220 && mousePos.y <= 240) {var hora = "10:00 AM"; var horaCoor="220";}
            if (mousePos.y > 240 && mousePos.y <= 260) {var hora = "11:00 AM"; var horaCoor="240";}
            if (mousePos.y > 260 && mousePos.y <= 280) {var hora = "12:00 AM"; var horaCoor="260";}
            if (mousePos.y > 280 && mousePos.y <= 300) {var hora = "01:00 PM"; var horaCoor="280";}
            if (mousePos.y > 300 && mousePos.y <= 320) {var hora = "02:00 PM"; var horaCoor="300";}
            if (mousePos.y > 320 && mousePos.y <= 340) {var hora = "03:00 PM"; var horaCoor="320";}
            if (mousePos.y > 340 && mousePos.y <= 360) {var hora = "04:00 PM"; var horaCoor="340";}
            if (mousePos.y > 360 && mousePos.y <= 380) {var hora = "05:00 PM"; var horaCoor="360";}
            if (mousePos.y > 380 && mousePos.y <= 400) {var hora = "06:00 PM"; var horaCoor="380";}
            if (mousePos.y > 400 && mousePos.y <= 420) {var hora = "07:00 PM"; var horaCoor="400";}
            if (mousePos.y > 420 && mousePos.y <= 440) {var hora = "08:00 PM"; var horaCoor="420";}
            if (mousePos.y > 440 && mousePos.y <= 460) {var hora = "09:00 PM"; var horaCoor="440";}
            if (mousePos.y > 460 && mousePos.y <= 480) {var hora = "10:00 PM"; var horaCoor="460";}
            if (mousePos.y > 480 && mousePos.y <= 500) {var hora = "11:00 PM"; var horaCoor="480";}
            if (mousePos.y > 500 && mousePos.y <= 520) {var hora = "No válido";}

            context.beginPath();
            context.rect(diaCoor,horaCoor,90,20);
            // context.fillStyle = 'rgba(157,208,165,0.5)';
            // context.fill();
            context.closePath();


            // Se utiliza para mandar las coordenadas
            // var message = mousePos.x + ',' + mousePos.y;
            var message = dia+', '+hora;
            writeMessage(elemento, message);
          }, false);

          if (context) { //Si se tiene el contexto se puede empezar a dibujar
            // imageObj.onload = function() {
            //   context.drawImage(imageObj, 0, 0);
            // };
            // imageObj.src = "Img/agenda.png";

            // ========== Encabezado ==========
            context.beginPath();
              // context.rect(0, 0, 725, 20);
              // El primer numero es para indicar donde inicia conrespecto al eje x.
              // El segundo numero es para indicar donde inicia conrespecto al eje y.
              // El tercer numero es para saber el ancho.
              // El cuarto numero es para saber la altura
              context.rect(0, 0, 725, 20);
              context.fillStyle = '#594C4C';
              context.fill();
            context.closePath();
            // ========== Filas Pares ==========
            context.beginPath();
              for (i=20; i<=460; i+=40) {
                context.rect(0, i, 725, 20);
              }
              context.fillStyle = '#F2E0BD';
              context.fill();
            context.closePath();
            // ========== Filas Impares ==========
            context.beginPath();
              for (i=40; i<=480; i+=40) {
                context.rect(0, i, 725, 20);
              }
              context.fillStyle = '#D1BA9D';
              context.fill();
            context.closePath();
            // ========== Ultima Fila ==========
            context.beginPath();
              context.rect(0,500,610,20);
              context.fillStyle = '#8C786C';
              context.fill();
            context.closePath();
            // ========== Lineas Separacion ==========
            context.beginPath();
              context.lineWidth = 0.5;
              context.strokeStyle = '#2D3140';
              // context.moveTo(95,0);
              // context.lineTo(95,520);
              // Son los puntos que serviran para trazar la linea
              // (x,y) para ambos casos
              for (i=95; i<=635; i+=90) {
                context.moveTo(i,0);
                context.lineTo(i,500);
              }
              context.stroke();
            context.closePath();
            // ========== Textos Encabezado ==========
            context.beginPath();
              context.font = "10pt Arial";
              context.fillStyle = 'white';
              context.fillText("Horario", 5, 15);
              context.fillText("Domingo", 100, 15);
              context.fillText("Lunes", 190, 15);
              context.fillText("Martes", 280, 15);
              context.fillText("Miercoles", 370, 15);
              context.fillText("Jueves", 460, 15);
              context.fillText("Viernes", 550, 15);
              context.fillText("Sabado", 640, 15);
            context.closePath();
            // ========== Textos Filas ==========
            context.beginPath();
              context.font = "9pt Arial";
              context.fillStyle = 'black';
              context.fillText("00:00 AM", 5, 35);
              context.fillText("01:00 AM", 5, 55);
              context.fillText("02:00 AM", 5, 75);
              context.fillText("03:00 AM", 5, 95);
              context.fillText("04:00 AM", 5, 115);
              context.fillText("05:00 AM", 5, 135);
              context.fillText("06:00 AM", 5, 155);
              context.fillText("07:00 AM", 5, 175);
              context.fillText("08:00 AM", 5, 195);
              context.fillText("09:00 AM", 5, 215);
              context.fillText("10:00 AM", 5, 235);
              context.fillText("11:00 AM", 5, 255);
              context.fillText("12:00 AM", 5, 275);
              context.fillText("01:00 PM", 5, 295);
              context.fillText("02:00 PM", 5, 315);
              context.fillText("03:00 PM", 5, 335);
              context.fillText("04:00 PM", 5, 355);
              context.fillText("05:00 PM", 5, 375);
              context.fillText("06:00 PM", 5, 395);
              context.fillText("07:00 PM", 5, 415);
              context.fillText("08:00 PM", 5, 435);
              context.fillText("09:00 PM", 5, 455);
              context.fillText("10:00 PM", 5, 475);
              context.fillText("11:00 PM", 5, 495);
            context.closePath();
            // ========== Texto Ultima Fila ==========
            context.beginPath();
              context.font = "12px Arial";
              context.fillStyle = 'white';
              context.fillText('Día y Hora:', 545, 515);
            context.closePath();
          } // Fin del contexto para dibujar
        };
      };

    </script>
  </div>
@endsection
