<!-- MODULE 2: NOTIFICATIONS -->
<section id="section-notificaciones" class="section-view">
    <div class="card">
        <div style="margin-bottom: 2rem;">
            <h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
                <img src="?action=get_image&name=payments-notifications.webp" style="width:64px;height:64px;"> Notificaciones WhatsApp
            </h2>
            <p style="color: var(--text-muted); margin: 5px 0 0 0;">📱 Busca clientes y envía comprobantes de pago directamente a su WhatsApp</p>
        </div>

        <!-- CONFIG CONTAINER -->
        <div class="config-container">
            <div class="form-group" style="position: relative;">
                <label>Buscar Cliente (Nombre, Email o ID)</label>
                <div class="search-wrapper">
                    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8" />
                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
                    </svg>
                    <input type="text" id="clientSearch" class="form-control search-input-padded" placeholder="Escribe para buscar (ej. Juan Perez)..." autocomplete="off">
                </div>
                <div id="searchResults" class="search-results"></div>
            </div>
        </div>

        <!-- PLACEHOLDER STATE (Initially Visible) -->
        <div id="notificationsPlaceholder" class="placeholder-state">
            <span class="placeholder-icon">👋</span>
            <p>Busca un cliente arriba para ver sus pagos y enviar notificaciones</p>
        </div>
    </div>

    <div id="paymentsContainer" class="card" style="display: none;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 10px;">
            <h3 style="margin: 0; display: flex; align-items: center;">
                <img src="?action=image&file=client.webp" class="client-header-icon"> <span id="selectedClientName">Pagos del Cliente</span>
            </h3>
            <div style="display: flex; gap: 8px;">
                <a id="btnNotifCrm" href="#" target="_blank" class="btn btn-uniform" style="height: 38px;">
                    <img src="?action=image&file=crm.webp" class="icon-crm"> Ver en CRM
                </a>
                <button class="btn btn-secondary" onclick="refreshClientPayments()" style="height: 38px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M23 4v6h-6" />
                        <path d="M1 20v-6h6" />
                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
                    </svg>
                    Refrescar Pagos
                </button>
            </div>
        </div>
        <div style="overflow-x: auto;">
            <table id="paymentsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Fecha</th>
                        <th>Monto</th>
                        <th>Método</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>
