@extends('adminlte::page')

@section('title', 'CCT Rentals Operaciones')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>

@section('content_header')
<div class="card-primary">
    <div class="card-header" style="background: #2874A6;">
        <h3 class="card-title">CCT Rentals Operaciones</h3>
    </div>
</div>
@stop

@section('content')
<!--Muestra datos del proyecto-->
<div class="card card-primary">
  <div class="card-body">
    <div class="col d-flex justify-content-center">
      <table style="width:100%">
        <tr>
          <td style="text-align:left;vertical-align:top;padding:0">Proyecto:</td>
          <td>{{$project->pjt_name}}</td>
        </tr> 
        <tr>
          <td style="text-align:left;vertical-align:top;padding:0">Locaciones:</td>
          @if($project->pjt_location)
          <td>{{$project->pjt_location}}</td>
          @else
          <td>No especificadas</td>
          @endif
        </tr>
        <tr>
          <td style="text-align:left;vertical-align:top;padding:0">Horario:</td>
          <td>{{\Carbon\carbon::parse($project->pjt_date_start)->format('H:i')}}</td>
        </tr>
        <tr>
          <td style="text-align:left;vertical-align:top;padding:0">Unidades:</td>
          <td>{{$totalcontents}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>
<!-- Muestra botón del escaneo -->
<input type="text" id="sku_scan" name="sku_scan" style="position: absolute; left: -9999px; opacity: 0;"><button type="button" class="btn btn-light border-dashed" onclick="escanea_codigo();"><i class="fas fa-barcode"></i> Escanear</button><button type="button" class="btn" id="teclado"></button>

<div class="card card-primary">
  <div class="table-responsive">
    <div class="card-body">
      <div class="col d-flex justify-content-center">
        <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
          <div class="carousel-inner">
                      </div>
        </div>
      </div>
    </div>
  </div>
</div> 

<div class="container">
  <div class="col d-flex justify-content-center">
    <div class="row">
      <div class="col">
        <a class="btn btn-app" class="carousel-control-prev" href="#demo" data-slide="prev"> 
          <i class="fas fa-arrow-left"></i>
        </a>
      </div>
      <div class="col" style="text-align:center">
       <!-- Contador de páginas -->
       <div class="carousel-page-counter">
                <span id="currentPage">1</span> / <span id="totalPages">{{$totalcontents}}</span>
            </div>
      </div>
      <div class="col">
        <a class="btn btn-app" class="carousel-control-next" href="#demo" data-slide="next">
          <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>
<hr>

<div class="container">
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
    <div class="col-3 col-md-3"><a class="btn btn-app" onclick="muestra_modal_cambio();"><i class="fas fa-sync"></i></a></div>
    <div class="col-3 col-md-3"><a class="btn btn-app"  onclick="guarda_cambio();"><i class="fas fa-save"></i></a></div>
    <!--<div class="col-3 col-md-3"><a class="btn btn-app" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-toolbox"></i></a></div>-->
    <div class="col-3 col-md-3"> <a class="btn btn-app" onclick="muestra_modal_nota();"><i class="fas fa-pen-alt"></i></a></div>
    <div class="col-3 col-md-3"><a class="btn btn-app" href="/warehouse"><i class="fas fa-door-closed"></i></a></div>
    </div>
</div>

<!--MODAL NOTA-->
<div class="modal fade" id="modal_nota" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Nota de Producto</h5>
        <button type="button" class="close" onclick="cerrar_modal_nota();">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form >
          @csrf
          <div id="red_alert"></div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Ingresa nota</label>
            <textarea class="form-control" id="message-text" name="message-text"></textarea>
          </div>
          <input id="contador_nota" name="contador_nota" type="hidden" value="0">
        </form> 

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="cerrar_modal_nota();">Close</button>
        <button type="button" class="btn btn-primary" onclick="guarda_nota();">Guardar</button>
      </div>
    </div>
  </div>
</div>

<!--MODAL CAMBIAR-->
<div class="modal fade" id="cambio_producto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Cambio de Producto</h5>
        <button type="button" class="close" onclick="cerrar_modal_cambio();">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <form>
          <div class="form-group">
          <label for="recipient-name" class="col-form-label">Productos disponibles</label>
          <select id="select_series" class="form-select" aria-label="Default select example" onchange="almacena_serie_id();">
          <option selected>Seleccione</option>
          </select>
          </div>
          <input id="contador_cambio" name="contador_cambio" type="hidden" value="0">
          <input id="nueva_serie" name="nueva_serie" type="hidden" value="0">
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='cerrar_modal_cambio();'>Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Agrega los enlaces a los scripts de Bootstrap y jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<script>
  $(document).ready(function () {
  // Inicializa el carrusel
  $('#demo').carousel();

  // Registra el evento slid.bs.carousel para actualizar el contador
  $('#demo').on('slid.bs.carousel', function () {
  // Obtiene el índice de la diapositiva actual (comienza en 0)
  var currentIndex = $('#demo .carousel-item.active').index() + 1;
  // Obtiene la cantidad total de diapositivas
  var totalSlides = $('#demo .carousel-item').length;

  // Actualiza el contador de páginas
  $('#currentPage').text(currentIndex);
  $('#totalPages').text(totalSlides);

  $('#contador_nota').val(currentIndex - 1);
  $('#contador_cambio').val(currentIndex - 1);
  $('#nueva_serie').val(0);
  });

});

// Escuchar eventos de teclado
document.addEventListener('keypress', function(event) {
    // Verificar si se presionó una tecla de retorno de carro (Enter)
if (event.key === 'Enter') {
  
  var sku = $('#sku_scan').val();
  var totalSlides = $('#demo .carousel-item').length;

  var bandera_busqueda = 0;
  for (var i = 0; i <= totalSlides; i++){
  
  var sku_item = $('#sku_'+i).val();
 
  if(sku_item == sku){
    bandera_busqueda = 1;
    $('#demo').carousel(i);
    $("#teclado").focus();
    break;
  }
    
  }

if(bandera_busqueda == 0){

Swal.fire({
title: '¡Alerta!',
text: 'No se encuentra producto',
icon: 'error', // Puedes cambiar esto a 'error', 'warning', 'info', etc.
confirmButtonText: 'Aceptar'
});
$("#teclado").focus();
}

}
});

//ENFOCA CAMPO PARA ESCANEAR *************************************************************************
function escanea_codigo(){
  $('#sku_scan').val("");
  $('#sku_scan').removeAttr("readonly");
  $('#sku_scan').focus();
}

//FUNCION GUARDAR NOTA *******************************************************************************
function muestra_modal_nota(){

  $('#red_alert').html("");
  $('#message-text').val("");
  $('#modal_nota').modal('toggle');
  $("#modal_nota").show();

}

//FUNCION CERRAR MODAL NOTA **************************************************************************
function cerrar_modal_nota(){

$('#modal_nota').modal('toggle');
$("#modal_nota").hide();

}

//FUNCION GUARDAR NOTA ******************************************************************************
function guarda_nota()
{

var cont_nota = $('#contador_nota').val();
var id_nota = $('#serie_id_'+cont_nota).val();
var nota = $('#message-text').val();

if(nota == ""){

  $('#red_alert').html("");
  $('#red_alert').append("<div class='alert alert-danger' role='alert'>No ha ingresado nota</div>");

}else{

  $('#red_alert').html("");

  $.ajax({
    type: "POST",
    url: "{{ route('save_note') }}",
    data: {
      '_token': '{{ csrf_token() }}',
      'e_id_nota': id_nota,
      'e_nota': nota
    },
    success: function (response) {

      Swal.fire({
                title: '¡Alerta!',
                text: 'Nota guardada',
                icon: 'success', 
                confirmButtonText: 'Aceptar'
            });
      $('#message-text').val("");
      $('#modal_nota').modal('toggle');
      $("#modal_nota").hide();
        console.log(response.message); 
    },
    error: function (xhr, textStatus, errorThrown) {

      $('#red_alert').html("");
      $('#red_alert').append("<div class='alert alert-danger' role='alert'>Error en el sistema</div>");
        console.error('Error en la solicitud AJAX: ' + textStatus);
    }
});

}

}

//FUNCION CAMBIOS *******************************************************************************
function muestra_modal_cambio(){

var cont_cambio = $('#contador_cambio').val();
var id_prod = $('#prod_id_'+cont_cambio).val();

var parametros = {
  '_token': '{{ csrf_token() }}',
  e_id_prod: id_prod
};

$.get('/change_options?e_id_prod='+id_prod,parametros, function (data) {
var select = $('#select_series'); 
select.empty();

select.append($('<option>', {
    value: '0',
    text: 'Seleccione'
}));

if (!data || $.isEmptyObject(data.productos)) {
  // Verificar si data es nulo o si data.productos está vacío
  
    Swal.fire({
    title: '¡Alerta!',
    text: 'No hay productos disponibles',
    icon: 'error', 
    confirmButtonText: 'Aceptar'
    });

  console.log("Respuesta nula o vacía recibida desde el servidor.");
  return; 
  }

$('#cambio_producto').modal('toggle');
$("#cambio_producto").show();

$.each(data.productos, function (key, value) {

            select.append($('<option>', {
                value: value.ser_id, 
                text: value.ser_sku+'-'+value.ser_no_econo
            }));
        });
});



}

//FUNCION CERRAR MODAL DEL CAMBIO ****************************************************************************************
function cerrar_modal_cambio(){

  $('#cambio_producto').modal('toggle');
  $("#cambio_producto").hide();

}

function almacena_serie_id(){

  var cont_cambio = $('#contador_cambio').val();

  if($('#select_series').val() == 0){
  //Declara id serie anterior
  $('#nueva_serie').val(0);
  var id_serie = $('#serie_id_'+cont_cambio).val();
  }else{
  //Declara id serie nueva
  var id_serie = $('#select_series').val();
  $('#nueva_serie').val(id_serie);
  }


$.ajax({
    type: "POST",
    url: "{{ route('select_new_options') }}",
    data: {
        '_token': '{{ csrf_token() }}',
        'parametro': id_serie
    },
    success: function (data) {

     var num_economico = "";

      if(data.num_economico.length == 1){
        num_economico = "00" + data.num_economico;
      }else if(data.num_economico.length == 2){
        num_economico = "0" + data.num_economico;
      }else{
        num_economico = data.num_economico;
      } 

    $('#ser_serial_number_'+cont_cambio).html("");
    $('#pjtdt_prod_sku_'+cont_cambio).html("");
    $('#ser_no_econo_'+cont_cambio).html("");

    $('#ser_serial_number_'+cont_cambio).html(data.numero_serie);
    $('#pjtdt_prod_sku_'+cont_cambio).html(data.ser_sku);
    $('#ser_no_econo_'+cont_cambio).html(num_economico);

    },
    error: function (xhr, textStatus, errorThrown) {
        console.error('Error en la solicitud AJAX: ' + textStatus);
    }
});

}

//FUNCION GUARDA CAMBIOS *******************************************************************************
function guarda_cambio(){

  var cont_cambio = $('#contador_cambio').val();
  var nueva_serie = $('#nueva_serie').val();

  if(nueva_serie == 0){ //SOLO GUARDA PRODUCTOS

    var id_serie = $('#serie_id_'+cont_cambio).val();

    //alert(id_serie);

    $.ajax({
    type: "POST",
    url: "{{ route('save') }}",
    data: {
        '_token': '{{ csrf_token() }}',
        'parametro': id_serie
    },
    success: function (data) {

      $("#pjtdt_prod_sku_"+cont_cambio).css("color", "#EC7063"); 
      

      Swal.fire({
                title: '¡Alerta!',
                text: 'Producto guardado',
                icon: 'success', 
                confirmButtonText: 'Aceptar'
            });

        console.log(data.mensaje); 

    },
    error: function (xhr, textStatus, errorThrown) {
        console.error('Error en la solicitud AJAX: ' + textStatus);
    }
});

  }else{ //GUARDA LOS CAMBIOS 

    var cont_cambio = $('#contador_cambio').val();
    var id_serie_anterior = $('#serie_id_'+cont_cambio).val();
    var nueva_serie = $('#nueva_serie').val();
    var pjtdt_id = $('#pjtdt_id_'+cont_cambio).val(); 


    //alert("Serie anterior: "+id_serie_anterior+" Nueva Serie: "+nueva_serie+" ID Proyecto: "+pjtdt_id);

    $.ajax({
    type: "POST",
    url: "{{ route('save_change') }}",
    data: {
        '_token': '{{ csrf_token() }}',
        'id_serie_anterior': id_serie_anterior,
        'id_serie_nueva': nueva_serie,
        'id_detalle' : pjtdt_id
    },
    success: function (data) {

      $('#serie_id_'+cont_cambio).val(nueva_serie);

      $("#pjtdt_prod_sku_"+cont_cambio).css("color", "#EC7063");

      Swal.fire({
                title: '¡Alerta!',
                text: 'Producto guardado',
                icon: 'success', 
                confirmButtonText: 'Aceptar'
            });

        console.log(data.mensaje); 

    },
    error: function (xhr, textStatus, errorThrown) {
        console.error('Error en la solicitud AJAX: ' + textStatus);
    }
});



  }



}

    </script>

@stop



@section('css')

@stop

@section('js')

    
@stop