@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
  .mbm-page {
    --mbm-border: #e7e7e9;
    --mbm-muted: #697a8d;
    --mbm-surface: #f8f9fa;
    --mbm-accent: #696cff;
    --mbm-ok: #28c76f;
    --mbm-warn: #ff9f43;
  }
  .mbm-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .mbm-page .page-head h4 { margin: 0; }
  .mbm-page .page-head .hint {
    color: var(--mbm-muted);
    font-size: 0.875rem;
    max-width: 40rem;
    margin: 0.35rem 0 0;
  }
  .mbm-filters {
    background: #fff;
    border: 1px solid var(--mbm-border);
    border-radius: 0.625rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
  }
  .mbm-filters .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 0.3rem;
  }
  .mbm-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .mbm-result-head h5 {
    margin: 0;
    font-weight: 700;
    color: #566a7f;
  }
  .mbm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    background: #eef0ff;
    color: var(--mbm-accent);
    font-size: 0.78rem;
    font-weight: 650;
  }
  .mbm-heroes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
  }
  @media (min-width: 768px) {
    .mbm-heroes { grid-template-columns: 1.2fr 1fr 1fr; }
  }
  .mbm-hero {
    background: #fff;
    border: 1px solid var(--mbm-border);
    border-radius: 0.625rem;
    padding: 1.15rem 1.2rem;
    min-height: 100%;
  }
  .mbm-hero.accent {
    background: linear-gradient(135deg, #f5f5ff 0%, #ffffff 70%);
    border-color: #cfd0ff;
  }
  .mbm-hero.ok {
    background: linear-gradient(135deg, #f2fbf6 0%, #ffffff 70%);
    border-color: #b9f0d1;
  }
  .mbm-hero .lbl {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mbm-muted);
    font-weight: 650;
    margin-bottom: 0.35rem;
  }
  .mbm-hero .val {
    font-size: 1.85rem;
    font-weight: 750;
    color: #566a7f;
    line-height: 1.15;
    margin: 0;
    word-break: break-word;
  }
  .mbm-hero.accent .val { color: var(--mbm-accent); }
  .mbm-hero.ok .val { color: var(--mbm-ok); }
  .mbm-hero .sub {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--mbm-muted);
  }
  .mbm-bars {
    margin-top: 0.85rem;
  }
  .mbm-bar-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--mbm-muted);
    margin-bottom: 0.25rem;
  }
  .mbm-bar {
    height: 0.45rem;
    background: #eceef1;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.55rem;
  }
  .mbm-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    transition: width .45s ease;
  }
  .mbm-bar.costo > span { background: var(--mbm-warn); }
  .mbm-bar.margen > span { background: var(--mbm-ok); }
  .mbm-section {
    background: #fff;
    border: 1px solid var(--mbm-border);
    border-radius: 0.625rem;
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .mbm-section .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--mbm-border);
    background: var(--mbm-surface);
  }
  .mbm-section .sec-head h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #566a7f;
  }
  .mbm-section .sec-body { padding: 1rem 1.1rem; }
  .mbm-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  @media (min-width: 992px) {
    .mbm-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  .mbm-flow-item {
    border: 1px solid var(--mbm-border);
    border-radius: 0.5rem;
    padding: 0.85rem 0.9rem;
    background: #fff;
    position: relative;
  }
  .mbm-flow-item.cmv {
    border-color: #cfd0ff;
    background: #f8f8ff;
  }
  .mbm-flow-item .op {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mbm-accent);
    margin-bottom: 0.25rem;
  }
  .mbm-flow-item .lbl {
    display: block;
    font-size: 0.72rem;
    color: var(--mbm-muted);
    font-weight: 600;
    line-height: 1.25;
    min-height: 2rem;
  }
  .mbm-flow-item .val {
    margin: 0.35rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #566a7f;
  }
  .mbm-flow-item.cmv .val { color: var(--mbm-accent); }
  .mbm-side-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .mbm-metric {
    border: 1px solid var(--mbm-border);
    border-radius: 0.5rem;
    padding: 0.85rem 0.95rem;
    background: #fff;
  }
  .mbm-metric .lbl {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mbm-muted);
    font-weight: 650;
    margin-bottom: 0.25rem;
  }
  .mbm-metric .val {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #566a7f;
  }
  .mbm-table {
    margin: 0;
  }
  .mbm-table td {
    padding: 0.7rem 1.1rem;
    vertical-align: middle;
    border-color: #f0f1f3;
    font-size: 0.9rem;
  }
  .mbm-table tr.sep td {
    background: var(--mbm-surface);
    font-weight: 650;
  }
  .mbm-table tr.cmv td {
    background: #f5f5ff;
    color: #4e4fbc;
    font-weight: 700;
  }
  .mbm-table tr.ok td {
    background: #f2fbf6;
    color: #1f9d57;
    font-weight: 700;
  }
  .mbm-formula {
    font-size: 0.8rem;
    color: var(--mbm-muted);
    margin: 0;
  }
  .mbm-empty {
    border: 1px dashed var(--mbm-border);
    border-radius: 0.625rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
    color: var(--mbm-muted);
    background: #fcfcfd;
  }
  .mbm-empty i {
    font-size: 1.75rem;
    color: #b4b8c5;
    display: block;
    margin-bottom: 0.5rem;
  }
  .mbm-cfg-list .form-check {
    padding: 0.65rem 0.85rem 0.65rem 2.35rem;
    border: 1px solid var(--mbm-border);
    border-radius: 0.5rem;
    margin-bottom: 0.55rem;
    background: #fff;
  }
  .mbm-cfg-list .form-check:last-child { margin-bottom: 0; }
  .mbm-cfg-list .form-check-input { margin-top: 0.2rem; }
  .mbm-cfg-list .form-check-label {
    font-weight: 600;
    color: #566a7f;
    cursor: pointer;
  }
  .mbm-cfg-list {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.25rem;
  }
  .mbm-cfg-add {
    border-top: 1px solid var(--mbm-border);
    margin-top: 1rem;
    padding-top: 1rem;
  }
