@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')

<div class="card card-primary">
  <div class="card-body">
    <div class="d-flex justify-content-center">  
      <!-- 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>
    <br> 

    <!-- Datos del producto-->
    <div class="row justify-content-center text-center">
    <div class="col-md-6" id="nombre_producto"></div>
    </div>
    <br>
    <div class="row justify-content-center text-center">
    <table class="table table-bordered">
     <tr><td><div id="label_serie"></div></td><td><div id="dato_serie"></div></td></tr>
     <tr><td><div id="label_catalogo"></div></td><td><div id="dato_catalogo"></div></td></tr> 
    </table>
    </div>

    <br>
    <div class="d-flex justify-content-center">  
    Estadísticas del Artículo
</div>
<br>
<div class="row">
    <div class="col-md-8"> <!-- Para dispositivos de pantalla mediana o más grandes -->
        <div style="height:200;width:75%;padding-bottom:20%;">
            <ul class="list-group" id="lista_proyectos"></ul>
        </div>
    </div>
    <div class="col-md-4"> <!-- Para dispositivos de pantalla mediana o más grandes -->
    <br>
        <div id="chartPie" style="height: 300px;"></div>
    </div>
    <!-- Mostrar el gráfico debajo de la lista en dispositivos móviles -->
    <div class="col-12 d-md-none"> <!-- Para dispositivos de pantalla pequeña (móviles) -->
        <div id="chartPieMobile" style="height: 100px;"></div>
    </div>
</div>

<div class="container">
  <div class='row float-center'>
  <a class="btn btn-app" href="/warehouse"><i class="fas fa-door-closed"></i></a>
  </div>
</div>


@stop



@section('css')

@stop

@section('js')
<script>
//ENFOCA CAMPO PARA ESCANEAR *************************************************************************
function escanea_codigo(){
  $('#sku_scan').val("");
  $('#sku_scan').removeAttr("readonly");
  $('#sku_scan').focus();
}

// 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();
 
  $.ajax({
    type: "POST",
    url: "{{ route('show_data_product') }}",
    data: {
      '_token': '{{ csrf_token() }}',
      'sku': sku
    },
    success: function (response) {

      if(response.bandera_busqueda == 1){

      $('#nombre_producto').html("<h4>"+response.datos.prd_name+"</h4>");
      $('#label_serie').html("Número serie: ");
      $('#dato_serie').html(response.datos.ser_serial_number);
      $('#label_catalogo').html("Categoría: ");
      $('#dato_catalogo').html(response.datos.cat_name);

      $('#lista_proyectos').empty();

      var listGroup = $('#lista_proyectos');

      listGroup.append('<li class="list-group-item list-group-item-info">Proyectos</li>');

      $.each(response.lista_proyectos, function (key, value) {

      listGroup.append('<li class="list-group-item">' + value.pjt_name + '</li>');

      });

        /**************** PIE CHART ************/
var pieData = [{
  name: 'Disponible ' + response.c_disponible, // Nombre de la parte
  value: response.disponible, // Valor de la parte
}, {
  name: 'Mantenimiento ' + response.c_mantenimiento, // Nombre de la parte
  value: response.mantenimiento, // Valor de la parte
}, {
  name: 'Renta ' + response.c_renta, // Nombre de la parte
  value: response.renta, // Valor de la parte
}];

var pieOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    textStyle: {
      fontSize: 11,
      fontFamily: 'Roboto, sans-serif'
    }
  },
  legend: {
    orient: 'vertical', // Cambia la orientación de la leyenda a vertical
    left: 'left', // Posición de la leyenda
    data: pieData.map(function(item) {
      return item.name; // Nombre de las partes
    }),
  },
  series: [{
    name: 'Existencias',
    type: 'pie',
    radius: '60%',
    center: ['50%', '50%'],
    data: pieData,
    label: {
      normal: {
        show: false, // No muestres etiquetas en el gráfico
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    markLine: {
      lineStyle: {
        normal: {
          width: 1
        }
      }
    }
  }]
};

var pie = document.getElementById('chartPie');
var pieChart = echarts.init(pie);
pieChart.setOption(pieOption);
$('#chartPie').css('display', 'block');
/** making all charts responsive when resize **/


        console.log(response.datos.prd_name); 
        console.log(response.disponible); 
        console.log(response.mantenimiento); 
        console.log(response.renta); 


      }else{

      $('#nombre_producto').html("");
      $('#label_serie').html("");
      $('#dato_serie').html("");
      $('#label_catalogo').html("");
      $('#dato_catalogo').html("");

      $('#lista_proyectos').empty();
      //$('#chartPie').empty();
      $('#chartPie').css('display', 'none');
      
      Swal.fire({
      title: '¡Alerta!',
      text: 'No se encuentra producto',
      icon: 'error', // Puedes cambiar esto a 'error', 'warning', 'info', etc.
      confirmButtonText: 'Aceptar'
      });

        console.log("SKU No encontrado");
      }

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


  $("#teclado").focus();
}
});

  </script>

    
@stop