@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
  .iv-page {
    --iv-border: #e7e7e9;
    --iv-muted: #697a8d;
    --iv-surface: #f8f9fa;
    --iv-accent: #696cff;
    padding-bottom: 5.5rem;
  }
  .iv-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  .iv-page .page-head h4 { margin: 0; }
  .iv-page .page-head .hint {
    margin: 0.3rem 0 0;
    color: var(--iv-muted);
    font-size: 0.875rem;
    max-width: 40rem;
  }
  .iv-section {
    background: #fff;
    border: 1px solid var(--iv-border);
    border-radius: 0.625rem;
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .iv-section .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--iv-border);
    background: var(--iv-surface);
  }
  .iv-section .sec-head .sec-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: #566a7f;
  }
  .iv-section .sec-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.4rem;
    background: #e7e7ff;
    color: var(--iv-accent);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .iv-section .sec-body { padding: 1.1rem; }
  .iv-section .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 0.3rem;
  }
  .iv-plu-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
  }
  .iv-plu-search .field {
    flex: 1 1 260px;
    min-width: 0;
  }
  .iv-plu-search .hint-inline {
    flex: 0 1 auto;
    font-size: 0.8rem;
    color: var(--iv-muted);
    padding-bottom: 0.55rem;
  }
  .iv-plu-search .input-group {
    display: flex;
    flex-wrap: nowrap;
  }
  .iv-plu-search .form-control {
    min-height: 42px;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0.02em;
  }
  .iv-plu-search .input-group-text {
    min-height: 42px;
  }
  .iv-plu-card {
    margin-top: 1rem;
    border: 1px solid var(--iv-border);
    border-radius: 0.65rem;
    background: linear-gradient(180deg, #fafbfd 0%, #fff 55%);
    overflow: hidden;
  }
  .iv-plu-card .plu-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--iv-border);
    background: #fff;
  }
  @media (min-width: 768px) {
    .iv-plu-card .plu-head {
      grid-template-columns: 140px 1fr;
      align-items: end;
    }
  }
  .iv-plu-card .plu-head .lbl,
  .iv-plu-card .plu-metrics .lbl,
  .iv-plu-card .plu-add .lbl {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--iv-muted);
    font-weight: 650;
    margin-bottom: 0.3rem;
  }
  .iv-plu-card .plu-head .form-control {
    background: #fff;
    border-color: #dde0e4;
    font-weight: 750;
    color: #566a7f;
    min-height: 40px;
  }
  .iv-plu-card .plu-head #plus_ {
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    text-align: center;
  }
  .iv-plu-card .plu-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.85rem 1rem;
  }
  @media (min-width: 768px) {
    .iv-plu-card .plu-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .iv-plu-card .metric {
    border: 1px solid var(--iv-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
  }
  .iv-plu-card .metric .form-control {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none !important;
    font-weight: 800;
    font-size: 1rem;
    color: #566a7f;
    min-height: auto;
  }
  .iv-plu-card .metric.is-accent {
    border-color: #cfd0ff;
    background: #f7f7ff;
  }
  .iv-plu-card .metric.is-accent .form-control { color: var(--iv-accent); }
  .iv-plu-card .plu-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px dashed var(--iv-border);
    background: #fff;
  }
  .iv-plu-card .plu-add .qty-field {
    flex: 0 1 160px;
  }
  .iv-plu-card .plu-add .btns {
    display: flex;
    gap: 0.45rem;
    flex: 1 1 auto;
  }
  .iv-plu-card .plu-add .btn {
    min-height: 40px;
  }
  .iv-import {
    background: linear-gradient(135deg, #f5f5ff 0%, #ffffff 65%);
    border: 1px solid #cfd0ff;
  }
  .iv-import .sec-head {
    background: #eef0ff;
    border-bottom-color: #cfd0ff;
  }
  .iv-import .sec-step {
    background: #fff;
  }
  .iv-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .iv-kpi {
    border: 1px solid var(--iv-border);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    background: #fff;
  }
  .iv-kpi.accent {
    border-color: #cfd0ff;
    background: #f8f8ff;
  }
  .iv-kpi .lbl {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--iv-muted);
    font-weight: 650;
    margin-bottom: 0.25rem;
  }
  .iv-kpi .val {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 750;
    color: #566a7f;
  }
  .iv-kpi.accent .val { color: var(--iv-accent); }
  .iv-table-wrap {
    border: 1px solid var(--iv-border);
    border-radius: 0.5rem;
    overflow: auto;
    max-height: 480px;
  }
  .iv-table-wrap table { margin-bottom: 0; }
  .iv-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f3f4f6 !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--iv-muted);
    white-space: nowrap;
  }
  .iv-table-wrap tbody td {
    vertical-align: middle;
    font-size: 0.875rem;
  }
  .iv-table-wrap .form-control {
    min-width: 90px;
  }
  .iv-empty td {
    text-align: center;
    color: var(--iv-muted);
    font-size: 0.85rem;
    padding: 1.5rem 0.75rem !important;
    font-style: italic;
  }
  .iv-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: rgba(255,255,255,0.96);
    border-top: 1px solid var(--iv-border);
    backdrop-filter: blur(8px);
    padding: 0.75rem 1rem;
  }
  /* El botón subir del layout queda detrás de la barra fija; lo subimos */
  #scrollToTopBtn {
    bottom: 5.75rem !important;
    right: 1.25rem !important;
    z-index: 1040 !important;
  }
  .iv-actions-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .iv-actions .summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }
  .iv-actions .summary .item {
    font-size: 0.95rem;
    font-weight: 700;
    color: #566a7f;
    margin: 0;
  }
  .iv-actions .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  @media (min-width: 1200px) {
    .layout-menu-fixed .iv-actions { left: 16.25rem; }
  }
  .layout-menu-collapsed .iv-actions { left: 5.25rem; }
  #mensajes_diferencia .alert {
    margin-bottom: 0.5rem;
  }
