@extends('theme.sneat.admin')
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<h4 class="fw-bold py-2"><span class="text-muted fw-light">Informe de </span> documentos de venta</h4>
<p class="text-muted mb-4">Boletas, facturas y ventas manuales por arqueo diario. Use los filtros y pulse <strong>Generar</strong>.</p>

<div class="row">
  <div class="col-xl">
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>Filtros</span>
        <small class="text-muted">Informes</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-4 col-lg-3">
            <label class="form-label" for="f_cajero">Cajero</label>
            <input type="text" class="form-control" id="f_cajero" placeholder="Contiene…" autocomplete="off" />
          </div>
          <div class="col-12 d-flex flex-wrap gap-2 align-items-end">
            <button type="button" class="btn btn-primary" id="btn_generar">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_totales">
  <div class="col-6 col-md-4 col-xl">
    <div class="card border border-primary border-opacity-25 shadow-none h-100">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase">Registros (filtrados)</div>
        <div class="fs-4 fw-semibold" id="sum_registros">—</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl">
    <div class="card border shadow-none h-100">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase">Venta boletas</div>
        <div class="fs-4 fw-semibold" id="sum_venta_boletas">—</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl">
    <div class="card border shadow-none h-100">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase">Venta facturas</div>
        <div class="fs-4 fw-semibold" id="sum_venta_facturas">—</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl">
    <div class="card border shadow-none h-100">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase">Venta manuales</div>
        <div class="fs-4 fw-semibold" id="sum_venta_manuales">—</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl">
    <div class="card border border-success border-opacity-50 shadow-none h-100">
      <div class="card-body py-3">
        <div class="small text-muted text-uppercase">Total general</div>
        <div class="fs-4 fw-semibold text-success" id="sum_total_general">—</div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header p-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
      <span class="fw-medium">Detalle por arqueo</span>
      <div class="btn-group" role="group">
        <button type="button" class="btn 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>
  <div class="table-responsive text-nowrap" style="min-height: 320px;">
    <table id="tabla_informe_dv" class="table table-bordered table-sm table-striped w-100 mb-0">
      <thead class="table-light">
        <tr>
          <th class="text-center">Fecha</th>
          <th>Cajero</th>
          <th class="text-end">Boleta inicial</th>
          <th class="text-end">Boleta final</th>
          <th class="text-end">Venta boletas</th>
          <th class="text-end">Venta facturas</th>
          <th class="text-end">Venta manuales</th>
        </tr>
      </thead>
      <tfoot class="table-secondary">
        <tr>
          <th colspan="4" class="text-end">Totales (filtro actual)</th>
          <th class="text-end" id="foot_venta_boletas">—</th>
          <th class="text-end" id="foot_venta_facturas">—</th>
          <th class="text-end" id="foot_venta_manuales">—</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
