@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
  .iup-page {
    --iup-border: #e7e7e9;
    --iup-muted: #697a8d;
    --iup-surface: #f8f9fa;
    --iup-accent: #696cff;
    --iup-ok: #28c76f;
    --iup-warn: #ff9f43;
    --iup-info: #00cfe8;
  }
  .iup-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  .iup-page .page-head h4 { margin: 0; }
  .iup-page .page-head .hint {
    margin: 0.3rem 0 0;
    color: var(--iup-muted);
    font-size: 0.875rem;
    max-width: 42rem;
  }
  .iup-search-panel {
    background: #fff;
    border: 1px solid var(--iup-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    position: relative;
  }
  .iup-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: stretch;
  }
  .iup-search-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
  }
  .iup-search-wrap .input-group {
    display: flex;
    flex-wrap: nowrap;
  }
  .iup-search-wrap .form-control {
    min-height: 44px;
    font-size: 1rem;
  }
  .iup-search-wrap .input-group-text {
    min-height: 44px;
  }
  .iup-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    background: #fff;
    border: 1px solid var(--iup-border);
    border-radius: 0.6rem;
    box-shadow: 0 0.5rem 1.25rem rgba(67, 89, 113, 0.12);
    max-height: 320px;
    overflow: auto;
    display: none;
  }
  .iup-suggest.is-open { display: block; }
  .iup-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f4;
  }
  .iup-suggest-item:last-child { border-bottom: 0; }
  .iup-suggest-item:hover,
  .iup-suggest-item.is-active { background: #f5f5ff; }
  .iup-suggest-item .name {
    font-weight: 700;
    color: #566a7f;
    font-size: 0.92rem;
  }
  .iup-suggest-item .meta {
    font-size: 0.75rem;
    color: var(--iup-muted);
  }
  .iup-suggest-empty {
    padding: 0.9rem;
    color: var(--iup-muted);
    font-size: 0.85rem;
    text-align: center;
  }
  .iup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
  }
  .iup-actions .btn { min-height: 44px; }
  .iup-empty {
    border: 1px dashed var(--iup-border);
    border-radius: 0.75rem;
    padding: 2.4rem 1.25rem;
    text-align: center;
    color: var(--iup-muted);
    background: linear-gradient(180deg, #fcfcfd 0%, #f5f6f8 100%);
  }
  .iup-empty i {
    font-size: 2.1rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #b4b8c5;
  }
  .iup-empty .example {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #eef0ff;
    color: var(--iup-accent);
    font-size: 0.8rem;
    font-weight: 650;
  }
  .iup-product {
    background: #fff;
    border: 1px solid var(--iup-border);
    border-radius: 0.75rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    display: grid;
    gap: 0.85rem;
  }
  @media (min-width: 768px) {
    .iup-product {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }
  .iup-product .title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #566a7f;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .iup-product .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
  }
  .iup-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: var(--iup-surface);
    border: 1px solid var(--iup-border);
    font-size: 0.75rem;
    font-weight: 650;
    color: #566a7f;
  }
  .iup-chip.is-accent { background: #eef0ff; border-color: #cfd0ff; color: var(--iup-accent); }
  .iup-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 768px) {
    .iup-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .iup-kpi {
    background: #fff;
    border: 1px solid var(--iup-border);
    border-radius: 0.65rem;
    padding: 0.9rem 1rem;
  }
  .iup-kpi .lbl {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--iup-muted);
    font-weight: 650;
    margin-bottom: 0.25rem;
  }
  .iup-kpi .val {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #566a7f;
  }
  .iup-kpi.is-prep .val { color: var(--iup-accent); }
  .iup-kpi.is-plus .val { color: var(--iup-ok); }
  .iup-kpi.is-via .val { color: var(--iup-warn); }
  .iup-kpi.is-nest .val { color: var(--iup-info); }
  .iup-section {
    background: #fff;
    border: 1px solid var(--iup-border);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .iup-section .sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid var(--iup-border);
    background: var(--iup-surface);
  }
  .iup-section .sec-head h6 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 750;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .iup-section .sec-head .count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--iup-muted);
    background: #fff;
    border: 1px solid var(--iup-border);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
  }
  .iup-section .sec-body { padding: 0.35rem 0.5rem 0.65rem; }
  .iup-section table {
    margin: 0;
    width: 100%;
  }
  .iup-section thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--iup-muted);
    border-bottom-color: var(--iup-border);
    white-space: nowrap;
  }
  .iup-section tbody td {
    vertical-align: middle;
    font-size: 0.88rem;
  }
  .iup-section .qty {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--iup-accent);
    white-space: nowrap;
  }
  .iup-section .muted { color: var(--iup-muted); font-size: 0.8rem; }
  .iup-section .empty-row {
    text-align: center;
    color: var(--iup-muted);
    padding: 1.25rem !important;
    font-size: 0.88rem;
  }
  .iup-note {
    font-size: 0.78rem;
    color: var(--iup-muted);
    margin: 0 0 1rem;
  }
