@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<h4 class="fw-bold py-2"><span class="text-muted fw-light">Mantenedor -</span> <strong>Productos</strong></h4>

<div class="card">
  <div class="card-header p-3">
    <div class="d-flex flex-row-reverse">
      <div class="btn-group">
        <button type="button" class="btn btn-outline-primary" onclick="crear();">
          <i class='tf-icons bx bx-plus-medical'></i> Nuevo
        </button>
        <button class="btn btn-outline-secondary" onclick="$('.tabla_excel').trigger('click');">Excel</button>
        <button class="btn btn-outline-secondary" onclick="$('.tabla_pdf').trigger('click');">PDF</button>
      </div>
    </div>
  </div>

  <div class="card-body border-bottom py-3">
    <div class="d-flex flex-wrap align-items-center gap-2 small">
      <span class="text-muted fw-semibold me-1">Leyenda (columna Tipo):</span>
      <span class="badge bg-label-info">Preparación</span>
      <span class="text-muted">precio ligado a una preparación</span>
      <span class="text-muted mx-1">·</span>
      <span class="badge bg-label-warning">Derivado</span>
      <span class="text-muted">precio heredado de otro producto (precio padre / divisor)</span>
      <span class="text-muted mx-1">·</span>
      <span class="badge bg-label-secondary">Simple</span>
      <span class="text-muted">sin preparación ni producto padre</span>
    </div>
  </div>

  <div class="table-responsive-xxl text-nowrap" style="min-height:700px;">
    <table id="tabla" class="table table-bordered table-sm table-striped w-100">
      <thead class="table-light">
        <tr>
          <th class="text-center">Nombre</th>
          <th class="text-center">Unidad de Medida</th>
          <th class="text-center">Valor</th>
          <th class="text-center">Inventariable</th>
          <th class="text-center">Categoría</th>
          <th class="text-center">Tipo</th>
          <th class="text-center">Acciones</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

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

      <div class="modal-body">
        <form id="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-6">
              <label for="nombre" class="form-label">Nombre</label>
              <input type="text" class="form-control" id="nombre" name="nombre" required>
            </div>

            <div class="mb-3 col-md-3">
              <label for="unidad_medida" class="form-label">Unidad de Medida</label>
              <input type="text" class="form-control" id="unidad_medida" name="unidad_medida" required>
            </div>

            <div class="mb-3 col-md-3">
              <label for="valor" class="form-label">Valor</label>
              <input type="number" class="form-control" id="valor" name="valor" min="0" step="0.01" required>
            </div>

            <div class="mb-3 col-12">
              <input type="hidden" name="inventariable" id="inventariable_input" value="1">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="inventariable_chk" checked>
                <label class="form-check-label" for="inventariable_chk">Inventariable (participa en inventario físico)</label>
              </div>
              <div class="form-text">Si está desmarcado, el producto no se incluye al crear el inventario ni en el buscador para agregar ítems.</div>
            </div>

            <div class="mb-3 col-md-8">
              <label for="categoria_producto_id" class="form-label">Categoría</label>
              <div class="input-group">
                <select class="form-select" id="categoria_producto_id" name="categoria_producto_id">
                  <option value="">-- Seleccionar --</option>
                  @foreach($categorias as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->nombre }}</option>
                  @endforeach
                </select>
                <button type="button" class="btn btn-outline-primary" id="btnNuevaCategoria" title="Nueva categoría">
                  <i class="bx bx-plus"></i>
                </button>
              </div>
              <div class="form-text">Si no seleccionas, se asignará <b>OTROS</b> por defecto.</div>
            </div>

            <div class="mb-3 col-md-8">
              <label for="preparacion_id" class="form-label">Preparación (opcional)</label>
              <select class="form-select" id="preparacion_id" name="preparacion_id">
                <option value="">-- Sin vincular --</option>
                @foreach($preparaciones as $pr)
                  <option value="{{ $pr->id }}" data-valor-porcion="{{ (float)($pr->valor_porcion ?? 0) }}">
                    {{ $pr->nombre }} — ${{ number_format((float)($pr->valor_porcion ?? 0), 0, ',', '.') }}
                  </option>
                @endforeach
              </select>
              <div class="form-text">Si eliges una preparación, el valor del producto será su <b>valor por porción</b>. No se puede usar junto con <b>producto padre</b>.</div>
            </div>

            <div class="mb-3 col-12">
              <label class="form-label" for="producto_padre_id">Producto padre (opcional)</label>
              <div class="row g-2 align-items-end">
                <div class="col-md-8">
                  <select class="form-select" id="producto_padre_id" name="producto_padre_id">
                    <option value="">-- Sin vincular a producto --</option>
                    @foreach($productosParaPadre as $pp)
                      <option value="{{ $pp->id }}" data-valor="{{ (float)($pp->valor ?? 0) }}">{{ $pp->nombre }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-4">
                  <label for="producto_padre_divisor" class="form-label small text-muted mb-1">Divisor (ej. 0.3 o 1.5)</label>
                  <input type="number" class="form-control" id="producto_padre_divisor" name="producto_padre_divisor" min="0.00000001" step="any" placeholder="1">
                </div>
              </div>
              <div class="form-text">El <b>valor</b> se hereda: precio del padre ÷ divisor. Puede encadenarse (C→B→A). Excluyente con preparación.</div>
            </div>
          </div>
        </form>
      </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>
const OTROS_ID = @json($otrosId);
const titulo_singular = "Producto";

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

let tabla = $('#tabla').DataTable({
  processing: true,
  serverSide: true,
  lengthMenu: [[50, 100, 500, 1000], [50, 100, 500, 1000]], // todos números
  dom: "rtB<'row mx-0 '<'col-sm-6'l><'col-sm-6'p>>",
  ajax: "{{ url('producto/listado/') }}",
  columns: [
    { data: 'nombre', className: 'text-center' },
    { data: 'unidad_medida', className: 'text-center' },
    {
      data: 'valor',
      className: 'text-center',
      render: function(data, type){
        var n = Math.round(parseFloat(data == null ? 0 : data)) || 0;
        if (type === 'excel' || type === 'export') {
          return n;
        }
        if (type === 'sort' || type === 'filter' || type === 'type') {
          return n;
        }
        return '$' + n.toLocaleString('es-CL');
      }
    },
    {
      data: 'inventariable',
      className: 'text-center',
      orderable: false,
      render: function(data){
        return data ? '<span class="badge bg-label-success">Sí</span>' : '<span class="badge bg-label-secondary">No</span>';
      }
    },
    { data: 'categoria_nombre', className: 'text-center' },
    {
      data: 'tipo_indicador',
      className: 'text-center',
      render: function(data){
        var t = data || 'Simple';
        var cls = 'bg-label-secondary';
        if (t === 'Preparación') cls = 'bg-label-info';
        else if (t === 'Derivado') cls = 'bg-label-warning';
        return '<span class="badge ' + cls + '">' + t + '</span>';
      }
    },
    {
      data: null,
      orderable: false,
      className: 'text-center',
      render: function(row){
        return (
          '<div class="dropdown">' +
            '<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">' +
              '<i class="bx bx-dots-vertical-rounded"></i>' +
            '</button>' +
            '<div class="dropdown-menu">' +
              '<a class="dropdown-item" href="javascript:ver('+ row.id +');"><i class="bx bx-show-alt me-1"></i> Ver</a>' +
              '<a class="dropdown-item" href="javascript:editar('+ row.id +');"><i class="bx bx-edit me-1"></i> Editar</a>' +
              '<a class="dropdown-item" href="javascript:eliminar('+ row.id +');"><i class="bx bx-x me-1"></i> Eliminar</a>' +
            '</div>' +
          '</div>'
        );
      }
    }
  ],
  buttons: [
    { extend: 'excel',   className: 'tabla_excel d-none',  exportOptions: { columns: 'th:not(:last-child)', orthogonal: 'excel' } },
    { extend: 'pdfHtml5',className: 'tabla_pdf d-none',    exportOptions: { columns: 'th:not(:last-child)', orthogonal: 'pdf' } }
  ],
  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:",
    oPaginate: {
      sFirst:    "Primero",
      sLast:     "Último",
      sNext:     "Siguiente",
      sPrevious: "Anterior"
    }
  },
  initComplete: function(){
    $('.dt-buttons').hide();
  }
});


