@extends("theme.sneat.admin")
@section('contenido')
<style>
@keyframes alertPulse {
  0%,100% { outline: 2px solid rgba(220,53,69,.95); outline-offset: -4px; }
  50%     { outline: 2px solid rgba(220,53,69,.20); outline-offset: -4px; }
}
tr.blink-border { animation: alertPulse 1.05s linear infinite; }

.badge-missing {
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  background: rgba(220,53,69,.08);
  color:#dc3545;
  font-size:.75rem;
  font-weight:600;
}
#tabla th.col-punto,
#tabla td.col-punto {
  width: 5.5rem;
  max-width: 6rem;
  white-space: nowrap;
  font-size: .875rem;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">

<meta name="csrf-token" content="{{ csrf_token() }}" />

<h4 class="fw-bold py-2"><span class="text-muted fw-light">Carta - PLU</span></h4>

<div class="card">
  <div class="card-header p-3">
    @unless($usuario_inventario ?? false)
    <div class="d-flex flex-row-reverse">
      <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <button type="button" class="btn btn-outline-secundary" onclick="crear();">
          <i class='tf-icons bx bx-plus-medical'></i>
        </button>
        <div class="btn-group" role="group">
          <button id="btnGroupDrop1" type="button" class="btn btn-outline-secundary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Exportar
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" id="tabla-excel" onclick="$('.tabla_excel').trigger('click');">Excel</a>
            <a class="dropdown-item" id="tabla-pdf" onclick="$('.tabla_pdf').trigger('click');">PDF</a>
          </div>
        </div>
      </div>
    </div>
    @endunless
  </div>

  <div class="table-responsive-xxl text-nowrap" style="min-height:700px;">
    <table id='tabla' class="table table-bordered border-secundary table-sm table-striped w-100">
      <thead class="table-light">
        <tr>
          <th class="text-center">Plus</th>
          <th class="text-center">Nombre</th>
          <th class="text-center col-punto">Punto Base</th>
          <th class="text-center col-punto">Punto Real</th>
          <th class="text-center">Precio Carta</th>
          <th class="text-center">Acciones</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