</style>

<div class="iup-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Informe de</span> Uso de Producto</h4>
      <p class="hint">Busque un producto y vea en qué preparaciones y PLUs se utiliza, con las cantidades de cada ficha.</p>
    </div>
  </div>

  <div class="iup-search-panel">
    <label class="form-label fw-semibold mb-2" for="iup_buscar">Producto</label>
    <div class="iup-search-row">
      <div class="iup-search-wrap">
        <div class="input-group">
          <span class="input-group-text"><i class="bx bx-search"></i></span>
          <input type="text" class="form-control" id="iup_buscar" placeholder="Ejemplo: loco, camarón, merluza…" autocomplete="off" />
        </div>
        <div class="iup-suggest" id="iup_suggest" role="listbox"></div>
      </div>
      <div class="iup-actions">
        <button type="button" class="btn btn-primary" id="btn_generar" disabled>
          <i class="bx bx-analyse"></i> Ver informe
        </button>
        <button type="button" class="btn btn-outline-secondary" id="btn_pdf" disabled>
          <i class="bx bx-file"></i> PDF
        </button>
      </div>
    </div>
    <div class="text-muted small mt-2" id="iup_selected_label">Escriba para buscar y elija un producto de la lista.</div>
  </div>

  <div id="bloque_vacio" class="iup-empty">
    <i class="bx bx-package"></i>
    <div>Busque un producto para ver su uso en el menú y las recetas.</div>
    <span class="example"><i class="bx bx-bulb"></i> Pruebe con “loco”</span>
  </div>

  <div id="bloque_resultado" class="d-none">
    <div class="iup-product" id="iup_product_card"></div>
    <div class="iup-kpis" id="iup_kpis"></div>
    <p class="iup-note">
      <i class="bx bx-info-circle"></i>
      Las cantidades son las de la ficha (receta / PLU). En PLUs vía preparación, la cantidad equivalente = prep en el PLU × producto en la prep.
    </p>
    <div id="iup_sections"></div>
  </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
  const URL_BUSCAR = @json(url('informes/informe_uso_producto/buscar'));
  const URL_DATOS = @json(url('informes/informe_uso_producto/datos'));
  const URL_PDF = @json(url('informe_uso_producto'));

  let selected = null;
  let searchTimer = null;
  let suggestItems = [];
  let activeIdx = -1;

  const $buscar = $('#iup_buscar');
  const $suggest = $('#iup_suggest');
  const $btnGen = $('#btn_generar');
  const $btnPdf = $('#btn_pdf');
  const $label = $('#iup_selected_label');

  function esc(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
      .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function fmtCLP(n) {
    return '$' + (Number(n) || 0).toLocaleString('es-CL', { maximumFractionDigits: 0 });
  }

  function fmtCant(n) {
    const v = Number(n) || 0;
    if (Math.abs(v - Math.round(v)) < 0.0001) return v.toLocaleString('es-CL');
    return v.toLocaleString('es-CL', { minimumFractionDigits: 0, maximumFractionDigits: 3 });
  }

  function setSelected(item) {
    selected = item;
    if (!item) {
      $btnGen.prop('disabled', true);
      $btnPdf.prop('disabled', true);
      $label.text('Escriba para buscar y elija un producto de la lista.');
      return;
    }
    $buscar.val(item.nombre);
    $btnGen.prop('disabled', false);
    $btnPdf.prop('disabled', false);
    $label.html('Seleccionado: <strong>' + esc(item.nombre) + '</strong> · ID ' + item.id
      + (item.unidad_medida ? ' · ' + esc(item.unidad_medida) : ''));
    closeSuggest();
    generar();
  }

  function closeSuggest() {
    $suggest.removeClass('is-open').empty();
    suggestItems = [];
    activeIdx = -1;
  }

  function renderSuggest(items) {
    suggestItems = items || [];
    activeIdx = suggestItems.length ? 0 : -1;
    if (!suggestItems.length) {
      $suggest.html('<div class="iup-suggest-empty">Sin productos con ese nombre</div>').addClass('is-open');
      return;
    }
    let html = '';
    suggestItems.forEach(function (it, i) {
      html += '<button type="button" class="iup-suggest-item' + (i === 0 ? ' is-active' : '') + '" data-idx="' + i + '">'
        + '<div><div class="name">' + esc(it.nombre) + '</div>'
        + '<div class="meta">ID ' + it.id
        + (it.unidad_medida ? ' · ' + esc(it.unidad_medida) : '')
        + (it.categoria ? ' · ' + esc(it.categoria) : '')
        + '</div></div>'
        + '<div class="meta">' + fmtCLP(it.valor) + '</div>'
        + '</button>';
    });
    $suggest.html(html).addClass('is-open');
  }

  function buscarProductos(q) {
    $.getJSON(URL_BUSCAR, { q: q }, function (res) {
      if (!$buscar.is(':focus') && !$suggest.hasClass('is-open')) return;
      renderSuggest((res && res.results) || []);
    });
  }

  $buscar.on('input', function () {
    const q = String($buscar.val() || '').trim();
    selected = null;
    $btnGen.prop('disabled', true);
    $btnPdf.prop('disabled', true);
    $label.text('Escriba para buscar y elija un producto de la lista.');
    clearTimeout(searchTimer);
    if (q.length < 2) {
      closeSuggest();
      return;
    }
    searchTimer = setTimeout(function () { buscarProductos(q); }, 220);
  });

  $buscar.on('keydown', function (e) {
    if (!$suggest.hasClass('is-open') || !suggestItems.length) {
      if (e.key === 'Enter') {
        e.preventDefault();
        if (selected) generar();
      }
      return;
    }
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      activeIdx = Math.min(activeIdx + 1, suggestItems.length - 1);
      $suggest.find('.iup-suggest-item').removeClass('is-active').eq(activeIdx).addClass('is-active');
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      activeIdx = Math.max(activeIdx - 1, 0);
      $suggest.find('.iup-suggest-item').removeClass('is-active').eq(activeIdx).addClass('is-active');
    } else if (e.key === 'Enter') {
      e.preventDefault();
      if (activeIdx >= 0) setSelected(suggestItems[activeIdx]);
    } else if (e.key === 'Escape') {
      closeSuggest();
    }
  });

  $suggest.on('mousedown', '.iup-suggest-item', function (e) {
    e.preventDefault();
    const idx = Number($(this).data('idx'));
    setSelected(suggestItems[idx]);
  });

  $(document).on('click', function (e) {
    if (!$(e.target).closest('.iup-search-wrap').length) closeSuggest();
  });

  function sectionTable(title, icon, count, thead, bodyHtml) {
    return '<div class="iup-section">'
      + '<div class="sec-head"><h6><i class="bx ' + icon + '"></i> ' + esc(title) + '</h6>'
      + '<span class="count">' + count + '</span></div>'
      + '<div class="sec-body"><div class="table-responsive"><table class="table table-sm table-hover mb-0">'
      + '<thead><tr>' + thead + '</tr></thead><tbody>' + bodyHtml + '</tbody>'
      + '</table></div></div></div>';
  }

  function renderInforme(d) {
    const p = d.producto;
    const u = p.unidad_medida || '';
    const r = d.resumen;

    $('#iup_product_card').html(
      '<div>'
      + '<h5 class="title">' + esc(p.nombre) + '</h5>'
      + '<div class="chips">'
      + '<span class="iup-chip is-accent"><i class="bx bx-hash"></i> ID ' + p.id + '</span>'
      + '<span class="iup-chip"><i class="bx bx-ruler"></i> ' + esc(u) + '</span>'
      + '<span class="iup-chip"><i class="bx bx-dollar"></i> ' + fmtCLP(p.valor) + '</span>'
      + (p.categoria ? '<span class="iup-chip"><i class="bx bx-folder"></i> ' + esc(p.categoria) + '</span>' : '')
      + '<span class="iup-chip">' + (p.inventariable ? 'Inventariable' : 'No inventariable') + '</span>'
      + '</div></div>'
      + '<div class="text-md-end"><span class="iup-chip is-accent"><i class="bx bx-link"></i> ' + r.total_usos + ' usos encontrados</span></div>'
    );

    $('#iup_kpis').html(
      '<div class="iup-kpi is-prep"><span class="lbl">Preparaciones</span><p class="val">' + r.total_preparaciones + '</p></div>'
      + '<div class="iup-kpi is-plus"><span class="lbl">PLUs directos</span><p class="val">' + r.total_plus_directos + '</p></div>'
      + '<div class="iup-kpi is-via"><span class="lbl">PLUs vía prep</span><p class="val">' + r.total_plus_via_prep + '</p></div>'
      + '<div class="iup-kpi is-nest"><span class="lbl">Preps anidadas</span><p class="val">' + r.total_preps_anidadas + '</p></div>'
    );

    let html = '';

    // Preparaciones
    let body = '';
    if (!d.preparaciones.length) {
      body = '<tr><td colspan="4" class="empty-row">No se usa en preparaciones</td></tr>';
    } else {
      d.preparaciones.forEach(function (row) {
        body += '<tr>'
          + '<td class="text-muted">#' + row.id + '</td>'
          + '<td><strong>' + esc(row.nombre) + '</strong>'
          + (row.categoria ? '<div class="muted">' + esc(row.categoria) + '</div>' : '')
          + '</td>'
          + '<td class="text-end qty">' + fmtCant(row.cantidad) + ' <span class="muted">' + esc(u) + '</span></td>'
          + '</tr>';
      });
    }
    html += sectionTable(
      'Preparaciones que usan este producto',
      'bx-dish',
      d.preparaciones.length,
      '<th style="width:70px">ID</th><th>Preparación</th><th class="text-end">Cantidad</th>',
      body
    );

    // PLUs directos
    body = '';
    if (!d.plus_directos.length) {
      body = '<tr><td colspan="4" class="empty-row">No se usa directamente en PLUs</td></tr>';
    } else {
      d.plus_directos.forEach(function (row) {
        body += '<tr>'
          + '<td><span class="badge bg-label-primary">' + esc(row.plus) + '</span></td>'
          + '<td><strong>' + esc(row.nombre) + '</strong>'
          + (row.p_carta != null ? '<div class="muted">P. carta ' + fmtCLP(row.p_carta) + '</div>' : '')
          + '</td>'
          + '<td class="text-end qty">' + fmtCant(row.cantidad) + ' <span class="muted">' + esc(u) + '</span></td>'
          + '</tr>';
      });
    }
    html += sectionTable(
      'PLUs que usan este producto (directo)',
      'bx-barcode',
      d.plus_directos.length,
      '<th style="width:90px">Plus</th><th>Nombre</th><th class="text-end">Cantidad</th>',
      body
    );

    // PLUs vía prep
    body = '';
    if (!d.plus_via_preparacion.length) {
      body = '<tr><td colspan="4" class="empty-row">Sin uso indirecto vía preparación</td></tr>';
    } else {
      d.plus_via_preparacion.forEach(function (row) {
        body += '<tr>'
          + '<td><span class="badge bg-label-warning">' + esc(row.plus) + '</span></td>'
          + '<td><strong>' + esc(row.nombre) + '</strong>'
          + '<div class="muted">vía ' + esc(row.preparacion_nombre)
          + ' · prep ' + fmtCant(row.cantidad_prep_en_plus)
          + ' × prod ' + fmtCant(row.cantidad_producto_en_prep) + '</div></td>'
          + '<td class="text-end qty">' + fmtCant(row.cantidad_equivalente) + ' <span class="muted">' + esc(u) + '</span></td>'
          + '</tr>';
      });
    }
    html += sectionTable(
      'PLUs vía preparación (uso indirecto)',
      'bx-git-branch',
      d.plus_via_preparacion.length,
      '<th style="width:90px">Plus</th><th>Detalle</th><th class="text-end">Equiv.</th>',
      body
    );

    // Preps anidadas
    body = '';
    if (!d.preparaciones_anidadas.length) {
      body = '<tr><td colspan="3" class="empty-row">Ninguna otra preparación anida estas recetas</td></tr>';
    } else {
      d.preparaciones_anidadas.forEach(function (row) {
        body += '<tr>'
          + '<td><strong>' + esc(row.nombre) + '</strong>'
          + (row.categoria ? '<div class="muted">' + esc(row.categoria) + '</div>' : '')
          + '</td>'
          + '<td class="muted">usa <strong>' + esc(row.prep_insumo_nombre) + '</strong></td>'
          + '<td class="text-end qty">' + fmtCant(row.cantidad) + '</td>'
          + '</tr>';
      });
    }
    html += sectionTable(
      'Preparaciones que usan una prep con este producto',
      'bx-layer',
      d.preparaciones_anidadas.length,
      '<th>Preparación</th><th>Insumo (prep)</th><th class="text-end">Cantidad</th>',
      body
    );

    $('#iup_sections').html(html);
    $('#bloque_vacio').addClass('d-none');
    $('#bloque_resultado').removeClass('d-none');
  }

  function generar() {
    if (!selected) {
      Swal.fire({ icon: 'warning', title: 'Seleccione un producto', timer: 1600, showConfirmButton: false, position: 'top-end' });
      return;
    }
    $btnGen.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Cargando…');
    $.getJSON(URL_DATOS, { producto_id: selected.id }, function (res) {
      if (!res || !res.ok) {
        Swal.fire({ icon: 'error', title: (res && res.message) || 'No se pudo generar', timer: 1800, showConfirmButton: false });
        return;
      }
      renderInforme(res.data);
      $btnPdf.prop('disabled', false);
    }).fail(function (xhr) {
      const msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Error al consultar';
      Swal.fire({ icon: 'error', title: msg, timer: 1800, showConfirmButton: false });
    }).always(function () {
      $btnGen.prop('disabled', !selected).html('<i class="bx bx-analyse"></i> Ver informe');
    });
  }

  $btnGen.on('click', generar);
  $btnPdf.on('click', function () {
    if (!selected) return;
    window.open(URL_PDF + '/' + selected.id, '_blank');
  });
})();
</script>
@endsection