@extends('../padre.padre')

@section('styles')
<style>
  .header-blue {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0083b0 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .panel-controls {
    background: #fff;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 10px 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .badge-admin {
    background: rgba(255,193,7,.2);
    border: 1px solid #ffc107;
    color: #856404;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .5px;
    vertical-align: middle;
  }
  .badge-pct {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: .82rem;
  }

  /* ── MULTI-SELECT DROPDOWNS ── */
  .multiselect-wrap {
    position: relative;
  }
  .multiselect-btn {
    height: 31px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    background-color: #ffffff !important;
    text-align: left;
    padding: 4px 8px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
  }
  .multiselect-btn:hover {
    border-color: #0083b0 !important;
  }
  .multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    max-width: 90vw;
    z-index: 1050;
    background: #ffffff;
    border: 1px solid #0083b0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    display: none;
    margin-top: 2px;
  }
  .multiselect-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
  }
  .multiselect-item {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    margin: 0;
    transition: background 0.1s;
    user-select: none;
  }
  .multiselect-item:hover {
    background: #e0f2fe;
  }
  .multiselect-item input[type="checkbox"] {
    cursor: pointer;
  }

  /* ── TABLA CON HEADER FIJO + RESPONSIVA ── */
  .tabla-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid #cbd5e1;
    border-right: 1px solid #cbd5e1;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    margin-bottom: 0;
  }
  .tabla-wrap {
    min-width: 950px;
  }
  .tabla-politicas {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
    margin-bottom: 0;
  }
  .tabla-politicas thead th {
    background-color: #0f172a;
    color: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 6px;
    text-align: center;
    border-bottom: 2px solid #334155;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .tabla-politicas tbody td {
    font-size: 12px;
    vertical-align: middle;
    padding: 7px 8px;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
  }
  .tabla-politicas tbody tr:hover td {
    background-color: #f8fafc !important;
  }
  .politica-vencida td {
    background-color: #fff1f2 !important;
    color: #9f1239 !important;
  }
  .badge-vencida {
    background-color: #ffe4e6;
    color: #9f1239;
    border: 1px solid #fecdd3;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: .8rem;
    display: inline-block;
  }
  .row-editing td {
    background-color: #e0f2fe !important;
  }

  /* Botones de acción en tabla */
  .btn-accion-edit {
    background-color: #0284c7;
    color: #ffffff !important;
    border: none;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
  }
  .btn-accion-edit:hover {
    background-color: #0369a1;
  }
  .btn-accion-del {
    background-color: #dc2626;
    color: #ffffff !important;
    border: none;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
  }
  .btn-accion-del:hover {
    background-color: #b91c1c;
  }

  /* Autocomplete */
  .autocomplete-wrap { position: relative; }
  .autocomplete-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
    background: #fff;
    border: 1px solid #0083b0;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
  }
  .ac-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: .82rem;
    border-bottom: 1px solid #f1f5f9;
  }
  .ac-item:hover { background: #e0f2fe; }

  .pct-highlight {
    font-weight: 700;
    color: #856404;
    border-color: #ffc107 !important;
    background: #fffbf0 !important;
  }
  .form-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
  }
  [data-theme='dark'] .form-section-title {
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
  }

  /* Toast */
  #toast-pd {
    position: fixed; bottom: 25px; right: 25px;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    color: #fff;
    z-index: 9999;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
  }
  #toast-pd.ok  { background: #10b981; }
  #toast-pd.err { background: #ef4444; }

  /* Toolbar de la tabla */
  .table-toolbar {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .status-pill {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    transition: all 0.15s;
  }
  .status-pill.active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
  }

  /* ── PAGINACIÓN ── */
  .pagination-footer {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    margin-bottom: 20px;
  }
  .pagination-custom .page-link {
    color: #1e293b;
    border-color: #cbd5e1;
    font-size: 0.8rem;
    padding: 3px 9px;
    font-weight: 600;
    transition: all 0.15s;
    user-select: none;
  }
  .pagination-custom .page-link:hover {
    background-color: #e2e8f0;
    color: #0f172a;
  }
  .pagination-custom .page-item.active .page-link {
    background-color: #0f172a;
    border-color: #0f172a;
    color: #ffffff !important;
  }
  .pagination-custom .page-item.disabled .page-link {
    color: #94a3b8;
    background-color: #f8fafc;
    border-color: #e2e8f0;
    pointer-events: none;
  }

  /* ── SOPORTE MODO OSCURO ── */
  [data-theme='dark'] .panel-controls {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }
  [data-theme='dark'] .table-toolbar {
    background: #0f172a !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .status-pill {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
  }
  [data-theme='dark'] .status-pill.active {
    background: #38bdf8 !important;
    color: #0f172a !important;
    border-color: #38bdf8 !important;
  }
  [data-theme='dark'] .tabla-outer {
    background: #1e293b !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .tabla-politicas tbody td {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .tabla-politicas tbody tr:hover td {
    background-color: #334155 !important;
  }
  [data-theme='dark'] .multiselect-btn {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
  }
  [data-theme='dark'] .multiselect-dropdown {
    background: #1e293b !important;
    border-color: #0284c7 !important;
  }
  [data-theme='dark'] .multiselect-dropdown .bg-light {
    background: #0f172a !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .multiselect-item {
    color: #f1f5f9 !important;
  }
  [data-theme='dark'] .multiselect-item:hover {
    background: #0369a1 !important;
  }
  [data-theme='dark'] .autocomplete-list {
    background: #1e293b !important;
    border-color: #0284c7 !important;
  }
  [data-theme='dark'] .ac-item {
    color: #f1f5f9 !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .ac-item:hover {
    background: #0369a1 !important;
  }
  [data-theme='dark'] .form-control,
  [data-theme='dark'] .form-select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
  }
  [data-theme='dark'] .pct-highlight {
    background: #422006 !important;
    color: #fef08a !important;
    border-color: #ca8a04 !important;
  }
  [data-theme='dark'] .row-editing td {
    background-color: #0c4a6e !important;
    color: #f0f9ff !important;
  }
  [data-theme='dark'] .pagination-footer {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }
  [data-theme='dark'] .pagination-custom .page-link {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }
  [data-theme='dark'] .pagination-custom .page-link:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
  }
  [data-theme='dark'] .pagination-custom .page-item.active .page-link {
    background-color: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #0f172a !important;
    font-weight: 700;
  }
  [data-theme='dark'] .pagination-custom .page-item.disabled .page-link {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #64748b !important;
  }
</style>
@endsection

