@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
@include('admin.informes._styles')
<style>
  .inf-arqueo .inf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    justify-content: space-between;
  }
  .inf-arqueo .inf-filters-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
  }
  .inf-arqueo .inf-filters-fields .field {
    min-width: 150px;
  }
  .inf-arqueo .inf-filters-fields .field .form-control {
    min-height: 38px;
  }
  .inf-arqueo #bloque_tabla.inf-result { margin-top: 0; }
  .inf-arqueo .inf-result-head h6 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
</style>

<div class="inf-page inf-arqueo">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Informe de</span> Arqueo</h4>
      <p class="hint">Consulte los arqueos de caja en un rango de fechas. Puede editar o descargar cada registro.</p>
    </div>
  </div>

  <div class="inf-filters">
    <div class="inf-filters-fields">
      <div class="field">
        <label class="form-label" for="inicio">Desde</label>
        <input type="date" class="form-control" id="inicio" name="inicio" value="{{ date('Y-m-d'); }}" />
      </div>
      <div class="field">
        <label class="form-label" for="fin">Hasta</label>
        <input type="date" class="form-control" id="fin" name="fin" value="{{ date('Y-m-d'); }}" />
      </div>
    </div>
    <div class="inf-actions">
      <button type="button" class="btn btn-primary" onClick="generar();">
        <i class="bx bx-search"></i> Generar
      </button>
      <button type="button" class="btn btn-outline-secondary" id="btn_excel" onclick="$('.tabla_excel').trigger('click');">
        <i class="bx bx-spreadsheet"></i> Excel
      </button>
      <button type="button" class="btn btn-outline-secondary" id="btn_pdf" onclick="$('.tabla_pdf').trigger('click');">
        <i class="bx bx-file"></i> PDF
      </button>
    </div>
  </div>

  <div id="bloque_vacio" class="inf-empty">
    <i class="bx bx-wallet"></i>
    Seleccione el rango y pulse <strong>Generar</strong> para ver los arqueos.
  </div>

  <div class="d-none" id="bloque_resumen">
    <div class="inf-kpis">
      <div class="inf-kpi is-accent">
        <span class="lbl">Arqueos</span>
        <p class="val" id="kpi_registros">0</p>
      </div>
      <div class="inf-kpi">
        <span class="lbl">Personas</span>
        <p class="val" id="kpi_personas">0</p>
      </div>
      <div class="inf-kpi">
        <span class="lbl">Vts boleta</span>
        <p class="val" id="kpi_boleta">$0</p>
      </div>
      <div class="inf-kpi">
        <span class="lbl">Débito + crédito</span>
        <p class="val" id="kpi_tarjetas">$0</p>
      </div>
      <div class="inf-kpi">
        <span class="lbl">Efectivo</span>
        <p class="val" id="kpi_efectivo">$0</p>
      </div>
      <div class="inf-kpi">
        <span class="lbl">Caja</span>
        <p class="val" id="kpi_caja">$0</p>
      </div>
    </div>
  </div>

  <div class="inf-result d-none" id="bloque_tabla">
    <div class="inf-result-head">
      <h6>
        Resultados del período
        <span class="inf-badge" id="badge_periodo"><i class="bx bx-calendar"></i> —</span>
      </h6>
      <span class="text-muted small" id="badge_count">0 registros</span>
    </div>
    <div class="inf-result-body">
      <div class="inf-table-wrap" style="min-height:360px;">
        <table id="tabla" class="table table-bordered table-sm table-hover w-100 mb-0">
          <thead>
            <tr>
              <th class="text-center">ID</th>
              <th class="text-center">Fecha</th>
              <th class="text-center">Cajero</th>
              <th class="text-center" title="Cantidad de personas">Pers.</th>
              <th class="text-center" title="Ventas boleta + descuentos">Boleta+desc</th>
              <th class="text-center" title="Ventas boleta">Boleta</th>
              <th class="text-center">Débito</th>
              <th class="text-center">Crédito</th>
              <th class="text-center">Gastos</th>
              <th class="text-center">Efectivo</th>
              <th class="text-center">Propinas</th>
              <th class="text-center" title="Transferencia depósito">Trg dep.</th>
              <th class="text-center">Transf.</th>
              <th class="text-center">Caja</th>
              <th class="text-center">Acciones</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td class="text-center" colspan="3">Totales</td>
              <td class="text-center">0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center inf-money">$0</td>
              <td class="text-center"></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

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

  function fmtNum(n) {
    var v = Number(n) || 0;
    return v.toLocaleString('es-CL', { maximumFractionDigits: 0 });
  }

  function fmtFechaLabel(iso) {
    if (!iso) return '—';
    var p = String(iso).split('-');
    if (p.length !== 3) return iso;
    return p[2] + '/' + p[1] + '/' + p[0];
  }

  function actualizarKpis(totales, registros) {
    $('#kpi_registros').text(fmtNum(registros));
    $('#kpi_personas').text(fmtNum(totales.personas));
    $('#kpi_boleta').text(fmtCLP(totales.boleta));
    $('#kpi_tarjetas').text(fmtCLP((totales.debito || 0) + (totales.credito || 0)));
    $('#kpi_efectivo').text(fmtCLP(totales.efectivo));
    $('#kpi_caja').text(fmtCLP(totales.caja));
    $('#badge_count').text(registros === 1 ? '1 registro' : (fmtNum(registros) + ' registros'));
  }

  function generar(){
    let inicio = $('#inicio').val();
    let fin = $('#fin').val();

    if(inicio == ''){
      Swal.fire({ position: 'top-end', icon: 'error', title: "¡ Debe ingresar un inicio !", showConfirmButton: false, timer: 1500 });
      return;
    }
    if(fin == ''){
      Swal.fire({ position: 'top-end', icon: 'error', title: "¡ Debe ingresar un fin !", showConfirmButton: false, timer: 1500 });
      return;
    }

    if ($.fn.DataTable.isDataTable('#tabla')) {
      $('#tabla').DataTable().destroy();
    }

    $('#bloque_vacio').addClass('d-none');
    $('#bloque_resumen').removeClass('d-none');
    $('#bloque_tabla').removeClass('d-none');
    $('#badge_periodo').html('<i class="bx bx-calendar"></i> ' + fmtFechaLabel(inicio) + ' → ' + fmtFechaLabel(fin));
    actualizarKpis({ personas:0, boleta:0, debito:0, credito:0, efectivo:0, caja:0 }, 0);

    $('#tabla').DataTable({
      processing: true,
      serverSide: true,
      lengthMenu: [[1000],["1000"]],
      dom: "Brt<'row mx-0 mt-2'<'col-sm-6'l><'col-sm-6'p>>",
      ajax: {
        url: "{{ URL::to('/') }}/arqueo/listado_arqueo/",
        data : { 'fecha_inicio' : inicio, 'fecha_fin' : fin }
      },
      columns: [
        { data: 'id', className: 'text-center' },
        { data: 'fecha', className: 'text-center' },
        { data: 'cajero', className: 'text-center' },
        { data: 'cant_personas', className: 'text-center' },
        { data: 'total_dia', className: 'text-center inf-money' },
        { data: 'ventas_z_plu', className: 'text-center inf-money' },
        { data: 'total_debito', className: 'text-center inf-money' },
        { data: 'total_credito', className: 'text-center inf-money' },
        { data: 'total_gastos', className: 'text-center inf-money' },
        { data: 'efectivo_banco', className: 'text-center inf-money' },
        { data: 'total_propinas', className: 'text-center inf-money' },
        { data: 'total_deposito', className: 'text-center inf-money' },
        { data: 'transferencias', className: 'text-center inf-money' },
        { data: 'total_detalle_fondos_caja', className: 'text-center inf-money' },
        {
          data: null,
          width: "88px",
          className: "text-center inf-actions-cell",
          orderable: false,
          render: function(data, type, row) {
            return `
              <button type="button" class="btn btn-sm btn-outline-primary" title="Editar" onclick="editar(${row.id})">
                <i class="bx bx-edit-alt"></i>
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary" title="Descargar PDF" onclick="descargar(${row.id})">
                <i class="bx bx-download"></i>
              </button>`;
          }
        },
      ],
      buttons: [
        {
          extend: 'excel',
          footer: true,
          exportOptions: {
            format: {
              body: function (data, row, column) {
                if (column >= 4 && column <= 13) data = data.toString().replace(/\./g, ',');
                return data;
              }
            },
            columns: 'th:not(:last-child)'
          },
          className: 'tabla_excel d-none',
        },
        {
          extend: 'pdfHtml5',
          orientation: 'landscape',
          pageSize: 'LEGAL',
          footer: true,
          exportOptions: { columns: 'th:not(:last-child)' },
          customize: function(doc) { doc.content[1].margin = [ 100, 0, 100, 0 ]; },
          className: 'tabla_pdf d-none',
        }
      ],
      language: {
        sProcessing: "Procesando...",
        sLengthMenu: "Mostrar _MENU_ registros",
        sZeroRecords: "No se encontraron resultados",
        sEmptyTable: "Ningún dato disponible en esta tabla",
        sInfo: "Mostrando _START_ a _END_ de _TOTAL_ registros",
        sInfoEmpty: "Mostrando 0 a 0 de 0 registros",
        sInfoFiltered: "(filtrado de _MAX_ registros)",
        sSearch: "Buscar:",
        sLoadingRecords: "Cargando...",
        oPaginate: { sFirst: "Primero", sLast: "Último", sNext: "Siguiente", sPrevious: "Anterior" }
      },
      footerCallback: function () {
        var api = this.api();
        var intVal = function (i) {
          return typeof i === 'string' ? i.replace(/[\s+$,.NOTA DE CREDITO]/g,'')*1 : (typeof i === 'number' ? i : 0);
        };

        var personas = api.column(3, { page: 'current'}).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
        $(api.column(3).footer()).html(fmtNum(personas));

        var moneyCols = {};
        for (let index = 4; index <= 13; index++) {
          moneyCols[index] = api.column(index, { page: 'current'}).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
          $(api.column(index).footer()).html(fmtCLP(moneyCols[index]));
        }

        actualizarKpis({
          personas: personas,
          boleta: moneyCols[4] || 0,
          debito: moneyCols[6] || 0,
          credito: moneyCols[7] || 0,
          efectivo: moneyCols[9] || 0,
          caja: moneyCols[13] || 0
        }, api.rows({ page: 'current' }).count());
      },
      initComplete: function(){ $('.dt-buttons').hide(); }
    });
  }

  function descargar(id){ window.open('{{ URL::to('/') }}/pdf_arqueo/'+id, '_blank'); }
  function editar(id){ window.location.href = '{{ URL::to('/') }}/arqueo/editar/'+id; }
</script>
@endsection