@extends('theme.sneat.admin')
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />

<div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
  <div>
    <h4 class="fw-bold py-2 mb-1">
      <span class="text-muted fw-light">Informes ·</span>
      Subidas de costo en compras
      <i class="bx bx-trending-up text-primary ms-1 align-middle" title="Variación al alza respecto a la compra previa"></i>
    </h4>
    <p class="text-muted mb-0" style="max-width: 42rem;">
      Muestra <strong>solo productos inventariables</strong> cuyo <strong>costo unitario</strong> en una compra es <strong>mayor</strong> que en la compra inmediatamente anterior del mismo producto (cualquier proveedor), con fechas y proveedores de ambas operaciones.
    </p>
  </div>
</div>

<div class="row">
  <div class="col-xl">
    <div class="card mb-4 border-0 shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center bg-label-primary py-3">
        <span class="fw-semibold"><i class="bx bx-filter-alt me-1"></i> Filtros</span>
        <small class="text-muted">Misma lógica que informe compras factura</small>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-3 col-lg-2">
            <label class="form-label" for="f_desde">Fecha desde</label>
            <input type="date" class="form-control" id="f_desde" value="{{ date('Y-m-01') }}" />
          </div>
          <div class="col-md-3 col-lg-2">
            <label class="form-label" for="f_hasta">Fecha hasta</label>
            <input type="date" class="form-control" id="f_hasta" value="{{ date('Y-m-d') }}" />
          </div>
          <div class="col-md-3 col-lg-2">
            <label class="form-label" for="f_factura">N° factura / ref.</label>
            <input type="text" class="form-control" id="f_factura" placeholder="Compra actual…" autocomplete="off" />
          </div>
          <div class="col-md-3 col-lg-2">
            <label class="form-label" for="f_cheque">N° cheque</label>
            <input type="text" class="form-control" id="f_cheque" placeholder="Compra actual…" autocomplete="off" />
          </div>
          <div class="col-md-6 col-lg-4">
            <label class="form-label" for="f_proveedor">Proveedor (compra con subida)</label>
            <select class="form-select" id="f_proveedor">
              <option value="">Todos</option>
              @foreach ($proveedores as $prov)
                <option value="{{ $prov->id }}">{{ $prov->nombre }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-6 col-lg-4">
            <label class="form-label" for="f_categoria">Categoría</label>
            <select class="form-select" id="f_categoria">
              <option value="">Todas</option>
              @foreach ($categorias as $cat)
                <option value="{{ $cat->id }}">{{ $cat->nombre }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-6 col-lg-4">
            <label class="form-label" for="f_producto">Producto</label>
            <select id="f_producto" placeholder="Buscar producto…"></select>
          </div>
          <div class="col-12 d-flex flex-wrap gap-2 align-items-end">
            <button type="button" class="btn btn-primary" id="btn_generar"><i class="bx bx-refresh me-1"></i> Generar</button>
            <button type="button" class="btn btn-outline-secondary" id="btn_limpiar">Limpiar filtros</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4" id="bloque_resumen">
  <div class="col-6 col-md-4">
    <div class="card h-100 border-0 shadow-sm" style="border-left: 4px solid #5f2eea !important;">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase fw-semibold">Aumentos detectados</div>
        <div class="fs-3 fw-bold text-primary" id="sum_total_aumentos">—</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card h-100 border-0 shadow-sm" style="border-left: 4px solid #f59e0b !important;">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase fw-semibold">Productos distintos</div>
        <div class="fs-3 fw-bold" style="color: #d97706;" id="sum_productos">—</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card h-100 border-0 shadow-sm" style="border-left: 4px solid #f43f5e !important;">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase fw-semibold">% promedio de alza</div>
        <div class="fs-3 fw-bold text-danger" id="sum_prom_pct">—</div>
      </div>
    </div>
  </div>
</div>

<div class="card border-0 shadow-sm">
  <div class="card-header p-3 d-flex flex-wrap justify-content-between align-items-center gap-2 bg-light">
    <span class="fw-semibold"><i class="bx bx-list-ul me-1 text-primary"></i> Detalle de subidas</span>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Exportar</button>
      <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="javascript:void(0)" id="exp_excel">Excel</a>
        <a class="dropdown-item" href="javascript:void(0)" id="exp_pdf">PDF</a>
      </div>
    </div>
  </div>
  <div class="table-responsive text-nowrap" style="min-height: 280px;">
    <table id="tabla_aumentos" class="table table-striped table-hover table-sm mb-0 w-100">
      <thead class="table-light">
        <tr>
          <th class="text-center">ID compra</th>
          <th class="text-center">Fecha subida</th>
          <th>Producto</th>
          <th>Categoría</th>
          <th>Proveedor (actual)</th>
          <th class="text-end">Costo ant.</th>
          <th class="text-end">Costo nuevo</th>
          <th class="text-end">Δ $</th>
          <th class="text-center">% alza</th>
          <th class="text-center">Compra anterior</th>
          <th>Fecha ant.</th>
          <th>Proveedor ant.</th>
          <th>Factura / ref.</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
  function numOrNull(n) {
    if (n === null || n === undefined || n === '') return null;
    var x = Number(n);
    return isNaN(x) ? null : x;
  }

  var fmt = {
    intStr: function (n) {
      var num = numOrNull(n);
      if (num === null) return '—';
      return Math.round(num).toLocaleString('es-CL', { maximumFractionDigits: 0 });
    },
    costoU: function (n) {
      var num = numOrNull(n);
      if (num === null) return '—';
      return String(Math.round(num));
    },
    pct: function (n) {
      var num = numOrNull(n);
      if (num === null) return '—';
      return num.toLocaleString('es-CL', { minimumFractionDigits: 0, maximumFractionDigits: 1 }) + '%';
    }
  };

  function renderPctBadge(d, type) {
    if (type === 'sort' || type === 'type') return numOrNull(d) ?? -1;
    var num = numOrNull(d);
    if (num === null) return '—';
    var cls = num >= 15 ? 'bg-danger' : (num >= 7 ? 'bg-warning text-dark' : 'bg-label-warning');
    return '<span class="badge ' + cls + ' rounded-pill px-2">' + fmt.pct(num) + '</span>';
  }

  function aplicarResumen(r) {
    if (!r) return;
    $('#sum_total_aumentos').text(fmt.intStr(r.total_aumentos));
    $('#sum_productos').text(fmt.intStr(r.productos_distintos));
    $('#sum_prom_pct').text(r.promedio_pct != null ? fmt.pct(r.promedio_pct) : '—');
  }

  var tabla = null;

  function destruirTabla() {
    if ($.fn.DataTable.isDataTable('#tabla_aumentos')) {
      $('#tabla_aumentos').DataTable().destroy();
    }
  }

  function generar() {
    destruirTabla();
    tabla = $('#tabla_aumentos').DataTable({
      processing: true,
      serverSide: false,
      searching: true,
      paging: true,
      pageLength: 25,
      lengthChange: true,
      info: true,
      dom: 'Bfrtip',
      order: [[1, 'desc']],
      ajax: {
        url: "{{ url('compras-facturas/informe-aumentos-costo-listado') }}",
        data: function (d) {
          d.fecha_desde = $('#f_desde').val();
          d.fecha_hasta = $('#f_hasta').val();
          d.facturas = $('#f_factura').val();
          d.numero_cheque = $('#f_cheque').val();
          d.proveedor_id = $('#f_proveedor').val();
          d.categoria_producto_id = $('#f_categoria').val();
          var elP = document.getElementById('f_producto');
          var pid = (elP && elP.selectize) ? elP.selectize.getValue() : ($(elP).val() || '');
          d.producto_id = pid || '';
        },
        dataSrc: function (json) {
          aplicarResumen(json.resumen || {});
          return json.data || [];
        }
      },
      columns: [
        { data: 'compra_id', className: 'text-center' },
        { data: 'fecha', className: 'text-center' },
        { data: 'producto_nombre' },
        { data: 'categoria_nombre' },
        { data: 'proveedor_nombre' },
        { data: 'costo_anterior', className: 'text-end', render: function (d, t) { return t === 'sort' || t === 'type' ? (numOrNull(d) ?? 0) : fmt.costoU(d); } },
        { data: 'costo_unitario', className: 'text-end fw-semibold', render: function (d, t) { return t === 'sort' || t === 'type' ? (numOrNull(d) ?? 0) : fmt.costoU(d); } },
        { data: 'diferencia_abs', className: 'text-end text-danger', render: function (d, t) { return t === 'sort' || t === 'type' ? (numOrNull(d) ?? 0) : '+' + fmt.costoU(d); } },
        { data: 'pct_aumento', className: 'text-center', render: renderPctBadge },
        { data: 'compra_id_anterior', className: 'text-center', render: function (d) { return d != null ? d : '—'; } },
        { data: 'fecha_anterior', className: 'text-center' },
        { data: 'proveedor_anterior' },
        { data: 'facturas' }
      ],
      buttons: [
        {
          extend: 'excel',
          exportOptions: { columns: ':visible' },
          className: 'btn-excel-ac d-none'
        },
        {
          extend: 'pdfHtml5',
          orientation: 'landscape',
          pageSize: 'LEGAL',
          exportOptions: { columns: ':visible' },
          className: 'btn-pdf-ac d-none'
        }
      ],
      language: {
        sProcessing: 'Procesando…',
        sZeroRecords: 'Sin subidas de costo en el período',
        sEmptyTable: 'Pulse Generar para cargar',
        sSearch: 'Buscar en tabla:',
        lengthMenu: 'Mostrar _MENU_ filas',
        info: '_START_–_END_ de _TOTAL_',
        infoEmpty: '0 filas',
        paginate: { previous: 'Anterior', next: 'Siguiente' }
      },
      initComplete: function () {
        $('.dt-buttons').hide();
      }
    });
  }

  $('#exp_excel').on('click', function () {
    if (tabla) $('.btn-excel-ac').trigger('click');
  });
  $('#exp_pdf').on('click', function () {
    if (tabla) $('.btn-pdf-ac').trigger('click');
  });

  $('#btn_generar').on('click', generar);

  $('#btn_limpiar').on('click', function () {
    $('#f_desde').val('{{ date('Y-m-01') }}');
    $('#f_hasta').val('{{ date('Y-m-d') }}');
    $('#f_factura').val('');
    $('#f_cheque').val('');
    $('#f_proveedor').val('');
    $('#f_categoria').val('');
    if ($('#f_producto')[0] && $('#f_producto')[0].selectize) {
      $('#f_producto')[0].selectize.clear();
    }
  });

  $.ajax({
    url: "{{ url('compras-facturas/productos-opciones') }}?inventariable=1",
    type: 'GET'
  }).done(function (rows) {
    var opts = (rows || []).map(function (r) {
      return { value: r.id, text: r.nombre + (r.unidad_medida ? ' (' + r.unidad_medida + ')' : '') };
    });
    $('#f_producto').selectize({
      valueField: 'value',
      labelField: 'text',
      searchField: ['text'],
      options: opts,
      placeholder: 'Todos los productos',
      allowEmptyOption: true,
      create: false
    });
  });

  generar();
})();
</script>
@endsection