@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid mt-2">

  {{-- ===== ENCABEZADO ===== --}}
  <div class="header-blue">
    <div class="d-flex align-items-center gap-2">
      <h5 class="fw-bold mb-0 text-white fs-6">ADMINISTRACIÓN &gt;&gt; POLÍTICA DE DESCUENTOS</h5>
      <span class="badge-admin">SOLO ADMIN</span>
    </div>
    <div>
      @include('menu.botonRegresar')
    </div>
  </div>

  {{-- ===== PANEL FORMULARIO ===== --}}
  <div class="panel-controls">
    <input type="hidden" id="idpt" value="">

    <!-- Indicador de modo edición -->
    <div id="alertModoEdicion" class="alert alert-info py-1 px-2 mb-2 d-none d-flex justify-content-between align-items-center" style="font-size: 0.8rem;">
      <span><strong>✏ Editando Política #<span id="lblEditId"></span>:</strong> Modifique los campos y guarde los cambios.</span>
      <button type="button" class="btn btn-sm btn-outline-secondary py-0" onclick="limpiarFormulario()">Cancelar Edición</button>
    </div>

    <!-- SECCIÓN 1: CRITERIOS DE APLICACIÓN -->
    <div class="form-section-title">
      <span>🎯 1. CRITERIOS DE APLICACIÓN</span>
      <span class="fw-normal text-muted" style="text-transform: none; font-size: 10.5px;">— Deje en "Todos" o vacío si la política aplica de forma general</span>
    </div>

    <div class="row g-2 mb-3">

      {{-- MARCA (Multi-selección) --}}
      <div class="col-12 col-sm-6 col-lg-2">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">🏭 Marca(s)</label>
        <div class="multiselect-wrap" id="wrapMarca">
          <button type="button" class="multiselect-btn w-100" id="btnDropdownMarca" onclick="toggleMultiDropdown('dropdownMarca')">
            <span id="lblMarca" class="text-truncate">— Todas (General) —</span>
            <span class="text-muted ms-1">▼</span>
          </button>
          <div class="multiselect-dropdown" id="dropdownMarca">
            <div class="p-2 border-bottom bg-light">
              <input type="text" class="form-control form-control-sm mb-1" placeholder="🔍 Buscar marca..." onkeyup="filterMultiList(this, 'listMarca')">
              <div class="d-flex justify-content-between gap-1">
                <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2" style="font-size:11px;" onclick="selectAllMulti('chk-marca', true)">☑ Todas</button>
                <button type="button" class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size:11px;" onclick="selectAllMulti('chk-marca', false)">☐ Ninguna</button>
                <button type="button" class="btn btn-xs btn-secondary py-0 px-2" style="font-size:11px;" onclick="closeMultiDropdown('dropdownMarca')">✕</button>
              </div>
            </div>
            <div class="multiselect-list" id="listMarca">
              @foreach($marcas as $m)
                <label class="multiselect-item">
                  <input type="checkbox" class="chk-marca" value="{{ $m->codmarca }}" data-name="{{ $m->nommarca }}" onchange="updateMultiLabel('chk-marca', 'lblMarca', 'marcas')">
                  <span>{{ $m->nommarca }}</span>
                </label>
              @endforeach
            </div>
          </div>
        </div>
      </div>

      {{-- CATEGORÍA (Multi-selección) --}}
      <div class="col-12 col-sm-6 col-lg-2">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">📂 Categoría(s)</label>
        <div class="multiselect-wrap" id="wrapCateg">
          <button type="button" class="multiselect-btn w-100" id="btnDropdownCateg" onclick="toggleMultiDropdown('dropdownCateg')">
            <span id="lblCateg" class="text-truncate">— Todas (General) —</span>
            <span class="text-muted ms-1">▼</span>
          </button>
          <div class="multiselect-dropdown" id="dropdownCateg">
            <div class="p-2 border-bottom bg-light">
              <input type="text" class="form-control form-control-sm mb-1" placeholder="🔍 Buscar categoría..." onkeyup="filterMultiList(this, 'listCateg')">
              <div class="d-flex justify-content-between gap-1">
                <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2" style="font-size:11px;" onclick="selectAllMulti('chk-categ', true)">☑ Todas</button>
                <button type="button" class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size:11px;" onclick="selectAllMulti('chk-categ', false)">☐ Ninguna</button>
                <button type="button" class="btn btn-xs btn-secondary py-0 px-2" style="font-size:11px;" onclick="closeMultiDropdown('dropdownCateg')">✕</button>
              </div>
            </div>
            <div class="multiselect-list" id="listCateg">
              @foreach($categorias as $c)
                <label class="multiselect-item">
                  <input type="checkbox" class="chk-categ" value="{{ $c->codcategoria }}" data-name="{{ $c->nomcategoria }}" onchange="updateMultiLabel('chk-categ', 'lblCateg', 'categorías')">
                  <span>{{ $c->nomcategoria }}</span>
                </label>
              @endforeach
            </div>
          </div>
        </div>
      </div>

      {{-- PRODUCTO (Autocomplete por código o nombre) --}}
      <div class="col-12 col-sm-6 col-lg-3">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">📦 Producto Puntual</label>
        <div class="autocomplete-wrap">
          <div class="input-group input-group-sm">
            <input type="text" id="porProductoDisplay" class="form-control form-control-sm" placeholder="Buscar código o nombre..." autocomplete="off">
            <button class="btn btn-outline-secondary" type="button" onclick="limpiarProducto()" title="Limpiar">✕</button>
          </div>
          <input type="hidden" id="PorProducto" value="">
          <div class="autocomplete-list" id="acProductList"></div>
        </div>
      </div>

      {{-- GRUPO DE CLIENTES --}}
      <div class="col-12 col-sm-6 col-lg-2">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">👥 Grupo de Clientes</label>
        <select id="porGrupoCliente" class="form-select form-select-sm">
          <option value="">— Todos los Grupos —</option>
          @if(isset($gruposClientes))
            @foreach($gruposClientes as $g)
              <option value="{{ $g->idct }}">{{ $g->nombreGrupo }}</option>
            @endforeach
          @endif
        </select>
      </div>

      {{-- CLIENTE (Autocomplete por cédula o nombre) --}}
      <div class="col-12 col-sm-6 col-lg-3">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">👤 Cliente Específico</label>
        <div class="autocomplete-wrap">
          <div class="input-group input-group-sm">
            <input type="text" id="porClienteDisplay" class="form-control form-control-sm" placeholder="Cédula o nombre..." autocomplete="off">
            <button class="btn btn-outline-secondary" type="button" onclick="limpiarCliente()" title="Limpiar">✕</button>
          </div>
          <input type="hidden" id="porCliente" value="">
          <div class="autocomplete-list" id="acClientList"></div>
        </div>
      </div>

    </div>

    <!-- SECCIÓN 2: BENEFICIO, BODEGA Y VIGENCIA -->
    <div class="form-section-title">
      <span>⚙️ 2. PARÁMETROS DEL DESCUENTO, BODEGA Y VIGENCIA</span>
    </div>

    <div class="row g-2 align-items-end">

      {{-- BODEGA --}}
      <div class="col-12 col-sm-6 col-md-3 col-lg-2">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">🏪 Bodega</label>
        <select id="Bodega" class="form-select form-select-sm">
          <option value="">— Todas —</option>
          @foreach($bodegas as $b)
            <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
          @endforeach
        </select>
      </div>

      {{-- % DESCUENTO --}}
      <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <label class="fw-bold text-danger mb-1" style="font-size:11px;">💰 % Dto</label>
        <input type="number" id="otroDatoPl" class="form-control form-control-sm pct-highlight text-center fw-bold" placeholder="Ej: 10" min="0.01" max="100" step="0.01">
      </div>

      {{-- CANTIDAD MÍNIMA --}}
      <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">🔢 Cant. Mín</label>
        <input type="number" id="plicarDespCant" class="form-control form-control-sm text-center" placeholder="0" min="0" value="0">
      </div>

      {{-- FECHA INICIO --}}
      <div class="col-12 col-sm-6 col-md-3 col-lg-2">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">📅 Fecha/Hora Inicio</label>
        <input type="datetime-local" id="fecheInicio" class="form-control form-control-sm">
      </div>

      {{-- FECHA FIN --}}
      <div class="col-12 col-sm-6 col-md-3 col-lg-2">
        <label class="fw-bold text-secondary mb-1" style="font-size:11px;">📅 Fecha/Hora Fin</label>
        <input type="datetime-local" id="fechaFin" class="form-control form-control-sm">
      </div>

      {{-- BOTONES --}}
      <div class="col-12 col-md-6 col-lg-4 d-flex align-items-center gap-2">
        <button type="button" class="btn btn-primary btn-sm px-3 fw-bold flex-grow-1 shadow-sm" id="btnGuardar" onclick="guardar()" style="height: 31px;">
          💾 <span id="lblBtnGuardar">Guardar Política</span>
        </button>
        <button type="button" class="btn btn-outline-secondary btn-sm px-3" onclick="limpiarFormulario()" style="height: 31px;">
          ✖ Cancelar
        </button>
      </div>

    </div>
  </div>

  {{-- ===== TOOLBAR DE FILTROS DE TABLA ===== --}}
  <div class="table-toolbar">
    <div class="d-flex align-items-center flex-wrap gap-2">
      <span class="status-pill active" id="pillAll" onclick="filtrarEstado('todas')">Todas (<span id="cntAll">0</span>)</span>
      <span class="status-pill" id="pillVigentes" onclick="filtrarEstado('vigentes')">🟢 Vigentes (<span id="cntVig">0</span>)</span>
      <span class="status-pill" id="pillFuturas" onclick="filtrarEstado('futuras')">🟡 Programadas (<span id="cntFut">0</span>)</span>
      <span class="status-pill" id="pillVencidas" onclick="filtrarEstado('vencidas')">🔴 Vencidas (<span id="cntVen">0</span>)</span>

      <!-- Filtro por Marca en la tabla -->
      <select id="filtroMarcaTabla" class="form-select form-select-sm" style="width: auto; max-width: 170px;" onchange="aplicarFiltrosTabla()">
        <option value="">— Todas las Marcas —</option>
        @foreach($marcas as $m)
          <option value="{{ $m->nommarca }}">{{ $m->nommarca }}</option>
        @endforeach
      </select>

      <!-- Filtro por Categoría en la tabla -->
      <select id="filtroCategoriaTabla" class="form-select form-select-sm" style="width: auto; max-width: 170px;" onchange="aplicarFiltrosTabla()">
        <option value="">— Todas las Categorías —</option>
        @foreach($categorias as $c)
          <option value="{{ $c->nomcategoria }}">{{ $c->nomcategoria }}</option>
        @endforeach
      </select>

      <!-- Filtro por Bodega en la tabla -->
      <select id="filtroBodegaTabla" class="form-select form-select-sm" style="width: auto; max-width: 150px;" onchange="aplicarFiltrosTabla()">
        <option value="">— Todas las Bodegas —</option>
        @foreach($bodegas as $b)
          <option value="{{ $b->nombreBodega }}">{{ $b->nombreBodega }}</option>
        @endforeach
      </select>

      <!-- Filtro por Grupo de Clientes en la tabla -->
      <select id="filtroGrupoClienteTabla" class="form-select form-select-sm" style="width: auto; max-width: 170px;" onchange="aplicarFiltrosTabla()">
        <option value="">— Todos los Grupos —</option>
        @if(isset($gruposClientes))
          @foreach($gruposClientes as $g)
            <option value="{{ $g->nombreGrupo }}">{{ $g->nombreGrupo }}</option>
          @endforeach
        @endif
      </select>
    </div>

    <div class="d-flex align-items-center flex-wrap gap-2">
      <!-- Botón de eliminación masiva (se activa con checkboxes) -->
      <button type="button" id="btnEliminarSeleccionadas" class="btn btn-danger btn-sm py-1 px-2 fw-bold d-none" onclick="eliminarSeleccionadas()">
        🗑 Eliminar Seleccionadas (<span id="cntSeleccionadas">0</span>)
      </button>

      <!-- Botón para eliminar todas las vencidas -->
      <button type="button" id="btnEliminarVencidas" class="btn btn-outline-danger btn-sm py-1 px-2" onclick="eliminarVencidas()" title="Elimina todas las políticas con fecha fin vencida">
        ⏱ Borrar Vencidas
      </button>

      <!-- Botón para vaciar todas las políticas si se requiere resetear -->
      <button type="button" id="btnVaciarTodas" class="btn btn-outline-danger btn-sm py-1 px-2" onclick="vaciarTodasPoliticas()" title="Elimina todas las políticas de descuento existentes">
        ⚠️ Vaciar Todo
      </button>

      <input type="text" id="filtroTabla" class="form-control form-control-sm" placeholder="🔍 Filtrar en tabla..." style="width: 180px;" onkeyup="filtrarTextoTabla()">

      <button class="btn btn-success btn-sm py-1 px-2 fw-bold" onclick="exportarExcelPoliticas()" title="Exportar a Excel">
        📊 Excel
      </button>
    </div>
  </div>

  {{-- ===== TABLA DE POLÍTICAS ===== --}}
  <div class="tabla-outer">
    <div class="tabla-wrap">
      <div id="tableContainer">
        <div class="p-4 text-center text-muted">⏳ Cargando políticas de descuento...</div>
      </div>
    </div>
  </div>

  {{-- ===== BARRA DE PAGINACIÓN ===== --}}
  <div class="pagination-footer d-flex flex-wrap justify-content-between align-items-center gap-2 px-3 py-2" id="panelPaginacion">
    <div class="d-flex align-items-center flex-wrap gap-2">
      <span class="text-muted small fw-semibold" id="infoPaginacion">Mostrando 0 a 0 de 0 políticas</span>
      <div class="d-flex align-items-center ms-md-2">
        <label class="small text-muted me-1 mb-0" for="selectPorPagina" style="font-size: 11px;">Mostrar:</label>
        <select id="selectPorPagina" class="form-select form-select-sm" style="width: auto; height: 28px; padding: 2px 24px 2px 8px; font-size: 0.8rem;" onchange="cambiarPorPagina(this.value)">
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
      </div>
    </div>

    <nav aria-label="Navegación de páginas">
      <ul class="pagination pagination-sm pagination-custom mb-0" id="ulPaginacion">
        <!-- Generado dinámicamente -->
      </ul>
    </nav>
  </div>

