@extends('layouts.app')
<style>
  .underline {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #c40a2f;
    display: none !important;
}
</style>
@section('content')
<input type="hidden" value="{{Auth::user()->id}}" id="idusuario">
<div class="nk-content">
  <div class="nk-block-head-sub">
      <a href="{{route('dashboard')}}" class="btn btn-white btn-dim btn-outline-dark">
        <em class="icon ni ni-home"></em><span>Home</span>
      </a>
  </div>
  <div class="container-fluid">
      <div class="card">
          @if(session()->has('success'))
          <div class="alert alert-success alert-dismissible fade show" role="alert">
              {{ session('success') }}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          @endif
          <h5 class="card-header rounded-top border" style="color:#000000; background: #ffffff;">
              <em class="icon ni ni-user-alt"></em> INFORMACIÓN DEL PACIENTE
          </h5>
          <div class="card-body border shadow-sm">
              <div class="row g-3">
                  <div class="col-12">
                      <div class="border-bottom border-dark border-2 p-1 d-flex flex-wrap justify-content-between align-items-center">
                          <div class="d-flex flex-wrap align-items-center mb-1">
                              <button class="btn btn-sm" id="btnAnterior">
                                  <em class="icon ni ni-back-alt-fill"></em>
                              </button>
                              <input type="text" id="indice" class="form-control form-control-sm mx-1 border border-white" style="width: 65px; text-align: center;" disabled>
                              / 
                              <input type="text" id="total" class="form-control form-control-sm mx-1 border border-white " style="width: 65px; text-align: center" disabled>
                              <button class="btn btn-sm" id="btnSiguiente">
                                  <em class="icon ni ni-forward-alt-fill"></em>
                              </button>
                          </div>
                          <div class="d-flex flex-wrap">
                              <a class="btn btn-white btn-dim btn-outline-dark mx-1 my-1" href="{{route('pacientes.create')}}" title="Adicionar paciente">
                                  <em class="icon ni ni-user-add-fill"></em><span>Nuevo Paciente</span>
                              </a>
                              <a class="btn btn-white btn-dim btn-outline-dark mx-1 my-1" onclick="alertaEdicionPaciente()" title="Editar paciente">
                                  <em class="icon ni ni-account-setting"></em><span>Editar Paciente</span>
                              </a>
                          </div>
                      </div>
                  </div>
                  <div class="col-12 col-xl-6">
                      <div class="border p-5 shadow rounded-5" style="padding-top: 17px !important;">
                          @if (session('ultimoPaciente'))
                             @php
                              $ultimoPaciente = session('ultimoPaciente');
                            @endphp
                          <input type="hidden" id="idpaciente" value="{{$ultimoPaciente->id}}">
                          <div class="d-flex bd-highlight">
                            <div class="p-2 w-100 bd-highlight" style="padding-top:27px !important;padding-left:0xp !important"><strong><h6>BUSCAR PACIENTE</h6></strong></div>
                            <div class="p-2 flex-shrink-1 bd-highlight"><button type="button" class="btn btn-white btn-dim btn-outline-dark m-1" onclick="buscarPaciente()">
                              <em class="icon ni ni-reload"></em>
                                        <span class="">Limpiar</span>
                            </div>
                          </div>
                          <div class="row">
                              <div class="col-12 col-md-6">
                                <div class="mb-1 row">
                                  <label for="registro" class="col-sm-4 col-form-label" id="labelCodigo">ID:</label>
                                  <div class="col-sm-8">
                                      <input type="text" class="form-control form-control-sm" id="registro" disabled value="{{$ultimoPaciente->historial}}" style="text-transform: uppercase;">
                                  </div>
                                </div>
                              </div>
                              <div class="col-12 col-md-6">
                                  <div class="mb-1 row">
                                      <label for="ci" class="col-sm-4 col-form-label d-flex flex-row-reverse">C.I.</label>
                                      <div class="col-sm-8">
                                          <input type="text" class="form-control form-control-sm" id="ci" disabled value="{{$ultimoPaciente->ci}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12">
                                  <div class="mb-1 row">
                                      <label for="paterno" class="col-sm-2 col-form-label">Apellido Pat.</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="paterno" disabled value="{{$ultimoPaciente->paterno}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                                  <div class="mb-1 row">
                                      <label for="materno" class="col-sm-2 col-form-label">Apellido Mat.</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="materno" disabled value="{{$ultimoPaciente->materno}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                                  <div class="mb-1 row">
                                      <label for="nombre" class="col-sm-2 col-form-label">Nombre(s)</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="nombre" disabled value="{{$ultimoPaciente->nombre}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12 col-md-6">
                                  <div class="mb-1 row">
                                      <label for="nacimiento" class="col-sm-4 col-form-label">F. Nacimiento</label>
                                      <div class="col-sm-8">
                                          <input type="date" class="form-control form-control-sm" id="nacimiento" disabled value="{{$ultimoPaciente->nacimiento}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12 col-md-3">
                                  <div class="mb-1 row">
                                      <label for="edad" class="col-sm-5 col-form-label">Edad</label>
                                      <div class="col-sm-7">
                                          <input type="text" class="form-control form-control-sm" id="edad" disabled value="{{$ultimoPaciente->edad}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12 col-md-3">
                                  <div class="mb-1 row">
                                      <label for="sexo" class="col-sm-5 col-form-label">Sexo</label>
                                      <div class="col-sm-7">
                                          <input type="text" class="form-control form-control-sm" id="sexo" disabled value="{{$ultimoPaciente->sexo}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12">
                                <div class="mb-1 row">
                                    <label for="diagnostico" class="col-sm-2 col-form-label">Diagnostico</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="diagnostico" disabled value="{{$ultimoPaciente->diagnostico}}" style="text-transform: uppercase;">
                                    </div>
                                </div>
                            </div>
                          </div>
                          @else
                          <input type="hidden" id="idpaciente">
                          <div class="d-flex bd-highlight justify-content-between align-items-center flex-wrap g-2"> 
                            <div class="bd-highlight sm-hidden-title">
                                <strong>
                                    <h6>BUSCAR PACIENTE</h6>
                                </strong>
                            </div>
                            <div class="bd-highlight ml-auto "> <!-- Agregado ml-auto para empujar los botones a la derecha -->
                                <div>
                                    <button type="button" class="sm-hidden-btn btn btn-white btn-dim btn-outline-dark " style="margin-bottom: 10px !important;" onclick="busquedaPorParametro()">
                                        <em class="icon ni ni-search"></em>
                                        <span class="">Buscar</span>
                                    </button>
                                    <button type="button" class="sm-hidden-btn btn btn-white btn-dim btn-outline-dark " style="margin-bottom: 10px !important;" onclick="buscarPaciente()">
                                        <em class="icon ni ni-reload"></em>
                                        <span class="">Limpiar</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <style>
                          @media (max-width: 400px) {
                              .sm-hidden-title {
                                  text-align: center;
                                  width: 100%;
                              }
                              .sm-hidden-btn {
                                  width: 100%;
                              }
                          }
                        </style>
                          <div class="row">
                            <div class="col-12 col-md-6">
                              <div class="mb-1 row">
                                  <label for="registro" class="col-sm-4 col-form-label"id="labelCodigo">ID:</label>
                                  <div class="col-sm-8">
                                      <input type="text" class="form-control form-control-sm" id="registro" autocomplete="off">
                                  </div>
                              </div>
                            </div>  
                              <div class="col-12 col-md-6">
                                  <div class="mb-1 row">
                                      <label for="ci" class="col-sm-2 col-form-label">C.I.</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="ci" autocomplete="off">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12">
                                  <div class="mb-1 row">
                                      <label for="paterno" class="col-sm-2 col-form-label">Apellido Pat.</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="paterno" autocomplete="off">
                                      </div>
                                  </div>
                                  <div class="mb-1 row">
                                      <label for="materno" class="col-sm-2 col-form-label">Apellido Mat.</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="materno" autocomplete="off" >
                                      </div>
                                  </div>
                                  <div class="mb-1 row">
                                      <label for="nombre" class="col-sm-2 col-form-label">Nombre(s)</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="nombre" autocomplete="off" >
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12 col-md-6">
                                  <div class="mb-1 row">
                                      <label for="nacimiento" class="col-sm-4 col-form-label">F. Nacimiento</label>
                                      <div class="col-sm-8">
                                          <input type="date" class="form-control form-control-sm" id="nacimiento" autocomplete="off" >
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12 col-md-3">
                                  <div class="mb-1 row">
                                      <label for="edad" class="col-sm-4 col-form-label">Edad</label>
                                      <div class="col-sm-8">
                                          <input type="text" class="form-control form-control-sm" id="edad" autocomplete="off" >
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12 col-md-3">
                                  <div class="mb-1 row">
                                      <label for="sexo" class="col-sm-4 col-form-label">Sexo</label>
                                      <div class="col-sm-8">
                                          <input type="text" class="form-control form-control-sm" id="sexo" autocomplete="off">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12">
                                  <div class="mb-1 row">
                                      <label for="diagnostico" class="col-sm-2 col-form-label">Diagnostico</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="diagnostico" autocomplete="off">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          @endif
                      </div>
                  </div>
                  <div class="col-12 col-xl-6">
                    <div class="card-inner border p-5 shadow rounded-5">
                        <ul class="nav nav-tabs mt-n3" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active px-3" data-bs-toggle="tab" href="#tabItem1" aria-selected="true" role="tab">CONSULTAS</a>
                            </li>
                            @if (Auth::user()->id != 5)
                            <li class="nav-item" role="presentation">
                              <a class="nav-link px-3" data-bs-toggle="tab" href="#tabItem2" aria-selected="true" role="tab">DOCUMENTOS</a>
                            </li>
                            @endif

                        </ul>
                        <div class="tab-content">
                          @if (Auth::user()->id != 5)
                            <div class="tab-pane active show" id="tabItem1" role="tabpanel">
                              <div class="container">
                                <div class="row">
                                  <div class="col"><a href="#" onclick="showModalAnemia()"  class="btn btn-dim btn-dark m-1" style="width: 206px"><em class="icon ni ni-plus-medi-fill" id="iconoHematologia"></em><span>HEMATOLOGIA</span><span class="underline"></span></a></div>
                                  <div class="col"><a href="#" onclick="showModalReceta()"  class="btn btn-dim btn-dark m-1"><em class="icon ni ni-file-docs"></em><span>RECETAS</span><span class="underline"></span></a></div>
                                  <div class="col"></div>
                                  <div class="col"></div>
                                </div>
                                <div class="row">
                                  <div class="col"><a href="#" onclick="irOncoHematologia()"  class="btn btn-dim btn-dark m-1" style="width: 206px"><em class="icon ni ni-plus-medi-fill" id="iconoOncohemato"></em><span>ONCOHEMATOLOGIA</span><span class="underline"></span></a></div>
                                  <div class="col"></div>
                                  <div class="col"></div>
                                  <div class="col"></div>
                                </div>
                                <div class="row">
                                  <div class="col"><a href="#" onclick="irOncologia()"  class="btn btn-dim btn-dark m-1" style="width: 206px"><em class="icon ni ni-plus-medi-fill" id="iconoOncologia"></em><span>ONCOLOGIA</span><span class="underline"></span></a></div>
                                  <div class="col"></div>
                                  <div class="col"></div>
                                  <div class="col"></div>
                                </div>
                              </div>
                              
                              
                              
                              
                            </div>
                          @else
                            <div class="tab-pane active show" id="tabItem1" role="tabpanel">
                              <a href="#" onclick="showModalReceta()"  class="btn btn-dim btn-dark m-1"><em class="icon ni ni-file-docs"></em><span>RECETAS</span><span class="underline"></span></a>
                            </div>
                          @endif
                            <div class="tab-pane" id="tabItem2" role="tabpanel" style="height: 150px">
                              <a href="#" onclick="informeMedico()"  class="btn btn-dim btn-dark m-1"><em class="icon ni ni-file-docs"></em><span>INFORME MEDICO</span><span class="underline"></span></a>
                              <a href="#" onclick="certificadoMedico()"  class="btn btn-dim btn-dark m-1"><em class="icon ni ni-file-docs"></em><span>CERTIFICADO MEDICO</span><span class="underline"></span></a>
                            </div>                              
                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
