<!-- Creado: Félix Ricardo Oliva Alonso, 26/10/2017. Se crea la vista para la búsqueda de expedientes -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 27/10/2017. Se muestran los registros del expediente -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 30/10/2017. Se muestran los registros del expediente -->
@php
    use App\Libraries\ejLib;
    $var = ejLib::getInstance();
    $soapclient = $var->getWs();
    $wsClave = $var->get_wsClave();

    $usuario = $_SESSION['operador'];
    $Centro_Sal = $var->desencriptar_AES($usuario['centro_sal'], $usuario['x']);
    $Centro_Sal = trim($Centro_Sal);
    $nom_Centro_Sal  = $var->desencriptar_AES($usuario['nom_centrosal'], $usuario['x']);
    $nom_Centro_Sal = trim(ucwords(strtolower($nom_Centro_Sal)));

    $Nombre =    $var->desencriptar_AES($usuario['nombre_user'], $usuario['x']);
    $Apellido1 = $var->desencriptar_AES($usuario['apellido_user_1er'], $usuario['x']);
    $Apellido2 = $var->desencriptar_AES($usuario['apellido_user_2do'], $usuario['x']);
    $Encargado = trim($Nombre).' '.trim($Apellido1).' '.trim($Apellido2);
@endphp
@extends('layouts.app')

@section('title', 'Expedientes')
@section('breadcrumb')
    <li class="active">Expedientes</li>
@endsection
@section('styles')
    <style>
        #bqdSol{
            border: 1px solid #d2d6de;
            background: rgba(236, 240, 245, 0.4);
            height: 316px;
            padding: 7px;
            border-radius: 4px;
            margin-bottom: 4px;
        }
        #contenedor_tabla_cer{border: 1px solid transparent;  }
        #contenedor_tabla_sol{
            border: 1px solid #d2d6de;
            background: rgba(255, 255, 255, 1);
            height: 250px;
            overflow-y: scroll;
            margin-top: 20px;
            border-radius: 4px;
        }
        .page-header {  border-bottom: 1px solid transparent; }
        .hrLine{
            display: block;
            height: 2px;
            border: 0;
            border-top: 1px solid #3c8cbc;
        }
        .chkTodos{
            border: 1px solid #d2d6de;
            line-height: 2;
            padding: 0px 15px;
            border-radius: 3px;
        }
        /*input[name="nombrereg"]::placeholder {color: rgb(0, 0, 0);}*/
    </style>
@endsection

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/notify.js"></script>
<link rel="stylesheet" href="css/smoothness.datepick.css">