// Filtros por columna (clon del header)
$('#tabla thead tr').clone(true).find('th').removeClass('sorting sorting_asc sorting_desc').off('click').end().insertBefore('#tabla thead tr');
$('#inventariable_chk').on('change', function(){
  $('#inventariable_input').val(this.checked ? '1' : '0');
});

$('#tabla thead tr:eq(0) th').each(function(i){
  const title = $(this).text().trim();
  if(title === 'Acciones'){
    $(this).html('');
    return;
  }
  if(title === 'Inventariable'){
    $(this).html(
      '<select class="form-select form-select-sm">' +
        '<option value="">Todos</option>' +
        '<option value="true">Sí</option>' +
        '<option value="false">No</option>' +
      '</select>'
    );
    $('select', this).on('change', function(){
      const v = this.value;
      if(tabla.column(i).search() !== v){
        tabla.column(i).search(v).draw();
      }
    });
    return;
  }
  if(title === 'Tipo'){
    $(this).html(
      '<select class="form-select form-select-sm">' +
        '<option value="">Todos</option>' +
        '<option value="preparacion">Preparación</option>' +
        '<option value="derivado">Derivado</option>' +
        '<option value="simple">Simple</option>' +
      '</select>'
    );
    $('select', this).on('change', function(){
      const v = this.value;
      if(tabla.column(i).search() !== v){
        tabla.column(i).search(v).draw();
      }
    });
    return;
  }
  $(this).html('<input type="text" class="form-control form-control-sm" placeholder="'+title+'" />');
  $('input', this).on('keyup change', function(){
    if(tabla.column(i).search() !== this.value){
      tabla.column(i).search(this.value).draw();
    }
  });
});