@section('js1')
<script>
function capitalizeWords(str) {
  return str.split(' ').map(word => word.toUpperCase()).join(' ');
}
function alertaEdicionPaciente(){
  var idpaciente = $("#idpaciente").val();
  var Paciente = $("#paterno").val()+" "+$("#materno").val()+" "+$("#nombre").val();
  Valor = capitalizeWords(Paciente);
  if(idpaciente!==""){
    Swal.fire({
              title: "Atención",
              html:"Seguro que quieres Editar Informacion del Paciente: <br>" +Valor,
              showCancelButton: true,
              confirmButtonColor: "#3085d6",
              cancelButtonColor: "#d33",
              confirmButtonText: "Si"
            }).then((result) => {
              if (result.isConfirmed) {
                var url = "{{ route('pacientes.edit', ['paciente' => ':idpaciente']) }}";
                    window.location.href = url.replace(':idpaciente', idpaciente);
              }
            });
  }else{
    alert("introduzca un valor")
  }
}
function showModalReceta() {
  var idpaciente = $("#idpaciente").val();
  if(idpaciente!==""){

    var url = "{{ route('historialReceta', ['dato' => 'ID_PLACEHOLDER']) }}";
                      url = url.replace('ID_PLACEHOLDER', idpaciente);
                      window.location.href = url
  }else{
    alert("introduzca un valor")  
  }
}
function showModalAnemia() {
  var idpaciente = $("#idpaciente").val();
  if(idpaciente!==""){

    var url = "{{ route('consultaAnemia', ['dato' => 'ID_PLACEHOLDER']) }}";
    url = url.replace('ID_PLACEHOLDER', idpaciente);
    window.location.href = url;
  }else{
    alert("introduzca un valor")  
  }
}
function irOncoHematologia() {
  var idpaciente = $("#idpaciente").val();
  if(idpaciente!==""){
    var url = "{{ route('consultaOncohematologia', ['dato' => 'ID_PLACEHOLDER']) }}";
    url = url.replace('ID_PLACEHOLDER', idpaciente);
    window.location.href = url;
  }else{
    alert("introduzca un valor")  
  }
}
function irOncologia() {
  var idpaciente = $("#idpaciente").val();
  if(idpaciente!==""){

    var url = "{{ route('consultaOncologia', ['dato' => 'ID_PLACEHOLDER']) }}";
    url = url.replace('ID_PLACEHOLDER', idpaciente);
    window.location.href = url;
  }else{
    alert("introduzca un valor")  
  }
}
function informeMedico() {
  var idpaciente = $("#idpaciente").val();
  if(idpaciente!==""){

    var url = "{{ route('indexInformeMedico', ['dato' => 'ID_PLACEHOLDER']) }}";
                      url = url.replace('ID_PLACEHOLDER', idpaciente);
                      window.location.href = url
  }else{
    alert("introduzca un valor")  
  }
}
function certificadoMedico() {
  var idpaciente = $("#idpaciente").val();
  if(idpaciente!==""){

    var url = "{{ route('indexCertificadoMedico', ['dato' => 'ID_PLACEHOLDER']) }}";
                      url = url.replace('ID_PLACEHOLDER', idpaciente);
                      window.location.href = url
  }else{
    alert("introduzca un valor")  
  }
}