<div class="modal fade" id="modalCenter" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">TITULO</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div class="row">
          <div class="col-xl">

            <div class="card mb-4">
              <div class="card-header d-flex justify-content-between align-items-center">
                <small class="text-muted float-end">Datos Generales</small>
              </div>
              <div class="card-body">
                <form action="post" id="form" name="form">
                  <input type="hidden" name="accion_form" id="accion_form">
                  <input type="hidden" name="id_form" id="id_form">

                  <div class="row">
                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="plus">Plus</label>
                      <input type="text" class="form-control" id="plus" name="plus" placeholder="Plus" autofocus/>
                    </div>

                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="p_carta">Precio Carta</label>
                      <input type="text" class="form-control" id="p_carta" name="p_carta" placeholder="Precio Carta"/>
                    </div>

                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="puntos_utilidad">Punto Base</label>
                      <input type="text" class="form-control" id="puntos_utilidad" name="puntos_utilidad" onChange="calcular_neto();" placeholder="Punto Base"/>
                    </div>

                    <div class="mb-3 col-md-6">
                      <label class="form-label" for="nombre">Nombre</label>
                      <input type="text" class="form-control text-uppercase" id="nombre" name="nombre" placeholder="Nombre"/>
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <div class="card mb-4">
              <div class="card-header d-flex justify-content-between align-items-center">
                <small class="text-muted float-end">Detalles</small>
              </div>

              <div class="card-body">
                <form action="post" id="form-detalle" name="form-detalle">
                  <div class="row">
                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="cantidad_unidad">Cant. o Uni.</label>
                      <input type="text" class="form-control" id="cantidad_unidad" name="cantidad_unidad"
                             placeholder="Cant. o Uni."
                             onkeyup="this.value = this.value.replace(/,/g, '.'); calcular_total_p_costo();"/>
                    </div>

                    <div class="mb-3 col-md-5">
                      <label class="form-label" for="item_selector">Detalle (Producto / Preparación)</label>
                      <select class="form-select" id="item_selector" name="item_selector"></select>
                    </div>

                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="costo_x_uni">Costo x Uni.</label>
                      <input type="text" class="form-control" id="costo_x_uni" name="costo_x_uni" placeholder="Costo x Uni" disabled/>
                    </div>

                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="total_p_costo">Total P/Costo</label>
                      <input type="text" class="form-control" readonly id="total_p_costo" name="total_p_costo" placeholder="Total P/Costo"/>
                    </div>

                    <div class="mb-3 col-md-1">
                      <label class="form-label" for="">&nbsp;</label>
                      <button type="submit" class="btn btn-success"><i class='bx bx-save'></i></button>
                    </div>
                  </div>

                  <div class="divider mb-1">
                    <div class="divider-text"><i class="bx bx-list-ul"></i></div>
                  </div>
                </form>

                <div class="row">
                  <div class="col-lg-12 mb-4 mb-xl-0 mt-3">
                    <div class="card">
                      <div class="table-responsive text-nowrap">
                        <table class="table table-sm table-striped text-center">
                          <thead>
                            <tr>
                              <th>Cant. o Uni.</th>
                              <th>Detalle</th>
                              <th>Tipo</th>
                              <th>Costo x Uni.</th>
                              <th>Total P/Costo</th>
                              <th>Eliminar</th>
                            </tr>
                          </thead>
                          <tbody id="listado_detalle"></tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <div class="mb-0">
              <div class="card-body p-0">
                <div class="row">
                  <div class="mb-0 col-md-12">
                    <h4 class="text-center mb-1" id="precio_costo">Total Precio Costo General: $0</h4>
                  </div>
                  <div class="mb-0 col-md-12">
                    <h4 class="text-center mb-0" id="total_neto">Precio Venta Determinado: $0</h4>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" onClick="$('#form').submit();">Guardar</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
      </div>

    </div>
  </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
/**
 * Número estilo Chile: miles con punto (13.800), decimal con punto (2.5) o coma (2,5).
 */
function num(v){
  if (v === null || v === undefined) return 0;
  let s = String(v).trim();
  if (s === '') return 0;
  if (s.includes(',') && s.includes('.')) {
    s = s.replace(/\./g, '').replace(',', '.');
  } else if (s.includes(',') && !s.includes('.')) {
    s = s.replace(',', '.');
  } else if (s.includes('.')) {
    const parts = s.split('.');
    // Un punto + 3 dígitos después: miles (25.400 → 25400) salvo parte entera solo ceros (0.125).
    if (parts.length === 2 && parts[1].length === 3) {
      const intPart = parts[0];
      const soloCeros = intPart === '' || /^0+$/.test(intPart);
      if (!soloCeros) {
        s = parts[0] + parts[1];
      }
    } else if (parts.length > 2) {
      const lastLen = parts[parts.length - 1].length;
      if (lastLen === 3) {
        let ok = true;
        for (let i = 0; i < parts.length - 1; i++) {
          const p = parts[i];
          if (p === '' || p.length > 3) { ok = false; break; }
        }
        if (ok) s = parts.join('');
      }
    }
  }
  s = s.replace(/[^0-9.\-]/g, '');
  const n = parseFloat(s);
  return isNaN(n) ? 0 : n;
}
function clamp0(n){ return (isNaN(n) || n < 0) ? 0 : n; }
function round3(n){
  return Math.round((Number(n) + Number.EPSILON) * 1000) / 1000;
}
function fixed3(n){
  const v = round3(n);
  return Number.isFinite(v) ? v.toFixed(3) : '0.000';
}
function int0(n){
  const v = (typeof n === 'number' && isFinite(n)) ? n : num(n);
  return Math.round(clamp0(v));
}
function clpInt(n){
  return int0(n).toLocaleString('es-CL', { maximumFractionDigits: 0 });
}
function clpExportTexto(n){
  const v = int0(n);
  return v.toLocaleString('es-CL', { maximumFractionDigits: 0 });
}
</script>

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

