@extends('layouts.dashboard')

@section('title', 'Ambassadeurs')
@section('page-title', '')

@push('styles')
<style>
    .page-header { margin-bottom: 2rem; }
    .page-title { font-size: 1.75rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
    .page-subtitle { color: #6b7280; font-size: 1rem; }
    .main-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; transition: all 0.2s ease; }
    .section-title { font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; }
    .table { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid #e5e7eb; }
    .table th { background: #f8fafc; border: none; border-bottom: 2px solid #e5e7eb; font-weight: 700; color: #1f2937; padding: 1.25rem 1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
    .table td { padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; }
    .table td:nth-child(3), .table td:nth-child(4), .table td:nth-child(5) { vertical-align: middle; text-align: center; }
    .table th:nth-child(3), .table th:nth-child(4), .table th:nth-child(5) { text-align: center; }
    .table tbody tr:hover { background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1); }
    .item-info { display: flex; align-items: center; gap: 0.75rem; }
    .user-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid #6fb87d; box-shadow: 0 2px 8px rgba(111, 184, 125, 0.3); }
    .item-details h6 { margin: 0 0 0.5rem 0; font-weight: 700; color: #1f2937; font-size: 1rem; line-height: 1.3; }
    .item-details small { color: #6b7280; font-size: 0.85rem; font-weight: 500; line-height: 1.3; background: #f8fafc; padding: 0.25rem 0.75rem; border-radius: 6px; display: inline-block; }
    .action-buttons { display: flex; gap: 0.75rem; justify-content: center; align-items: center; }
    .action-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; text-decoration: none; cursor: pointer; background: transparent; border: none; padding: 0; }
    .action-btn:hover { transform: scale(1.1); }
    .action-btn svg { width: 18px; height: 18px; }
    .action-btn-view { color: #6fb87d; }
    .action-btn-view:hover { color: #5da66d; }
    .action-btn-delete { color: #ef4444; }
    .action-btn-delete:hover { color: #dc2626; }
    .search-container { position: relative; }
    .search-input-wrapper { position: relative; display: flex; align-items: center; }
    .search-icon { position: absolute; left: 12px; color: #6b7280; z-index: 2; }
    .search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 3rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.875rem; background: white; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
    .search-input:focus { outline: none; border-color: #6fb87d; box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25); }
    .form-control { border: 1px solid #e5e7eb; border-radius: 8px; transition: all 0.2s ease; }
    .form-control:focus { outline: none; border-color: #6fb87d; box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25); }
    .form-control:hover { border-color: #6fb87d; }
    .confirm-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 99999999; }
    .confirm-modal-content { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 400px; width: 90%; text-align: center; }
    .confirm-modal h3 { margin-bottom: 1rem; color: #333; font-size: 1.25rem; }
    .confirm-modal p { margin-bottom: 2rem; color: #666; line-height: 1.5; }
    .confirm-modal-buttons { display: flex; gap: 1rem; justify-content: center; }
    .confirm-modal-btn { padding: 0.75rem 1.5rem; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s ease; }
    .confirm-modal-btn-cancel { background-color: #6c757d; color: white; }
    .confirm-modal-btn-cancel:hover { background-color: #5a6268; }
    .confirm-modal-btn-confirm { background-color: #dc3545; color: white; }
    .confirm-modal-btn-confirm:hover { background-color: #c82333; }
    .btn-primary { background-color: #6fb87d; border-color: #6fb87d; color: white; }
    .btn-primary:hover { background-color: #5da66d; border-color: #5da66d; color: white; }
    .btn-primary:focus { background-color: #5da66d; border-color: #5da66d; box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25); }
    
    .role-filter-wrapper {
        position: relative;
        width: 100%;
    }

    .role-filter-custom-select {
        position: relative;
        width: 100%;
    }

    .role-filter-custom-select-trigger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #1f2937;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .role-filter-custom-select-trigger:hover {
        border-color: #6fb87d;
    }

    .role-filter-custom-select-trigger.active {
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }

    .role-filter-custom-select-arrow {
        width: 16px;
        height: 16px;
        transition: transform 0.2s ease;
    }

    .role-filter-custom-select.active .role-filter-custom-select-arrow {
        transform: rotate(180deg);
    }

    .role-filter-custom-select-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        display: none;
        margin-top: 0.25rem;
    }

    .role-filter-custom-select.active .role-filter-custom-select-options {
        display: block;
    }

    .role-filter-custom-select-option {
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .role-filter-custom-select-option:hover {
        background-color: #f8fafc;
    }

    .role-filter-custom-select-option.selected {
        background-color: rgba(111, 184, 125, 0.1);
        color: #6fb87d;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Ambassadeurs</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Gérez vos ambassadeurs</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="section-title mb-0">Gestion des Ambassadeurs</h2>
                    <button class="btn btn-primary" id="addAmbassadeurBtn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                        </svg>
                        Nouvel Ambassadeur
                    </button>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="search-container">
                            <div class="search-input-wrapper">
                                <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <path d="m21 21-4.35-4.35"></path>
                                </svg>
                                <input type="text" id="ambassadeurSearch" class="search-input" placeholder="Rechercher par nom, email, téléphone ou entreprise...">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Ambassadeur</th>
                                <th>Email</th>
                                <th>Prospects</th>
                                <th>Clients</th>
                                <th>Statut paiement</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($ambassadeursData) && count($ambassadeursData) > 0)
                                @foreach($ambassadeursData as $data)
                                @php
                                    $ambassadeur = $data['user'] ?? null;
                                    $nombreProspects = $data['nombre_prospects'] ?? 0;
                                    $nombreClients = $data['nombre_clients'] ?? 0;
                                    $montantRestant = $data['montant_restant'] ?? 0;
                                @endphp
                                @if($ambassadeur)
                            <tr>
                                <td>
                                    <div class="item-info">
                                        <img src="{{ $ambassadeur->profile_photo ? asset('storage/' . $ambassadeur->profile_photo) : asset('assets/favicon.png') }}" 
                                             alt="Photo de profil" 
                                             class="user-avatar">
                                        <div class="item-details">
                                            <h6>{{ $ambassadeur->name ?? 'N/A' }}</h6>
                                            <small>{{ $ambassadeur->email ?? 'N/A' }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <div style="font-size: 0.9rem; color: #1f2937;">{{ $ambassadeur->email ?? 'N/A' }}</div>
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3);">
                                        {{ $nombreProspects }}
                                    </span>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3);">
                                        {{ $nombreClients }}
                                    </span>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @if($montantRestant > 0)
                                        <span class="badge" style="background-color: rgba(251, 146, 60, 0.2); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); font-weight: 600;">
                                            {{ number_format($montantRestant, 2, ',', ' ') }} € à payer
                                        </span>
                                    @else
                                        <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3);">
                                            À jour
                                        </span>
                                    @endif
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <div class="action-buttons">
                                        <a href="{{ route('ambassadeurs.show', $ambassadeur->id) }}" class="action-btn action-btn-view" title="Voir les détails">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                                <circle cx="12" cy="12" r="3"/>
                                            </svg>
                                        </a>
                                        <button type="button" class="action-btn action-btn-delete" 
                                                data-ambassadeur-id="{{ $ambassadeur->id }}" 
                                                data-ambassadeur-name="{{ e($ambassadeur->name ?? '') }}" 
                                                title="Supprimer">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <polyline points="3,6 5,6 21,6"/>
                                                <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                                <line x1="10" y1="11" x2="10" y2="17"/>
                                                <line x1="14" y1="11" x2="14" y2="17"/>
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                                @endif
                                @endforeach
                            @else
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <p class="text-muted">Aucun ambassadeur trouvé</p>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter un utilisateur (même que dans paramètres) -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">Ajouter un utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addUserForm">
                    @csrf
                    <div class="mb-3">
                        <label for="userName" class="form-label">Nom complet</label>
                        <input type="text" class="form-control" id="userName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="userEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="userEmail" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="userRole" class="form-label">Rôle</label>
                        <div class="role-filter-wrapper">
                            <div class="role-filter-custom-select" data-target="userRole">
                                <div class="role-filter-custom-select-trigger">
                                    <span class="selected-value">Ambassadeur</span>
                                    <svg class="role-filter-custom-select-arrow" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div class="role-filter-custom-select-options">
                                    <div class="role-filter-custom-select-option selected" data-value="ambassadeur">Ambassadeur</div>
                                </div>
                            </div>
                            <select class="form-control" id="userRole" name="role" required style="display: none;">
                                <option value="ambassadeur" selected>Ambassadeur</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="confirmAddUser">Ajouter</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
function escapeHtml(s) {
    if (s == null) return '';
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
function showConfirmDialog(title, message, onConfirm) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `<div class="confirm-modal-content"><h3>${escapeHtml(title)}</h3><p>${escapeHtml(message)}</p><div class="confirm-modal-buttons"><button class="confirm-modal-btn confirm-modal-btn-cancel">Annuler</button><button class="confirm-modal-btn confirm-modal-btn-confirm">Confirmer</button></div></div>`;
    document.body.appendChild(modal);
    modal.querySelector('.confirm-modal-btn-cancel').addEventListener('click', () => modal.remove());
    modal.querySelector('.confirm-modal-btn-confirm').addEventListener('click', () => { modal.remove(); onConfirm(); });
    modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
}
function confirmDelete(id, name) {
    const msg = 'Êtes-vous sûr de vouloir supprimer l\'ambassadeur « ' + (name || '') + ' » ?\n\nCette action est irréversible.';
    showConfirmDialog('Supprimer l\'ambassadeur', msg, () => deleteItem(id));
}
function deleteItem(id) {
    fetch(`/ambassadeurs/${id}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Accept': 'application/json' } })
    .then(response => response.json())
    .then(data => { if (data.success) location.reload(); else alert('Erreur : ' + (data.message || 'Erreur inconnue')); })
    .catch(error => { console.error('Error:', error); alert('Erreur lors de la suppression'); });
}
function filterItems() {
    const searchTerm = document.getElementById('ambassadeurSearch').value.toLowerCase();
    document.querySelectorAll('tbody tr').forEach(function(row) {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
}
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('ambassadeurSearch');
    const addBtn = document.getElementById('addAmbassadeurBtn');
    const confirmAddUserBtn = document.getElementById('confirmAddUser');
    
    document.querySelectorAll('.action-btn-delete[data-ambassadeur-id]').forEach(function(btn) {
        btn.addEventListener('click', function() {
            confirmDelete(btn.getAttribute('data-ambassadeur-id'), btn.getAttribute('data-ambassadeur-name') || '');
        });
    });
    
    if (searchInput) searchInput.addEventListener('input', filterItems);
    
    // Configuration du select personnalisé pour le rôle
    function setupCustomSelect(selectElement) {
        const targetSelectId = selectElement.dataset.target;
        const targetSelect = document.getElementById(targetSelectId);
        const trigger = selectElement.querySelector('.role-filter-custom-select-trigger');
        const selectedValue = trigger.querySelector('.selected-value');
        const options = selectElement.querySelectorAll('.role-filter-custom-select-option');
        
        if (!targetSelect) return;
        
        // Mettre à jour la valeur affichée au chargement
        const initialOption = targetSelect.querySelector('option[selected]') || targetSelect.options[0];
        if (initialOption) {
            selectedValue.textContent = initialOption.textContent;
        }
        
        trigger.addEventListener('click', function(e) {
            e.stopPropagation();
            document.querySelectorAll('.role-filter-custom-select').forEach(function(otherSelect) {
                if (otherSelect !== selectElement) {
                    otherSelect.classList.remove('active');
                }
            });
            selectElement.classList.toggle('active');
        });
        
        options.forEach(function(option) {
            option.addEventListener('click', function(e) {
                e.stopPropagation();
                const value = option.dataset.value;
                const text = option.textContent;
                selectedValue.textContent = text;
                targetSelect.value = value;
                options.forEach(function(opt) {
                    opt.classList.remove('selected');
                });
                option.classList.add('selected');
                selectElement.classList.remove('active');
                targetSelect.dispatchEvent(new Event('change'));
            });
        });
    }
    
    // Initialiser tous les selects personnalisés
    document.querySelectorAll('.role-filter-custom-select').forEach(function(customSelect) {
        setupCustomSelect(customSelect);
    });
    
    document.addEventListener('click', function() {
        document.querySelectorAll('.role-filter-custom-select').forEach(function(customSelect) {
            customSelect.classList.remove('active');
        });
    });
    
    // Gestion de l'ajout d'utilisateur
    if (addBtn) {
        addBtn.addEventListener('click', function() {
            const modal = new bootstrap.Modal(document.getElementById('addUserModal'));
            modal.show();
        });
    }
    
    if (confirmAddUserBtn) {
        confirmAddUserBtn.addEventListener('click', function() {
            const form = document.getElementById('addUserForm');
            const formData = new FormData(form);
            
            // Forcer le rôle à "ambassadeur" pour cette page
            formData.set('role', 'ambassadeur');
            document.getElementById('userRole').value = 'ambassadeur';
            
            confirmAddUserBtn.disabled = true;
            confirmAddUserBtn.textContent = 'Ajout en cours...';
            
            fetch('/parametres/users', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addUserModal'));
                    modal.hide();
                    
                    // Afficher un message si l'email n'a pas été envoyé
                    if (data.email_sent === false) {
                        alert('Utilisateur créé avec succès, mais l\'email de bienvenue n\'a pas pu être envoyé. ' + (data.email_error || ''));
                    }
                    
                    location.reload();
                } else {
                    alert('Erreur lors de l\'ajout de l\'utilisateur : ' + (data.message || 'Erreur inconnue'));
                    confirmAddUserBtn.disabled = false;
                    confirmAddUserBtn.textContent = 'Ajouter';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Erreur lors de l\'ajout de l\'utilisateur');
                confirmAddUserBtn.disabled = false;
                confirmAddUserBtn.textContent = 'Ajouter';
            });
        });
    }
});
</script>
@endpush