@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
  .fac-page {
    --fac-border: #e7e7e9;
    --fac-muted: #697a8d;
    --fac-surface: #f8f9fa;
    --fac-accent: #696cff;
    --fac-ok: #28c76f;
    --fac-warn: #ff9f43;
  }
  .fac-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  .fac-page .page-head h4 { margin: 0; }
  .fac-page .page-head .hint {
    margin: 0.3rem 0 0;
    color: var(--fac-muted);
    font-size: 0.875rem;
    max-width: 36rem;
  }
  .fac-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  @media (min-width: 992px) {
    .fac-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .fac-kpi {
    background: #fff;
    border: 1px solid var(--fac-border);
    border-radius: 0.625rem;
    padding: 0.95rem 1.05rem;
  }
  .fac-kpi.warn {
    background: linear-gradient(135deg, #fff8f0 0%, #fff 70%);
    border-color: #ffd7a8;
  }
  .fac-kpi.ok {
    background: linear-gradient(135deg, #f2fbf6 0%, #fff 70%);
    border-color: #b9f0d1;
  }
  .fac-kpi .lbl {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fac-muted);
    font-weight: 650;
    margin-bottom: 0.3rem;
  }
  .fac-kpi .val {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 750;
    color: #566a7f;
    line-height: 1.2;
  }
  .fac-kpi.warn .val { color: #e08a2b; }
  .fac-kpi.ok .val { color: var(--fac-ok); }
  .fac-kpi .sub {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--fac-muted);
  }
  .fac-panel {
    background: #fff;
    border: 1px solid var(--fac-border);
    border-radius: 0.625rem;
    overflow: hidden;
  }
  .fac-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid var(--fac-border);
    background: var(--fac-surface);
  }
  .fac-toolbar .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }
  .fac-toolbar .actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    align-items: center;
    flex: 0 0 auto;
  }
  .fac-toolbar .form-control,
  .fac-toolbar .form-select,
  .fac-toolbar .input-group-text,
  .fac-toolbar .btn {
    min-height: 38px;
  }
  .fac-toolbar .fac-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 260px;
    max-width: 100%;
    flex: 0 1 260px;
  }
  .fac-toolbar .fac-search .input-group-text {
    flex: 0 0 auto;
  }
  .fac-toolbar .fac-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .fac-toolbar #fac_estado {
    width: 180px;
    max-width: 100%;
    flex: 0 0 auto;
  }
  .fac-table-wrap {
    padding: 0.35rem 0.5rem 0.75rem;
  }
  #tabla thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fac-muted);
    white-space: nowrap;
    vertical-align: middle;
  }
  #tabla thead tr.filters th {
    background: #fff !important;
    padding: 0.4rem 0.35rem;
  }
  #tabla thead tr.filters input,
  #tabla thead tr.filters select {
    font-size: 0.8rem;
    min-height: 32px;
  }
  #tabla tbody td {
    vertical-align: middle;
    font-size: 0.875rem;
  }
  #tabla .estado-select {
    min-width: 120px;
    font-size: 0.8rem;
    font-weight: 650;
  }
  #tabla .estado-select.is-pendiente {
    border-color: #ffd7a8;
    background: #fff8f0;
    color: #c77716;
  }
  #tabla .estado-select.is-aprobado {
    border-color: #b9f0d1;
    background: #f2fbf6;
    color: #1f9d57;
  }
  #tabla .monto-cell {
    font-weight: 700;
    white-space: nowrap;
  }
  #tabla .razon-cell {
    font-weight: 650;
    color: #566a7f;
  }
  #tabla .muted-cell {
    color: var(--fac-muted);
    font-size: 0.82rem;
  }
</style>