const usuarioInventario = @json($usuario_inventario ?? false);

var items = {!! $items !!}; // [{tipo,id,nombre,costo}, ...]

const titulo_singular = "Plus";
const titulo_pural = "Plus";
var listado_detalle = [];

cargar_validaciones_custom();

function cargarItemsSelector(){
  const $sel = $('#item_selector');
  $sel.empty().append('<option value="" selected>— Seleccione —</option>');

  const productos = items.filter(x => x.tipo === 'PRODUCTO');
  const preps     = items.filter(x => x.tipo === 'PREPARACION');

  if(productos.length){
    $sel.append(`<optgroup label="Productos"></optgroup>`);
    productos.forEach(obj => {
      $sel.find('optgroup[label="Productos"]').append(
        $('<option></option>')
          .attr('value', obj.tipo + ':' + obj.id)
          .attr('data-tipo', obj.tipo)
          .attr('data-id', obj.id)
          .attr('data-costo', obj.costo)
          .text(obj.nombre)
      );
    });
  }

  if(preps.length){
    $sel.append(`<optgroup label="Preparaciones"></optgroup>`);
    preps.forEach(obj => {
      $sel.find('optgroup[label="Preparaciones"]').append(
        $('<option></option>')
          .attr('value', obj.tipo + ':' + obj.id)
          .attr('data-tipo', obj.tipo)
          .attr('data-id', obj.id)
          .attr('data-costo', obj.costo)
          .text(obj.nombre)
      );
    });
  }
}

function initSelect2(){
  $('#item_selector').select2({
    theme: 'bootstrap-5',
    width: '100%',
    placeholder: '— Seleccione —',
    dropdownParent: $('#modalCenter'),
    allowClear: true
  });
}

cargarItemsSelector();
initSelect2();

$('#item_selector').on('change', function(){
  const $opt = $('#item_selector option:selected');
  const costo = num($opt.attr('data-costo'));
  $('#costo_x_uni').val(int0(costo));
  calcular_total_p_costo();
});

$.validator.addMethod("uniquePlus", function(value, element){
  let respuesta = $.ajax({
    url: "{{ URL::to('/') }}/plus/detallePlus",
    type: "POST",
    data: { plus: value },
    dataType: "json",
    async: false
  });
  return respuesta.responseJSON.valid;
}, "Este Plus ya está en uso.");

$.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') }
});