</div>

{{-- TOAST --}}
<div id="toast-pd"></div>

@endsection

@section('pie')
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const URL_LISTAR   = '{{ url("/politicaDescuentos/listar") }}';
const URL_GUARDAR  = '{{ url("/politicaDescuentos/guardar") }}';
const URL_ELIMINAR = '{{ url("/politicaDescuentos/eliminar") }}';
const URL_EXPORTAR = '{{ url("/politicaDescuentos/exportar") }}';
const URL_CLIENTE  = '{{ url("/politicaDescuentos/buscarCliente") }}';
const URL_PRODUCTO = '{{ url("/politicaDescuentos/buscarProducto") }}';

let ultimaRespuestaServidor = null;
let filtroEstadoActual = 'todas';
let paginaActual = 1;
let porPagina = (function() {
  const guardado = localStorage.getItem('politicas_per_page');
  const num = parseInt(guardado);
  return (num && [10, 25, 50, 100].includes(num)) ? num : 25;
})();
let politicasSeleccionadas = new Set();
let idPoliticaEnEdicion = null;
let debounceTimerFiltro = null;
let xhrListar = null;

/* ── TOAST ── */
function showToast(msg, tipo) {
  const t = document.getElementById('toast-pd');
  t.textContent = msg;
  t.className = tipo;
  t.style.display = 'block';
  setTimeout(() => { t.style.display = 'none'; }, 3500);
}