<div class="fac-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Gestión de</span> Facturas</h4>
      <p class="hint">Revise solicitudes, filtre por estado y apruebe desde la misma tabla.</p>
    </div>
  </div>

  <div class="fac-kpis">
    <div class="fac-kpi">
      <span class="lbl">Total facturas</span>
      <p class="val" id="kpi_total">{{ number_format($resumen['total'], 0, ',', '.') }}</p>
      <div class="sub">Registradas en el sistema</div>
    </div>
    <div class="fac-kpi warn">
      <span class="lbl">Pendientes</span>
      <p class="val" id="kpi_pendientes">{{ number_format($resumen['pendientes'], 0, ',', '.') }}</p>
      <div class="sub" id="kpi_monto_pendiente">${{ number_format($resumen['monto_pendiente'], 0, ',', '.') }} por aprobar</div>
    </div>
    <div class="fac-kpi ok">
      <span class="lbl">Aprobadas</span>
      <p class="val" id="kpi_aprobadas">{{ number_format($resumen['aprobadas'], 0, ',', '.') }}</p>
      <div class="sub">Listas / emitidas</div>
    </div>
    <div class="fac-kpi">
      <span class="lbl">Monto total</span>
      <p class="val" id="kpi_monto">${{ number_format($resumen['monto_total'], 0, ',', '.') }}</p>
      <div class="sub">Suma de todos los montos</div>
    </div>
  </div>

  <div class="fac-panel">
    <div class="fac-toolbar">
      <div class="filters">
        <div class="input-group fac-search">
          <span class="input-group-text"><i class="bx bx-search"></i></span>
          <input type="text" class="form-control" id="fac_buscar" placeholder="Buscar RUT, razón social…" autocomplete="off" />
        </div>
        <select class="form-select" id="fac_estado">
          <option value="">Todos los estados</option>
          <option value="PENDIENTE">Pendiente</option>
          <option value="APROBADO">Aprobado</option>
        </select>
      </div>
      <div class="actions">
        <button type="button" class="btn btn-outline-secondary" id="btn_excel">
          <i class="bx bx-spreadsheet"></i> Excel
        </button>
        <button type="button" class="btn btn-outline-secondary" id="btn_pdf">
          <i class="bx bx-file"></i> PDF
        </button>
      </div>
    </div>

    <div class="fac-table-wrap table-responsive">
      <table id="tabla" class="table table-bordered table-sm table-hover w-100">
        <thead class="table-light">
          <tr>
            <th class="text-center">ID</th>
            <th class="text-center">Mesa</th>
            <th>RUT</th>
            <th>Razón social</th>
            <th>Giro</th>
            <th class="text-end">Monto</th>
            <th>Dirección</th>
            <th>Correo</th>
            <th>Teléfono</th>
            <th class="text-center">Fecha</th>
            <th class="text-center">Estado</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  const formato = {
    minimumFractionDigits: 0,
    maximumFractionDigits: 3,
  };

  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

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

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

  function pintarResumen(r) {
    $('#kpi_total').text(intFmt(r.total));
    $('#kpi_pendientes').text(intFmt(r.pendientes));
    $('#kpi_aprobadas').text(intFmt(r.aprobadas));
    $('#kpi_monto').text(money(r.monto_total));
    $('#kpi_monto_pendiente').text(money(r.monto_pendiente) + ' por aprobar');
  }

  function refrescarResumen() {
    $.getJSON('{{ url("factura/resumen") }}').done(pintarResumen);
  }

  function estiloEstado($select) {
    $select.removeClass('is-pendiente is-aprobado');
    if ($select.val() === 'PENDIENTE') $select.addClass('is-pendiente');
    if ($select.val() === 'APROBADO') $select.addClass('is-aprobado');
  }

  var table = $('#tabla').DataTable({
    processing: true,
    serverSide: true,
    scrollX: true,
    lengthMenu: [[50, 100, 500, 1000], [50, 100, 500, "1000"]],
    dom: "Brt<'row mx-1 mt-2'<'col-sm-6'l><'col-sm-6'p>>",
    ajax: "{{ URL::to('/') }}/factura/listado",
    order: [[0, "desc"]],
    columns: [
      { data: 'id', className: 'text-center' },
      { data: 'mesa', className: 'text-center' },
      { data: 'rut', className: 'text-nowrap' },
      {
        data: 'razon_social',
        className: 'razon-cell',
        render: function (data) {
          return data ? String(data) : '—';
        }
      },
      {
        data: 'giro',
        className: 'muted-cell',
        render: function (data) {
          return data ? String(data) : '—';
        }
      },
      {
        data: 'monto',
        className: 'text-end monto-cell',
        render: function (data) {
          return money(data);
        }
      },
      {
        data: 'direccion',
        className: 'muted-cell',
        render: function (data) {
          return data ? String(data) : '—';
        }
      },
      {
        data: 'correo',
        className: 'muted-cell',
        render: function (data) {
          return data ? String(data) : '—';
        }
      },
      {
        data: 'telefono',
        className: 'text-nowrap muted-cell',
        render: function (data) {
          return data ? String(data) : '—';
        }
      },
      { data: 'fecha_factura', className: 'text-center text-nowrap' },
      {
        data: 'estado',
        width: '130px',
        className: 'text-center',
        orderable: false,
        render: function (data, type, row) {
          const estado = row.estado || 'PENDIENTE';
          const cls = estado === 'APROBADO' ? 'is-aprobado' : 'is-pendiente';
          return `
            <select class="form-select form-select-sm actualizar-estado estado-select ${cls}" data-id="${row.id}">
              <option value="PENDIENTE" ${estado === 'PENDIENTE' ? 'selected' : ''}>Pendiente</option>
              <option value="APROBADO" ${estado === 'APROBADO' ? 'selected' : ''}>Aprobado</option>
            </select>`;
        }
      }
    ],
    buttons: [
      {
        extend: 'excelHtml5',
        footer: true,
        exportOptions: {
          columns: ':visible:not(:last-child)',
          format: {
            body: function (data) {
              return data ? String(data).replace(/(<([^>]+)>)/gi, '').trim() : '';
            }
          }
        },
        className: 'tabla_excel d-none',
      },
      {
        extend: 'pdfHtml5',
        footer: true,
        exportOptions: {
          columns: ':visible:not(:last-child)',
          format: {
            body: function (data) {
              return data ? String(data).replace(/(<([^>]+)>)/gi, '').trim() : '';
            }
          }
        },
        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'
      }
    },
    initComplete: function () {
      $('.dt-buttons').hide();
    },
    drawCallback: function () {
      $('#tabla .actualizar-estado').each(function () {
        estiloEstado($(this));
      });
    }
  });

  // Fila de filtros por columna
  $('#tabla thead tr').clone(true).addClass('filters').find('th').removeClass('sorting sorting_asc sorting_desc').off('click').end().insertBefore('#tabla thead tr');

  $('#tabla thead tr.filters th').each(function (i) {
    var title = $(this).text().trim();
    if (i === 10) {
      $(this).html(`
        <select class="form-select form-select-sm">
          <option value="">Todos</option>
          <option value="PENDIENTE">Pendiente</option>
          <option value="APROBADO">Aprobado</option>
        </select>
      `);
      $('select', this).on('change', function () {
        if (table.column(i).search() !== this.value) {
          table.column(i).search(this.value).draw();
        }
        $('#fac_estado').val(this.value);
      });
    } else {
      $(this).html('<input type="text" class="form-control form-control-sm" placeholder="' + title + '" />');
      $('input', this).on('keyup change', function () {
        if (table.column(i).search() !== this.value) {
          table.column(i).search(this.value).draw();
        }
      });
    }
  });

  // Búsqueda global rápida (razón social / RUT / etc. vía columnas visibles)
  var buscarTimer = null;
  $('#fac_buscar').on('keyup', function () {
    const val = this.value;
    clearTimeout(buscarTimer);
    buscarTimer = setTimeout(function () {
      table.search(val).draw();
    }, 250);
  });

  $('#fac_estado').on('change', function () {
    const val = this.value;
    table.column(10).search(val).draw();
    $('#tabla thead tr.filters th').eq(10).find('select').val(val);
  });

  $('#btn_excel').on('click', function () {
    $('.tabla_excel').trigger('click');
  });
  $('#btn_pdf').on('click', function () {
    $('.tabla_pdf').trigger('click');
  });

  $(document).on('change', '.actualizar-estado', function () {
    const $select = $(this);
    const id = $select.data('id');
    const nuevoEstado = $select.val();
    estiloEstado($select);

    $.ajax({
      url: "{{ URL::to('/') }}/factura/actualizar-estado",
      type: 'POST',
      data: {
        id: id,
        estado: nuevoEstado,
        _token: $('meta[name="csrf-token"]').attr('content')
      },
      success: function () {
        Swal.fire({
          position: 'top-end',
          icon: 'success',
          title: 'Estado actualizado',
          showConfirmButton: false,
          timer: 1200
        });
        refrescarResumen();
      },
      error: function () {
        Swal.fire({
          position: 'top-end',
          icon: 'error',
          title: 'No se pudo actualizar el estado',
          showConfirmButton: false,
          timer: 1600
        });
        table.ajax.reload(null, false);
      }
    });
  });
</script>
@endsection