// TABLA
var table = $('#tabla').DataTable({
  processing: true,
  serverSide: true,
  lengthMenu: [[50, 100, 500, 1000],[50, 100, 500, "1000"]],
  dom: "rtB<'row mx-0 '<'col-sm-6'l><'col-sm-6'p>>",
  ajax: "{{ URL::to('/') }}/plus/listado",
  columns: [
    { data: 'plus', 'class':'text-center' },
    { data: 'nombre', 'class':'text-center' },
    { data: 'puntos_utilidad', className: 'text-center col-punto' },
    { data: 'punto_real', className: 'text-center col-punto' },
    {
      data: 'p_carta',
      className: 'text-center',
      render: function (data, type, row) {
        if (type === 'display') {
          return data ?? '—';
        }
        if (type === 'excel') {
          if (row.p_carta_val == null || row.p_carta_val === '') return '';
          return row.p_carta_val;
        }
        if (type === 'pdf') {
          if (row.p_carta_val == null || row.p_carta_val === '') return '—';
          return '$' + clpExportTexto(row.p_carta_val);
        }
        if (type === 'export') {
          if (row.p_carta_val == null || row.p_carta_val === '') return '—';
          return row.p_carta_val;
        }
        if (type === 'sort' || type === 'filter') {
          return row.p_carta_val != null ? row.p_carta_val : 0;
        }
        return data;
      }
    },
    {
      "data": null,
      "width": "100px",
      "className" : "text-center",
      "render": function(data, type, row, meta) {
        if (usuarioInventario) {
          return `
          <div class="dropdown">
            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="bx bx-dots-vertical-rounded"></i>
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:exportarPdfSinPrecio(${row.id});"><i class="tf-icons bx bx-download me-1"></i> Exportar PDF sin precios</a>
            </div>
          </div>`;
        }
        return `
          <div class="dropdown">
            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="bx bx-dots-vertical-rounded"></i>
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:ver(${row.id});"><i class="tf-icons bx bx-show-alt me-1"></i> Ver</a>
              <a class="dropdown-item" href="javascript:editar(${row.id});"><i class="tf-icons bx bx-edit me-1"></i> Editar</a>
              <a class="dropdown-item" href="javascript:eliminar(${row.id},${row.plus});"><i class="tf-icons bx bx-x me-1"></i> Eliminar</a>
              <a class="dropdown-item" href="javascript:exportarPdf(${row.id});"><i class="tf-icons bx bx-download me-1"></i> Exportar PDF</a>
              <a class="dropdown-item" href="javascript:exportarPdfSinPrecio(${row.id});"><i class="tf-icons bx bx-download me-1"></i> Exportar PDF Sin Precios</a>
            </div>
          </div>`;
      },
      "orderable": false
    },
  ],
  buttons: [
    { extend:'excel', footer:true, exportOptions:{ columns:'th:not(:last-child)', orthogonal:'excel' }, className:'tabla_excel d-none' },
    { extend:'pdfHtml5', footer:true, exportOptions:{ columns:'th:not(:last-child)', orthogonal:'pdf' }, className:'tabla_pdf d-none' }
  ],
  language: { "sProcessing":"Procesando...", "sLengthMenu":"Mostrar _MENU_ registros", "sZeroRecords":"No se encontraron resultados",
    "sEmptyTable":"Ningún dato disponible en esta tabla", "sInfo":"Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty":"Mostrando registros del 0 al 0 de un total de 0 registros", "sInfoFiltered":"(filtrado de un total de _MAX_ registros)",
    "sSearch":"Buscar:", "sLoadingRecords":"Cargando...",
    "oPaginate":{ "sFirst":"Primero","sLast":"Último","sNext":"Siguiente","sPrevious":"Anterior" }
  },
  initComplete: function(){ $('.dt-buttons').hide(); }
});

$('#tabla thead tr').clone(true).find('th').removeClass('sorting_asc sorting_asc sorting').off('click').end().insertBefore('#tabla thead tr');
$('#tabla thead tr:eq(0) th').each(function (i){
  var title = $(this).text();
  if(title != 'Acciones'){
    $(this).html('<input type="text" class="form-control" placeholder="'+title+'" />');
    $('input', this).on('keyup change', function(){
      if(table.column(i).search() !== this.value){
        table.column(i).search(this.value).draw();
      }
    });
  } else {
    $(this).html('');
  }
});

function exportarPdf(id){ window.location.href = `plus/generar-pdf/${id}`; }
function exportarPdfSinPrecio(id){ window.location.href = `plus/generar-pdf-sin-precio/${id}`; }
// FIN TABLA

// ACCIONES
crear = function(){
  limpiar_form();
  $(".modal-title").html("<strong>Crear "+titulo_singular+"</strong>");
  $("#accion_form").val("crear");
  $("#id_form").val('');
  $("#form-detalle").show();
  $(".modal-footer").show();
  $('#modalCenter').modal('show');

    $('#modalCenter').on('shown.bs.modal', function () {
        $("#plus").focus();
        $('#item_selector').select2('destroy');
        initSelect2();
    });

  $('#plus').rules('add', { required:true, number:true, uniquePlus:true });
};

