@extends('layouts.app')
<style>
  .underline {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #c40a2f;
    display: none !important;
}
dt{
  color: rgb(18, 63, 79)
}
</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-view-list-sq"></em> INFORMACIÓN DEL PRODUCTO
          </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 href="{{route('ingresos.index')}}" class="btn btn-dim btn-dark m-1"><em class="icon ni ni-arrow-right-c"></em><span>INGRESOS</span><span class="underline"></span></a>
                              <a href="#" onclick="showModal()"  class="btn btn-dim btn-dark m-1"><em class="icon ni ni-arrow-left-c"></em><span>SALIDAS</span><span class="underline"></span></a>
                              <a class="btn btn-white btn-dim btn-outline-dark mx-1 my-1" href="{{route('productos.create')}}" title="Adicionar paciente">
                                  <em class="icon ni ni-user-add-fill"></em><span>Nuevo Producto</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 Producto</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 PRODUCTO</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="buscarProducto()"><em class="icon ni ni-search"></em><span>Buscar</span></button></div>
                          </div>
                          <div class="row">
                              <div class="col-12 col-md-6">
                                <div class="mb-1 row">
                                  <label for="id_almacen" class="col-sm-4 col-form-label" id="labelCodigo">ID - Almacen:</label>
                                  <div class="col-sm-8">
                                      <input type="text" class="form-control form-control-sm" id="id_almacen" 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="tipo" class="col-sm-4 col-form-label d-flex flex-row-reverse">Tipo</label>
                                      <div class="col-sm-8">
                                          <input type="text" class="form-control form-control-sm" id="tipo" disabled value="{{$ultimoPaciente->ci}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-12">
                                  <div class="mb-1 row">
                                      <label for="drug" class="col-sm-2 col-form-label">Nombre</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="drug" disabled value="{{$ultimoPaciente->paterno}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                                  <div class="mb-1 row">
                                      <label for="presentacion" class="col-sm-2 col-form-label">Presentación</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control form-control-sm" id="presentacion" disabled value="{{$ultimoPaciente->materno}}" style="text-transform: uppercase;">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          @else
                          <input type="hidden" id="idproducto">
                          <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 PRODUCTO</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="buscarProducto()"><em class="icon ni ni-search"></em><span>Buscar</span></button></div>
                          </div>
                          <div class="container">
                            <div class="row">
                              <div class="col-sm-7">
                                <div class="col-12">
                                  <div class="mb-1 row">
                                      <label for="id_drug" class="col-sm-4 col-form-label">ID - Almacen: </label>
                                      <div class="col-sm-8">
                                          <input type="text" class="form-control form-control-sm" id="id_drug" autocomplete="off">
                                      </div>
                                  </div>
                                  <div class="mb-1 row">
                                      <label for="drug" class="col-sm-4 col-form-label">Nombre:</label>
                                      <div class="col-sm-8">
                                          <input type="text" class="form-control form-control-sm" id="drug" autocomplete="off" >
                                      </div>
                                  </div>
                                  <hr>
                                  <dl class="row">
                                    <dt class="col-sm-4">Tipo:</dt>
                                    <dd class="col-sm-8" id="comercial"></dd>
                                    <dt class="col-sm-4">Presentación:</dt>
                                    <dd class="col-sm-8">
                                      <p id="categoria1" style="padding: 0px;margin: 0;"></p>
                                      <p id="categoria2"></p>
                                    </dd>
                                    <dt class="col-sm-4">F. Vencimiento:</dt>
                                    <dd class="col-sm-8" id="vencimiento"></dd>
                                  </dl>
                                  <hr>
                                  <dl class="row">
                                    <dt class="col-sm-4">Ubicación:</dt>
                                    <dd class="col-sm-8" id="ubicacion"></dd>
                                    <dt class="col-sm-4">Costo Real:</dt>
                                    <dd class="col-sm-8" id="ubicacion"></dd>
                                    <dt class="col-sm-4">Precio de Venta C/F:</dt>
                                    <dd class="col-sm-8" id="ubicacion"></dd>
                                    <dt class="col-sm-4">Precio de Venta S/F:</dt>
                                    <dd class="col-sm-8" id="ubicacion"></dd>
                                  </dl>
                                  <hr>
                                  <dl class="row">
                                    <dt class="col-sm-4">Disponidad:</dt>
                                    <dd class="col-sm-8" id="ubicacion"></dd>
                                    <dt class="col-sm-4">Unidades Disponibles:</dt>
                                    <dd class="col-sm-8" id="ubicacion"></dd>
                                    <dt class="col-sm-5">Valor Real en Almacen:</dt>
                                    <dd class="col-sm-7" id="ubicacion"></dd>
                                  </dl>
                              </div>
                              </div>
                              <div class="col-sm-5" style="border: solid 1px #939393; border-radius: 10px; padding: 15px">
                                <h6>COSTO UNITARIO</h6>
                                <dl class="row">
                                  <dt class="col-sm-4">EMPRESA:</dt>
                                  <dd class="col-sm-8" id="empresa"></dd>
                                  <dt class="col-sm-4">Costo Real:</dt>
                                  <dd class="col-sm-5">10.000,00 Bs.</dd>
                                  <dd class="col-sm-2" style="color:#2671bc">87%</dd>
                                  <dt class="col-sm-4"></dt>
                                  <dd class="col-sm-5">10.000,00 Bs.</dd>
                                  <dd class="col-sm-3" style="color:#2671bc">P. Neto</dd>
                                  <dt class="col-sm-4"></dt>
                                  <dd class="col-sm-5" style="color:#c40a2f;font-weight: 700">10.000,00 Bs.</dd>
                                  <dd class="col-sm-2" style="color:#ffffff;background: #c40a2f;margin-left: 10px">55</dd>
                                  <dt class="col-sm-4"></dt>
                                  <dd class="col-sm-4" style="border-bottom: solid 1px #000000"></dd>
                                  <dd class="col-sm-4"></dd>
                                  <dt class="col-sm-4"></dt>
                                  <dd class="col-sm-5">10.000,00 Bs.</dd>
                                  <dd class="col-sm-3"></dd>
                                </dl>
                          
                              </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">OPERACIONES</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link px-3" data-bs-toggle="tab" href="#tabItem2" aria-selected="true" role="tab">REPORTES</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabItem1" role="tabpanel">
    
                            <div class="tab-pane" id="tabItem2" role="tabpanel" style="height: 150px">
                            </div>
                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