/* ── MULTI-SELECT DROPDOWNS ── */
function toggleMultiDropdown(id) {
  const el = document.getElementById(id);
  const isShown = el.style.display === 'block';
  closeAllMultiDropdowns();
  if (!isShown) el.style.display = 'block';
}

function closeMultiDropdown(id) {
  const el = document.getElementById(id);
  if (el) el.style.display = 'none';
}

function closeAllMultiDropdowns() {
  document.querySelectorAll('.multiselect-dropdown').forEach(d => d.style.display = 'none');
}

function selectAllMulti(chkClass, checked) {
  document.querySelectorAll('.' + chkClass).forEach(c => {
    if (c.closest('.multiselect-item').style.display !== 'none') {
      c.checked = checked;
    }
  });
  if (chkClass === 'chk-marca') updateMultiLabel('chk-marca', 'lblMarca', 'marcas');
  if (chkClass === 'chk-categ') updateMultiLabel('chk-categ', 'lblCateg', 'categorías');
}

function filterMultiList(input, listId) {
  const q = input.value.toLowerCase().trim();
  const list = document.getElementById(listId);
  list.querySelectorAll('.multiselect-item').forEach(item => {
    const txt = item.textContent.toLowerCase();
    item.style.display = txt.includes(q) ? 'flex' : 'none';
  });
}

function updateMultiLabel(chkClass, lblId, nombrePlural) {
  const checked = document.querySelectorAll('.' + chkClass + ':checked');
  const lbl = document.getElementById(lblId);
  if (checked.length === 0) {
    lbl.textContent = '— Todas (General) —';
    lbl.className = 'text-truncate';
  } else if (checked.length === 1) {
    lbl.textContent = checked[0].dataset.name;
    lbl.className = 'text-truncate fw-bold text-primary';
  } else {
    lbl.textContent = `${checked.length} ${nombrePlural} seleccionadas`;
    lbl.className = 'text-truncate fw-bold text-primary';
  }
}

document.addEventListener('click', function (e) {
  if (!e.target.closest('.multiselect-wrap')) {
    closeAllMultiDropdowns();
  }
});

/* ── LISTAR POLÍTICAS (PAGINACIÓN Y FILTRADO EN SERVIDOR) ── */
function listarPoliticas(pagina = paginaActual) {
  paginaActual = parseInt(pagina) || 1;

  const container = document.getElementById('tableContainer');
  container.innerHTML =
    '<div class="p-4 text-center text-muted"><div class="spinner-border text-primary spinner-border-sm me-2" role="status"></div> Cargando políticas de descuento...</div>';

  const params = {
    page:      paginaActual,
    per_page:  porPagina,
    estado:    filtroEstadoActual,
    search:    (document.getElementById('filtroTabla') ? document.getElementById('filtroTabla').value : '').trim(),
    marca:     (document.getElementById('filtroMarcaTabla') ? document.getElementById('filtroMarcaTabla').value : '').trim(),
    categoria: (document.getElementById('filtroCategoriaTabla') ? document.getElementById('filtroCategoriaTabla').value : '').trim(),
    bodega:    (document.getElementById('filtroBodegaTabla') ? document.getElementById('filtroBodegaTabla').value : '').trim(),
    grupo:     (document.getElementById('filtroGrupoClienteTabla') ? document.getElementById('filtroGrupoClienteTabla').value : '').trim()
  };

  if (xhrListar && xhrListar.readyState !== 4) {
    xhrListar.abort();
  }

  xhrListar = $.get(URL_LISTAR, params, function (res) {
    ultimaRespuestaServidor = res;
    renderTablaDesdeServidor(res);
  }).fail((xhr, status) => {
    if (status === 'abort') return;
    container.innerHTML =
      '<div class="p-4 text-center text-danger">⚠ Error al cargar datos del servidor.</div>';
    const ulPag = document.getElementById('ulPaginacion');
    if (ulPag) ulPag.innerHTML = '';
    const infoPag = document.getElementById('infoPaginacion');
    if (infoPag) infoPag.textContent = 'Error al cargar';
  });
}