ver = function(id){
  limpiar_form();
  $("#accion_form").val("ver");
  $("#id_form").val(id);
  $("#form-detalle").hide();
  $(".modal-footer").hide();

  $.ajax({
    url: '{{ URL::to('/') }}/plus/detalle',
    type: 'POST',
    data: {id},
    success: function(response){
      listado_detalle = [];

      $(".modal-title").html("<strong>Ver "+titulo_singular+" #"+response.plus.plus.toString()+"</strong>");
      $('#plus').val(response.plus.plus).prop('disabled',true);
      $('#p_carta').val(parseFloat(response.plus.p_carta).toLocaleString("es-ES", formato).replace(',', '.')).prop('disabled',true);
      $('#puntos_utilidad').val(parseFloat(response.plus.puntos_utilidad).toLocaleString("es-ES", formato).replace(',', '.')).prop('disabled',true);
      $('#nombre').val(response.plus.nombre).prop('disabled',true);

      $.each(response.plusDetalle, function(key, value){
        listado_detalle.push({
          item_tipo: value.item_tipo ?? null,
          item_id: value.item_id ?? null,
          cantidad_unidad: value.cantidad,
          detalle_mercaderia_e_insumos: value.detalle_insumos,
          costo_x_uni: int0(value.costo_x_unidad),
          total_p_costo: int0(value.cantidad * value.costo_x_unidad),
        });
      });
      listar_detalles(true);

      $('#plus').rules('add', { required:false, number:false, uniquePlus:false });

      $('#modalCenter').modal('show');
      $('#modalCenter').on('shown.bs.modal', function() { $("#plus").focus(); });
      
        $('#modalCenter').on('shown.bs.modal', function () {
            $("#plus").focus();
            $('#item_selector').select2('destroy');
            initSelect2();
        });

    }
  });
};

editar = function(id){
  limpiar_form();
  $("#accion_form").val("editar");
  $("#id_form").val(id);
  $("#form-detalle").show();
  $(".modal-footer").show();

  $.ajax({
    url: '{{ URL::to('/') }}/plus/detalle',
    type: 'POST',
    data: {id},
    success: function(response){
      listado_detalle = [];

      $(".modal-title").html("<strong>Editar "+titulo_singular+" #"+response.plus.plus.toString()+"</strong>");
      $('#plus').val(response.plus.plus).prop('disabled',true);
      $('#p_carta').val(parseFloat(response.plus.p_carta).toLocaleString("es-ES", formato).replace(',', '.'));
      $('#puntos_utilidad').val(parseFloat(response.plus.puntos_utilidad).toLocaleString("es-ES", formato).replace(',', '.'));
      $('#nombre').val(response.plus.nombre);

      $.each(response.plusDetalle, function(key, value){
        listado_detalle.push({
          item_tipo: value.item_tipo ?? null,
          item_id: value.item_id ?? null,
          cantidad_unidad: value.cantidad,
          detalle_mercaderia_e_insumos: value.detalle_insumos,
          costo_x_uni: int0(value.costo_x_unidad),
          total_p_costo: int0(value.cantidad * value.costo_x_unidad),
        });
      });

      listar_detalles();

      $('#plus').rules('add', { required:false, number:false, uniquePlus:false });

      $('#modalCenter').modal('show');
      $('#modalCenter').on('shown.bs.modal', function() { $("#plus").focus(); });
    }
  });
};

limpiar_form = function(){
  listado_detalle = [];
  listar_detalles();

  $('#plus').val('').prop('disabled',false);
  $('#p_carta').val('').prop('disabled',false);
  $('#puntos_utilidad').val('').prop('disabled',false);
  $('#nombre').val('').prop('disabled',false);
  $('#item_selector').val(null).trigger('change');

  $(".modal-footer").show();
};

eliminar = function(id,plus){
  Swal.fire({
    title: '¿ Estas seguro que desea eliminar el PLUS #'+(plus.toString())+' ?',
    text: "¡ No podrás revertir esto !",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '¡ Sí, bórralo !'
  }).then((result) => {
    if (result.isConfirmed){
      $.ajax({
        url: '{{ URL::to('/') }}/plus/eliminar',
        type: 'POST',
        data: {id},
        success: function(){
          Swal.fire('Eliminado!','Tu registro ha sido eliminado.','success');
          table.ajax.reload();
        }
      });
    }
  });
};
// FIN ACCIONES