function buscarPaciente() {
    location.reload(true);
}
$(document).ready(function () {
    $(
        "#registro, #ci, #paterno, #materno, #nombre, #nacimiento, #edad, #sexo, #diagnostico"
    ).on("keypress", function (event) {
        if (event.which === 13) {
            busquedaPorParametro();
        }
    });
});
function busquedaPorParametro() {
    var currentIndex = 0; // Índice actual del array response
    var responseLength = 0; // Variable para almacenar la longitud del array response
    var valorInput = $("#idpaciente").val();
    const data = obtenerDatosFormulario();
    console.log(data);
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "./filtrarPaciente",
        data: data,
        success: function (response) {
            //Habilitamos el boton de historial
            $("#historial-dx").prop("disabled", false);
            console.log(response);
            responseLength = response.length;
            if (responseLength > 0) {
                $("#total").val(responseLength);

                mostrarDatos(currentIndex); // Mostrar los datos del primer elemento al inicio

                // Función para mostrar los datos según el índice actual
                function mostrarDatos(index) {
                    $("#indice").val(index + 1); // Mostrar el índice actualizado
                    $("#idpaciente").val(response[index].id);
                    if (response[index].asegurado1 != null) {
                        $("#registro").val(response[index].asegurado1);
                        $("#registro").attr("disabled", "disabled");
                    } else {
                        $("#registro").val(response[index].historial);
                        $("#registro").attr("disabled", "disabled");
                    }
                    $("#paterno").val(response[index].paterno);
                    $("#paterno").attr("disabled", "disabled");
                    $("#materno").val(response[index].materno);
                    $("#materno").attr("disabled", "disabled");
                    $("#nombre").val(response[index].nombre);
                    $("#nombre").attr("disabled", "disabled");
                    $("#nacimiento").val(response[index].nacimiento);
                    $("#nacimiento").attr("disabled", "disabled");
                    $("#sexo").val(response[index].sexo);
                    $("#sexo").attr("disabled", "disabled");
                    $("#telefono").val(response[index].telefono);
                    $("#telefono").attr("disabled", "disabled");
                    $("#alergia").val(response[index].alergia);
                    $("#alergia").attr("disabled", "disabled");
                    $("#ci").val(response[index].ci);
                    $("#ci").attr("disabled", "disabled");
                    $("#diagnostico").val(response[index].diagnostico);
                    $("#diagnostico").attr("disabled", "disabled");
                    $("#edad").val(response[index].edad);
                    $("#edad").attr("disabled", "disabled");
                    var existe=response[index].tratamientos.length;
            var existe1=response[index].tratamientosOnco.length;
            if(existe!=0){
              $('#iconoHematologia').css('color', '#c40a2f');
            }
            else{
              $('#iconoHematologia').css('color', 'black');
            }
            if(existe1!=0){
              $('#iconoOncohemato').css('color', '#c40a2f');
            }
            else{
              $('#iconoOncohemato').css('color', 'black');
            }
                }
                // Inicialmente, habilitar ambos botones
                $("#btnSiguiente").prop("disabled", false);
                $("#btnAnterior").prop("disabled", false);

                function actualizarEstadoBotones() {
                    // Deshabilitar el botón "Siguiente" si estamos en el último elemento
                    $("#btnSiguiente").prop(
                        "disabled",
                        currentIndex === responseLength - 1
                    );

                    // Deshabilitar el botón "Anterior" si estamos en el primer elemento
                    $("#btnAnterior").prop("disabled", currentIndex === 0);
                }

                // Botón para avanzar al siguiente elemento
                $("#btnSiguiente").on("click", function () {
                    if (currentIndex < responseLength - 1) {
                        // Solo avanzar si no estamos en el último elemento
                        currentIndex++; // Incrementar el índice
                        mostrarDatos(currentIndex); // Mostrar datos del elemento actual
                        actualizarEstadoBotones(); // Actualizar el estado de los botones
                    }
                });

                // Botón para retroceder al elemento anterior
                $("#btnAnterior").on("click", function () {
                    if (currentIndex > 0) {
                        // Solo retroceder si no estamos en el primer elemento
                        currentIndex--; // Decrementar el índice
                        mostrarDatos(currentIndex); // Mostrar datos del elemento actual
                        actualizarEstadoBotones(); // Actualizar el estado de los botones
                    }
                });

                // Manejar los eventos de teclado para las flechas izquierda y derecha
                $(document).on("keydown", function (event) {
                    if (event.which === 39) {
                        // Flecha derecha
                        $("#btnSiguiente").click(); // Simular clic en el botón "Siguiente"
                    } else if (event.which === 37) {
                        // Flecha izquierda
                        $("#btnAnterior").click(); // Simular clic en el botón "Anterior"
                    }
                });
            } else {
                Swal.fire({
                    title: "Paciente no encontrado",
                    text: "No hay registros que coincidan con estos criterios de busqueda",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Modificar Busqueda",
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.reload(true);
                    }
                });
            }
        },
        error: function (error) {
            console.error("Error en la solicitud AJAX:", error);
        },
    });
}

function obtenerDatosFormulario(){
  const data = {
  id: $('#registro').val(),
  ci: $('#ci').val(),
  paterno: $('#paterno').val(),
  materno: $('#materno').val(),
  nombre: $('#nombre').val(),
  edad: $('#edad').val(),
  nacimiento: $('#nacimiento').val(),
  sexo: $('#sexo').val(),
  diagnostico: $('#diagnostico').val()
}
return data
}


</script>
@endsection
@endsection