@section('content')
      <div id="bqdExp" class="input-group-sm form-group-sm">
        {{-- Input y botón buscar --}}
          <div class="box box-primary">
              <div class="box-header with-border">
                  <h3 class="box-title">Búsqueda de Expedientes</h3>
                  <div class="box-tools pull-right">
                      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  </div>
              </div>

              <div class="box-body">
                  <div class="row">
                      <div class="col-sm-4">
                        <div class="input-group input-group-sm">
                          <span class="input-group-addon" id="sizing-addon3" style="background: #eee">Expediente</span>
                          <input type="text" class="form-control" id="expediente">
                        </div>
                      </div>

                      <div class="col-sm-2" >
                        <a href="#" onclick="validar();" id="btn_listar_bp" class="btn btn-sm btn-primary"><span class="fa fa-search" aria-hidden="true"></span> Buscar expediente</a>
                      </div>
                      <div class="col-sm-1" >
                        <a href="administrar-micuenta" class="btn btn-sm  btn-sm btn-danger">Cancelar</a>
                      </div>
                  </div>
              </div>
          </div>

            {{-- Formulario datos expediente --}}
          <div id="formulario" class="box box-primary" style="display:none">
                <div  class="box-body">
                  <h2 class="page-header" style="border-bottom: 1px solid #3c8cbc">Datos del Paciente</h2>
                    <label id="lblCita" style="padding-bottom:10px;"></label>
                    <div class="row">
                      <div class="col-sm-12">
                      <label>Expediente No. &nbsp;</label><label id="lblExp"></label>&nbsp;<label id="lblCon" style="display:none"></label>
                      </div>
                    </div>
                    {{-- Row --}}
                    <div class="row">
                        <div class="col-sm-4">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >Nombre</span>
                            <input type="text" id="nombre" name="nombre" class="form-control"  readonly>
                          </div>
                        </div>

                        <div class="col-sm-4">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >1er Apellido</span>
                            <input type="text" id="apellidop" name="apellidop" class="form-control" readonly>
                          </div>
                        </div>

                        <div class="col-sm-4">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >2do Apellido</span>
                            <input type="text" id="apellidom" name="apellidom" class="form-control" readonly>
                          </div>
                        </div>
                    </div>

                    <br>

                    <div class="row">
                        <div class="col-sm-3">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >CURP</span>
                            <input type="text" class="form-control" id="curp" readonly >
                          </div>
                        </div>

                        <div class="col-sm-3">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >Edad</span>
                            <input type="text" class="form-control" id="edad" readonly  >
                          </div>
                        </div>

                        <div class="col-sm-3">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >Folio Afil.</span>
                            <input type="text" class="form-control" id="folio" readonly  >
                          </div>
                        </div>

                        <div class="col-sm-3">
                          <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon3" >Género</span>
                            <select class="form-control" id="genero" disabled>
                              <option value="1">Hombre</option>
                              <option value="0">Mujer</option>
                            </select>
                          </div>
                        </div>
                    </div>
                    <br>
                    {{-- <h2 class="page-header">Movimientos del expediente</h2> --}}
                    <p class="text-center">
                      <div class="pull-left" style="font-size:22px; padding-right:10px;">Movimientos del expediente</div>&nbsp;
                      <div class="pull-left chkTodos"><input type="checkbox" id="todos" onchange="validar();">&nbsp; Mostrar todos los movimientos</div>
                      <a id="pdf" href="#" onclick="pdf();" class="btn btn-sm btn-primary col-sm-offset-0"><span class="fa fa-print" aria-hidden="true"></span> Imprimir</a>
                      <a href="#" class="btn btn-sm btn-primary" id="nvoMov"><span class="fa fa-arrow-right" aria-hidden="true"></span> Nuevo movimiento</a>
                    </p>
                    <hr class="hrLine">
                    {{-- Listado de movimiento--}}
                    <div id="contenedor_tabla"></div>
              </div>
          </div>
      </div>

      {{-- Vista nuevo movimiento--}}
      <div id="expediente_respuesta"></div>
      {{-- Se muestra pdf--}}
      <iframe  width="100%" height="850px" id="output" style="display:none"></iframe>
@endsection

<script src="js/jspdf.debug.js"></script>
<script src="js/jspdf.plugin.autotable.min.js"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.min.js"></script> --}}