</style>

<div class="mbm-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Informe de</span> Margen Bruto Mensual</h4>
      <p class="hint" id="hint_exclusion">CMV = inventario inicial + compras − inventario final. En inventarios y compras se excluye la categoría ARTICULOS DE ASEO; en compras también los productos no inventariables.</p>
    </div>
  </div>

  <div class="mbm-filters">
    <div class="row g-3 align-items-end">
      <div class="col-6 col-md-3 col-xl-2">
        <label class="form-label" for="mes">Mes</label>
        <select name="mes" id="mes" class="form-select">
          <option value="">Seleccione</option>
          <option value="1">Enero</option>
          <option value="2">Febrero</option>
          <option value="3">Marzo</option>
          <option value="4">Abril</option>
          <option value="5">Mayo</option>
          <option value="6">Junio</option>
          <option value="7">Julio</option>
          <option value="8">Agosto</option>
          <option value="9">Septiembre</option>
          <option value="10">Octubre</option>
          <option value="11">Noviembre</option>
          <option value="12">Diciembre</option>
        </select>
      </div>
      <div class="col-6 col-md-3 col-xl-2">
        <label class="form-label" for="anio">Año</label>
        <select name="anio" id="anio" class="form-select">
          <option value="">Seleccione</option>
          @php $anio_actual = (int) date('Y'); @endphp
          @for ($anio = 2010; $anio <= $anio_actual; $anio++)
            <option value="{{ $anio }}" @if($anio === $anio_actual) selected @endif>{{ $anio }}</option>
          @endfor
        </select>
      </div>
      <div class="col-12 col-md-6 col-xl-8 d-flex flex-wrap gap-2">
        <button type="button" class="btn btn-primary" id="btn_generar">
          <i class="bx bx-bar-chart-alt-2"></i> Generar
        </button>
        <button type="button" class="btn btn-outline-secondary d-none" id="btn_pdf">
          <i class="bx bx-file"></i> Descargar PDF
        </button>
        <button type="button" class="btn btn-outline-primary" id="btn_config" data-bs-toggle="modal" data-bs-target="#modalExclusiones">
          <i class="bx bx-cog"></i> Configuración
        </button>
      </div>
    </div>
  </div>

  {{-- Modal categorías a excluir --}}
  <div class="modal fade" id="modalExclusiones" tabindex="-1" aria-labelledby="modalExclusionesLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalExclusionesLabel">
            <i class="bx bx-cog me-1"></i> Categorías a excluir
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <p class="text-muted small mb-3">
            Marca las categorías que deben omitirse del inventario inicial, del inventario final y de las compras del mes. También puedes crear una categoría nueva aquí.
          </p>
          <div class="mb-2">
            <input type="search" class="form-control form-control-sm" id="filtro_categorias" placeholder="Buscar categoría…">
          </div>
          <div class="mbm-cfg-list" id="lista_exclusiones">
            @foreach ($catsExcluibles as $clave => $label)
              <div class="form-check" data-cat-label="{{ strtolower($label) }}">
                <input class="form-check-input excluir-cat" type="checkbox"
                       value="{{ $clave }}" id="excluir_{{ md5($clave) }}"
                       @if(in_array($clave, $catsDefault, true)) checked @endif>
                <label class="form-check-label" for="excluir_{{ md5($clave) }}">{{ $label }}</label>
              </div>
            @endforeach
          </div>
          <div class="mbm-cfg-add">
            <label class="form-label small fw-semibold mb-1" for="nueva_categoria">Agregar categoría</label>
            <div class="input-group">
              <input type="text" class="form-control" id="nueva_categoria" maxlength="255" placeholder="Ej: ARTICULOS DE LIMPIEZA">
              <button type="button" class="btn btn-outline-primary" id="btn_agregar_categoria">
                <i class="bx bx-plus"></i> Agregar
              </button>
            </div>
            <div class="form-text">Se crea en el sistema y queda disponible para excluirla de inmediato.</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" id="btn_guardar_exclusiones">
            <i class="bx bx-check"></i> Guardar
          </button>
        </div>
      </div>
    </div>
  </div>

  <div id="bloque_vacio" class="mbm-empty">
    <i class="bx bx-pie-chart-alt-2"></i>
    Seleccione mes y año, luego pulse <strong>Generar</strong> para ver el margen bruto.
  </div>

  <div class="d-none" id="bloque_resultado">
    <div class="mbm-result-head">
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <h5 id="titulo_periodo">—</h5>
        <span class="mbm-badge"><i class="bx bx-calendar"></i> Período analizado</span>
      </div>
    </div>

    <div class="mb-3 d-none" id="bloque_avisos_wrap">
      <div class="alert alert-warning mb-0 py-2" id="bloque_avisos"></div>
    </div>

    {{-- Indicadores principales --}}
    <div class="mbm-heroes">
      <div class="mbm-hero accent">
        <span class="lbl">Punto de utilidad</span>
        <p class="val" id="val_punto">—</p>
        <div class="sub">Venta ÷ CMV</div>
      </div>
      <div class="mbm-hero ok">
        <span class="lbl">% Margen bruto</span>
        <p class="val" id="val_pct_margen">—</p>
        <div class="sub">Utilidad bruta / Venta</div>
        <div class="mbm-bars">
          <div class="mbm-bar-row"><span>Margen</span><span id="bar_lbl_margen">0%</span></div>
          <div class="mbm-bar margen"><span id="bar_margen"></span></div>
        </div>
      </div>
      <div class="mbm-hero">
        <span class="lbl">% Costo sobre venta</span>
        <p class="val" id="val_pct_costo">—</p>
        <div class="sub">CMV / Venta</div>
        <div class="mbm-bars">
          <div class="mbm-bar-row"><span>Costo</span><span id="bar_lbl_costo">0%</span></div>
          <div class="mbm-bar costo"><span id="bar_costo"></span></div>
        </div>
      </div>
    </div>

    {{-- Flujo CMV --}}
    <div class="mbm-section">
      <div class="sec-head">
        <h6>Costo de mercadería vendida (CMV)</h6>
      </div>
      <div class="sec-body">
        <div class="mbm-flow">
          <div class="mbm-flow-item">
            <span class="op">Base</span>
            <span class="lbl" id="lbl_inv_inicial">Inventario inicial</span>
            <p class="val" id="val_inv_inicial">—</p>
          </div>
          <div class="mbm-flow-item">
            <span class="op">+ Compras</span>
            <span class="lbl" id="lbl_compras">Compras del mes (inventariables, sin aseo)</span>
            <p class="val" id="val_compras">—</p>
          </div>
          <div class="mbm-flow-item">
            <span class="op">= Disponible</span>
            <span class="lbl">Inventario inicial + compras</span>
            <p class="val" id="val_disponible">—</p>
          </div>
          <div class="mbm-flow-item">
            <span class="op">− Final</span>
            <span class="lbl" id="lbl_inv_final">Inventario final</span>
            <p class="val" id="val_inv_final">—</p>
          </div>
          <div class="mbm-flow-item cmv">
            <span class="op">= CMV</span>
            <span class="lbl">Costo de mercadería vendida</span>
            <p class="val" id="val_cmv">—</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-md-5">
        <div class="mbm-section h-100 mb-0">
          <div class="sec-head"><h6>Resultado del mes</h6></div>
          <div class="sec-body">
            <div class="mbm-side-metrics">
              <div class="mbm-metric">
                <span class="lbl">Venta del mes</span>
                <p class="val" id="val_venta">—</p>
              </div>
              <div class="mbm-metric">
                <span class="lbl">Utilidad bruta</span>
                <p class="val" id="val_utilidad">—</p>
              </div>
            </div>
            <p class="mbm-formula mt-3">Utilidad bruta = Venta − CMV</p>
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="mbm-section h-100 mb-0">
          <div class="sec-head"><h6>Detalle del cálculo</h6></div>
          <div class="table-responsive">
            <table class="table mbm-table mb-0">
              <tbody>
                <tr>
                  <td id="row_lbl_inv_inicial">Inventario inicial</td>
                  <td class="text-end fw-semibold" id="row_inv_inicial">—</td>
                </tr>
                <tr>
                  <td id="row_lbl_compras">+ Compras del mes <span class="text-muted small">(inventariables, sin aseo)</span></td>
                  <td class="text-end fw-semibold" id="row_compras">—</td>
                </tr>
                <tr class="sep">
                  <td>= Disponible</td>
                  <td class="text-end" id="row_disponible">—</td>
                </tr>
                <tr>
                  <td id="row_lbl_inv_final">− Inventario final</td>
                  <td class="text-end fw-semibold" id="row_inv_final">—</td>
                </tr>
                <tr class="cmv">
                  <td>= CMV</td>
                  <td class="text-end" id="row_cmv">—</td>
                </tr>
                <tr>
                  <td>Venta del mes</td>
                  <td class="text-end fw-semibold" id="row_venta">—</td>
                </tr>
                <tr>
                  <td>− CMV</td>
                  <td class="text-end fw-semibold" id="row_cmv2">—</td>
                </tr>
                <tr class="ok">
                  <td>Utilidad bruta</td>
                  <td class="text-end" id="row_utilidad">—</td>
                </tr>
                <tr>
                  <td>% Costo sobre venta</td>
                  <td class="text-end fw-semibold" id="row_pct_costo">—</td>
                </tr>
                <tr>
                  <td>% Margen bruto</td>
                  <td class="text-end fw-semibold" id="row_pct_margen">—</td>
                </tr>
                <tr>
                  <td>Punto de utilidad (Venta ÷ CMV)</td>
                  <td class="text-end fw-bold" id="row_punto">—</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  let CATS_LABELS = @json($catsExcluibles);
  const CATS_DEFAULT = @json($catsDefault);
  const STORAGE_KEY = 'mbm_categorias_excluidas';
  const CSRF = $('meta[name="csrf-token"]').attr('content');

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

  function pct(n) {
    return Number(n || 0).toLocaleString('es-CL', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' %';
  }

  function num(n) {
    return Number(n || 0).toLocaleString('es-CL', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  function clampPct(n) {
    n = Number(n || 0);
    if (n < 0) return 0;
    if (n > 100) return 100;
    return n;
  }

  function normCat(s) {
    return String(s || '')
      .trim()
      .toUpperCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '')
      .replace(/Ñ/g, 'N');
  }

  function cargarExcluidas() {
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (raw === null) return CATS_DEFAULT.slice();
      const parsed = JSON.parse(raw);
      if (!Array.isArray(parsed)) return CATS_DEFAULT.slice();
      return parsed.map(normCat).filter(Boolean);
    } catch (e) {
      return CATS_DEFAULT.slice();
    }
  }

  function guardarExcluidas(list) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(list.map(normCat)));
  }

  function getExcluidasDesdeModal() {
    return $('.excluir-cat:checked').map(function () { return this.value; }).get();
  }

  function pintarListaCategorias(catalogo, seleccionadas) {
    CATS_LABELS = catalogo || {};
    const $lista = $('#lista_exclusiones').empty();
    const keys = Object.keys(CATS_LABELS).sort(function (a, b) {
      return String(CATS_LABELS[a]).localeCompare(String(CATS_LABELS[b]), 'es');
    });

    if (!keys.length) {
      $lista.html('<p class="text-muted small mb-0">No hay categorías activas.</p>');
      return;
    }

    keys.forEach(function (clave) {
      const label = CATS_LABELS[clave];
      const id = 'excluir_' + clave.replace(/[^A-Z0-9]/g, '_');
      const checked = seleccionadas.indexOf(clave) !== -1 ? ' checked' : '';
      $lista.append(
        '<div class="form-check" data-cat-label="' + String(label).toLowerCase().replace(/"/g, '&quot;') + '">' +
          '<input class="form-check-input excluir-cat" type="checkbox" value="' + clave + '" id="' + id + '"' + checked + '>' +
          '<label class="form-check-label" for="' + id + '">' + $('<div>').text(label).html() + '</label>' +
        '</div>'
      );
    });
  }

  function pintarChecks(list) {
    $('.excluir-cat').each(function () {
      $(this).prop('checked', list.indexOf(this.value) !== -1);
    });
  }

  function labelsDe(list) {
    return list.map(function (c) { return CATS_LABELS[c] || c; });
  }

  function textoHint(list) {
    const labels = labelsDe(list);
    if (!labels.length) {
      return 'CMV = inventario inicial + compras − inventario final. En inventarios y compras no se excluye ninguna categoría; en compras sí se omiten los productos no inventariables.';
    }
    const lista = labels.length === 1
      ? labels[0]
      : labels.slice(0, -1).join(', ') + ' y ' + labels[labels.length - 1];
    return 'CMV = inventario inicial + compras − inventario final. En inventarios y compras se excluye'
      + (labels.length === 1 ? ' la categoría ' : 'n las categorías ')
      + lista
      + '; en compras también los productos no inventariables.';
  }

  function actualizarTextosExclusion(list) {
    $('#hint_exclusion').text(textoHint(list));
    const labels = labelsDe(list);
    let lbl = 'Compras del mes (inventariables)';
    let detalle = 'inventariables';
    if (labels.length) {
      detalle = 'inventariables, sin ' + labels.join(', ');
      lbl = 'Compras del mes (' + detalle + ')';
    }
    $('#lbl_compras').text(lbl);
    $('#row_lbl_compras').html('+ Compras del mes <span class="text-muted small">(' + detalle + ')</span>');
  }

  function paramsConExclusiones(base) {
    return Object.assign({}, base, {
      exclusion_cfg: 1,
      excluir: cargarExcluidas()
    });
  }

  function periodoValido() {
    const mes = $('#mes').val();
    const anio = $('#anio').val();

    if (!mes) {
      Swal.fire({ position: 'top-end', icon: 'error', title: '¡ Debe ingresar un mes !', showConfirmButton: false, timer: 1500 });
      return null;
    }
    if (!anio) {
      Swal.fire({ position: 'top-end', icon: 'error', title: '¡ Debe ingresar un año !', showConfirmButton: false, timer: 1500 });
      return null;
    }
    return { mes, anio };
  }

  function pintar(d) {
    $('#titulo_periodo').text(d.mes_nombre + ' ' + d.anio);

    const lblIni = 'Inventario inicial (' + d.mes_anterior_nombre + ' ' + d.anio_anterior + ')';
    const lblFin = 'Inventario final (' + d.mes_nombre + ' ' + d.anio + ')';

    $('#lbl_inv_inicial, #row_lbl_inv_inicial').text(lblIni);
    $('#lbl_inv_final').text(lblFin);
    $('#row_lbl_inv_final').text('− ' + lblFin);

    if (d.categorias_excluidas) {
      actualizarTextosExclusion(d.categorias_excluidas);
    }

    $('#val_inv_inicial, #row_inv_inicial').text(money(d.inventario_inicial));
    $('#val_compras, #row_compras').text(money(d.compras));
    $('#val_disponible, #row_disponible').text(money(d.disponible));
    $('#val_inv_final, #row_inv_final').text(money(d.inventario_final));
    $('#val_cmv, #row_cmv, #row_cmv2').text(money(d.cmv));
    $('#val_venta, #row_venta').text(money(d.venta));
    $('#val_utilidad, #row_utilidad').text(money(d.utilidad_bruta));
    $('#val_pct_costo, #row_pct_costo').text(pct(d.pct_costo));
    $('#val_pct_margen, #row_pct_margen').text(pct(d.pct_margen));
    $('#val_punto, #row_punto').text(num(d.punto));

    const pc = clampPct(d.pct_costo);
    const pm = clampPct(d.pct_margen);
    $('#bar_costo').css('width', pc + '%');
    $('#bar_margen').css('width', pm + '%');
    $('#bar_lbl_costo').text(pct(d.pct_costo));
    $('#bar_lbl_margen').text(pct(d.pct_margen));

    if (d.avisos && d.avisos.length) {
      $('#bloque_avisos').html(d.avisos.map(a => '<div>• ' + a + '</div>').join(''));
      $('#bloque_avisos_wrap').removeClass('d-none');
    } else {
      $('#bloque_avisos_wrap').addClass('d-none');
      $('#bloque_avisos').empty();
    }

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

  function refrescarCategorias(seleccionadas) {
    return $.getJSON('{{ url("informes/informe_margen_bruto/categorias") }}')
      .done(function (res) {
        if (res.ok && res.categorias) {
          pintarListaCategorias(res.categorias, seleccionadas || cargarExcluidas());
        }
      });
  }

  // Mes actual por defecto + exclusiones guardadas
  (function () {
    const m = String(new Date().getMonth() + 1);
    if (!$('#mes').val()) $('#mes').val(m);
    const excluidas = cargarExcluidas();
    pintarChecks(excluidas);
    actualizarTextosExclusion(excluidas);
  })();

  $('#modalExclusiones').on('show.bs.modal', function () {
    $('#filtro_categorias').val('');
    refrescarCategorias(cargarExcluidas());
  });

  $('#filtro_categorias').on('input', function () {
    const q = String($(this).val() || '').toLowerCase().trim();
    $('#lista_exclusiones .form-check').each(function () {
      const label = String($(this).data('cat-label') || '');
      $(this).toggle(!q || label.indexOf(q) !== -1);
    });
  });

  $('#btn_agregar_categoria').on('click', function () {
    const nombre = String($('#nueva_categoria').val() || '').trim();
    if (!nombre) {
      Swal.fire({ position: 'top-end', icon: 'error', title: 'Ingrese un nombre de categoría', showConfirmButton: false, timer: 1500 });
      return;
    }

    const $btn = $(this).prop('disabled', true);
    $.ajax({
      url: '{{ url("producto/categoria/crear") }}',
      method: 'POST',
      data: { nombre: nombre, _token: CSRF },
      dataType: 'json'
    })
      .done(function (res) {
        if (!res.response || !res.data) {
          Swal.fire({ icon: 'error', title: 'No se pudo crear la categoría' });
          return;
        }
        const clave = normCat(res.data.nombre);
        const seleccion = cargarExcluidas();
        if (seleccion.indexOf(clave) === -1) seleccion.push(clave);
        guardarExcluidas(seleccion);
        $('#nueva_categoria').val('');
        refrescarCategorias(seleccion).always(function () {
          actualizarTextosExclusion(seleccion);
          Swal.fire({ position: 'top-end', icon: 'success', title: 'Categoría agregada', showConfirmButton: false, timer: 1400 });
        });
      })
      .fail(function (xhr) {
        let msg = 'No se pudo crear la categoría';
        if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.nombre) {
          msg = xhr.responseJSON.errors.nombre[0];
        } else if (xhr.responseJSON && xhr.responseJSON.message) {
          msg = xhr.responseJSON.message;
        }
        Swal.fire({ icon: 'error', title: msg });
      })
      .always(function () {
        $btn.prop('disabled', false);
      });
  });

  $('#nueva_categoria').on('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      $('#btn_agregar_categoria').trigger('click');
    }
  });

  $('#btn_guardar_exclusiones').on('click', function () {
    const list = getExcluidasDesdeModal();
    guardarExcluidas(list);
    actualizarTextosExclusion(list);

    const modalEl = document.getElementById('modalExclusiones');
    if (window.bootstrap && bootstrap.Modal) {
      const inst = bootstrap.Modal.getInstance(modalEl);
      if (inst) inst.hide();
    } else {
      $('#modalExclusiones').modal('hide');
    }

    Swal.fire({
      position: 'top-end',
      icon: 'success',
      title: 'Configuración guardada',
      showConfirmButton: false,
      timer: 1400
    });

    if (!$('#bloque_resultado').hasClass('d-none')) {
      $('#btn_generar').trigger('click');
    }
  });

  $('#btn_generar').on('click', function () {
    const p = periodoValido();
    if (!p) return;

    const $btn = $(this).prop('disabled', true);
    $btn.html('<i class="bx bx-loader-alt bx-spin"></i> Generando…');

    $.getJSON('{{ url("informes/informe_margen_bruto/datos") }}', paramsConExclusiones(p))
      .done(function (res) {
        if (!res.ok) {
          Swal.fire({ icon: 'error', title: res.message || 'No se pudo generar el informe' });
          return;
        }
        pintar(res.data);
      })
      .fail(function (xhr) {
        const msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Error al obtener los datos';
        Swal.fire({ icon: 'error', title: msg });
      })
      .always(function () {
        $btn.prop('disabled', false).html('<i class="bx bx-bar-chart-alt-2"></i> Generar');
      });
  });

  $('#btn_pdf').on('click', function () {
    const p = periodoValido();
    if (!p) return;
    const excluir = cargarExcluidas();
    let qs = 'exclusion_cfg=1';
    excluir.forEach(function (c) {
      qs += '&excluir[]=' + encodeURIComponent(c);
    });
    window.open(`{{ URL::to('/') }}/informe_margen_bruto/${p.mes}/${p.anio}?${qs}`, '_blank');
  });
</script>
@endsection