/* ── RENDER TABLA CON RESULTADOS DEL SERVIDOR ── */
function renderTablaDesdeServidor(res) {
  // 1. Actualizar conteos rápidos en píldoras
  const elCntAll = document.getElementById('cntAll');
  const elCntVig = document.getElementById('cntVig');
  const elCntFut = document.getElementById('cntFut');
  const elCntVen = document.getElementById('cntVen');
  if (elCntAll) elCntAll.textContent = (res.total || 0).toLocaleString();
  if (elCntVig) elCntVig.textContent = (res.vigentes || 0).toLocaleString();
  if (elCntFut) elCntFut.textContent = (res.futuras || 0).toLocaleString();
  if (elCntVen) elCntVen.textContent = (res.vencidas || 0).toLocaleString();

  const items = res.data || [];
  const totalFiltradas = res.total_filtradas || 0;

  // 2. Sin resultados
  if (items.length === 0) {
    document.getElementById('tableContainer').innerHTML =
      '<div class="p-4 text-center text-muted">📋 No se encontraron políticas con los filtros seleccionados.</div>';
    const ulPag = document.getElementById('ulPaginacion');
    if (ulPag) ulPag.innerHTML = '';
    const infoPag = document.getElementById('infoPaginacion');
    if (infoPag) infoPag.textContent = 'Mostrando 0 políticas';
    actualizarSeleccionPoliticas();
    return;
  }

  // 3. Renderizar tabla con los 25 a 100 registros de la página actual
  let html = `
    <table class="table table-sm tabla-politicas">
      <thead>
        <tr>
          <th style="width: 35px;" class="text-center">
            <input type="checkbox" id="chkSelectAll" title="Seleccionar/Deseleccionar todas las de esta página" onchange="toggleSelectAllPoliticas(this)">
          </th>
          <th>#</th>
          <th>Marca</th>
          <th>Categoría</th>
          <th>Producto</th>
          <th>Cliente</th>
          <th>Grupo Clie.</th>
          <th>Inicio</th>
          <th>Fin</th>
          <th>Bodega</th>
          <th>Cant. Mín</th>
          <th>% Dto.</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody id="tbodyPoliticas">`;

  items.forEach(p => {
    const ini = p.fecheInicio ? p.fecheInicio.slice(0, 16).replace('T', ' ') : '—';
    const fin = p.fechaFin    ? p.fechaFin.slice(0, 16).replace('T', ' ')    : '—';

    let trClass = '';
    let badgeHtml = '';
    if (p.idpt == idPoliticaEnEdicion) {
      trClass = 'class="row-editing"';
    } else if (p.esVencida) {
      trClass = 'class="politica-vencida"';
    }

    if (p.esVencida) {
      badgeHtml = `<span class="badge-vencida">${p.otroDatoPl ?? '0'}% Vencida</span>`;
    } else if (p.esFutura) {
      badgeHtml = `<span class="badge" style="background:#fef3c7; color:#92400e; border:1px solid #fde68a; font-weight:700; padding:3px 8px; border-radius:10px; font-size:.82rem;">${p.otroDatoPl ?? '0'}% Programada</span>`;
    } else {
      badgeHtml = `<span class="badge-pct">${p.otroDatoPl ?? '0'}%</span>`;
    }

    const isChecked = politicasSeleccionadas.has(Number(p.idpt)) ? 'checked' : '';

    html += `
      <tr id="row-${p.idpt}" ${trClass}>
        <td class="text-center">
          <input type="checkbox" class="chk-politica-row" value="${p.idpt}" ${isChecked} onchange="toggleSeleccionPolitica(${p.idpt}, this.checked)">
        </td>
        <td class="text-center fw-bold text-secondary">#${p.idpt}</td>
        <td>${p.nommarca    ? `<span class="fw-semibold text-dark">${p.nommarca}</span>` : '<span class="text-muted">— Todas —</span>'}</td>
        <td>${p.nomcategoria ? `<span class="fw-semibold text-dark">${p.nomcategoria}</span>` : '<span class="text-muted">— Todas —</span>'}</td>
        <td>${p.PorProducto  ? `<span class="badge bg-light text-dark border" title="${p.nombreProducto || ''}">${p.nombreProducto ? `<strong>${p.PorProducto}</strong> - ${p.nombreProducto}` : p.PorProducto}</span>` : '<span class="text-muted">— Todos —</span>'}</td>
        <td>${p.porCliente ? (p.nombreCliente ? `${p.nombreCliente} ${p.apellidoCliente ?? ''} <small class="text-muted">(${p.porCliente})</small>` : p.porCliente) : '<span class="text-muted">— Todos —</span>'}</td>
        <td>${p.nombreGrupoCliente ? `<span class="badge" style="background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd;">👥 ${p.nombreGrupoCliente}</span>` : '<span class="text-muted">— Todos —</span>'}</td>
        <td><small>${ini}</small></td>
        <td><small>${fin}</small></td>
        <td>${p.nombreBodega ? `<span class="badge bg-light text-dark border">${p.nombreBodega}</span>` : '<span class="text-muted">— Todas —</span>'}</td>
        <td class="text-center fw-bold">${p.plicarDespCant ?? '0'}</td>
        <td class="text-center">${badgeHtml}</td>
        <td class="text-center" style="white-space: nowrap;">
          <button class="btn-accion-edit" onclick='editarPolitica(${JSON.stringify(p)})' title="Editar Política">
            ✏ Editar
          </button>
          <button class="btn-accion-del ms-1" onclick="eliminarPolitica(${p.idpt})" title="Eliminar Política">
            🗑 Borrar
          </button>
        </td>
      </tr>`;
  });

  html += '</tbody></table>';
  document.getElementById('tableContainer').innerHTML = html;

  // 4. Actualizar controles de paginación
  renderControlesPaginacion(res);

  // 5. Sincronizar checkboxes
  actualizarSeleccionPoliticas();
}

function generarBotonesPaginacion(totalPaginas, actual) {
  if (totalPaginas <= 1) return [];

  const delta = 2;
  const left = Math.max(1, actual - delta);
  const right = Math.min(totalPaginas, actual + delta);
  const rango = new Set([1, totalPaginas]);
  for (let i = left; i <= right; i++) rango.add(i);

  const sorted = Array.from(rango).sort((a, b) => a - b);
  const botones = [];
  let ultimo = 0;

  for (const p of sorted) {
    if (ultimo > 0 && p - ultimo > 1) {
      botones.push('...');
    }
    botones.push(p);
    ultimo = p;
  }

  return botones;
}

function renderControlesPaginacion(res) {
  const infoEl = document.getElementById('infoPaginacion');
  if (infoEl) {
    const fromTxt = (res.from || 0).toLocaleString();
    const toTxt = (res.to || 0).toLocaleString();
    const totalTxt = (res.total_filtradas || 0).toLocaleString();
    let txt = `Mostrando ${fromTxt} a ${toTxt} de ${totalTxt} políticas`;
    if (res.total_filtradas < res.total) {
      txt += ` (filtradas de ${res.total.toLocaleString()} totales)`;
    }
    infoEl.textContent = txt;
  }

  const selPorPag = document.getElementById('selectPorPagina');
  if (selPorPag) {
    selPorPag.value = porPagina;
  }

  const ulPag = document.getElementById('ulPaginacion');
  if (!ulPag) return;

  const totalPaginas = res.last_page || 1;
  if (totalPaginas <= 1) {
    ulPag.innerHTML = '';
    return;
  }

  const botones = generarBotonesPaginacion(totalPaginas, paginaActual);
  let pagHtml = '';

  pagHtml += `
    <li class="page-item ${paginaActual === 1 ? 'disabled' : ''}">
      <a class="page-link" href="javascript:void(0)" onclick="cambiarPagina(1)" title="Primera página" aria-label="Primera">
        &laquo;
      </a>
    </li>
    <li class="page-item ${paginaActual === 1 ? 'disabled' : ''}">
      <a class="page-link" href="javascript:void(0)" onclick="cambiarPagina(${paginaActual - 1})" title="Página anterior" aria-label="Anterior">
        &lsaquo;
      </a>
    </li>`;

  botones.forEach(item => {
    if (item === '...') {
      pagHtml += `<li class="page-item disabled"><span class="page-link">&hellip;</span></li>`;
    } else {
      const isActive = item === paginaActual;
      pagHtml += `
        <li class="page-item ${isActive ? 'active' : ''}">
          <a class="page-link" href="javascript:void(0)" onclick="cambiarPagina(${item})">
            ${item}
          </a>
        </li>`;
    }
  });

  pagHtml += `
    <li class="page-item ${paginaActual === totalPaginas ? 'disabled' : ''}">
      <a class="page-link" href="javascript:void(0)" onclick="cambiarPagina(${paginaActual + 1})" title="Página siguiente" aria-label="Siguiente">
        &rsaquo;
      </a>
    </li>
    <li class="page-item ${paginaActual === totalPaginas ? 'disabled' : ''}">
      <a class="page-link" href="javascript:void(0)" onclick="cambiarPagina(${totalPaginas})" title="Última página" aria-label="Última">
        &raquo;
      </a>
    </li>`;

  ulPag.innerHTML = pagHtml;
}

