<!-- Creado: Félix Ricardo Oliva Alonso, 05/09/2016. Se crea una página de bienvenida provisional para el usuario  -->


<?php
/*
* LI Juan Pablo Sánchez Bracamontes, 14/12/2016. Usamos el método de descrifrado de datos localizado en "ejLib", lo instanciamos para poderlo usar
* y volcamos el contenido de la variable de sesión 'usuario' en una variable local para convertirla en un array con nombre más corto y acceder a sus
* datos de forma más sencilla.
*/
session_start(); //Inicialización de las llamadas a las variables de sesión disponibles para el navegador

use App\Libraries\ejLib;
$var = ejLib::getInstance();
$usuario = $_SESSION['usuario'];
$decoded = $var->desencriptar_AES($usuario['nombre'], $usuario['x']);


?>
  <div class="titulo_pagina">
      <h2>CANVAS</h2>
  </div>

<style media="screen">

.contenedor{
  width: 990px;
  min-height: 630px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#datos{
  min-height: 650px;
  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:-215px;
  padding-top: 10px;
}
#fecha{
  margin-bottom: 40px;
}

#myCanvas{
  overflow: scroll;
}

</style>

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

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

  <div class="contenedor">
    <div id="datos">
      <div id="fecha"></div>

      <b>Consultorio</b>
      <select class="form-control" >
        <option value="" selected>1</option>
        <option value="" selected>2</option>
        <option value="" selected>3</option>
        <option value="" selected>4</option>
      </select>

      <b>Médico</b>
      <select class="form-control" >
        <option value="" selected>Nombre Doctor</option>
      </select>


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

    </div>

    <canvas id="myCanvas" width="720" height="650" style="border:1px solid #aaa;"></canvas>

    <script>

      function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(640,625,500,25);
        context.font = '10pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 642, 643);

      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message =  mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
      }, false);




      //Encabezado
      context.beginPath();
      context.rect(0,0,990,25);
      context.fillStyle = '#A6A6E5';
      context.fill();
      context.closePath();

      //Filas Impares
      context.beginPath();
      context.rect(0,50,990,25);
      context.rect(0,100,990,25);
      context.rect(0,150,990,25);
      context.rect(0,200,990,25);
      context.rect(0,250,990,25);
      context.rect(0,300,990,25);
      context.rect(0,350,990,25);
      context.rect(0,400,990,25);
      context.rect(0,450,990,25);
      context.rect(0,500,990,25);
      context.rect(0,550,990,25);
      context.rect(0,600,990,25);
      context.fillStyle = '#D2D2F6';
      context.fill();
      context.closePath();

      //Filas Impares
      context.beginPath();
      context.rect(0,25,990,25);
      context.rect(0,75,990,25);
      context.rect(0,125,990,25);
      context.rect(0,175,990,25);
      context.rect(0,225,990,25);
      context.rect(0,275,990,25);
      context.rect(0,325,990,25);
      context.rect(0,375,990,25);
      context.rect(0,425,990,25);
      context.rect(0,475,990,25);
      context.rect(0,525,990,25);
      context.rect(0,575,990,25);
      context.fillStyle = '#EEE5FB';
      context.fill();
      context.closePath();

      //Filas Coordenada
      context.beginPath();
      context.rect(0,625,631,25);
      context.fillStyle = '#8694BF';
      context.fill();
      context.closePath();


      //Líneas de separación
      context.beginPath();
      context.lineWidth = 0.5;
      context.strokeStyle = '#2D3140';
      context.moveTo(90, 0);
      context.lineTo(90, 625);
      context.moveTo(180, 0);
      context.lineTo(180, 625);
      context.moveTo(270, 0);
      context.lineTo(270, 625);
      context.moveTo(360, 0);
      context.lineTo(360, 625);
      context.moveTo(450, 0);
      context.lineTo(450, 625);
      context.moveTo(540, 0);
      context.lineTo(540, 625);
      context.moveTo(630, 0);
      context.lineTo(630, 625);
      context.stroke();


      //Textos
      context.font = '10pt Calibri';
      context.fillStyle = 'white';
      context.fillText('Horario', 10, 15);
      context.fillText('Domingo', 100, 15);
      context.fillText('Lunes', 190, 15);
      context.fillText('Martes', 280, 15);
      context.fillText('Miércoles', 370, 15);
      context.fillText('Jueves', 460, 15);
      context.fillText('Viernes', 550, 15);
      context.fillText('Sábado', 640, 15);

      context.fillStyle = 'black';

      context.shadowColor = '#B1B0BF';
      context.shadowBlur = 1;
      context.shadowOffsetX = 2;
      context.shadowOffsetY = 2;

      context.fillText('00:00 AM', 10, 42);
      context.fillText('01:00 AM', 10, 67);
      context.fillText('02:00 AM', 10, 92);
      context.fillText('03:00 AM', 10, 117);
      context.fillText('04:00 AM', 10, 142);
      context.fillText('05:00 AM', 10, 167);
      context.fillText('06:00 AM', 10, 192);
      context.fillText('07:00 AM', 10, 217);
      context.fillText('08:00 AM', 10, 242);
      context.fillText('09:00 AM', 10, 267);
      context.fillText('10:00 AM', 10, 292);
      context.fillText('11:00 AM', 10, 317);
      context.fillText('12:00 AM', 10, 342);
      context.fillText('01:00 PM', 10, 367);
      context.fillText('02:00 PM', 10, 392);
      context.fillText('03:00 PM', 10, 417);
      context.fillText('04:00 PM', 10, 442);
      context.fillText('05:00 PM', 10, 467);
      context.fillText('06:00 PM', 10, 492);
      context.fillText('07:00 PM', 10, 517);
      context.fillText('08:00 PM', 10, 542);
      context.fillText('09:00 PM', 10, 567);
      context.fillText('10:00 PM', 10, 592);
      context.fillText('11:00 PM', 10, 617);
      context.fillStyle = 'white';
      context.fillText('COORDENADAS : ', 535, 642);


    </script>
  </div>