</style>

<div class="iv-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Ingreso de</span> Venta</h4>
      <p class="hint">Defina fecha y turno, agregue productos por PLU o importe un archivo TXT, revise el detalle y guarde.</p>
    </div>
  </div>

  {{-- 1. Datos del ingreso --}}
  <div class="iv-section">
    <div class="sec-head">
      <h5 class="sec-title"><span class="sec-step">1</span> Datos del ingreso</h5>
    </div>
    <div class="sec-body">
      <input type="hidden" class="form-control" id="id_ingreso" name="id_ingreso"/>
      <div class="row g-3">
        <div class="col-6 col-md-3 col-xl-2">
          <label class="form-label" for="fecha_ingreso">Fecha</label>
          <input type="date" class="form-control" id="fecha_ingreso" name="fecha_ingreso" value="{{ date('Y-m-d'); }}" />
        </div>
        <div class="col-6 col-md-3 col-xl-2">
          <label class="form-label" for="turno_venta">Turno</label>
          <select name="turno_venta" id="turno_venta" class="form-select contacts">
            <option value="">Seleccione</option>
            <option value="MAÑANA">Mañana</option>
            <option value="TARDE">Tarde</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  {{-- 2. Agregar producto --}}
  <div class="iv-section">
    <div class="sec-head">
      <h5 class="sec-title"><span class="sec-step">2</span> Agregar producto (PLU)</h5>
      <small class="text-muted">Enter en PLU para buscar · Enter en cantidad para agregar</small>
    </div>
    <div class="sec-body">
      <div class="iv-plu-search">
        <div class="field">
          <label class="form-label" for="plus">Buscar PLU</label>
          <div class="input-group">
            <span class="input-group-text"><i class="bx bx-barcode"></i></span>
            <input type="text" class="form-control" id="plus" name="plus" placeholder="Código PLU + Enter" autocomplete="off"/>
          </div>
        </div>
        <div class="hint-inline"><i class="bx bx-keyboard"></i> Escriba el código y pulse Enter</div>
      </div>

      <div class="iv-plu-card">
        <div class="plu-head">
          <div>
            <span class="lbl">PLU</span>
            <input type="text" class="form-control" id="plus_" name="plus_" placeholder="—" disabled/>
            <input type="hidden" id="plus_id" name="plus_id"/>
          </div>
          <div>
            <span class="lbl">Nombre</span>
            <input type="text" class="form-control text-uppercase" id="nombre_" name="nombre_" placeholder="—" disabled/>
          </div>
        </div>

        <div class="plu-metrics">
          <div class="metric">
            <span class="lbl">Precio carta</span>
            <input type="text" class="form-control form-control-sm" id="p_carta_" name="p_carta_" placeholder="—" disabled/>
          </div>
          <div class="metric">
            <span class="lbl">Costo total</span>
            <input type="text" class="form-control form-control-sm" id="costo_total_" name="costo_total_" placeholder="—" disabled/>
          </div>
          <div class="metric">
            <span class="lbl">Punto utilidad</span>
            <input type="text" class="form-control form-control-sm" id="puntos_utilidad_" name="puntos_utilidad_" placeholder="—" disabled/>
          </div>
          <div class="metric is-accent">
            <span class="lbl">Precio venta</span>
            <input type="text" class="form-control form-control-sm" id="precio_venta_determinado_" name="precio_venta_determinado_" placeholder="—" disabled/>
          </div>
        </div>

        <div class="plu-add">
          <div class="qty-field">
            <label class="lbl" for="cantidad">Cantidad</label>
            <input type="text" class="form-control" id="cantidad" name="cantidad" placeholder="0"/>
          </div>
          <div class="btns">
            <button class="btn btn-primary" type="button" onClick="agregar_detalle();">
              <i class="bx bx-plus"></i> Agregar a la venta
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- 3. Importar archivo --}}
  <div class="iv-section iv-import">
    <div class="sec-head">
      <h5 class="sec-title"><span class="sec-step">3</span> Importar archivo de venta</h5>
    </div>
    <div class="sec-body">
      <form id="archivoForm" enctype="multipart/form-data">
        <div class="row g-3 align-items-end">
          <div class="col-md-6 col-xl-5">
            <label for="archivo" class="form-label">Archivo .TXT</label>
            <input type="file" name="archivo" id="archivo" class="form-control" accept=".txt" required>
          </div>
          <div class="col-auto">
            <button type="button" id="procesarArchivoBtn" class="btn btn-primary">
              <i class="bx bx-upload"></i> Procesar
            </button>
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-outline-secondary" id="limpiarDetallesBtn">
              <i class="bx bx-eraser"></i> Limpiar detalles
            </button>
          </div>
        </div>
        <div class="row mt-3" id="mensajes_diferencia"></div>
      </form>
    </div>
  </div>

  {{-- Totales superiores (ids preservados) --}}
  <div class="row g-3 mb-3">
    <div class="col-md-6">
      <div class="iv-kpis">
        <div class="iv-kpi">
          <span class="lbl">Registros</span>
          <p class="val" id="numero_registros_2">Nº Registros: 0</p>
        </div>
        <div class="iv-kpi accent">
          <span class="lbl">Total venta</span>
          <p class="val" id="total_global_2">Total: $0</p>
        </div>
      </div>
    </div>
  </div>

  {{-- 4. Detalle --}}
  <div class="iv-section">
    <div class="sec-head">
      <h5 class="sec-title"><span class="sec-step">4</span> Detalle de venta</h5>
    </div>
    <div class="sec-body">
      <div class="iv-table-wrap table-responsive">
        <table class="table table-sm table-hover text-center mb-0">
          <thead>
            <tr>
              <th>PLU</th>
              <th>Nombre</th>
              <th>Cantidad</th>
              <th>Precio venta</th>
              <th>Precio total</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="listado_detalle"></tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- Totales inferiores (ids preservados para JS) --}}
  <div class="d-none">
    <h4 id="numero_registros">Nº Registros: 0</h4>
    <h4 id="total_global">Total: $0</h4>
  </div>

  <div class="iv-actions">
    <div class="iv-actions-inner">
      <div class="summary">
        <p class="item" id="iv_resumen_registros">0 registros</p>
        <p class="item" id="iv_resumen_total">$0</p>
      </div>
      <div class="btns">
        <button type="button" class="btn btn-outline-secondary" onClick="pre_limpiar();">
          <i class="bx bx-x"></i> Cancelar
        </button>
        <button type="button" class="btn btn-primary" onClick="guardar();">
          <i class="bx bx-save"></i> Guardar venta
        </button>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
    $.validator.setDefaults({
        ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    cargar_validaciones_custom();

    var plus = {!! $plus !!};
    var ingresoVenta = {!! $ingresoVenta !!};
    var ingresoVentaDetalle = {!! $ingresoVentaDetalle !!};
    var listado_detalle = [];

    const formato = {
        minimumFractionDigits: 0,
        maximumFractionDigits: 3,
    };

    listar_detalles();

    $(document).ready(function(){
        
        if(ingresoVenta){
            $('#id_ingreso').val(ingresoVenta.id);
            $('#fecha_ingreso').val(ingresoVenta.fecha_ingreso);
            $('#turno_venta').val(ingresoVenta.turno_venta);
            
            $.each(ingresoVentaDetalle,function(key,value){
                
                var plus_seleccionado = cargar_plus(parseInt(value.id_plus));
                console.log(plus_seleccionado);

                listado_detalle.push({
                    id : value.id_plus,
                    plus :  value.plus_codigo_snapshot || (plus_seleccionado ? plus_seleccionado.plus : ''),
                    nombre : value.plus_nombre_snapshot || (plus_seleccionado ? plus_seleccionado.nombre : ''),
                    cantidad : (parseFloat(value.cantidad)).toFixed(0),
                    precio_venta : (parseInt(value.precio_venta_snapshot || value.precio_venta)).toFixed(0),
                    precio_venta_total : (parseInt(value.precio_total)).toFixed(0)
                });
        
                listar_detalles();
            });
            
        }
    });
    
    function cargar_plus(id) {
        // Recorremos el objeto para encontrar el elemento con el id proporcionado
        for (var clave in plus) {
            if (plus.hasOwnProperty(clave)) {
                if (plus[clave].id === id) {
                    return plus[clave]; // Devolvemos el elemento encontrado
                }
            }
        }
    
        // Si no se encontró ningún elemento con el id, puedes devolver null u otra indicación.
        return null;
    }

    
    $("#plus").keydown(function(event){
        if (event.keyCode === 13) {
          event.preventDefault();
          
         if($('#plus').val() == ''){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe ingresar un Plus !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

            $.ajax({
                url: '{{ URL::to('/') }}/plus/cargarPlus',
                type: 'POST',
                data: { plus : $(this).val() },
                async: false,
                success: function(response){
                    console.log(response);
                    if(response.response){
                        selecionar_item(response.data);
                        $("#cantidad").focus();
                    }else{
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: "¡ Plus NO encontrado !",
                            showConfirmButton: true
                        });
                        return;
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    });

    function selecionar_item(item){
        $('#plus_id').val(item.plus.id);
        $('#plus_').val(item.plus.plus);
        $('#nombre_').val(item.plus.nombre);
        $('#p_carta_').val(Math.round(item.plus.p_carta));
        $('#puntos_utilidad_').val(item.plus.puntos_utilidad);
        $('#precio_venta_determinado_').val(Math.round(item.plus.p_carta));
        
        var costo_total_ = 0;
        $.each(item.plusDetalle, function(index, value){
            costo_total_ += Math.round(value.cantidad * value.costo_x_unidad);
        });
        $('#costo_total_').val(costo_total_);
    }
    
    $('#procesarArchivoBtn').click(function() {
        var fileInput = $('#archivo');
        var file = fileInput[0].files[0];
        
        // Verificar si se seleccionó un archivo
        if (!file) {
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: 'Por favor, selecciona un archivo.',
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }
        
        // Obtener la extensión del archivo
        var fileName = file.name;
        var fileExtension = fileName.split('.').pop();
        
        // Verificar si la extensión es TXT
        if (fileExtension.toLowerCase() !== 'txt') {
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: 'Por favor, selecciona un archivo con formato TXT.',
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }
        
        // El archivo tiene el formato válido, continuar con el envío mediante AJAX
        var formData = new FormData($('#archivoForm')[0]);
        
        $.ajax({
            url: '{{ URL::to('/') }}/ingreso_venta/procesar-archivo',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // Manejar la respuesta del servidor (JSON)
                 $('#mensajes_diferencia').empty();
                console.log(response);
                if(response.error){
                    Swal.fire({
                        position: 'top-end',
                        icon: 'error',
                        title: response.error,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    return;
                }
                $.each(response,function(key,value){
                    listado_detalle.push({
                        id : value.id,
                        plus :  value.plus,
                        nombre : value.nombre,
                        cantidad : value.cantidad,
                        precio_venta : value.precio_venta,
                        precio_venta_total : value.precio_venta_total,
                        precio_archivo : value.precio_archivo
                    });
                    
                    if (value.precio_venta_total !== value.precio_archivo) {
                        const diferencia = value.precio_venta_total - value.precio_archivo;
                        const mensaje = `
                            <a href="#plu-${value.plus}" class="col-md-12 mb-2">
                                <div class="alert alert-danger d-flex flex-column align-items-start">
                                    <strong class="mb-1">Diferencia detectada:</strong>
                                    <ul class="mb-0">
                                        <li><strong>Producto:</strong> ${value.plus} - ${value.nombre}</li>
                                        <li><strong>Total Ventas:</strong> $${formatear(value.precio_venta_total)}</li>
                                        <li><strong>Total Archivo:</strong> $${formatear(value.precio_archivo)}</li>
                                        <li><strong>Diferencia:</strong> $${formatear(diferencia)}</li>
                                    </ul>
                                </div>
                            </a>`;
                        $('#mensajes_diferencia').append(mensaje);
                    }
                });
                listar_detalles();
                $('#archivo').val('');
            },
            error: function(xhr) {
                // Manejar el error en la solicitud AJAX
                console.log(xhr.responseText);
            }
        });
    });
    
    // Función para formatear valores con separadores de miles
    function formatear(valor) {
        return valor.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }
    
    $('#limpiarDetallesBtn').click(function() {
        // Mostrar el cuadro de diálogo de confirmación
        Swal.fire({
            title: '¿Estás seguro?',
            text: '¿Deseas eliminar los detalles?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Si el usuario hace clic en "Sí", ejecutar la función limpiar_detalles()
                limpiar_detalles();
            }
        });
    });

    // ------------------------------------------------
    // ------------------------------------------------

    function agregar_detalle(){
        if($('#plus_id').val() == ''){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe seleccionar un Plus !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

        if($('#cantidad').val() == '' || $('#cantidad').val()*1 <= 0){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Cantidad debe ser mayor a 0 !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }
        listado_detalle.push({
            id : $('#plus_id').val(),
            plus :  $('#plus_').val(),
            nombre : $('#nombre_').val(),
            cantidad : $('#cantidad').val(),
            precio_venta : $('#precio_venta_determinado_').val(),
            precio_venta_total : $('#precio_venta_determinado_').val() * $('#cantidad').val()
        });

        listar_detalles();
        
        $('#plus_id').val("");
        $('#plus').val("");
        $('#cantidad').val('');
        $('#plus_').val('');
        $('#nombre_').val('');
        $('#p_carta_').val('');
        $('#costo_total_').val('');
        $('#puntos_utilidad_').val('');
        $('#precio_venta_determinado_').val('');
    }
    
    $("#cantidad").keydown(function(event){
        if (event.keyCode === 13) {
            event.preventDefault();
            agregar_detalle();
            $("#plus").focus();
        }
    });

    function actualizar(index,tipo,valor){
        listado_detalle[index][tipo] = valor;
        listar_detalles();
    }

    function eliminar_detalle(index){
        listado_detalle.splice(index, 1);
        listar_detalles();
    }

        function listar_detalles(){
        listado_detalle.sort(function(a, b) {
            return a.plus - b.plus;
        });

        var html = "";
        if (!listado_detalle.length) {
            html = `<tr class="iv-empty"><td colspan="6">Sin productos. Busque un PLU o importe un archivo TXT.</td></tr>`;
        }
        $.each(listado_detalle,function(key,value){
            html += `<tr>
                        <td id="plu-${value.plus}" class="fw-semibold">${value.plus}</td>
                        <td class="text-start text-uppercase">${value.nombre}</td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-center" id="cant_${key}" name="cant_${key}" onChange="actualizar(${key},'cantidad',this.value);" placeholder="Cantidad" value="${value.cantidad}"/>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-end" id="precio_venta_${key}" name="precio_venta_${key}" onChange="actualizar(${key},'precio_venta',this.value);" placeholder="Precio Venta" value="${value.precio_venta}"/>
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm text-end totales" id="precio_venta_total_${key}" name="precio_venta_total_${key}" onChange="actualizar(${key},'precio_venta_total',this.value);" placeholder="Precio Venta Total" value="${value.precio_venta_total}"/>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-icon btn-outline-danger" title="Eliminar" onclick="eliminar_detalle(${key})">
                                <i class='bx bx-trash'></i>
                            </button>
                        </td>
                    </tr>`;
        });

        $("#listado_detalle").html(html);
        calcular_totales();
    }

        function calcular_totales(){

        var total_neto = 0;
        var cantidad = 0;
        $('.totales').each(function() {
            total_neto += Math.round($(this).val()*1);
            cantidad++;
        });

        var regTxt = "Nº Registros: "+(cantidad).toLocaleString("es-ES", formato);
        var totTxt = "Total: $"+(total_neto).toLocaleString("es-ES", formato);

        $("#numero_registros").html(regTxt);
        $("#total_global").html(totTxt);
        $("#numero_registros_2").html(regTxt);
        $("#total_global_2").html(totTxt);

        $("#iv_resumen_registros").text(cantidad.toLocaleString("es-CL") + (cantidad === 1 ? " registro" : " registros"));
        $("#iv_resumen_total").text("$" + total_neto.toLocaleString("es-CL"));
    }

    function limpiar(){
        listado_detalle = [];

        $('#fecha_ingreso').val("{{ date('Y-m-d'); }}");
        $('#turno_venta').val('');
        
        $('#id_ingreso').val('');
        $('#plus_id').val('');
        $('#plus').val('');
        $('#plus_').val('');
        $('#nombre_').val('');
        $('#p_carta_').val('');
        $('#costo_total_').val('');
        $('#puntos_utilidad_').val('');
        $('#precio_venta_determinado_').val('');

        listar_detalles();
    }
    
    function limpiar_detalles(){
        listado_detalle = [];
        listar_detalles();
    }
    
    function pre_limpiar(){
        Swal.fire({
            title: '¿Estás seguro?',
            text: '¿Deseas eliminar el ingreso de ventas?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Si el usuario hace clic en "Sí", ejecutar la función limpiar_detalles()
                limpiar();
            }
        });
    }
    
    function guardar(){

        var fecha_ingreso = $('#fecha_ingreso').val();
        var turno_venta = $('#turno_venta').val();
        var id_ingreso = $('#id_ingreso').val();

        if(fecha_ingreso == ''){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe Ingresar una Fecha de Ingreso !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

        if(turno_venta == ''){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe seleccionar un Turno !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

        if(listado_detalle.length === 0){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe seleccionar un Detalle !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

        var parametro = {
            id_ingreso : id_ingreso,
            fecha_ingreso : fecha_ingreso,
            turno_venta : turno_venta,
            detalles: listado_detalle,
        };

        $.ajax({
                url: '{{ URL::to('/') }}/ingreso_venta/guardar',
                type: 'POST',
                data: parametro,
                success: function(response){
                    console.log(response);

                    if(response.response){
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: '¡Excelente! La información ha sido guardada correctamente.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        limpiar();
                    }else{
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
    }
</script>
@endsection