@extends("theme.sneat.admin")

@section('contenido')
<style>
  .selectize-control.contacts .selectize-input > div .email { opacity: .8; }
  .selectize-control.contacts .selectize-input > div .name + .email { margin-left: 5px; }
  .selectize-control.contacts .selectize-input > div .email:before { content: "<"; }
  .selectize-control.contacts .selectize-input > div .email:after { content: ">"; }
  .selectize-control.contacts .selectize-dropdown .caption { font-size: 12px; display: block; color: #a0a0a0; }
  .selectize-input{ height: 100%; }
  .swal2-container { z-index: 1200 !important; }
  .flash-new { animation: flashNew 1.2s ease-in-out; }
  .inventario-table { min-width: 1100px; table-layout: fixed; }
  .inventario-table .col-item { width: 18%; }
  .inventario-table .col-unidad { width: 7%; }
  .inventario-table .col-observacion { width: 22%; }
  .inventario-table .col-cantidad { width: 16%; }
  .inventario-table .col-costo { width: 19%; }
  .inventario-table .col-total { width: 16%; }
  .inventario-table .col-eliminar { width: 6%; }
  @keyframes flashNew {
    0%   { background: #fff9c4; }
    100% { background: transparent; }
  }
</style>

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

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

<div class="row">
  <div class="col-xl">
    <div class="card">
      <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">
        <div class="row align-items-end g-3">
          <div class="col-md-3">
            <label class="form-label" for="fecha_inventario">Fecha de Inventario</label>
            <input type="month" class="form-control" id="fecha_inventario" name="fecha_inventario" value="{{ date('Y-m') }}">
            <input type="hidden" id="id_inventario">
          </div>

          <div class="col-auto">
            <button type="button" class="btn btn-primary" id="btn_generar" onclick="generar_inventario()">
              <i class="bx bx-refresh me-1"></i> Crear / Cargar inventario
            </button>
          </div>

          <div class="col-auto">
            <button type="button" class="btn btn-outline-primary" onclick="descargar()">
              <span class="tf-icons bx bx-download me-1"></span> Descargar PDF
            </button>
          </div>

          <div class="col-auto">
            <button type="button" class="btn btn-outline-danger" id="btn_eliminar_inventario" onclick="eliminar_inventario()">
              <i class="bx bx-trash me-1"></i> Eliminar inventario
            </button>
          </div>

          <div class="col-auto">
            <label class="form-label d-block mb-0">Total Hasta Bodega Borquez</label>
            <h4 class="fw-bold py-2 mb-0" id="total_inventario_1">—</h4>
          </div>

          <div class="col-auto">
            <label class="form-label d-block mb-0">Total General</label>
            <h4 class="fw-bold py-2 mb-0" id="total_inventario_2">—</h4>
          </div>
        </div>

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

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

<div class="row">
  <div class="col-xl" id="listado_inventario">
    <div class="text-center text-muted py-5">
      Selecciona una fecha y presiona <b>“Crear / Cargar inventario”</b>.
    </div>
  </div>
</div>
@endsection

@section('scripts')
<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>
const CAN_EDIT_COSTO = @json(auth()->check() && ! \App\Support\InventarioUser::matches());

/* ==================== Setup ==================== */
if (window.$ && $.validator) {
  $.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') }
});

function cargar_validaciones_custom(){}

function formatear(n){
  const num = Math.round(toNumber(n));
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}
function escapeAttr(value){
  return String(value ?? '')
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}
function safeId(str){
  return (str || 'OTROS')
    .normalize("NFD").replace(/[\u0300-\u036f]/g,'')
    .replace(/[^\w\-]+/g,'_');
}
function setTotales({borquez = 0, general = 0} = {}){
  $("#total_inventario_1").html(`$${formatear(borquez)}`);
  $("#total_inventario_2").html(`$${formatear(general)}`);
}

/* ===== Decimales ===== */
function sanitizeDecimalInput(el){
  let v = el.value.replace(/[^0-9.,]/g, '');
  const firstSep = v.search(/[.,]/);
  if (firstSep !== -1) {
    const head = v.slice(0, firstSep + 1);
    const tail = v.slice(firstSep + 1).replace(/[.,]/g, '');
    v = head + tail;
  }
  el.value = v;
}
function toNumber(val){
  if (val == null) return 0;
  const v = (''+val).replace(',', '.');
  const n = parseFloat(v);
  return isNaN(n) ? 0 : n;
}

/* ==================== Render helpers ==================== */
function renderRow(item){
  const id = item.id;
  const cantidad = toNumber(item.cantidad);
  const costo    = toNumber(item.costo);

  return `
    <tr id="row_${id}">
      <td><input type="text" class="form-control form-control-sm" readonly id="item_${id}" value="${escapeAttr(item.item)}" /></td>
      <td><input type="text" class="form-control form-control-sm" readonly id="unidad_${id}" value="${escapeAttr(item.unidad)}" /></td>

      <td>
        <input
          type="text"
          class="form-control form-control-sm"
          id="observacion_${id}"
          value="${escapeAttr(item.observacion)}"
          onChange="actualizar(${id}, 'observacion', this.value)"
        />
      </td>

      <td>
        <input
          type="text"
          inputmode="decimal"
          class="form-control form-control-sm"
          id="cant_${id}"
          value="${(Number.isInteger(cantidad)? cantidad : cantidad).toString().replace('.', ',')}"
          oninput="sanitizeDecimalInput(this);"
          onChange="actualizar(${id}, 'cantidad', this.value)"
        />
      </td>

      <td>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control form-control-sm" readonly
            id="costo_${id}"
            value="${(Number.isInteger(costo)? costo : costo).toString().replace('.', ',')}"
          />
          ${CAN_EDIT_COSTO ? `
          <button class="btn btn-outline-primary" type="button" onclick="editarCosto(${id}, '${(Number.isInteger(costo)? costo : costo).toString().replace('.', ',')}')">
            <i class="bx bx-edit"></i>
          </button>` : ``}
        </div>
      </td>

      <td><input type="text" class="form-control form-control-sm" id="total_${id}" value="${formatear(cantidad*costo)}" readonly /></td>
      <td><button class="btn btn-icon btn-sm btn-danger" onclick="eliminar(${id})"><i class="bx bx-x"></i></button></td>
    </tr>`;
}

function renderCategoryCard(catName, tot={cant:0,costo:0,total:0}, inventarioId=null){
  const catId = safeId(catName);

  return `
    <div class="card mb-4" id="card_${catId}">
      <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
        <div class="flex-grow-1">
          <h5 class="mb-1">${catName}</h5>
          <div class="text-muted small">
            <span class="me-3">Cantidad: <strong id="cant_${catId}">${formatear(tot.cant || 0)}</strong></span>
            <span class="me-3">Costo: <strong id="costo_${catId}">$${formatear(tot.costo || 0)}</strong></span>
            <span>Total: <strong id="total_${catId}">$${formatear(tot.total || 0)}</strong></span>
          </div>
        </div>
        <div class="mt-2 mt-sm-0 d-flex align-items-center">
          <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse" href="#${catId}" role="button" aria-expanded="true">
            <i class="bx bx-chevron-down"></i>
          </button>
          <button class="btn btn-sm btn-outline-primary" onclick="agregar(${inventarioId ?? ($('#id_inventario').val()||0)}, '${catName}')">
            <i class="bx bx-plus"></i>
          </button>
        </div>
      </div>

      <div class="card-body collapse show" id="${catId}">
        <div class="table-responsive text-nowrap">
          <table class="table table-sm table-striped text-center inventario-table">
            <thead>
              <tr>
                <th class="col-item">Item</th><th class="col-unidad">Unidad</th><th class="col-observacion">Observación</th><th class="col-cantidad">Cantidad</th><th class="col-costo">Costo</th><th class="col-total">Total</th><th class="col-eliminar">Eliminar</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>`;
}

function ensureCategoryExists(catName, inventarioId, tot){
  const catId = safeId(catName);
  if(!$(`#card_${catId}`).length){
    $('#listado_inventario').append( renderCategoryCard(catName, tot, inventarioId) );
  }
  return catId;
}

cargar_validaciones_custom();

/* ==================== Inventario ==================== */
function generar_inventario(procesar = false){
  const fecha_inventario = $('#fecha_inventario').val();
  if(!fecha_inventario){
    Swal.fire({ icon:'warning', text:'Selecciona una fecha de inventario.' });
    return;
  }

  const $btn = $('#btn_generar');
  $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Cargando...');

  $.post('{{ url('/inventario/crear') }}', { fecha_inventario })
    .done((response) => {
      if(response.response){
        if(!procesar){
          Swal.fire({ toast:true, position:'top-end', icon:'info', title:'Inventario listo', showConfirmButton:false, timer:1500 });
        }
        $('#id_inventario').val(response.data.id);
        dibujar_inventario(response.data.id);
      }else{
        Swal.fire({ toast:true, position:'top-end', icon:'error', title:(response.message||'Ocurrió un error'), showConfirmButton:false, timer:3000 });
      }
    })
    .always(() => $btn.prop('disabled', false).html('<i class="bx bx-refresh me-1"></i> Crear / Cargar inventario'));
}

function dibujar_inventario(id){
  $.ajax({
    url: '{{ url('/inventario/dibujar') }}',
    type: 'POST',
    data: { id },
    beforeSend: () => {
      $('#listado_inventario').html(`<center><div class="spinner-border spinner-border-lg text-primary" role="status"><span class="visually-hidden">Loading...</span></div></center>`);
    },
    success: (response) => {
      if(!response.response) return;

      let html = "";
      let total_borquez = 0;
      let total_general = 0;

      response.data.forEach((categoria) => {
        let total_cat = 0, total_cant = 0, total_costo = 0;
        let tbody = "";

        categoria.detalle.forEach((item) => {
          const cantidad = toNumber(item.cantidad);
          const costo    = toNumber(item.costo);
          const total    = (typeof item.total !== 'undefined') ? toNumber(item.total) : (cantidad * costo);

          total_cat   += total;
          total_cant  += cantidad;
          total_costo += costo;

          if (!["ARTICULOS DE ASEO","PERSONAL","ARTICULOS DE OFICINA","OTROS"].includes(categoria.categoria)) {
            total_borquez += total;
          }
          total_general += total;

          tbody += renderRow(item);
        });

        const cat_id  = safeId(categoria.categoria);

        html += `
          <div class="card mb-4" id="card_${cat_id}">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
              <div class="flex-grow-1">
                <h5 class="mb-1">${categoria.categoria}</h5>
                <div class="text-muted small">
                  <span class="me-3">Cantidad: <strong id="cant_${cat_id}">${formatear(total_cant)}</strong></span>
                  <span class="me-3">Costo: <strong id="costo_${cat_id}">$${formatear(total_costo)}</strong></span>
                  <span>Total: <strong id="total_${cat_id}">$${formatear(total_cat)}</strong></span>
                </div>
              </div>
              <div class="mt-2 mt-sm-0 d-flex align-items-center">
                <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse" href="#${cat_id}" role="button" aria-expanded="false">
                  <i class="bx bx-chevron-down"></i>
                </button>
                <button class="btn btn-sm btn-outline-primary" onclick="agregar(${id}, '${categoria.categoria}')">
                  <i class="bx bx-plus"></i>
                </button>
              </div>
            </div>
            <div class="card-body collapse" id="${cat_id}">
              <div class="table-responsive text-nowrap">
                <table class="table table-sm table-striped text-center inventario-table">
                  <thead>
                    <tr>
                      <th class="col-item">Item</th><th class="col-unidad">Unidad</th><th class="col-observacion">Observación</th><th class="col-cantidad">Cantidad</th><th class="col-costo">Costo</th><th class="col-total">Total</th><th class="col-eliminar">Eliminar</th>
                    </tr>
                  </thead>
                  <tbody>${tbody}</tbody>
                </table>
              </div>
            </div>
          </div>`;
      });

      $('#listado_inventario').html(html);
      setTotales({ borquez: total_borquez, general: total_general });
    }
  });
}

/**
 * ✅ Agregar producto o preparación
 * - Si la categoría es BODEGA-PREPARADO => por defecto agrega Preparación
 */
function agregar(id_inventario, categoriaNombre){
  const esPreparado = (categoriaNombre || '').toUpperCase() === 'BODEGA-PREPARADO';

  Swal.fire({
    title: 'Agregar ítem',
    html: `
      <div class="text-start mb-2">
        Selecciona lo que deseas agregar:
      </div>

      <div class="d-flex gap-3 mb-3">
        <label class="form-check">
          <input class="form-check-input" type="radio" name="tipo_item" value="producto" ${esPreparado ? '' : 'checked'}>
          <span class="form-check-label">Producto</span>
        </label>

        <label class="form-check">
          <input class="form-check-input" type="radio" name="tipo_item" value="preparacion" ${esPreparado ? 'checked' : ''}>
          <span class="form-check-label">Preparación</span>
        </label>
      </div>

      <select id="swal_item_id" style="width:100%"></select>
      <div class="text-muted small mt-2">
        * La categoría de las preparaciones será <b>BODEGA-PREPARADO</b>.
      </div>
    `,
    focusConfirm: false,
    showCancelButton: true,
    confirmButtonText: 'Agregar',
    cancelButtonText: 'Cancelar',
    didOpen: () => {
      const $select = $('#swal_item_id');

      function initSelect2(tipo){
        $select.empty().trigger('change');

        const url = (tipo === 'preparacion')
          ? "{{ route('inventario.preparaciones') }}"
          : "{{ route('inventario.productos') }}";

        $select.select2({
          dropdownParent: $('.swal2-container'),
          placeholder: (tipo === 'preparacion') ? 'Busca preparación...' : 'Busca producto...',
          allowClear: true,
          width: 'resolve',
          ajax: {
            url,
            type: 'POST',
            dataType: 'json',
            delay: 250,
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: params => ({ q: params.term || '' }),
            processResults: (data) => ({ results: data.results || [] })
          }
        });
      }

      // init según radio actual
      initSelect2(esPreparado ? 'preparacion' : 'producto');

      // cuando cambia radio
      $(document).on('change', 'input[name="tipo_item"]', function(){
        initSelect2(this.value);
      });
    },
    preConfirm: () => {
      const tipo = $('input[name="tipo_item"]:checked').val();
      const idSel = $('#swal_item_id').val();
      if(!idSel){
        Swal.showValidationMessage('Debes seleccionar un ítem');
      }
      return { tipo, idSel };
    }
  }).then(result => {
    if(!result.isConfirmed) return;

    const tipo = result.value.tipo;
    const idSel = result.value.idSel;

    const payload = { id: id_inventario };

    if(tipo === 'preparacion'){
      payload.tipo_item = 'preparacion';
      payload.preparacion_id = idSel;
    } else {
      payload.tipo_item = 'producto';
      payload.product_id = idSel;
      payload.categoria_hint = categoriaNombre;
    }

    $.post('{{ url('/inventario/agregar') }}', payload)
      .done((response) => {
        if(!response.response){
          Swal.fire({icon:'warning', text: response.message || 'No se pudo agregar.'});
          return;
        }

        const item = response.item;
        const cat  = response.categoria;

        const catId = ensureCategoryExists(cat.nombre, id_inventario, {cant:cat.cant,costo:cat.costo,total:cat.total});

        item.categoria = cat.nombre;

        const rowHtml = renderRow(item);
        const $tbody  = $(`#${catId} tbody`);
        $tbody.prepend(rowHtml);

        $(`#${catId}`).collapse('show');
        const $input = $(`#cant_${item.id}`);
        $input.focus().select();

        document.getElementById(`row_${item.id}`)?.classList.add('flash-new');
        document.getElementById(`row_${item.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        setTimeout(() => document.getElementById(`row_${item.id}`)?.classList.remove('flash-new'), 1200);

        $(`#cant_${catId}`).text(formatear(cat.cant));
        $(`#costo_${catId}`).text(`$${formatear(cat.costo)}`);
        $(`#total_${catId}`).text(`$${formatear(cat.total)}`);

        setTotales({ borquez: response.totales.borquez, general: response.totales.general });

        Swal.fire({toast:true, position:'top-end', icon:'success', title:'Ítem agregado', showConfirmButton:false, timer:1800});
      })
      .fail(xhr => console.error(xhr.responseText));
  });
}

function actualizar(id, tipo, valor){
  if(tipo === 'cantidad'){
    const cantidad = toNumber($(`#cant_${id}`).val());
    const costo    = toNumber($(`#costo_${id}`).val());
    $(`#total_${id}`).val(formatear(cantidad * costo));
  }

  $.post('{{ url('/inventario/actualizar') }}', { id, tipo, valor })
    .done((response) => {
      if(response.response){
        setTotales({ borquez: response.borquez, general: response.general });
        const cat_key = safeId(response.categoria.nombre);
        $(`#cant_${cat_key}`).text(formatear(response.categoria.cant));
        $(`#costo_${cat_key}`).text(`$${formatear(response.categoria.costo)}`);
        $(`#total_${cat_key}`).text(`$${formatear(response.categoria.total)}`);
      }
    });
}

function eliminar(id){
  Swal.fire({
    title:'¿Eliminar este ítem?', text:'Esta acción no se puede deshacer.',
    icon:'warning', showCancelButton:true,
    confirmButtonText:'Sí, eliminar', cancelButtonText:'Cancelar',
    customClass:{ confirmButton:'btn btn-danger mx-1', cancelButton:'btn btn-secondary mx-1' },
    buttonsStyling:false, reverseButtons:true
  }).then((result) => {
    if(!result.isConfirmed) return;

    $.post('{{ url('/inventario/eliminar') }}', { id })
      .done((response) => {
        if(!response || !response.response){
          Swal.fire({icon:'warning', text:(response && response.message) || 'No se pudo eliminar.'});
          return;
        }

        $(`#row_${id}`).fadeOut(300, function(){ $(this).remove(); });

        const cat = response.categoria;
        const catId = safeId(cat.nombre);
        $(`#cant_${catId}`).text(formatear(cat.cant));
        $(`#costo_${catId}`).text(`$${formatear(cat.costo)}`);
        $(`#total_${catId}`).text(`$${formatear(cat.total)}`);

        setTotales({ borquez: response.totales.borquez, general: response.totales.general });

        setTimeout(() => { $(`#${catId}`).collapse('show'); }, 150);

        Swal.fire({toast:true, position:'top-end', icon:'success', title:'Ítem eliminado', showConfirmButton:false, timer:1600});
      });
  });
}

function editarCosto(id, costoActual){
  if(!CAN_EDIT_COSTO){
    Swal.fire({ icon:'info', text:'No tiene permiso para modificar el costo.' });
    return;
  }

  Swal.fire({
    title: 'Modificar costo',
    text: '¿Está seguro que desea modificar el costo de este ítem?',
    input: 'text',
    inputValue: costoActual,
    showCancelButton: true,
    confirmButtonText: 'Guardar',
    cancelButtonText: 'Cancelar',
    preConfirm: (value) => {
      if(!value){
        Swal.showValidationMessage('Debe ingresar un costo');
        return false;
      }
      const n = toNumber(value);
      if(!Number.isFinite(n) || n < 0){
        Swal.showValidationMessage('Costo inválido');
        return false;
      }
      return value;
    }
  }).then(result => {
    if(!result.isConfirmed) return;

    const valor = result.value;
    $('#costo_'+id).val(valor);
    actualizar(id, 'costo', valor);
  });
}

function descargar(){
  const id_inventario = $('#id_inventario').val();
  if(!id_inventario) {
    Swal.fire({ icon:'info', text:'Primero crea o carga un inventario.' });
    return;
  }
  window.open(`{{ url('/pdf_inventario') }}/${id_inventario}`, '_blank');
}

function eliminar_inventario() {
  const id_inventario = $('#id_inventario').val();

  if (!id_inventario) {
    Swal.fire({ icon:'info', text:'Primero crea o carga un inventario para poder eliminarlo.' });
    return;
  }

  const fecha_inventario = $('#fecha_inventario').val() || '';

  Swal.fire({
    title: '¿Eliminar inventario completo?',
    html: `Se eliminarán <b>todos los ítems</b> del inventario seleccionado (${fecha_inventario}).<br>Esta acción no se puede deshacer.`,
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Sí, eliminar',
    cancelButtonText: 'Cancelar',
    customClass: { confirmButton: 'btn btn-danger mx-1', cancelButton: 'btn btn-secondary mx-1' },
    buttonsStyling: false,
    reverseButtons: true
  }).then((result) => {
    if (!result.isConfirmed) return;

    const $btn = $('#btn_eliminar_inventario');
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Eliminando...');

    $.post('{{ url('/inventario/eliminar-inventario') }}', { id: id_inventario })
      .done((response) => {
        if (response && response.response) {
          $('#id_inventario').val('');
          $('#listado_inventario').html(`
            <div class="text-center text-muted py-5">
              Selecciona una fecha y presiona <b>“Crear / Cargar inventario”</b>.
            </div>
          `);
          setTotales({ borquez: 0, general: 0 });

          Swal.fire({ toast:true, position:'top-end', icon:'success', title:'Inventario eliminado', showConfirmButton:false, timer:1800 });
        } else {
          Swal.fire({ icon:'error', text:(response && response.message) || 'No se pudo eliminar el inventario.' });
        }
      })
      .fail(() => Swal.fire({ icon:'error', text:'Error en el servidor al eliminar el inventario.' }))
      .always(() => $btn.prop('disabled', false).html('<i class="bx bx-trash me-1"></i> Eliminar inventario'));
  });
}

/* ===== ENTER → siguiente cantidad ===== */
$(document).on('keydown', 'input[id^="cant_"]', function(e){

  if(e.key === 'Enter'){
    e.preventDefault();

    const inputs = $('input[id^="cant_"]:visible');

    const index = inputs.index(this);

    if(index > -1 && index < inputs.length - 1){
      const next = inputs.eq(index + 1);

      next.focus();
      next.select();
    }
  }

});
</script>
@endsection