@extends('layouts.app', ['activePage' => 'listacomplementospago', 'menuParent' => 'operaciones', 'titlePage' =>''])

@section('content')
@include('includes.tailwind')

<div class="content">
  <div class="container-fluid mt-4">
    <input type="hidden" id="nomEmpresa" value="{{ $data['empresa']->nombreorganizacion }}">
    <div class="row gy-3 mb-3 align-items-stretch">
      <div class="col-lg-9 h-100">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-3 h-100">
          <div class="flex flex-wrap items-start justify-between gap-2 mb-2">
            <div>
              <h6 class="text-lg font-semibold text-slate-900 mb-1">Listado de Complementos de Pago</h6>
              <p class="text-sm text-slate-500 mb-0">Consulta y exporta CFDIs por cliente, usuario, estatus, fecha y moneda.</p>
            </div>
            <p class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1 mb-0">Consulta dinámica</p>
          </div>

          <section class="bg-gray-25 rounded-lg border border-gray-200 p-3">
            <div class="flex items-center gap-3 mb-3">
              <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">
                <i class="material-icons text-sm">filter_alt</i>
              </span>
              <div>
                <h6 class="text-sm font-semibold text-slate-900 mb-0">PARAMETROS DE BUSQUEDA</h6>
                <p class="text-sm text-slate-700 mb-0">Ajusta filtros y actualiza el listado para generar reportes o exportaciones.</p>
              </div>
            </div>

            <div class="row gx-3 gy-2">
              <div class="col-md-3 mt-1" id="content_cliente">
                <label class="block text-sm text-slate-700 mb-1">Cliente:</label>
                <select id="cliente" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ">
                  <option value="0">Todos</option>
                  @foreach ($data['clientes'] as $p)
                  <option value="{{ $p->id }}">{{$p->nombre_comercial}} ({{$p->razon_social}})</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-3 mt-1" id="content_proveedor" style="display:none;">
                <label class="block text-sm text-slate-700 mb-1">Sucursal:</label>
                <select id="sucursal" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ">
                  <option value="0">Todos</option>
                  @foreach ($data['sucursales'] as $p)
                  <option value="{{ $p->idSuc }}">{{ $p->nombre }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-3 mt-1">
                <label class="block text-sm text-slate-700 mb-1">Tipo de comprobante:</label>
                <select id="tipo_fac" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 " onchange="tipo_er()">
                  <option value="0">Todos</option>
                  <option value="P" selected>Complemento de pago</option>
                </select>
              </div>

              <div class="col-md-3 mt-1">
                <label class="block text-sm text-slate-700 mb-1">Usuario:</label>
                <select id="agente" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 " onchange="changeTipoConsulta(this.value)">
                  <option value="0">Todos</option>
                  @foreach ($data['usuarios'] as $p)
                  <option value="{{ $p->id }}">{{ $p->name }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-3 mt-1 contentFechasConsultar">
                <label class="block text-sm text-slate-700 mb-1">Estatus:</label>
                <select id="filtro_estatus" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ">
                  <option value="x" selected>Todos</option>
                  <option value="1">Activa</option>
                  <option value="0">Cancelada</option>
                </select>
              </div>

              <div class="col-md-3 mt-1 contentFechasConsultar">
                <label class="block text-sm text-slate-700 mb-1">Moneda:</label>
                <select id="filtro_moneda" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ">
                  <option value="0">Todas</option>
                  @foreach ($data['monedas'] as $p)
                  <option value="{{ $p->nombre }}">{{ $p->nombre }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-3 mt-1 contentFechasConsultar">
                <label class="block text-sm text-slate-700 mb-1">Periodo:</label>
                <div class="date-mode-group">
                  <label class="date-mode-item mb-0"><input class="mr-1" type="radio" name="radioFecha" value="m" checked="true">Mes</label>
                  <label class="date-mode-item mb-0"><input class="mr-1" type="radio" name="radioFecha" value="W">Semana</label>
                  <label class="date-mode-item mb-0"><input class="mr-1" type="radio" name="radioFecha" value="d">Dia</label>
                  <label class="date-mode-item mb-0"><input class="mr-1" type="radio" name="radioFecha" value="to">Rango</label>
                </div>
              </div>

              <div class="col-md-3 mt-1 contentFechasConsultar">
                <label class="block text-sm text-slate-700 mb-1">Fecha:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md datetimepicker" id="fecha_cons" value="{{ $hoy }}" />
                <input type="text" style="display: none;" class="w-full px-3 py-2 border border-gray-300 rounded-md datetime mt-2" id="fecha_cons_ran" placeholder="10/01/2022 - 10/01/2022 " />
              </div>

              <div class="col-md-3 mt-1 contentFechasDescargar" style="display: none;">
                <label class="block text-sm text-slate-700 mb-1">Rango de fechas:</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md daterange" id="desde_hasta" placeholder="10/01/2022 - 10/01/2022 " />
              </div>

              <div class="col-md-6 isnt-filled contentFechasDescargar" style="display: none;"></div>

              <div class="col-md-3 mt-4">
                <button type="button" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200 w-full justify-center" onclick="loadGridComplementos();">
                  <i class="material-icons text-sm leading-none">search</i>
                  Buscar
                </button>
              </div>

            </div>
          </section>
        </div>
      </div>

      <div class="col-lg-3 h-100">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 h-100">
          <div class="flex items-center justify-between mb-3">
            <h6 class="text-sm font-semibold text-slate-900 mb-0">Resumen</h6>
            <span id="facturasHistoryBadge" class="cfdi-history-badge neutral">Esperando datos</span>
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
              <p class="text-xs text-slate-600 font-medium mb-1">Documentos</p>
              <p class="text-lg font-bold text-slate-900" id="facturasTotalDocs">0</p>
            </div>
            <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
              <p class="text-xs text-blue-700 font-medium mb-1">Monto total</p>
              <p class="text-lg font-bold text-blue-700" id="facturasMontoTotal">$0.00</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row reportbuttons justify-content-end mb-3" style="display: none;">
      <div class="col-auto reportbuttons">
        <button class="report-action-btn" onclick="enviaDescargas(1);" title="Enviar por correo">
          <i class="material-icons text-sm leading-none">attach_email</i>
          Enviar seleccionadas
        </button>
      </div>
      <div class="col-auto reportbuttons" style="display: none;">
        <button class="report-action-btn" onclick="enviaDescargas(2);" title="Descargar">
          <i class="material-icons text-sm leading-none">download</i>
          Descargar seleccionadas
        </button>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
          <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2 mb-3">
            <div>
              <h6 class="text-sm font-semibold text-slate-900 mb-1">Listado de CFDIs</h6>
              <p class="text-xs text-slate-500 mb-0">Selecciona registros para envío o descarga masiva.</p>
            </div>
          </div>

          <div class="table-scroll material-datatables">
            <table class="min-w-full  table-striped table-bordered table-sm table-hover display nowrap" cellspacing="0" width="100%" style="width:100%" id="gridFacturas">
              <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                <tr>
                  <th width="5%" class="px-2 py-2">
                    <input type="checkbox" id="checkAll" onclick="selectAll();">
                  </th>
                  <th width="15%" class="px-2 py-2 text-[10px]">Fecha</th>
                  <th class="px-2 py-2 text-[10px]">Serie</th>
                  <th class="px-2 py-2 text-[10px]">Folio</th>
                  <th class="px-2 py-2 text-[10px]">Documentos relacionados</th>
                  <th class="px-2 py-2 text-[10px]">Cliente</th>
                  <th class="px-2 py-2 text-[10px]">RFC</th>
                  <th class="px-2 py-2 text-[10px]">Total</th>
                  <th class="px-2 py-2 text-[10px]">F. Pago</th>
                  <th class="px-2 py-2 text-[10px]">Moneda</th>
                  <th class="px-2 py-2 text-[10px]">Tipo</th>
                  <th class="px-2 py-2 text-[10px]">Estatus</th>
                  <th class="px-2 py-2 text-[10px]">Acciones</th>
                </tr>
              </thead>

              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@include('operaciones.partials.cancelacionComplementoShared')

<input type="hidden" id="idFactReenv">

<div class="modal fade" id="modalComprobante2">
  <div class="modal-dialog ">
    <div class="modal-content">
      <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h4 class="modal-title text-lg font-semibold text-gray-900">Enviar correo</h4>
        <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body px-6 py-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="col-span-1">
            <div class="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-red-500 hover:bg-red-50 transition-all cursor-pointer group">
              <a href="" id="downloadPdf" target="_blank" class="flex flex-col items-center w-full text-center group-hover:text-red-600 transition-colors">
                <i class="fa-regular fa-file-pdf fa-2xl mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-red-600 mt-2">Descargar PDF</span>
              </a>
            </div>
          </div>
          <div class="col-span-1">
            <div class="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-all cursor-pointer group">
              <a href="" id="downloadXml" target="_blank" class="flex flex-col items-center w-full text-center group-hover:text-blue-600 transition-colors">
                <i class="fa-regular fa-file-code fa-2xl mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-blue-600 mt-2">Descargar XML</span>
              </a>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-12 gap-6 mt-2">
          <!-- Formulario de correo -->
          <div class="col-span-12 space-y-4">
            <!-- Campo Para -->
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700">
                Para: <span class="text-red-500">*</span>
              </label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="emailClienteM" placeholder="correo@ejemplo.com">
            </div>

            <!-- Campo CC -->
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700">CC:</label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="cc" placeholder="correo2@ejemplo.com">
            </div>

            <!-- Campo Asunto -->
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700">
                Asunto: <span class="text-red-500">*</span>
              </label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="asuntoModal" placeholder="Asunto del correo">
            </div>

            <!-- Editor de texto -->
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700">Mensaje:</label>
              <textarea class="summernote w-full rounded-lg border border-gray-300" id="notasfacturaModal" cols="12" rows="6"></textarea>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer bg-gray-50 border-t border-gray-200 px-6 pt-4 pb-4 flex justify-end gap-2">
        <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors text-sm" data-dismiss="modal">Cerrar</button>
        <button type="button" class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg font-medium hover:from-blue-700 hover:to-blue-800 transition-all shadow-sm text-sm  " onclick="enviarComplemento();">
          <i class="material-icons text-sm">send</i>
          Enviar
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .select2-container {
    width: 100% !important;
  }

  .select2-container .select2-selection--single {
    height: 40px !important;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
  }

  .cfdi-history-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #cbd5f5;
    transition: all 0.2s ease-in-out;
  }

  .cfdi-history-badge.neutral {
    background-color: #f8fafc;
    color: #475569;
    border-color: #cbd5f5;
  }

  .cfdi-history-badge.success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
  }

  .cfdi-history-badge.warning {
    background-color: #fef9c3;
    color: #854d0e;
    border-color: #fde68a;
  }

  .cfdi-history-badge.danger {
    background-color: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
  }

  .date-mode-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .date-mode-item {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    color: #334155;
    background: #f8fafc;
  }

  .report-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #0A415F;
    color: #fff;
    border: 0;
    border-radius: 0.4rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
  }

  .report-action-btn:hover {
    background: #083549;
  }

  .fact-rel-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 220px;
  }

  .fact-rel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    border: 1px solid #d6e2ea;
    border-radius: 0.5rem;
    background: #f8fbfd;
    padding: 0.24rem 0.35rem;
  }

  .fact-rel-chip {
    display: inline-flex;
    align-items: center;
    background: #0A415F;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1.1;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    letter-spacing: 0.02em;
  }

  .fact-rel-chip.muted {
    background: #94a3b8;
  }

  .fact-rel-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
  }

  .fact-rel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    font-size: 0.64rem;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 999px;
    padding: 0.17rem 0.38rem;
    border: 1px solid transparent;
    transition: all 0.15s ease;
  }

  .fact-rel-link.xml {
    background: #e0f2fe;
    color: #075985;
    border-color: #7dd3fc;
  }

  .fact-rel-link.pdf {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
  }

  .fact-rel-link:hover {
    filter: brightness(0.96);
  }

  .fact-rel-empty {
    display: inline-flex;
    align-items: center;
    font-size: 0.67rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
  }

  #gridFacturas th.fact-rel-col,
  #gridFacturas td.fact-rel-col {
    min-width: 250px;
    white-space: normal !important;
    vertical-align: top;
  }

  .bootstrap-select,
  .bootstrap-select>.dropdown-toggle {
    width: 100% !important;
  }

  .bootstrap-select>.dropdown-toggle {
    min-height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #334155;
    font-size: 0.875rem;
  }

  .bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.15) !important;
    border-color: #0A415F;
  }

  #gridFacturas {
    display: block;
    overflow: auto;
  }

  .table-scroll {
    max-height: 560px;
    overflow-y: auto;
  }

  #gridFacturasPendientes {
    display: block;
    height: 400px;
    overflow: scroll;
  }

  #tableDeposito {
    display: block;
    height: 200px;
    overflow: scroll;
  }

  #swal2-content {
    color: red;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_processing,
  .dataTables_wrapper .dataTables_paginate {
    font-size: 10px;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input {
    font-size: 10px !important;
  }

  table.dataTable thead th,
  table.dataTable thead td {
    font-size: 10px !important;
  }

  table.dataTable tfoot th,
  table.dataTable tfoot td {
    font-size: 11px !important;
  }

  table.dataTable tbody td {
    font-size: 10px !important;
  }

  table.dataTable tbody tr:hover {
    background-color: #f8f9fa;
    cursor: pointer;
  }

  .dataTables_wrapper .dataTables_filter input {
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid #e2e8f0 !important;
  }

  .dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: #0A415F !important;
    box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
  }

  .swal2-popup.swal2-modern {
    width: 24rem !important;
    max-width: calc(100vw - 2rem) !important;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    padding: 1.05rem 1rem 0.95rem;
  }

  .swal2-popup.swal2-modern .swal2-title {
    font-size: 1.04rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.3rem;
  }

  .swal2-popup.swal2-modern .swal2-html-container,
  .swal2-popup.swal2-modern #swal2-content {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.4;
    margin-top: 0;
  }

  .swal2-popup.swal2-modern .swal2-actions {
    gap: 0.45rem;
    margin-top: 0.8rem;
  }

  .swal2-popup.swal2-modern .swal2-styled.swal2-confirm,
  .swal2-popup.swal2-modern .swal2-modern-confirm {
    border-radius: 9px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
  }

  .swal2-popup.swal2-modern .swal2-styled.swal2-cancel,
  .swal2-popup.swal2-modern .swal2-modern-cancel {
    border-radius: 9px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: none;
  }

  .swal2-popup.swal2-modern .swal2-icon {
    margin: 0.2rem auto 0.65rem;
    transform: scale(0.9);
  }

  .swal2-popup.swal2-modern .swal2-icon.swal2-warning {
    border-color: #f59e0b;
    color: #f59e0b;
  }

  .swal2-popup.swal2-modern .swal2-icon.swal2-success {
    border-color: #16a34a;
    color: #16a34a;
  }

  .swal2-popup.swal2-modern .swal2-icon.swal2-error {
    border-color: #dc2626;
    color: #dc2626;
  }

  .swal2-deny {
    border-radius: 9px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: none;
  }