$.validator.addMethod('chilenoNumero', function(value, element){
  if (this.optional(element)) return true;
  const n = num(value);
  return !isNaN(n) && isFinite(n);
}, 'Ingrese un número válido (ej: 13.800 o 2,5).');

$("#form").validate({
  rules: {
    plus: { required:true, number:true },
    p_carta: { required:true, chilenoNumero:true },
    puntos_utilidad: { required:true, chilenoNumero:true },
    nombre: { required:true },
  },
  messages:{
    plus: { required:'Campo requerido', number:'El valor debe ser numerico', uniquePlus:'Este Plus ya está en uso' },
    p_carta: { required:'Campo requerido', chilenoNumero:'Precio no válido' },
    puntos_utilidad: { required:'Campo requerido', chilenoNumero:'Valor no válido' },
    nombre: { required:'Campo requerido' },
  },
  submitHandler: function(form){
    if(listado_detalle.length === 0){
      Swal.fire({ position:'top-end', target:document.getElementById('modalCenter'), icon:'error',
        title:'Por favor, Ingrese al menos Detalle', showConfirmButton:false, timer:1500 });
      return;
    }

    var formData = new FormData(form);
    formData.set('p_carta', String(num($('#p_carta').val())));
    formData.set('puntos_utilidad', String(num($('#puntos_utilidad').val())));
    formData.append("detalles", JSON.stringify(listado_detalle));

    $.ajax({
      url: '{{ URL::to('/') }}/plus/guardar',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
        $('#modalCenter').modal('hide');
        if(response.response){
          Swal.fire({ position:'top-end', icon:'success', title:'¡Excelente! La información ha sido guardada correctamente.', showConfirmButton:false, timer:1500 });
          table.ajax.reload();
        }else{
          Swal.fire({ position:'top-end', icon:'error', title: response.message, showConfirmButton:false, timer:1500 });
        }
      }
    });
  }
});

$("#form-detalle").validate({
  rules: {
    cantidad_unidad: { required:true, chilenoNumero:true },
    item_selector: { required:true },
    costo_x_uni: { required:true, chilenoNumero:true },
    total_p_costo: { required:true, chilenoNumero:true },
  },
  messages:{
    cantidad_unidad: { required:'Campo requerido', chilenoNumero:'El valor debe ser numerico' },
    item_selector: { required:'Campo requerido' },
    costo_x_uni: { required:'Campo requerido', chilenoNumero:'El valor debe ser numerico' },
    total_p_costo: { required:'Campo requerido', chilenoNumero:'El valor debe ser numerico' },
  },
  submitHandler: function(){ agregar_detalle(); }
});

function agregar_detalle(){
  const cantidad = clamp0(num($('#cantidad_unidad').val()));
  const $opt = $('#item_selector option:selected');
  const value = $('#item_selector').val();

  if(!value){
    Swal.fire({ icon:'error', title:'Seleccione un producto o preparación', timer:1400, showConfirmButton:false });
    return;
  }

  const item_tipo = $opt.attr('data-tipo');
  const item_id   = $opt.attr('data-id');
  const nombre    = $opt.text();
  const costo     = int0($('#costo_x_uni').val());

  const total = int0(cantidad * costo);

  if (cantidad <= 0 || costo <= 0) {
    Swal.fire({ icon:'error', title:'Cantidad y costo deben ser > 0', timer:1400, showConfirmButton:false });
    return;
  }

  listado_detalle.push({
    item_tipo: item_tipo,
    item_id: item_id,
    detalle_mercaderia_e_insumos: nombre,
    cantidad_unidad: round3(cantidad),
    costo_x_uni: costo,
    total_p_costo: int0(total),
  });

  listar_detalles();
  limpiar_form_detalle();
}

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