<script type="text/javascript">
    var arr = [];
    var arr2 = [];
    $(document).ready(function() {
        $('#formulario').hide();
        $('#output').hide();
        $('#fechareg').datepick({dateFormat: 'dd/mm/yyyy'});
    });

    var jqGetAjax = function (php_url_post, objetoHTML, array_datos) {
        Pace.restart();
        var request = $.ajax({url: php_url_post, method: "POST", data: array_datos, dataType: "html"});
        request.done(function (msg) {
            $("#" + objetoHTML).html(msg);
        });
        request.fail(function (jqXHR, textStatus) {
            $("#" + objetoHTML).html("Request failed: " + textStatus);
        });
    };

    $(document).on("click", "#nvoMov", function(event) {
        event.stopImmediatePropagation();
        $('#bqdExp').hide();
        $('#output').hide();
        $('#expediente_respuesta').empty();
        $('#expediente_respuesta').show();
        var NumExpediente = $('#expediente').val();
        jqGetAjax("expedientePrestamo", "expediente_respuesta", {
          NumExpediente: NumExpediente,
          Centro_Sal : {!!$Centro_Sal!!},
          dCita : $('#lblCita').html()
        });
    });

    $(document).on("click", "#canExp", function(event) {
        event.stopImmediatePropagation();
        $('#expediente_respuesta').hide();
        jqGetAjax("cerrar", "expedientePrestamo", {});
        $('#bqdExp').show();
    });

    function validar(){
      var NumExpediente = $('#expediente').val();
      if (NumExpediente.length > 0 && NumExpediente.length < 16)
      {
        $('#formulario').hide();
        $('#output').hide();
        buscarExp1(NumExpediente);
        buscarExp2(NumExpediente);
      }
      else {  $.notify("Indispensable capturar de 1-15 caracteres", "error");   }
    }

    function buscarExp1(NumExpediente) {
        $('#lblExp').html(NumExpediente);
        $.post({
            url:  'expedienteinfo',
            type: "POST",
            data: {NumExpediente: NumExpediente},
            success:  function (data)
            {//alert(data); ----
              llenarForm(data);
            },
            error : function(xhr, status)
            {$.notify("Ha ocurrido un problema", "error");},
        });
    }

    function llenarForm(data){
      xmlDoc = $.parseXML(data),
      $xml = $( xmlDoc );
      $($xml).find("respuesta").each(function() {
          var numeroexpediente = ($(this).find("respuesta>numeroexpediente").text());
          $('#nombre').val( $(this).find("respuesta>nombre").text() );
          $('#apellidop').val(  $(this).find("respuesta>ap_paterno").text() );
          $('#apellidom').val(  $(this).find("respuesta>ap_materno").text() );
          $('#curp').val(  $(this).find("respuesta>curp").text() );
          var dCita = ''
          if (  $(this).find("respuesta>proximacita").text() == 'Sin') {
              dCita= '<span class="label label-success">Proxima cita:</span>'+' '+$(this).find("respuesta>proximacita").text()+' '+
                         $(this).find("respuesta>proximacitadias").text()+' '+$(this).find("respuesta>consultorio").text();

              $('#lblCita').html(dCita);
          }
          else {
              dCita = '<span class="label label-success">Proxima cita:</span>'+' [ '+$(this).find("respuesta>proximacita").text()+' ] '+
                      '<span class="label label-success">Consultorio:</span>'+' [ '+$(this).find("respuesta>consultorio").text()+' ] '+
                      '<span class="label label-success">Días restantes:</span>'+' [ '+$(this).find("respuesta>proximacitadias").text()+' ] ';

              $('#lblCita').html(dCita);
          }

          var edad = ($(this).find("respuesta>edad").text());
          edad = edad.split(' ')[0];
          $('#edad').val( edad );
          $('#folio').val(  $(this).find("respuesta>folio_afil").text() );
          $('#genero').val(  $(this).find("respuesta>genero").text() );

          if (  ($(this).find("respuesta>error").text()) == '1' || ($(this).find("respuesta>error").text()) == 1 ) {
            $('#formulario').hide();
            $('#output').hide();
            $.notify($(this).find("respuesta>descripcionerror").text(), "info");
          }
          else {
            $('#formulario').show();
          }
      });

    }


    function buscarExp2(NumExpediente) {
      $('#lblExp').html(NumExpediente);
      var Todos = '';
      $('#todos').is(':checked')? Todos='1' : Todos='0';
      //alert(Todos);
      $.post({
        url:  'expedientemovimientos',
        type: "POST",
        data: {NumExpediente: NumExpediente, Todos: Todos},
        success:  function (data)
        {//alert(data);
          crearTabla(data)},
        error : function(xhr, status)
        {$.notify("Ha ocurrido un problema", "error");},

      });
    }


    function crearTabla(data){
        var tabla = '<table id="mitabla" style="font-size: 12px;" class="table table-hover table-bordered table-striped">';
            tabla += '<tr>';
            tabla += '<th class="col-sm-1" >Fecha</th>'+
                     '<th class="col-sm-1" >Movimiento</th>'+
                     '<th class="col-sm-1" >Área</th>'+
                     '<th class="col-sm-2" >Nombre del solicitante</th>'+
                     '<th class="col-sm-2" >Nombre del que registra</th>'+
                     '<th class="col-sm-2" >Comentarios</th>';
            tabla += '</tr>';
            tr = '';

        xmlDoc = $.parseXML(data),
        $xml = $( xmlDoc );
        var con = 1; arr = []; arr2 = [];
        $($xml).find("respuesta").each(function() {
            var fecha = ($(this).find("respuesta>fecha").text().toUpperCase());
            var tmov = ($(this).find("respuesta>tmov").text().toUpperCase());
            var nombre = ($(this).find("respuesta>nombre").text().toUpperCase());
            var nombre_solicitante = ($(this).find("respuesta>nombre_solicitante").text().toUpperCase());
            var nombre_dequien_registra = ($(this).find("respuesta>nombre_dequien_registra").text().toUpperCase());
            var comentarios = ($(this).find("respuesta>comentarios").text().toUpperCase());
            arr2.push(tmov);
            if (tmov=='PRESTAMO') {arr.push(nombre_solicitante);}
            //console.log(arr);
            tr += '<tr>';
            tr += '<td>'+fecha+'</td>'+
                  '<td>'+tmov+'</td>'+
                  '<td>'+nombre+'</td>'+
                  '<td>'+nombre_solicitante+'</td>'+
                  '<td>'+nombre_dequien_registra+'</td>'+
                  '<td>'+comentarios+'</td>';

            tr += '</tr>';
            con++;
        });

        if (  ($xml.find('respuesta').length) == '' || ($xml.find('respuesta').length) == null ) {
          $('#pdf').attr("disabled", true);
          $('#pdf').css({pointerEvents: "none"});
        }
        else {
          $('#pdf').attr("disabled", false);
          $('#pdf').css({pointerEvents: ""})
        }

        tabla += tr;
        tabla += '</table>';
        $('#contenedor_tabla').html( tabla );
        $('#lblCon').html(con);
      }

      function nvoMovExp(NumExpediente) {
        var NumExpediente = $('#expedientereg').val();
        var Fecha = $('#fechareg').val();
        var Hora = $('#horareg').val();
        var idArea = $('#areareg').val();
        var Solicitante = $('#nombrereg').val();
        var Movimiento = $('#movimientoreg').val();
        var Comentarios = $('#comentariosreg').val();
        //alert(NumExpediente+'-'+Fecha+'-'+Hora+'-'+idArea+'-'+Movimiento+'-'+Solicitante+'-'+Comentarios);
        if (Comentarios.length==0) {Comentarios='No se realizó ninguna observación';}
        if (  (Solicitante.length > 0) && (idArea != null) && (Movimiento != null)  ){
          $.post({
              url:  'expedienteregmov',
              type: "POST",
              data: {
                NumExpediente: NumExpediente,
                Fecha: Fecha,
                Hora: Hora,
                idArea: idArea,
                Solicitante: Solicitante,
                Encargado : '{!! $Encargado !!}',
                Movimiento: Movimiento,
                Comentarios: Comentarios
              },

              success:  function (data)
              {
                xmlDoc = $.parseXML(data),
                $xml = $( xmlDoc );
                $($xml).find("respuesta").each(function() {

                  if (  ($(this).find("respuesta>error").text()) == '1' || ($(this).find("respuesta>error").text()) == 1 ) {
                    $.notify($(this).find("respuesta>descripcionerror").text(), "info");
                  }
                  else {
                    $.notify('Registro insertado correctamente', "success");
                    document.getElementById('canExp').click();
                    document.getElementById('btn_listar_bp').click();
                  }
                });
              },
              error : function(xhr, status)
              {$.notify("Ha ocurrido un problema", "error");},
          });
        }
        else {
          $.notify("Rellene todos los campos", "info");
        }
      }

      function bqdSolicitante(){
          $.post({
            url:  'expedientemovimientosbqd',
            type: "POST",
            data: {Nombre : $('#nombreregbqd').val() },
            success:  function (data)
            { //alert(data);
              bqdSolicitanteTbl(data);
            },
            error : function(xhr, status)
            {$.notify("Ha ocurrido un problema", "error");},
          });
      }

      function bqdSolicitanteTbl(data){
        var tabla = '<table style="font-size: 12px;" class="table table-hover table-bordered table-striped">';
        tr = '';

        xmlDoc = $.parseXML(data),
        $xml = $( xmlDoc );
        var con = 1;

        $($xml).find("respuesta").each(function() {
            var medico = ($(this).find("respuesta>medico").text().toUpperCase());
            var nombre = $.trim(medico.split('-')[0]);
            tr += '<tr class="nombreMed" title="Seleccionar este usuario" style="cursor:pointer"><td>'+nombre+'</td></tr>';
            con++;
        });

        if (  ($xml.find('respuesta').length) == '' || ($xml.find('respuesta').length) == null ) {
            $.notify("No se han encontrado coincidencias", "info");
            tabla += tr;
            tabla += '</table>';
            $('#contenedor_tabla_sol').html( tabla );
            $('#bqdSol').slideDown( 250 );
        }
        else {
            tabla += tr;
            tabla += '</table>';
            $('#contenedor_tabla_sol').html( tabla );
            $('#bqdSol').slideDown( 250 );
        }
      }

      function bqdSolicitanteShow(){  $('#bqdSol').slideDown( 250 );  $('#nombreregbqd').focus();}
      function bqdSolicitanteHide(){  $('#bqdSol').slideUp( 250 );  }

      $(document).on("click", ".nombreMed", function(event) {
          event.stopImmediatePropagation();
          var filaActual = $(this).closest('tr');
          var nombreMedTrim = filaActual.find('td').html();
          $('#nombrereg').val(nombreMedTrim);
          $('#bqdSol').slideUp( 250 );
          $('#nombrereg').focus()
      });

      $(document).on("click", "#movimientoreg", function(event) {
          event.stopImmediatePropagation();
          var Movimiento = $('#movimientoreg').val();
          if (  (Movimiento=="2") && ($('#nombrereg').val() == '') && (arr2[0] != 'DEVOLUCION') ){
            $('#nombrereg').val(arr[0]);
            //console.log(arr);console.log(arr2);console.log(arr2[0]);console.log(arr[0]);
          }
      });