</style>

@endsection

@push('js')
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
  (function initModernSwalTheme() {
    if (typeof Swal === 'undefined' || typeof Swal.fire !== 'function' || Swal.__retencionesModernized) {
      return;
    }

    const originalFire = Swal.fire.bind(Swal);

    function normalizeSwalArgs(args) {
      if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null) {
        return Object.assign({}, args[0]);
      }

      return {
        title: args[0] || '',
        text: args[1] || '',
        icon: args[2] || undefined
      };
    }

    function mergePopupClass(customClass) {
      const safeClass = customClass || {};
      const popupClass = safeClass.popup ? String(safeClass.popup) : '';

      return Object.assign({}, safeClass, {
        popup: ('swal2-modern ' + popupClass).trim(),
        confirmButton: ('swal2-modern-confirm ' + (safeClass.confirmButton || '')).trim(),
        cancelButton: ('swal2-modern-cancel ' + (safeClass.cancelButton || '')).trim()
      });
    }

    Swal.fire = function() {
      const config = normalizeSwalArgs(Array.prototype.slice.call(arguments));

      if (config.type && !config.icon) {
        config.icon = config.type;
      }

      config.customClass = mergePopupClass(config.customClass);

      if (typeof config.allowOutsideClick === 'undefined') {
        config.allowOutsideClick = true;
      }

      if (typeof config.allowEscapeKey === 'undefined') {
        config.allowEscapeKey = true;
      }

      if (Number.isFinite(config.timer)) {
        config.timer += 2000;
      }

      return originalFire(config);
    };

    Swal.__retencionesModernized = true;
  })();

  let activeSwalLoadings = 0;

  function renderLoadingSwal(text = 'Procesando, por favor espera...') {
    Swal.fire({
      title: 'Cargando',
      text: text,
      allowOutsideClick: false,
      allowEscapeKey: false,
      showConfirmButton: false,
      timer: 1200,
      timerProgressBar: true,
      didOpen: () => {
        Swal.showLoading();
      },
      willClose: () => {
        // Si la petición sigue activa al terminar el timer, volvemos a mostrar el loader.
        if (activeSwalLoadings > 0) {
          setTimeout(() => {
            var isVisible = Swal.isVisible();
            var isLoading = isVisible && Swal.isLoading();
            if (activeSwalLoadings > 0 && (!isVisible || isLoading)) {
              renderLoadingSwal(text);
            }
          }, 60);
        }
      }
    });
  }

  function showLoadingSwal(text = 'Procesando, por favor espera...') {
    activeSwalLoadings += 1;

    if (Swal.isVisible() && Swal.isLoading()) {
      return;
    }

    renderLoadingSwal(text);
  }

  function hideLoadingSwal() {
    activeSwalLoadings = Math.max(0, activeSwalLoadings - 1);

    if (activeSwalLoadings === 0 && Swal.isVisible() && Swal.isLoading()) {
      Swal.close();
    }
  }

  $.ajaxSetup({
    beforeSend: function(jqXHR, settings) {
      showLoadingSwal();
    },
    complete: function() {
      setTimeout(function() {
        hideLoadingSwal();
      }, 1000);
    }
  });


  let $complementosHistoryBadge;
  let $complementosTotalDocs;
  let $complementosMontoTotal;
  const complementosBadgeStates = ['neutral', 'success', 'warning', 'danger'];

  function parseMoneyValue(value) {
    if (value === null || value === undefined || value === '') {
      return 0;
    }
    if (typeof value === 'number') {
      return value;
    }
    var cleaned = String(value).replace(/[^0-9.-]/g, '');
    var parsed = parseFloat(cleaned);
    return Number.isNaN(parsed) ? 0 : parsed;
  }

  function formatMoneyValue(value) {
    var numericValue = parseMoneyValue(value);
    if (typeof formatter !== 'undefined' && formatter && typeof formatter.format === 'function') {
      return formatter.format(numericValue);
    }
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(numericValue);
  }


  function setComplementosBadgeState(statusText, statusClass) {
    if (!$complementosHistoryBadge || !$complementosHistoryBadge.length) {
      return;
    }
    var nextClass = statusClass || 'success';
    $complementosHistoryBadge.removeClass(complementosBadgeStates.join(' ')).addClass(nextClass);
    $complementosHistoryBadge.text(statusText || 'Cargado');
  }

  function updateComplementosSummary(rows) {
    var registros = Array.isArray(rows) ? rows : [];
    var totalDocs = registros.length;
    var montoTotal = 0;

    registros.forEach(function(item) {
      montoTotal += parseMoneyValue(item.monto);
    });

    if ($complementosTotalDocs && $complementosTotalDocs.length) {
      $complementosTotalDocs.text(totalDocs);
    }
    if ($complementosMontoTotal && $complementosMontoTotal.length) {
      $complementosMontoTotal.text(formatMoneyValue(montoTotal));
    }

    if (totalDocs === 0) {
      setComplementosBadgeState('Sin resultados', 'warning');
      return;
    }

    setComplementosBadgeState('Cargado', 'success');
  }

  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $('.select2').select2({
      width: '100%',
      placeholder: '-Selecciona una opción-'
    });

    $complementosHistoryBadge = $('#facturasHistoryBadge');
    $complementosTotalDocs = $('#facturasTotalDocs');
    $complementosMontoTotal = $('#facturasMontoTotal');

    setComplementosBadgeState('Esperando datos', 'neutral');
    updateComplementosSummary([]);

    loadGridComplementos();

    $('#desde').datetimepicker({
      "defaultDate": new Date(),
      format: 'DD/MM/YYYY',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('#hasta').datetimepicker({
      "defaultDate": new Date(),
      format: 'DD/MM/YYYY',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('#fecha_cons').datetimepicker({
      "defaultDate": new Date(),
      format: 'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('#fecha_deposito').datetimepicker({
      "defaultDate": new Date(),
      format: 'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('.daterange').daterangepicker({
      startDate: moment().startOf('hour'),
      endDate: moment().startOf('hour').add(32, 'hour'),
      locale: {
        format: 'DD/MM/YYYY',
        applyLabel: "Aplicar",
        cancelLabel: "Cancelar",
      }
    });
  });
  $("input[type=radio][name=radioFecha]").change(function(e) {

    daysOfWeekDisabled = [];
    if (this.value == 'to') {

      $('#fecha_cons_ran').show()
      $('#fecha_cons').hide()
      // $('#fecha_cons_ran').daterangepicker('destroy')
      $('#fecha_cons_ran').daterangepicker({
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD',
          applyLabel: "Aplicar",
          cancelLabel: "Cancelar",
        }
      });
      // $('#fecha_cons_ran').daterangepicker('refresh')

    } else {
      $('#fecha_cons').datetimepicker('destroy')
      $('#fecha_cons').show()
      $('#fecha_cons_ran').hide()

      if (this.value == 'm') {
        format = 'YYYY-MM';
      } else if (this.value == 'W') {
        format = 'YYYY-MM-DD';
        daysOfWeekDisabled = [1, 2, 3, 4, 5, 6];
      } else if (this.value == 'd') {
        format = 'YYYY-MM-DD';
      }
      $('#fecha_cons').datetimepicker({
        defaultDate: new Date(),
        format: format,
        daysOfWeekDisabled: daysOfWeekDisabled,
        icons: {
          time: "fa fa-clock-o",
          date: "fa fa-calendar",
          up: "fa fa-chevron-up",
          down: "fa fa-chevron-down",
          previous: 'fa fa-chevron-left',
          next: 'fa fa-chevron-right',
          today: 'fa fa-screenshot',
          clear: 'fa fa-trash',
          close: 'fa fa-remove'
        }
      })
      // $('#fecha_cons').datetimepicker('refresh')
    }

  });

  function loadGridComplementos() {
    var cliente = $('#cliente').val();
    var sucursal = $('#sucursal').val();
    var tipo_fac = $('#tipo_fac').val();
    var agente = $('#agente').val();
    var estatus = $('#filtro_estatus').val();
    var moneda = $('#filtro_moneda').val();
    var fecha = $('#fecha_cons').val();
    var fecharan = $('#fecha_cons_ran').val();
    var radio = $('input[name="radioFecha"]:checked').val();

    setComplementosBadgeState('Cargando...', 'neutral');

    $('#gridFacturas').dataTable().fnDestroy();
    var table = $('#gridFacturas').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      // processing: true,
      dom: 'Blfrtip',
      // scrollX: true,
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{url('facturacion/operaciones/lista-complementos/get_facturas')}}",
        type: "POST",
        data: {
          cliente: cliente,
          sucursal: sucursal,
          tipo_fac: tipo_fac,
          agente: agente,
          estatus: estatus,
          moneda: moneda,
          fecha: fecha,
          fecharan: fecharan,
          radio: radio
        },
        error: function() {
          setComplementosBadgeState('Error', 'danger');
        }
      },
      initComplete: function(settings, json) {
        var rows = (json && Array.isArray(json.data)) ? json.data : [];
        updateComplementosSummary(rows);
      },
      columns: [{
          data: "id",
          render: function(data, type, row) {
            return '<input type="checkbox" name="complementos" value="' + row.id + '" class="checkPro" onclick="revisaChecksComplementos();">'
          }
        },
        {
          data: "fecha_emision"
        },
        {
          data: "serie"
        },
        {
          data: "folio"
        },
        {
          data: "documentos_relacionados",
          render: function(data) {
            return data || '<div class="fact-rel-empty">Sin documentos relacionados</div>'
          }
        },
        {
          data: "razon_social_receptor"
        },
        {
          data: "rfc_receptor"
        },
        {
          data: "monto"
        },
        {
          data: "forma_pago"
        },
        {
          data: "moneda"
        },
        {
          data: "tipo"
        },
        {
          data: "estatus"
        },
        {
          data: "acciones"
        },

      ],
      order: [
        [1, "desc"]
      ],
      columnDefs: [{
        orderable: false,
        targets: 0,
        className: "text-center"
      }, {
        orderable: false,
        targets: 4,
        className: "text-left fact-rel-col"
      }, {
        orderable: false,
        targets: 11,
        className: "text-center"
      }, {
        orderable: false,
        targets: 12,
        className: "text-center"
      }, ],
      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ],

    });

  }

  function abrirModalCancelacionComplemento(id) {
    $('#idDocHv').val(id)
    $('#modalCancelacionFactura').modal('show')
  }

  function abrirModalEnvioComplemento(id, correo, pdf, xml, seriefolio, cliente) {
    const asdocu = 'Complemento de pago';

    $('#idFactReenv').val(id)
    $('#emailClienteM').val(correo)

    $('#downloadPdf').attr('href', pdf)
    $('#downloadXml').attr('href', xml)
    $('#asuntoModal').val('Asunto: ' + asdocu + ' ' + seriefolio + ' - ' + $('#nomEmpresa').val())

    $("#notasfacturaModal").summernote("code", 'Estimado/a ' + cliente + ',<br><br>Adjunto te envío el complemento de pago ' + seriefolio + '.<br><br>Para cualquier consulta, estoy a tu disposición.<br><br>Saludos.<br>' + $('#nomEmpresa').val());
    //$('#notasfacturaModal').val()
    $('#modalComprobante2').modal('show')
  }

  function enviarComplemento() {
    var idfactura = $('#idFactReenv').val()
    var correo = $('#emailClienteM').val()
    var cc = $('#cc').val()
    var asunto = $('#asuntoModal').val()
    var cuerpo = $('#notasfacturaModal').val()

    if (!correo || !asunto) {
      Swal.fire({
        title: 'Correo y asunto son obligatorios',
        icon: 'warning',
        timer: 2500
      });
      return;
    }

    $.ajax({
        url: "{{ url('facturacion/operaciones/enviar_factura') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          correo: correo,
          cc: cc,
          asunto: asunto,
          cuerpo: cuerpo,
          idfactura: idfactura,
        },
      })
      .done(function(resp) {
        console.log(resp);
        Swal.fire({
          title: 'Enviado correctamente.',
          type: 'success',
          timer: 7000
        })
        return false;
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function selectAll() {
    if ($('#checkAll').is(':checked')) {
      $('.checkPro').prop('checked', true);
      $('#btnEliminarPoliza').show()
      $('.reportbuttons').show()
    } else {
      $('.checkPro').prop('checked', false);
      $('#btnEliminarPoliza').hide()
      $('.reportbuttons').hide()
    }
    // $('#checkAll').hide();
  }

  function revisaChecksComplementos() {
    var allPages = $('#gridFacturas').dataTable().fnGetNodes();
    var contador = 0;
    $('.checkPro:checked', allPages).each(function() {
      contador++;
    });
    if (contador == 0) {
      $('.reportbuttons').hide()
    } else {
      $('.reportbuttons').show()
    }
  }

  function getSelectedComplementos() {
    var seleccionados = [];
    var allPages = $('#gridFacturas').dataTable().fnGetNodes();

    $('.checkPro:checked', allPages).each(function() {
      seleccionados.push($(this).val());
    });

    return seleccionados;
  }

  function enviaDescargas(tipo) {
    var complementos = getSelectedComplementos();

    if (complementos.length === 0) {
      Swal.fire({
        title: 'No se selecciono ningun registro.',
        type: 'warning',
        timer: 7000
      })
      return false;
    }
    console.log(complementos);
    var urlAcciones = '';
    if (tipo == 1) {
      urlAcciones = "{{ url('facturacion/operaciones/acciones_enviar') }}";
    } else {
      urlAcciones = "{{ url('facturacion/operaciones/acciones_descargar') }}";
    }
    $('#loadingLoad').modal('show')
    $.ajax({
        url: urlAcciones,
        type: 'POST',
        dataType: 'json',
        data: {
          facturas: complementos,
          tipo: tipo,
        },
      })
      .done(function(resp) {
        console.log(resp);
        if (tipo == 1) {
          if (resp.estatus == 1) {
            Swal.fire({
              title: 'Enviado correctamente.',
              type: 'success',
              timer: 7000
            })
            setTimeout(() => {
              $('#loadingLoad').modal('hide')
            }, "1000");
            return false;
          } else {
            Swal.fire({
              title: 'Error al enviar.',
              type: 'success',
              timer: 7000
            })
            setTimeout(() => {
              $('#loadingLoad').modal('hide')
            }, "1000");
            return false;
          }

        } else {
          const urlPDF = resp.url_pdf;


          const today = new Date();
          const yyyy = today.getFullYear();
          let mm = today.getMonth() + 1;
          let dd = today.getDate();
          if (dd < 10) dd = '0' + dd;
          if (mm < 10) mm = '0' + mm;
          const formattedToday = dd + '_' + mm + '_' + yyyy;

          const prefix = 'Complementos';

          // Descargar PDF
          const linkPDF = document.createElement('a');
          linkPDF.setAttribute('href', urlPDF);
          linkPDF.setAttribute('download', prefix + formattedToday + '.zip');
          document.body.appendChild(linkPDF);
          linkPDF.click();
          document.body.removeChild(linkPDF);
        }


      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }
</script>
@endpush