function listar_detalles(ocultar=false){
  if(ocultar){ ocultar = 'd-none'; }

  let html = "";
  listado_detalle.forEach((value, key) => {
    const cant   = parseFloat(value.cantidad_unidad);
    const costo  = int0(value.costo_x_uni);
    const total  = int0(cant * costo);
    value.total_p_costo = total;

    const missing = !value.item_tipo || !value.item_id;
    const rowClass = missing ? 'blink-border' : '';
    const rowTitle = missing ? 'Detalle sin item asociado. Elimine y vuelva a agregar.' : '';

    html += `
      <tr class="${rowClass}" title="${rowTitle}">
        <td>
          <input type="text" class="form-control form-control-sm text-end"
                 id="cantidad_unidad_${key}" name="cantidad_unidad_${key}"
                 value="${fixed3(isNaN(cant) ? 0 : cant)}"
                 onkeyup="this.value=this.value.replace(/,/g,'.');"
                 onchange="calcular_total_p_costo_detalle(${key});"/>
        </td>

        <td>
          <div class="d-flex flex-column">
            <input type="text" class="form-control form-control-sm"
                   value="${value.detalle_mercaderia_e_insumos ?? ''}" readonly tabindex="-1"/>
            ${missing ? `<div class="badge-missing mt-1"><i class="bx bx-error-circle me-1"></i>Sin item asociado</div>` : ``}
          </div>
        </td>

        <td class="text-center">
          <span class="badge bg-label-${value.item_tipo === 'PREPARACION' ? 'info' : 'primary'}">
            ${value.item_tipo ?? '-'}
          </span>
        </td>

        <td>
          <input type="text" class="form-control form-control-sm text-end"
                 value="${isNaN(costo) ? 0 : int0(costo)}"
                 readonly tabindex="-1"/>
        </td>

        <td>
          $${clpInt(total)}
        </td>

        <td>
          <button type="button" class="btn btn-icon rounded-pill btn-danger ${ocultar}"
                  onclick="eliminar_detalle(${key})">
            <i class='bx bx-x'></i>
          </button>
        </td>
      </tr>`;
  });

  $("#listado_detalle").html(html);
  calcular_neto();

  if (typeof bootstrap !== 'undefined') {
    [...document.querySelectorAll('[data-bs-toggle="tooltip"]')].forEach(el => new bootstrap.Tooltip(el));
  }
}

function calcular_total_p_costo(){
  let cantidad = num($('#cantidad_unidad').val());
  let costo = num($('#costo_x_uni').val());
  let total = cantidad * costo;

  if(!isFinite(total) || total < 0) total = 0;
  $('#total_p_costo').val(int0(total)).trigger('change');
}

function calcular_total_p_costo_detalle(key){
  const cantidad = num($('#cantidad_unidad_'+key).val());
  const costo    = num(listado_detalle[key].costo_x_uni);
  let total      = cantidad * costo;

  if (!isFinite(total) || total < 0) total = 0;

  listado_detalle[key].cantidad_unidad = round3(cantidad);
  listado_detalle[key].total_p_costo   = int0(total);

  listar_detalles();
}

function limpiar_form_detalle(){
  $('#cantidad_unidad').val('').focus();
  $('#costo_x_uni').val('');
  $('#total_p_costo').val('');
  $('#item_selector').val(null).trigger('change');

}

function calcular_neto(){
  var total_neto = 0;
  var puntos_utilidad = num($("#puntos_utilidad").val());

  $.each(listado_detalle,function(key,value){
    total_neto += int0(value.total_p_costo);
  });

  $("#precio_costo").html(`Total Precio Costo General: $${clpInt(total_neto)}`);
  $("#total_neto").html(`Precio Venta Determinado: $${clpInt(total_neto * puntos_utilidad)}`);
}

function isNan(value){
  if ((typeof value === 'number' && isNaN(value)) || value == '') return 0;
  return num(value);
}
</script>
@endsection