{% extends "base.html" %}

{% block title %}Gestion du Programme Partenaire{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-color: #2563eb;
        --primary-rgb: 37, 99, 235;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --info-color: #06b6d4;
        --dark-color: #1f2937;
        --light-bg: #f8fafc;
        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    body {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .main-container {
        background: var(--light-bg);
        min-height: 100vh;
    }

    .page-header {
        background: linear-gradient(135deg, var(--primary-color), #1e40af);
        color: white;
        border-radius: 16px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: var(--card-shadow);
    }

    .page-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .page-subtitle {
        font-size: 1.1rem;
        opacity: 0.9;
        margin: 0.5rem 0 0 0;
        font-weight: 400;
    }

    .section-card {
        background: white;
        border-radius: 16px;
        box-shadow: var(--card-shadow);
        border: 1px solid #e2e8f0;
        margin-bottom: 2rem;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .section-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

    .section-header {
        padding: 1.5rem 2rem;
        border-bottom: 2px solid #f1f5f9;
        display: flex;
        justify-content: between;
        align-items: center;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    }

    .section-header.pending {
        background: linear-gradient(135deg, #fef3c7, #fed7aa);
        border-bottom-color: #f59e0b;
    }

    .section-header.active {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        border-bottom-color: var(--primary-color);
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .count-badge {
        background: white;
        color: var(--dark-color);
        padding: 0.375rem 0.75rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.875rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .accordion-item {
        border: none;
        margin-bottom: 1rem;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .accordion-button {
        background: white;
        border: none;
        padding: 1.5rem;
        font-weight: 500;
        border-radius: 12px !important;
        box-shadow: none;
    }

    .accordion-button:not(.collapsed) {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0.02));
        color: var(--primary-color);
        border-radius: 12px 12px 0 0 !important;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        border-color: transparent;
    }

    .affiliate-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .affiliate-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, var(--primary-color), #1e40af);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .affiliate-details h6 {
        margin: 0;
        font-weight: 600;
        color: var(--dark-color);
    }

    .affiliate-details small {
        color: #64748b;
        font-weight: 400;
    }

    .accordion-body {
        padding: 2rem;
        background: #fafbfc;
        border-top: 1px solid #e2e8f0;
    }

    .payment-details {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid #e2e8f0;
        margin-bottom: 1.5rem;
    }

    .payment-details pre {
        background: #f8fafc;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        font-size: 0.9rem;
        line-height: 1.4;
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .action-buttons .btn-contact {
        grid-column: 1 / -1;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 10px;
        font-weight: 500;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .btn-success {
        background: linear-gradient(135deg, var(--success-color), #059669);
        color: white;
    }

    .btn-danger {
        background: linear-gradient(135deg, var(--danger-color), #dc2626);
        color: white;
    }

    .btn-outline-info {
        border: 2px solid var(--info-color);
        color: var(--info-color);
        background: white;
    }

    .btn-outline-info:hover {
        background: var(--info-color);
        color: white;
    }

    .table-container {
        border-radius: 0 0 16px 16px;
        overflow: hidden;
    }

    .table {
        margin: 0;
    }

    .table thead th {
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        border: none;
        padding: 1.25rem 1.5rem;
        font-weight: 600;
        color: var(--dark-color);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table tbody td {
        padding: 1.5rem;
        border-top: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .table tbody tr {
        transition: background-color 0.2s ease;
    }

    .table tbody tr:hover {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.02), rgba(var(--primary-rgb), 0.01));
    }

    .affiliate-row {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .affiliate-row .affiliate-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }

    .stats-cell {
        font-weight: 600;
    }

    .stats-clicks {
        color: var(--primary-color);
    }

    .stats-referrals {
        color: var(--success-color);
    }

    .amount-pending {
        color: var(--warning-color);
        font-weight: 700;
    }

    .amount-earned {
        color: var(--success-color);
        font-weight: 700;
    }

    .btn-group .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        border-radius: 8px;
        margin: 0 0.125rem;
    }

    .btn-outline-secondary {
        border-color: #d1d5db;
        color: #6b7280;
    }

    .btn-outline-secondary:hover {
        background: #6b7280;
        border-color: #6b7280;
        color: white;
    }

    .btn-outline-success {
        border-color: var(--success-color);
        color: var(--success-color);
    }

    .btn-outline-success:hover:not(:disabled) {
        background: var(--success-color);
        border-color: var(--success-color);
        color: white;
    }

    .btn-outline-success:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #64748b;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1.5rem;
        color: #cbd5e1;
    }

    .empty-state h5 {
        font-weight: 500;
        color: #64748b;
    }

    .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .modal-header {
        background: linear-gradient(135deg, var(--primary-color), #1e40af);
        color: white;
        border-radius: 16px 16px 0 0;
        padding: 1.5rem 2rem;
        border-bottom: none;
    }

    .modal-header .modal-title {
        font-weight: 600;
        font-size: 1.25rem;
    }

    .modal-header .btn-close {
        filter: invert(1);
        opacity: 0.8;
    }

    .modal-body {
        padding: 2rem;
    }

    .modal-footer {
        padding: 1.5rem 2rem;
        border-top: 1px solid #e2e8f0;
        background: #fafbfc;
    }

    .form-control {
        border-radius: 10px;
        border: 2px solid #e2e8f0;
        padding: 0.75rem 1rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .alert-success {
        background: linear-gradient(135deg, #dcfce7, #bbf7d0);
        border: 1px solid #86efac;
        color: #166534;
        border-radius: 12px;
    }

    @media (max-width: 768px) {
        .page-title {
            font-size: 2rem;
        }
        
        .section-header {
            padding: 1rem 1.5rem;
        }
        
        .accordion-button {
            padding: 1rem;
        }
        
        .accordion-body {
            padding: 1.5rem 1rem;
        }
        
        .action-buttons {
            grid-template-columns: 1fr;
        }
        
        .table thead th,
        .table tbody td {
            padding: 1rem 0.75rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="main-container">
    <div class="container-fluid py-4">
        <!-- En-tête de la Page -->
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-handshake me-3"></i>
                Gestion du Programme Partenaire
            </h1>
            <p class="page-subtitle">Validez les nouvelles candidatures et suivez les performances de vos affiliés actifs</p>
        </div>

        <!-- Section 1 : Candidatures en Attente -->
        <div class="section-card">
            <div class="section-header pending">
                <h2 class="section-title">
                    <i class="fas fa-hourglass-half"></i>
                    Candidatures en Attente
                </h2>
                <span class="count-badge">{{ pending_validation|length }}</span>
            </div>
            <div class="p-4">
                {% if pending_validation %}
                <div class="accordion" id="pendingValidationAccordion">
                    {% for profile in pending_validation %}
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading{{ profile.id }}">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ profile.id }}" aria-expanded="false">
                                <div class="affiliate-info">
                                    <div class="affiliate-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="affiliate-details">
                                        <h6>{{ profile.user.get_full_name }}</h6>
                                        <small>{{ profile.user.email }}</small>
                                        <br><small class="text-warning">Candidature du {{ profile.created_at|date:"d/m/Y" }}</small>
                                    </div>
                                </div>
                            </button>
                        </h2>
                        <div id="collapse{{ profile.id }}" class="accordion-collapse collapse" data-bs-parent="#pendingValidationAccordion">
                            <div class="accordion-body">
                                <div class="row g-4">
                                    <div class="col-lg-7">
                                        <h6 class="mb-3">
                                            <i class="fas fa-credit-card me-2 text-primary"></i>
                                            Détails de Paiement
                                        </h6>
                                        <div class="payment-details">
                                            <pre>{{ profile.payment_details|default:"Aucun détail de paiement fourni." }}</pre>
                                        </div>
                                        {% if profile.phone %}
                                        <h6 class="mb-2">
                                            <i class="fas fa-phone me-2 text-primary"></i>
                                            Téléphone
                                        </h6>
                                        <p class="mb-0">{{ profile.phone }}</p>
                                        {% endif %}
                                    </div>
                                    <div class="col-lg-5">
                                        <h6 class="mb-3">
                                            <i class="fas fa-cogs me-2 text-primary"></i>
                                            Actions
                                        </h6>
                                        <div class="action-buttons">
                                            <form method="POST" action="{% url 'dashboard:approve_affiliate' profile.id %}">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-success w-100">
                                                    <i class="fas fa-check"></i>
                                                    Approuver
                                                </button>
                                            </form>
                                            <form method="POST" action="{% url 'dashboard:reject_affiliate' profile.id %}">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-danger w-100">
                                                    <i class="fas fa-times"></i>
                                                    Rejeter
                                                </button>
                                            </form>
                                            <button type="button" class="btn btn-outline-info btn-contact w-100" onclick="openMessageModal('{{ profile.user.id }}', '{{ profile.user.get_full_name|escapejs }}')">
                                                <i class="fas fa-envelope"></i>
                                                Contacter le Candidat
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="fas fa-check-circle"></i>
                    <h5>Aucune candidature en attente</h5>
                    <p class="mb-0">Toutes les candidatures ont été traitées.</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Section 2 : Affiliés Actifs -->
        <div class="section-card">
            <div class="section-header active">
                <h2 class="section-title">
                    <i class="fas fa-users"></i>
                    Affiliés Actifs
                </h2>
                <span class="count-badge">{{ active_affiliates|length }}</span>
            </div>
            {% if active_affiliates %}
            <div class="table-container">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th scope="col">Affilié</th>
                            <th scope="col" class="text-center">Code Parrain</th>
                            <th scope="col" class="text-center">Clics / Inscrits</th>
                            <th scope="col" class="text-end">En Attente</th>
                            <th scope="col" class="text-end">Total Gagné</th>
                            <th scope="col" class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for affiliate in active_affiliates %}
                        <tr>
                            <td>
                                <div class="affiliate-row">
                                    <div class="affiliate-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="affiliate-details">
                                        <h6>{{ affiliate.user.get_full_name }}</h6>
                                        <small>{{ affiliate.user.email }}</small>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                <code class="bg-light p-2 rounded">{{ affiliate.referral_code|default:"N/A" }}</code>
                            </td>
                            <td class="text-center stats-cell">
                                <span class="stats-clicks">{{ affiliate.total_clicks|default:0 }}</span>
                                <span class="mx-1">/</span>
                                <span class="stats-referrals">{{ affiliate.total_referrals|default:0 }}</span>
                            </td>
                            <td class="text-end amount-pending">
                                {{ affiliate.pending_payout|floatformat:0 }} FCFA
                            </td>
                            <td class="text-end amount-earned">
                                {{ affiliate.total_earned|floatformat:0 }} FCFA
                            </td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <a href="{% url 'dashboard:affiliate_detail' affiliate.id %}" 
                                       class="btn btn-outline-secondary" 
                                       data-bs-toggle="tooltip" 
                                       title="Voir les détails">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <button type="button" 
                                            class="btn btn-outline-secondary" 
                                            onclick="openMessageModal('{{ affiliate.user.id }}', '{{ affiliate.user.get_full_name|escapejs }}')"
                                            data-bs-toggle="tooltip" 
                                            title="Envoyer un message">
                                        <i class="fas fa-envelope"></i>
                                    </button>
                                    <button type="button" 
                                            class="btn btn-outline-success" 
                                            onclick="openMarkAsPaidModal('{{ affiliate.id }}', '{{ affiliate.user.get_full_name|escapejs }}', '{{ affiliate.pending_payout|floatformat:0 }}')"
                                            data-bs-toggle="tooltip" 
                                            title="Marquer comme payé"
                                            {% if affiliate.pending_payout <= 0 %}disabled{% endif %}>
                                        <i class="fas fa-hand-holding-usd"></i>
                                    </button>
                                    <form method="POST" action="{% url 'dashboard:deactivate_affiliate' affiliate.id %}" style="display: inline;">
                                        {% csrf_token %}
                                        <button type="submit" 
                                                class="btn btn-outline-danger" 
                                                data-bs-toggle="tooltip" 
                                                title="Désactiver"
                                                onclick="return confirm('Êtes-vous sûr de vouloir désactiver cet affilié ?')">
                                            <i class="fas fa-user-times"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty-state">
                <i class="fas fa-user-friends"></i>
                <h5>Aucun affilié actif</h5>
                <p class="mb-0">Les affiliés approuvés apparaîtront ici.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- MODALE POUR ENVOYER UN MESSAGE -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form id="messageForm" method="POST">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="messageModalLabel">
                        <i class="fas fa-envelope me-2"></i>
                        Message pour <span id="recipientName"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="messageSubject" class="form-label">Sujet du message</label>
                        <input type="text" 
                               class="form-control" 
                               id="messageSubject"
                               name="subject" 
                               placeholder="Entrez le sujet de votre message" 
                               required>
                    </div>
                    <div class="mb-3">
                        <label for="messageBody" class="form-label">Message</label>
                        <textarea class="form-control" 
                                  id="messageBody"
                                  name="body" 
                                  rows="6" 
                                  placeholder="Rédigez votre message ici..." 
                                  required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>
                        Annuler
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane me-2"></i>
                        Envoyer le Message
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MODALE POUR MARQUER LES COMMISSIONS COMME PAYÉES -->
<div class="modal fade" id="markAsPaidModal" tabindex="-1" aria-labelledby="markAsPaidModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="markAsPaidForm" method="POST">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="markAsPaidModalLabel">
                        <i class="fas fa-check-circle me-2"></i>
                        Confirmation de Paiement
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <i class="fas fa-money-bill-wave text-success" style="font-size: 3rem;"></i>
                    </div>
                    <p class="text-center mb-3">
                        Confirmez-vous avoir réglé les commissions en attente pour l'affilié 
                        <strong id="paidAffiliateName"></strong> ?
                    </p>
                    <div class="alert alert-success text-center">
                        <i class="fas fa-coins me-2"></i>
                        <strong>Montant à payer : <span id="paidAmount"></span> FCFA</strong>
                    </div>
                    <p class="small text-muted text-center mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Cette action notifiera l'affilié et mettra à jour son statut de commission.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>
                        Annuler
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check-circle me-2"></i>
                        Confirmer le Paiement
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Initialisation des tooltips Bootstrap
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl, {
            trigger: 'hover focus'
        });
    });

    // Configuration de la modale de message
    const messageModal = new bootstrap.Modal(document.getElementById('messageModal'));
    const messageForm = document.getElementById('messageForm');
    const recipientNameSpan = document.getElementById('recipientName');
    const messageSubject = document.getElementById('messageSubject');
    const messageBody = document.getElementById('messageBody');

    // Fonction pour ouvrir la modale de message
    window.openMessageModal = function(userId, affiliateName) {
        recipientNameSpan.textContent = affiliateName;
        messageForm.action = `/dashboard/affiliates/${userId}/send-message/`;
        
        // Réinitialiser le formulaire
        messageSubject.value = '';
        messageBody.value = '';
        
        // Focus sur le champ sujet quand la modale s'ouvre
        messageModal._element.addEventListener('shown.bs.modal', function () {
            messageSubject.focus();
        }, { once: true });
        
        messageModal.show();
    };

    // Configuration de la modale de paiement
    const markAsPaidModal = new bootstrap.Modal(document.getElementById('markAsPaidModal'));
    const markAsPaidForm = document.getElementById('markAsPaidForm');
    const paidAffiliateNameSpan = document.getElementById('paidAffiliateName');
    const paidAmountSpan = document.getElementById('paidAmount');

    // Fonction pour ouvrir la modale de confirmation de paiement
    window.openMarkAsPaidModal = function(profileId, affiliateName, amount) {
        paidAffiliateNameSpan.textContent = affiliateName;
        paidAmountSpan.textContent = amount;
        markAsPaidForm.action = `/dashboard/affiliates/${profileId}/mark-paid/`;
        
        markAsPaidModal.show();
    };

    // Animation fluide des accordéons
    const accordionButtons = document.querySelectorAll('.accordion-button');
    accordionButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            const isCollapsed = this.classList.contains('collapsed');
            const icon = this.querySelector('.affiliate-avatar i');
            
            // Animation de l'icône
            if (icon) {
                if (isCollapsed) {
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    icon.style.transform = 'rotate(180deg)';
                }
            }
        });
    });

    // Gestion des formulaires avec confirmation
    const dangerousForms = document.querySelectorAll('form[action*="reject"], form[action*="deactivate"]');
    dangerousForms.forEach(function(form) {
        form.addEventListener('submit', function(e) {
            const action = form.action.includes('reject') ? 'rejeter cette candidature' : 'désactiver cet affilié';
            const confirmMessage = `Êtes-vous sûr de vouloir ${action} ? Cette action ne peut pas être annulée.`;
            
            if (!confirm(confirmMessage)) {
                e.preventDefault();
            }
        });
    });

    // Validation des formulaires de modale
    messageForm.addEventListener('submit', function(e) {
        const subject = messageSubject.value.trim();
        const body = messageBody.value.trim();
        
        if (!subject || !body) {
            e.preventDefault();
            alert('Veuillez remplir tous les champs du message.');
            return false;
        }
        
        if (subject.length < 3) {
            e.preventDefault();
            alert('Le sujet doit contenir au moins 3 caractères.');
            messageSubject.focus();
            return false;
        }
        
        if (body.length < 10) {
            e.preventDefault();
            alert('Le message doit contenir au moins 10 caractères.');
            messageBody.focus();
            return false;
        }
    });

    // Animation de survol pour les cartes d'affiliés
    const affiliateRows = document.querySelectorAll('tbody tr');
    affiliateRows.forEach(function(row) {
        row.addEventListener('mouseenter', function() {
            this.style.transform = 'translateX(5px)';
        });
        
        row.addEventListener('mouseleave', function() {
            this.style.transform = 'translateX(0)';
        });
    });

    // Gestion de l'état des boutons de paiement
    const paymentButtons = document.querySelectorAll('[onclick*="openMarkAsPaidModal"]');
    paymentButtons.forEach(function(button) {
        if (button.hasAttribute('disabled')) {
            button.style.opacity = '0.4';
            button.style.cursor = 'not-allowed';
            button.title = 'Aucune commission en attente';
        }
    });

    // Auto-fermeture des modales en cas d'erreur
    window.addEventListener('pageshow', function() {
        const modals = [messageModal, markAsPaidModal];
        modals.forEach(function(modal) {
            if (modal._isShown) {
                modal.hide();
            }
        });
    });

    // Gestion des messages de succès/erreur
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(function(alert) {
        setTimeout(function() {
            if (alert.parentNode) {
                alert.style.opacity = '0';
                alert.style.transform = 'translateY(-20px)';
                setTimeout(function() {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                }, 300);
            }
        }, 5000);
    });

    // Compteurs animés pour les badges
    const countBadges = document.querySelectorAll('.count-badge');
    countBadges.forEach(function(badge) {
        const count = parseInt(badge.textContent);
        if (count > 0) {
            badge.style.animation = 'pulse 2s infinite';
        }
    });

    // Ajout de styles d'animation dynamiques
    const style = document.createElement('style');
    style.textContent = `
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .affiliate-avatar i {
            transition: transform 0.3s ease;
        }
        
        tbody tr {
            transition: transform 0.2s ease;
        }
        
        .alert {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
    `;
    document.head.appendChild(style);

    // Debug: Log pour vérifier le bon fonctionnement
    console.log('✅ Gestion des affiliés initialisée avec succès');
    console.log(`📊 ${document.querySelectorAll('#pendingValidationAccordion .accordion-item').length} candidature(s) en attente`);
    console.log(`👥 ${document.querySelectorAll('tbody tr').length} affilié(s) actif(s)`);
});
</script>
{% endblock %}