@endsection

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

  const fmt = {
    /** Venta boletas/facturas/manuales: entero redondeado, separador de miles (igual que el archivo de referencia: formato "#,##0", sin decimales). */
    money: function (n) {
      const num = numOrNull(n);
      if (num === null) return '—';
      return Math.round(num).toLocaleString('es-CL', { maximumFractionDigits: 0 });
    },
    intStr: function (n) {
      const num = numOrNull(n);
      if (num === null) return '—';
      return Math.round(num).toLocaleString('es-CL', { maximumFractionDigits: 0 });
    }
  };

  function renderMoney(d, type) {
    if (type === 'sort' || type === 'type' || type === 'export' || type === 'filter') {
      const num = numOrNull(d);
      return num === null ? 0 : Math.round(num);
    }
    return fmt.money(d);
  }
  function renderPlain(d, type) {
    if (type === 'sort' || type === 'type' || type === 'export' || type === 'filter') {
      return d ?? '';
    }
    return (d === null || d === undefined || d === '') ? '—' : d;
  }

  let ultimosTotales = null;

  function aplicarTotales(t) {
    if (!t) return;
    ultimosTotales = t;
    $('#sum_registros').text(fmt.intStr(t.registros_filtrados));
    $('#sum_venta_boletas').text(fmt.money(t.venta_boletas));
    $('#sum_venta_facturas').text(fmt.money(t.venta_facturas));
    $('#sum_venta_manuales').text(fmt.money(t.venta_manuales));
    $('#sum_total_general').text(fmt.money(t.total_general));
    $('#foot_venta_boletas').text(fmt.money(t.venta_boletas));
    $('#foot_venta_facturas').text(fmt.money(t.venta_facturas));
    $('#foot_venta_manuales').text(fmt.money(t.venta_manuales));
  }

  /** Pie de Excel: devolver número (no texto con puntos/comas). */
  function footerExportNum(columnIdx) {
    if (!ultimosTotales) return '';
    const map = {
      4: ultimosTotales.venta_boletas,
      5: ultimosTotales.venta_facturas,
      6: ultimosTotales.venta_manuales
    };
    if (!(columnIdx in map)) {
      return columnIdx === 0 ? 'Totales' : '';
    }
    const num = numOrNull(map[columnIdx]);
    return num === null ? 0 : Math.round(num);
  }

  let tabla = null;

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

  function generar() {
    destruirTabla();
    tabla = $('#tabla_informe_dv').DataTable({
      processing: true,
      serverSide: true,
      searching: false,
      paging: false,
      lengthChange: false,
      info: false,
      dom: 'Brt',
      ajax: {
        url: "{{ url('informes/informe_documentos_venta/listado') }}",
        data: function (d) {
          d.start = 0;
          d.length = -1;
          d.fecha_desde = $('#f_desde').val();
          d.fecha_hasta = $('#f_hasta').val();
          d.cajero = $('#f_cajero').val();
        },
        dataSrc: function (json) {
          aplicarTotales(json.totales || {});
          return json.data;
        }
      },
      columns: [
        { data: 'fecha', className: 'text-center' },
        { data: 'cajero' },
        { data: 'boleta_inicial', className: 'text-end', render: renderPlain },
        { data: 'boleta_final', className: 'text-end', render: renderPlain },
        { data: 'venta_boletas', className: 'text-end', render: renderMoney },
        { data: 'venta_facturas', className: 'text-end', render: renderMoney },
        { data: 'venta_manuales', className: 'text-end', render: renderMoney }
      ],
      order: [[0, 'asc']],
      buttons: [
        {
          extend: 'excelHtml5',
          footer: true,
          title: 'Informe documentos de venta',
          className: 'btn-excel-dv d-none',
          exportOptions: {
            columns: ':visible',
            orthogonal: 'export',
            format: {
              footer: function (data, node, columnIdx) {
                return footerExportNum(columnIdx);
              }
            }
          },
          customize: function (xlsx) {
            // Forzar celdas numéricas en columnas de montos (Excel suma sin triángulo verde)
            var sheet = xlsx.xl.worksheets['sheet1.xml'];
            var numCols = ['E', 'F', 'G']; // venta boletas, facturas, manuales
            $('row c', sheet).each(function () {
              var cell = $(this);
              var ref = cell.attr('r') || '';
              var col = ref.replace(/[0-9]/g, '');
              if (numCols.indexOf(col) === -1) return;
              var v = $('v', cell).text();
              if (v === '' || isNaN(Number(v))) return;
              cell.attr('t', 'n');
              cell.removeAttr('s');
            });
          }
        },
        {
          extend: 'pdfHtml5',
          orientation: 'landscape',
          pageSize: 'LETTER',
          footer: true,
          exportOptions: { columns: ':visible' },
          className: 'btn-pdf-dv d-none'
        }
      ],
      language: {
        sProcessing: 'Procesando…',
        sZeroRecords: 'Sin resultados',
        sEmptyTable: 'Sin datos'
      },
      initComplete: function () {
        $('.dt-buttons').hide();
      }
    });
  }

  $('#exp_excel').on('click', function () {
    if (tabla) $('.btn-excel-dv').trigger('click');
  });
  $('#exp_pdf').on('click', function () {
    if (tabla) $('.btn-pdf-dv').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_cajero').val('');
  });

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