function cambiarPagina(nuevaPagina) {
  const p = parseInt(nuevaPagina) || 1;
  if (p < 1) return;
  if (ultimaRespuestaServidor && p > ultimaRespuestaServidor.last_page) return;

  listarPoliticas(p);

  const tablaEl = document.querySelector('.table-toolbar');
  if (tablaEl) {
    const rect = tablaEl.getBoundingClientRect();
    if (rect.top < 0) {
      tablaEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

function cambiarPorPagina(val) {
  let num = parseInt(val) || 25;
  if (num > 100) num = 100;
  porPagina = num;
  try {
    localStorage.setItem('politicas_per_page', porPagina);
  } catch (e) {}
  listarPoliticas(1);
}

function aplicarFiltrosTabla() {
  listarPoliticas(1);
}

function filtrarEstado(estado) {
  filtroEstadoActual = estado;
  document.querySelectorAll('.status-pill').forEach(p => p.classList.remove('active'));
  if (estado === 'todas')      document.getElementById('pillAll')?.classList.add('active');
  if (estado === 'vigentes')   document.getElementById('pillVigentes')?.classList.add('active');
  if (estado === 'futuras')    document.getElementById('pillFuturas')?.classList.add('active');
  if (estado === 'vencidas')   document.getElementById('pillVencidas')?.classList.add('active');

  listarPoliticas(1);
}

function filtrarTextoTabla() {
  clearTimeout(debounceTimerFiltro);
  debounceTimerFiltro = setTimeout(() => {
    listarPoliticas(1);
  }, 350);
}

/* ── GUARDAR / CREACIÓN MASIVA ── */
function guardar() {
  const idpt = document.getElementById('idpt').value || null;

  // Recolectar marcas seleccionadas
  const marcasChecked = [];
  document.querySelectorAll('.chk-marca:checked').forEach(c => marcasChecked.push(c.value));

  // Recolectar categorías seleccionadas
  const categChecked = [];
  document.querySelectorAll('.chk-categ:checked').forEach(c => categChecked.push(c.value));

  const displayProd    = document.getElementById('porProductoDisplay').value.trim();
  const PorProducto    = document.getElementById('PorProducto').value.trim();
  const displayCli     = document.getElementById('porClienteDisplay').value.trim();
  const porCliente     = document.getElementById('porCliente').value.trim();
  const fecheInicio    = document.getElementById('fecheInicio').value || null;
  const fechaFin       = document.getElementById('fechaFin').value || null;
  const Bodega         = document.getElementById('Bodega').value || null;
  const otroDatoPl     = document.getElementById('otroDatoPl').value.trim() || null;
  const plicarDespCant = document.getElementById('plicarDespCant').value.trim() || 0;

  // Validaciones
  if (!otroDatoPl || parseFloat(otroDatoPl) <= 0 || parseFloat(otroDatoPl) > 100) {
    showToast('⚠ Ingrese un porcentaje de descuento válido (entre 0.01% y 100%).', 'err');
    document.getElementById('otroDatoPl').focus();
    return;
  }

  if (!fecheInicio || !fechaFin) {
    showToast('⚠ Ingrese la fecha/hora de inicio y de fin.', 'err');
    return;
  }

  if (new Date(fechaFin) < new Date(fecheInicio)) {
    showToast('⚠ La fecha de fin no puede ser anterior a la fecha de inicio.', 'err');
    document.getElementById('fechaFin').focus();
    return;
  }

  const payload = {
    _token:             CSRF,
    idpt:               idpt,
    marcas:             marcasChecked,
    categorias:         categChecked,
    porMarca:           marcasChecked.length === 1 ? marcasChecked[0] : null,
    porCateg:           categChecked.length === 1 ? categChecked[0] : null,
    PorProducto:        PorProducto || null,
    porProductoDisplay: displayProd || null,
    porCliente:         porCliente || null,
    porClienteDisplay:  displayCli || null,
    porGrupoCliente:    document.getElementById('porGrupoCliente') ? (document.getElementById('porGrupoCliente').value || null) : null,
    fecheInicio:        fecheInicio,
    fechaFin:           fechaFin,
    Bodega:             Bodega,
    otroDatoPl:         otroDatoPl,
    plicarDespCant:     plicarDespCant,
  };

  // Deshabilitar botón temporalmente
  const btn = document.getElementById('btnGuardar');
  btn.disabled = true;
  btn.innerHTML = '⏳ Guardando...';

  $.post(URL_GUARDAR, payload, function (res) {
    btn.disabled = false;
    btn.innerHTML = '💾 <span id="lblBtnGuardar">' + (idpt ? 'Actualizar Política' : 'Guardar Política') + '</span>';

    if (res.res === 'ok') {
      showToast('✅ ' + res.mensa, 'ok');
      limpiarFormulario();
      listarPoliticas();
    } else {
      showToast('⚠ ' + res.mensa, 'err');
    }
  }).fail((xhr) => {
    btn.disabled = false;
    btn.innerHTML = '💾 <span id="lblBtnGuardar">' + (idpt ? 'Actualizar Política' : 'Guardar Política') + '</span>';
    const msg = (xhr.responseJSON && xhr.responseJSON.mensa) ? xhr.responseJSON.mensa : 'Error de conexión al guardar.';
    showToast('❌ ' + msg, 'err');
  });
}

/* ── EDITAR POLÍTICA ── */
function editarPolitica(p) {
  idPoliticaEnEdicion = p.idpt;
  document.getElementById('idpt').value = p.idpt;
  document.getElementById('lblEditId').textContent = p.idpt;
  document.getElementById('alertModoEdicion').classList.remove('d-none');
  document.getElementById('lblBtnGuardar').textContent = 'Actualizar Política';

  // Desmarcar todas las marcas y marcar solo la del registro
  selectAllMulti('chk-marca', false);
  if (p.porMarca) {
    const chk = document.querySelector(`.chk-marca[value="${p.porMarca}"]`);
    if (chk) chk.checked = true;
  }
  updateMultiLabel('chk-marca', 'lblMarca', 'marcas');

  // Desmarcar todas las categorías y marcar solo la del registro
  selectAllMulti('chk-categ', false);
  if (p.porCateg) {
    const chk = document.querySelector(`.chk-categ[value="${p.porCateg}"]`);
    if (chk) chk.checked = true;
  }
  updateMultiLabel('chk-categ', 'lblCateg', 'categorías');

  // Producto
  document.getElementById('PorProducto').value = p.PorProducto || '';
  document.getElementById('porProductoDisplay').value = p.PorProducto 
    ? (p.nombreProducto ? `[${p.PorProducto}] ${p.nombreProducto}` : `Código: ${p.PorProducto}`)
    : '';

  // Cliente
  document.getElementById('porCliente').value = p.porCliente || '';
  document.getElementById('porClienteDisplay').value = p.porCliente 
    ? (p.nombreCliente ? `${p.nombreCliente} ${p.apellidoCliente ?? ''} (${p.porCliente})` : p.porCliente) 
    : '';

  // Grupo de Clientes
  if (document.getElementById('porGrupoCliente')) {
    document.getElementById('porGrupoCliente').value = p.porGrupoCliente || '';
  }

  // Fechas y resto de campos
  document.getElementById('fecheInicio').value    = p.fecheInicio ? p.fecheInicio.slice(0, 16) : '';
  document.getElementById('fechaFin').value       = p.fechaFin    ? p.fechaFin.slice(0, 16)    : '';
  document.getElementById('Bodega').value         = (p.Bodega && p.Bodega !== '0') ? p.Bodega : '';
  document.getElementById('otroDatoPl').value     = p.otroDatoPl  || '';
  document.getElementById('plicarDespCant').value = p.plicarDespCant || 0;

  document.querySelectorAll('.row-editing').forEach(r => r.classList.remove('row-editing'));
  const row = document.getElementById('row-' + p.idpt);
  if (row) row.classList.add('row-editing');

  window.scrollTo({ top: 0, behavior: 'smooth' });
}

/* ── ELIMINAR POLÍTICA ── */
function eliminarPolitica(idpt) {
  const ejecutarEliminacion = () => {
    $.post(URL_ELIMINAR, { _token: CSRF, idpt: idpt }, function (res) {
      if (res.res === 'ok') {
        showToast('🗑 ' + res.mensa, 'ok');
        politicasSeleccionadas.delete(Number(idpt));
        listarPoliticas();
      } else {
        showToast('⚠ ' + res.mensa, 'err');
      }
    }).fail(() => showToast('❌ Error de conexión al eliminar.', 'err'));
  };

  if (typeof Swal !== 'undefined') {
    Swal.fire({
      title: `¿Eliminar Política #${idpt}?`,
      text: 'Esta acción desactivará este descuento. ¡No se puede deshacer!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc2626',
      cancelButtonColor: '#64748b',
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar',
      reverseButtons: true
    }).then((result) => {
      if (result.isConfirmed) {
        ejecutarEliminacion();
      }
    });
  } else {
    if (confirm(`¿Está seguro de eliminar la política de descuento #${idpt}?`)) {
      ejecutarEliminacion();
    }
  }
}

/* ── GESTIÓN DE SELECCIÓN MÚLTIPLE Y ELIMINACIÓN MASIVA ── */
function toggleSeleccionPolitica(id, checked) {
  const numId = Number(id);
  if (checked) {
    politicasSeleccionadas.add(numId);
  } else {
    politicasSeleccionadas.delete(numId);
  }
  actualizarSeleccionPoliticas();
}

function toggleSelectAllPoliticas(masterChk) {
  const checkboxes = document.querySelectorAll('.chk-politica-row');
  checkboxes.forEach(c => {
    c.checked = masterChk.checked;
    const numId = Number(c.value);
    if (masterChk.checked) {
      politicasSeleccionadas.add(numId);
    } else {
      politicasSeleccionadas.delete(numId);
    }
  });
  actualizarSeleccionPoliticas();
}

function actualizarSeleccionPoliticas() {
  const count = politicasSeleccionadas.size;
  const btn = document.getElementById('btnEliminarSeleccionadas');
  const cnt = document.getElementById('cntSeleccionadas');
  const masterChk = document.getElementById('chkSelectAll');
  const checkboxesPagina = document.querySelectorAll('.chk-politica-row');
  const totalEnPagina = checkboxesPagina.length;

  if (cnt) cnt.textContent = count;
  if (btn) {
    if (count > 0) {
      btn.classList.remove('d-none');
    } else {
      btn.classList.add('d-none');
    }
  }

  if (masterChk && totalEnPagina > 0) {
    let checkedEnPagina = 0;
    checkboxesPagina.forEach(c => {
      if (c.checked) checkedEnPagina++;
    });
    masterChk.checked = (checkedEnPagina === totalEnPagina);
    masterChk.indeterminate = (checkedEnPagina > 0 && checkedEnPagina < totalEnPagina);
  } else if (masterChk) {
    masterChk.checked = false;
    masterChk.indeterminate = false;
  }
}

function eliminarSeleccionadas() {
  const ids = Array.from(politicasSeleccionadas);
  if (ids.length === 0) {
    showToast('⚠ No ha seleccionado ninguna política.', 'err');
    return;
  }

  const msg = `Esta acción eliminará de forma permanente las ${ids.length} políticas de descuento seleccionadas. ¡No se puede deshacer!`;

  if (typeof Swal !== 'undefined') {
    Swal.fire({
      title: `¿Eliminar ${ids.length} políticas seleccionadas?`,
      text: msg,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc2626',
      cancelButtonColor: '#64748b',
      confirmButtonText: `Sí, eliminar (${ids.length})`,
      cancelButtonText: 'Cancelar',
      reverseButtons: true
    }).then((result) => {
      if (result.isConfirmed) {
        ejecutarEliminacionMasiva(ids);
      }
    });
  } else {
    if (confirm(`¿Eliminar las ${ids.length} políticas seleccionadas?`)) {
      ejecutarEliminacionMasiva(ids);
    }
  }
}

function eliminarVencidas() {
  const msg = 'Esta acción eliminará de forma permanente todas las políticas cuya fecha fin ya caducó. ¡No se puede deshacer!';

  const ejecutar = () => {
    $.post(URL_ELIMINAR, { _token: CSRF, soloVencidas: true }, function (res) {
      if (res.res === 'ok') {
        showToast('🗑 ' + res.mensa, 'ok');
        politicasSeleccionadas.clear();
        listarPoliticas();
      } else {
        showToast('⚠ ' + res.mensa, 'err');
      }
    }).fail(() => showToast('❌ Error de conexión al eliminar políticas vencidas.', 'err'));
  };

  if (typeof Swal !== 'undefined') {
    Swal.fire({
      title: '¿Eliminar todas las políticas vencidas?',
      text: msg,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc2626',
      cancelButtonColor: '#64748b',
      confirmButtonText: 'Sí, eliminar vencidas',
      cancelButtonText: 'Cancelar',
      reverseButtons: true
    }).then((result) => {
      if (result.isConfirmed) {
        ejecutar();
      }
    });
  } else {
    if (confirm(msg)) {
      ejecutar();
    }
  }
}

function ejecutarEliminacionMasiva(ids) {
  $.post(URL_ELIMINAR, { _token: CSRF, ids: ids }, function (res) {
    if (res.res === 'ok') {
      showToast('🗑 ' + res.mensa, 'ok');
      politicasSeleccionadas.clear();
      listarPoliticas();
    } else {
      showToast('⚠ ' + res.mensa, 'err');
    }
  }).fail(() => showToast('❌ Error de conexión al eliminar políticas.', 'err'));
}

/* ── LIMPIAR FORMULARIO ── */
function limpiarFormulario() {
  document.getElementById('idpt').value = '';
  document.getElementById('alertModoEdicion').classList.add('d-none');
  document.getElementById('lblBtnGuardar').textContent = 'Guardar Política';

  selectAllMulti('chk-marca', false);
  updateMultiLabel('chk-marca', 'lblMarca', 'marcas');

  selectAllMulti('chk-categ', false);
  updateMultiLabel('chk-categ', 'lblCateg', 'categorías');

  limpiarProducto();
  limpiarCliente();

  if (document.getElementById('porGrupoCliente')) {
    document.getElementById('porGrupoCliente').value = '';
  }

  document.getElementById('Bodega').value = '';
  document.getElementById('otroDatoPl').value = '';
  document.getElementById('plicarDespCant').value = 0;
  document.getElementById('fecheInicio').value = '';
  document.getElementById('fechaFin').value = '';

  idPoliticaEnEdicion = null;
  document.querySelectorAll('.row-editing').forEach(r => r.classList.remove('row-editing'));
}

function limpiarProducto() {
  document.getElementById('PorProducto').value = '';
  document.getElementById('porProductoDisplay').value = '';
  document.getElementById('acProductList').style.display = 'none';
}

function limpiarCliente() {
  document.getElementById('porCliente').value = '';
  document.getElementById('porClienteDisplay').value = '';
  document.getElementById('acClientList').style.display = 'none';
}

/* ── AUTOCOMPLETE PRODUCTOS ── */
let timeoutProducto = null;
const inputProd = document.getElementById('porProductoDisplay');
const listProd = document.getElementById('acProductList');

inputProd.addEventListener('input', function () {
  clearTimeout(timeoutProducto);
  const q = this.value.trim();
  if (q.length < 2) {
    listProd.style.display = 'none';
    return;
  }
  timeoutProducto = setTimeout(() => {
    $.get(URL_PRODUCTO, { q }, function (data) {
      if (!data || data.length === 0) {
        listProd.style.display = 'none';
        return;
      }
      listProd.innerHTML = data.map(p =>
        `<div class="ac-item" data-codigo="${p.codigo}" data-nombre="${p.nombre}">
          <strong>${p.codigo}</strong> — ${p.nombre}
        </div>`
      ).join('');
      listProd.style.display = 'block';

      listProd.querySelectorAll('.ac-item').forEach(item => {
        item.addEventListener('click', function () {
          document.getElementById('PorProducto').value = this.dataset.codigo;
          document.getElementById('porProductoDisplay').value = `[${this.dataset.codigo}] ${this.dataset.nombre}`;
          listProd.style.display = 'none';
        });
      });
    });
  }, 250);
});

/* ── AUTOCOMPLETE CLIENTES ── */
let timeoutCliente = null;
const inputClient = document.getElementById('porClienteDisplay');
const listClient = document.getElementById('acClientList');

inputClient.addEventListener('input', function () {
  clearTimeout(timeoutCliente);
  const q = this.value.trim();
  if (q.length < 2) {
    listClient.style.display = 'none';
    return;
  }
  timeoutCliente = setTimeout(() => {
    $.get(URL_CLIENTE, { q }, function (data) {
      if (!data || data.length === 0) {
        listClient.style.display = 'none';
        return;
      }
      listClient.innerHTML = data.map(c =>
        `<div class="ac-item" data-cedula="${c.cedula}" data-nombre="${c.nombre} ${c.apellido ?? ''}">
          <strong>${c.cedula}</strong> — ${c.nombre} ${c.apellido ?? ''}
        </div>`
      ).join('');
      listClient.style.display = 'block';

      listClient.querySelectorAll('.ac-item').forEach(item => {
        item.addEventListener('click', function () {
          document.getElementById('porCliente').value = this.dataset.cedula;
          document.getElementById('porClienteDisplay').value = `${this.dataset.nombre} (${this.dataset.cedula})`;
          listClient.style.display = 'none';
        });
      });
    });
  }, 250);
});

document.addEventListener('click', function (e) {
  if (!e.target.closest('.autocomplete-wrap')) {
    listProd.style.display = 'none';
    listClient.style.display = 'none';
  }
});

/* ── VACIAR TODAS LAS POLÍTICAS ── */
function vaciarTodasPoliticas() {
  const total = (ultimaRespuestaServidor && ultimaRespuestaServidor.total) ? ultimaRespuestaServidor.total.toLocaleString() : '';
  const msg = `¡ATENCIÓN! Esta acción eliminará permanentemente TODAS las políticas de descuento existentes en la base de datos (${total}). Esta acción no se puede deshacer.`;

  const ejecutar = () => {
    $.post(URL_ELIMINAR, { _token: CSRF, vaciarTodas: true }, function (res) {
      if (res.res === 'ok') {
        showToast('🗑 ' + res.mensa, 'ok');
        politicasSeleccionadas.clear();
        listarPoliticas(1);
      } else {
        showToast('⚠ ' + res.mensa, 'err');
      }
    }).fail(() => showToast('❌ Error de conexión al vaciar políticas.', 'err'));
  };

  if (typeof Swal !== 'undefined') {
    Swal.fire({
      title: '¿Vaciar TODAS las políticas?',
      text: msg,
      icon: 'error',
      showCancelButton: true,
      confirmButtonColor: '#dc2626',
      cancelButtonColor: '#64748b',
      confirmButtonText: 'Sí, eliminar TODO',
      cancelButtonText: 'Cancelar',
      reverseButtons: true
    }).then((result) => {
      if (result.isConfirmed) {
        ejecutar();
      }
    });
  } else {
    if (confirm(msg)) {
      ejecutar();
    }
  }
}

/* ── EXPORTAR A EXCEL (STREAMING DIRECTO DEL SERVIDOR) ── */
function exportarExcelPoliticas() {
  const params = new URLSearchParams({
    estado:    filtroEstadoActual,
    search:    (document.getElementById('filtroTabla') ? document.getElementById('filtroTabla').value : '').trim(),
    marca:     (document.getElementById('filtroMarcaTabla') ? document.getElementById('filtroMarcaTabla').value : '').trim(),
    categoria: (document.getElementById('filtroCategoriaTabla') ? document.getElementById('filtroCategoriaTabla').value : '').trim(),
    bodega:    (document.getElementById('filtroBodegaTabla') ? document.getElementById('filtroBodegaTabla').value : '').trim(),
    grupo:     (document.getElementById('filtroGrupoClienteTabla') ? document.getElementById('filtroGrupoClienteTabla').value : '').trim()
  });

  showToast('📊 Generando descarga de archivo CSV...', 'ok');
  window.location.href = `${URL_EXPORTAR}?${params.toString()}`;
}

/* ── INICIALIZACIÓN ── */
document.addEventListener('DOMContentLoaded', () => {
  listarPoliticas(1);
});
</script>
@endsection