function pdf() {

    var date = new Date();
    var d  = date.getDate();
    var day = (d < 10) ? '0' + d : d;
    var m = date.getMonth() + 1;
    var month = (m < 10) ? '0' + m : m;
    var year = date.getFullYear();

    var h = date.getHours();
    var hour = (h < 10) ? '0' + h : h;
    var mn = date.getMinutes();
    var minutes = (mn < 10) ? '0' + mn : mn;

    var pdf = new jsPDF('landscape', 'pt', 'a4');
    var con = 10;
    var expediente = $('#expediente').val();
    var nom = $.trim($('#nombre').val());
    var app = $.trim($('#apellidop').val());
    var apm = $.trim($('#apellidom').val());
    var nombre = nom+' '+app+' '+apm;
    var curp = $('#curp').val();
    var afiliacion = $('#folio').val();
    var edad = $('#edad').val();

    pdf.setFont("helvetica");
    pdf.setLineWidth(1);
    pdf.line(40, 170, 800, 170);

    pdf.setFontSize(14);            pdf.text(260, 50, 'SERVICIOS DE SALUD DEL ESTADO DE COLIMA');
    pdf.setFontSize(12);            pdf.text(340, 80, '<?php echo $nom_Centro_Sal ?>');
                                    pdf.text(310, 95, 'Movimientos de préstamos de expedientes');
    pdf.setFontSize(9);             pdf.text(40, 107, 'No. de expediente: '+expediente);
                                    pdf.text(40, 118, 'Nombre: '+nombre);
                                    pdf.text(40, 129, 'CURP: '+curp);
                                    pdf.text(40, 140, 'Folio de afiliación: '+afiliacion);
                                    pdf.text(40, 151, 'Edad: '+edad+' años');

                                    pdf.text(40, 162, 'Fecha de elaboración: '+day+'/'+month+'/'+year+' '+hour+':'+minutes+' hrs');
    pdf.cellInitialize();
    pdf.setFontSize(10);//Font Size de la Tabla

    var imgData =
        'data:image/png;base64,[encoded data, 5352 characters]'

    pdf.addImage(imgData, 'PNG', 27, 27, 90, 27);
	
	var imgData2 =
        'data:image/png;base64,[encoded data, 10864 characters]'

    pdf.addImage(imgData2, 'PNG', 690, 27, 90, 27);
	
    var res = pdf.autoTableHtmlToJson(document.getElementById("mitabla"));
      const totalPagesExp = '{total_pages_count_string}';
    pdf.autoTable(res.columns, res.data, {
      theme: 'grid', // 'striped', 'grid' or 'plain'
      startY: 180,
      tableWidth: 'auto',
      //columnWidth: 'auto',
      showHeader: 'firstPage', // 'everyPage', 'firstPage', 'never',
      //pageBreak: 'auto', // 'auto', 'avoid' or 'always'
      columnStyles: {
        0: {columnWidth: 100},
        1: {columnWidth: 65},
        2: {columnWidth: 95},
        3: {columnWidth: 160},
        4: {columnWidth: 160},
        5: {columnWidth: 'auto'}
     },

      headerStyles: {
        fillColor: [ 255, 255, 255],
        textColor:[0 ,0 ,0],
        lineWidth: 0.5,
        lineColor: [74, 74, 74],
        fontStyle : 'normal',
      },

      styles: {
        fontSize: 8,
        overflow: 'linebreak',
        textColor:[0 , 0 ,0],
        lineWidth: 0.5,
        lineColor: [74, 74, 74]
      },
      addPageContent: function (data) {
        pdf.setFontSize(8);
        let str = 'Pág ' + data.pageCount;
        if (typeof pdf.putTotalPages === 'function') {str = str + '/' + totalPagesExp;}
        pdf.text(str, data.settings.margin.right, pdf.internal.pageSize.height - 30);
        //pdf.text(775, 582, str);
      },
    });
    if (typeof pdf.putTotalPages === 'function') {  pdf.putTotalPages(totalPagesExp); }
    //pdf.autoPrint();
    var iframe = pdf.output('bloburi');
    $('#output').attr('src', iframe+'#zoom=92&view=Fit');
    $('#output').show();
    $('html, body').animate(  { scrollTop: $("#output").offset().top }, 500);
    //window.open(pdf.output('bloburl'), '_blank');
}

</script>