function actualizarEstadoVinculacion(){
  const prep = !!$('#preparacion_id').val();
  const padre = !!$('#producto_padre_id').val();
  $('#valor').prop('readonly', prep || padre);
  if (prep) {
    const opt = $('#preparacion_id option:selected');
    const vp = parseFloat(opt.data('valor-porcion'));
    if (!isNaN(vp)) $('#valor').val(Math.round(vp));
  }
  if (padre) recalcValorDesdePadre();
}

function recalcValorDesdePadre(){
  const opt = $('#producto_padre_id option:selected');
  const vPadre = parseFloat(opt.data('valor'));
  let div = parseFloat(String($('#producto_padre_divisor').val()).replace(',', '.'));
  if (isNaN(vPadre) || isNaN(div) || div <= 0) return;
  $('#valor').val(Math.round(vPadre / div));
}

function crear(){
  $('#form')[0].reset();
  $('#accion_form').val('crear');
  $('#id_form').val('');
  $('#preparacion_id').val('');
  $('#producto_padre_id').val('');
  $('#producto_padre_divisor').val('');
  $('#valor').prop('readonly', false);
  $('#inventariable_chk').prop('checked', true);
  $('#inventariable_input').val('1');
  // Preseleccionar OTROS si existe
  if(OTROS_ID){
    $('#categoria_producto_id').val(OTROS_ID);
  }else{
    $('#categoria_producto_id').val('');
  }
  $('#form input, #form select').prop('disabled', false);
  $('.modal-footer').show();
  $('.modal-title').text('Crear ' + titulo_singular);
  $('#modalCenter').modal('show');
}

function editar(id){
  $.post('{{ url('producto/detalle') }}', { id }, function(response){
    const p = response.producto;
    $('#accion_form').val('editar');
    $('#id_form').val(p.id);
    $('#nombre').val(p.nombre);
    $('#unidad_medida').val(p.unidad_medida);
    $('#valor').val(p.valor);
    $('#categoria_producto_id').val(p.categoria_producto_id ?? '');
    $('#preparacion_id').val(p.preparacion_id ?? '');
    $('#producto_padre_id').val(p.producto_padre_id ?? '');
    const div = p.producto_padre_divisor;
    $('#producto_padre_divisor').val(div != null && div !== '' ? div : '');
    const inv = p.inventariable !== undefined && p.inventariable !== null
      ? !!(Number(p.inventariable) || p.inventariable === true)
      : true;
    $('#inventariable_chk').prop('checked', inv);
    $('#inventariable_input').val(inv ? '1' : '0');
    $('#form input, #form select').prop('disabled', false);
    $('.modal-footer').show();
    $('.modal-title').text('Editar ' + titulo_singular);
    actualizarEstadoVinculacion();
    $('#modalCenter').modal('show');
  });
}