@section('js1')
<script>

function buscarProducto(){
  location.reload(true);
}
$(document).ready(function(){
  var currentIndex = 0; // Índice actual del array response
  var responseLength = 0; // Variable para almacenar la longitud del array response
  var valorInput = $('#idproducto').val();
  $('#drug').on('keypress', function(event) {
    if (event.which === 13) {  
      var valorInput = $(this).val();
      $.ajax({
        type: "GET",
        url: "./filtrarProducto/" + valorInput,
        dataType: "json",
        success: function (response) {
          
          responseLength = response.length;
          console.log(responseLength);
          if(responseLength>0){
            $('#total').val(responseLength);
          
          console.log(response)
          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
            $('#idproducto').val(response[index].id);
            $('#drug').val(response[index].drug);
            $('#drug').attr('disabled', 'disabled')
            $('#id_drug').val(response[index].id_drug);
            $('#id_drug').attr('disabled', 'disabled')
            $('#comercial').html(response[index].comercial);
            $('#categoria1').html(response[index].descripcionCategoria1)
            $('#categoria2').html(response[index].valorCategoria2)
            $('#empresa').html(response[index].nombreEmpresa)
          }
          // 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{
            console.log("no se encontro datos")
            Swal.fire({
              title: "Paciente no encontrado",
              text: "No hay registros que coincidan con estos criterios de busqueda",
              icon: "warning",
              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);
        },
      });
    }
  });
});
</script>
@endsection
@endsection