function ver(id){
  editar(id);
  setTimeout(() => {
    $('#form input, #form select, #btnNuevaCategoria').prop('disabled', true);
    $('.modal-footer').hide();
    $('.modal-title').text('Ver ' + titulo_singular);
  }, 300);
}

function eliminar(id){
  Swal.fire({
    title: '¿Está seguro?',
    text: 'Esta acción no se puede deshacer.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Sí, eliminar',
    cancelButtonText: 'Cancelar'
  }).then((result) => {
    if(result.isConfirmed){
      $.post('{{ url('producto/eliminar') }}', { id }, function(resp){
        if(resp && resp.response){
          tabla.ajax.reload();
          Swal.fire('Eliminado', 'El producto ha sido eliminado.', 'success');
        } else {
          Swal.fire('No se puede eliminar', (resp && resp.message) || 'El producto está asociado a otros registros.', 'warning');
        }
      }).fail(function(){
        Swal.fire('Error', 'No se pudo eliminar el producto.', 'error');
      });
    }
  });
}

$('#form').on('submit', function(e){
  e.preventDefault();
  const prep = $('#preparacion_id').val();
  const padre = $('#producto_padre_id').val();
  if (prep && padre) {
    return Swal.fire('Atención', 'Elija solo preparación o solo producto padre, no ambos.', 'warning');
  }
  if (padre && !$('#producto_padre_divisor').val()) {
    return Swal.fire('Atención', 'Indique el divisor para el vínculo con el producto padre.', 'warning');
  }
  const formData = new FormData(this);

  $.ajax({
    url: '{{ url('producto/guardar') }}',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response){
      if(response.response){
        $('#modalCenter').modal('hide');
        tabla.ajax.reload();
        Swal.fire('Guardado', 'Producto guardado correctamente.', 'success');
      }else{
        Swal.fire('Error', response.message || 'No se pudo guardar.', 'error');
      }
    },
    error: function(xhr){
      var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'No se pudo guardar.';
      if (xhr.responseJSON && xhr.responseJSON.errors) {
        msg = Object.values(xhr.responseJSON.errors).flat().join(' ');
      }
      Swal.fire('Error', msg, 'error');
    }
  });
});

// Crear categoría al vuelo
$('#btnNuevaCategoria').on('click', function(){
  (async () => {
    const { value: nombre } = await Swal.fire({
      title: 'Nueva categoría',
      input: 'text',
      inputLabel: 'Nombre de la categoría',
      inputPlaceholder: 'Ej: BEBIDAS',
      showCancelButton: true,
      confirmButtonText: 'Crear',
      cancelButtonText: 'Cancelar',
      inputValidator: (value) => {
        if (!value) return 'Debes ingresar un nombre';
      }
    });

    if(!nombre) return;

    $.post('{{ url('producto/categoria/crear') }}', { nombre }, function(resp){
      if(resp.response){
        const cat = resp.data;
        $('#categoria_producto_id').append(new Option(cat.nombre, cat.id, true, true)).trigger('change');
        Swal.fire({toast:true, position:'top-end', icon:'success', title:'Categoría creada', timer:1600, showConfirmButton:false});
      }else{
        Swal.fire('Error','No fue posible crear la categoría','error');
      }
    }).fail(() => Swal.fire('Error','No fue posible crear la categoría','error'));
  })();
});

$('#preparacion_id').on('change', function(){
  if ($(this).val()) {
    $('#producto_padre_id').val('');
    $('#producto_padre_divisor').val('');
  }
  actualizarEstadoVinculacion();
});

$('#producto_padre_id').on('change', function(){
  if ($(this).val()) {
    $('#preparacion_id').val('');
  } else {
    $('#producto_padre_divisor').val('');
  }
  actualizarEstadoVinculacion();
});

$('#producto_padre_divisor').on('input change', function(){
  if ($('#producto_padre_id').val()) $('#preparacion_id').val('');
  actualizarEstadoVinculacion();
});
</script>
@endsection