@extends('layouts.dashboard')

@section('title', 'Détails de l\'Ambassadeur')
@section('page-title', '')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #6FB87D;
        margin-bottom: 0.5rem;
    }
    
    .back-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        color: #6b7280;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .back-button:hover {
        background: #f8fafc;
        border-color: #6fb87d;
        color: #6fb87d;
    }
    
    .back-button svg {
        flex-shrink: 0;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
        margin-bottom: 1.5rem;
    }
    
    .tabs-container {
        border-bottom: 2px solid #e5e7eb;
        margin-bottom: 2rem;
    }
    
    .tabs-list {
        display: flex;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .tab-item {
        padding: 0.75rem 1.5rem;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        color: #6b7280;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .tab-item:hover {
        color: #6fb87d;
        background: rgba(111, 184, 125, 0.05);
    }
    
    .tab-item.active {
        color: #6fb87d;
        border-bottom-color: #6fb87d;
        font-weight: 600;
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    .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;
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
    }
    
    .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),
    .table td:nth-child(6) {
        vertical-align: middle;
        text-align: center;
    }
    
    .table th:nth-child(3),
    .table th:nth-child(4),
    .table th:nth-child(5),
    .table th:nth-child(6) {
        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);
    }
    
    .action-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
    }
    
    .action-btn {
        width: 24px;
        height: 24px;
        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-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-select {
        cursor: pointer;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        font-size: 0.95rem;
        width: 100%;
    }
    
    .form-select:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 3px rgba(111, 184, 125, 0.1);
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 0.875rem;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }
    
    .btn-primary {
        background-color: #6fb87d;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #5da66d;
    }
    
    .stat-card {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
    }
    
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #6fb87d;
    }
    
    .stat-label {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: 0.5rem;
    }
    
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    
    .modal-dialog {
        background: white;
        border-radius: 8px;
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }
    
    .btn-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #6b7280;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-close:hover {
        color: #1f2937;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-footer {
        padding: 1.5rem;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    
    .btn-secondary {
        background: #6b7280;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .btn-secondary:hover {
        background: #4b5563;
    }
    
    .webhook-url-container {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        background: #f8fafc;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .webhook-url {
        flex: 1;
        font-family: monospace;
        font-size: 0.875rem;
        color: #1f2937;
        word-break: break-all;
        padding: 0.5rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
    }
    
    .copy-btn {
        padding: 0.5rem 1rem;
        background: #6fb87d;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }
    
    .copy-btn:hover {
        background: #5da66d;
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .personal-info-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    @media (max-width: 1200px) {
        .personal-info-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 768px) {
        .personal-info-grid {
            grid-template-columns: 1fr;
        }
    }
    
    .info-item {
        display: flex;
        flex-direction: column;
    }
    
    .info-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }
    
    .info-value {
        font-size: 1rem;
        color: #1f2937;
        font-weight: 500;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="page-header">
        <div>
            <h1 class="page-title">Détails de l'Ambassadeur</h1>
            <p class="text-muted">{{ $ambassadeur->name }}</p>
        </div>
        <a href="{{ route('ambassadeurs') }}" class="back-button">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Retour à la liste
        </a>
    </div>
    
    <div class="main-card">
        <!-- Onglets -->
        <div class="tabs-container">
            <ul class="tabs-list">
                <li class="tab-item active" data-tab="general">
                    Général
                </li>
                <li class="tab-item" data-tab="prospects">
                    Prospects
                </li>
                <li class="tab-item" data-tab="clients">
                    Clients
                </li>
                <li class="tab-item" data-tab="parrainages">
                    Parrainages
                </li>
                <li class="tab-item" data-tab="paiements">
                    Paiements
                </li>
                <li class="tab-item" data-tab="rgpd">
                    RGPD
                </li>
            </ul>
        </div>
        
        <!-- Onglet Général -->
        <div class="tab-content active" id="general-tab">
            @php
                $nameParts = explode(' ', $ambassadeur->name, 2);
                $firstName = $nameParts[0] ?? '';
                $lastName = $nameParts[1] ?? '';
                $ambassadeurModel = \App\Models\Ambassadeur::where('email', $ambassadeur->email)->first();
                $phone = $ambassadeurModel ? ($ambassadeurModel->phone ?? '') : '';
            @endphp
            
            <!-- Informations Personnelles -->
            @php
                $instagram = $ambassadeurModel ? ($ambassadeurModel->instagram ?? '') : '';
            @endphp
            <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
                <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Informations Personnelles</h3>
                <div class="info-grid personal-info-grid">
                    <div class="info-item">
                        <span class="info-label">Prénom</span>
                        <div class="editable-field-container" data-field="first_name" data-original="{{ $firstName }}" style="display: flex; align-items: center; gap: 0.5rem;">
                            <span class="info-value editable-field {{ empty($firstName) ? 'empty' : '' }}" style="flex: 1; padding: 0.5rem; border: 1px dashed #cbd5e1; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center;" onmouseover="this.style.borderColor='#6fb87d'; this.style.background='#f0fdf4';" onmouseout="this.style.borderColor='#cbd5e1'; this.style.background='transparent';">
                                {{ $firstName ?: 'Non renseigné' }}
                            </span>
                            <button type="button" class="validate-btn" style="display: none; background: #6fb87d; border: none; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;" onmouseover="this.style.background='#5da66d';" onmouseout="this.style.background='#6fb87d';">
                                ✓
                            </button>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nom</span>
                        <div class="editable-field-container" data-field="last_name" data-original="{{ $lastName }}" style="display: flex; align-items: center; gap: 0.5rem;">
                            <span class="info-value editable-field {{ empty($lastName) ? 'empty' : '' }}" style="flex: 1; padding: 0.5rem; border: 1px dashed #cbd5e1; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center;" onmouseover="this.style.borderColor='#6fb87d'; this.style.background='#f0fdf4';" onmouseout="this.style.borderColor='#cbd5e1'; this.style.background='transparent';">
                                {{ $lastName ?: 'Non renseigné' }}
                            </span>
                            <button type="button" class="validate-btn" style="display: none; background: #6fb87d; border: none; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;" onmouseover="this.style.background='#5da66d';" onmouseout="this.style.background='#6fb87d';">
                                ✓
                            </button>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Email</span>
                        <div class="editable-field-container" data-field="email" data-original="{{ $ambassadeur->email }}" style="display: flex; align-items: center; gap: 0.5rem;">
                            <span class="info-value editable-field {{ empty($ambassadeur->email) ? 'empty' : '' }}" style="flex: 1; padding: 0.5rem; border: 1px dashed #cbd5e1; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center;" onmouseover="this.style.borderColor='#6fb87d'; this.style.background='#f0fdf4';" onmouseout="this.style.borderColor='#cbd5e1'; this.style.background='transparent';">
                                {{ $ambassadeur->email ?: 'Non renseigné' }}
                            </span>
                            <button type="button" class="validate-btn" style="display: none; background: #6fb87d; border: none; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;" onmouseover="this.style.background='#5da66d';" onmouseout="this.style.background='#6fb87d';">
                                ✓
                            </button>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Téléphone</span>
                        <div class="editable-field-container" data-field="phone" data-original="{{ $phone }}" style="display: flex; align-items: center; gap: 0.5rem;">
                            <span class="info-value editable-field {{ empty($phone) ? 'empty' : '' }}" style="flex: 1; padding: 0.5rem; border: 1px dashed #cbd5e1; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center;" onmouseover="this.style.borderColor='#6fb87d'; this.style.background='#f0fdf4';" onmouseout="this.style.borderColor='#cbd5e1'; this.style.background='transparent';">
                                {{ $phone ?: 'Non renseigné' }}
                            </span>
                            <button type="button" class="validate-btn" style="display: none; background: #6fb87d; border: none; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;" onmouseover="this.style.background='#5da66d';" onmouseout="this.style.background='#6fb87d';">
                                ✓
                            </button>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Profil Instagram</span>
                        <div class="editable-field-container" data-field="instagram" data-original="{{ $instagram }}" style="display: flex; align-items: center; gap: 0.5rem;">
                            <span class="info-value editable-field {{ empty($instagram) ? 'empty' : '' }}" style="flex: 1; padding: 0.5rem; border: 1px dashed #cbd5e1; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-height: 2.5rem; display: flex; align-items: center;" onmouseover="this.style.borderColor='#6fb87d'; this.style.background='#f0fdf4';" onmouseout="this.style.borderColor='#cbd5e1'; this.style.background='transparent';">
                                {{ $instagram ?: 'Non renseigné' }}
                            </span>
                            <button type="button" class="validate-btn" style="display: none; background: #6fb87d; border: none; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;" onmouseover="this.style.background='#5da66d';" onmouseout="this.style.background='#6fb87d';">
                                ✓
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Cartes d'informations -->
            <div class="info-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
                <div class="info-item" style="background: #f8fafc; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb; transition: all 0.2s ease;">
                    <span class="info-label">Date de création du profil</span>
                    <span class="info-value" style="font-size: 1rem; color: #1f2937; font-weight: 500;">
                        {{ $ambassadeur->created_at ? $ambassadeur->created_at->tz(config('app.timezone'))->format('d/m/Y à H:i') : 'N/A' }}
                    </span>
                </div>
                <div class="info-item" style="background: #f8fafc; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb; transition: all 0.2s ease;">
                    <span class="info-label">Accès au compte</span>
                    <p class="info-value" style="font-size: 0.95rem; color: #4b5563; margin-bottom: 0.75rem;">
                        Tu peux renvoyer à l'ambassadeur un lien pour créer ou réinitialiser son mot de passe. Le lien est valide pendant <strong>3 jours</strong>.
                    </p>
                    <button type="button" class="btn btn-primary js-resend-password-link" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500;">
                        Renvoyer le lien de création de mot de passe
                    </button>
                </div>
            </div>
            
            <!-- Lien d'affiliation -->
            <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
                <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Lien d'affiliation</h3>
                
                <div class="webhook-url-container" style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
                    <input type="url" class="webhook-url" id="affiliation-link-input" value="{{ $affiliationLink ?? '' }}" placeholder="https://exemple.com/affiliation" style="flex: 1; min-width: 0;">
                    <button class="copy-btn" id="copyAffiliationBtn" type="button" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;">
                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                        </svg>
                        Copier
                    </button>
                    <button type="button" class="btn btn-primary" id="saveAffiliationBtn" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; white-space: nowrap; {{ !empty($affiliationLink) ? 'display: none;' : '' }}">
                        Enregistrer
                    </button>
                    <button type="button" class="btn btn-sm" id="deleteAffiliationBtn" title="Supprimer le lien" style="padding: 0.5rem 1rem; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; white-space: nowrap; {{ empty($affiliationLink) ? 'display: none;' : '' }}">
                        Supprimer
                    </button>
                </div>
            </div>
            
            <!-- Modal confirmation suppression lien d'affiliation -->
            <div class="modal" id="deleteAffiliationModal" tabindex="-1" role="dialog" aria-labelledby="deleteAffiliationModalLabel" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center;">
                <div class="modal-dialog js-modal-dialog" role="document" style="background: white; border-radius: 8px; max-width: 380px; width: 90%; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.2); position: relative; z-index: 10000; pointer-events: auto;">
                    <h5 class="modal-title" id="deleteAffiliationModalLabel" style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin: 0 0 0.5rem 0;">Supprimer le lien d'affiliation</h5>
                    <p class="mb-3" style="color: #6b7280; font-size: 0.9375rem; margin: 0 0 1rem 0;">Êtes-vous sûr de vouloir supprimer le lien d'affiliation ?</p>
                    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                        <button type="button" class="btn btn-secondary" id="deleteAffiliationModalCancel" style="padding: 0.5rem 1rem; background: #e5e7eb; color: #374151; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;">Annuler</button>
                        <button type="button" class="btn btn-danger" id="deleteAffiliationModalConfirm" style="padding: 0.5rem 1rem; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; pointer-events: auto;">Supprimer</button>
                    </div>
                </div>
            </div>
            
            <!-- Notes internes -->
            <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; margin-top: 2rem;">
                <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Notes internes</h3>
                <form id="notesForm" method="POST" action="{{ route('ambassadeurs.update.notes', $ambassadeur->id) }}">
                    @csrf
                    <div class="form-group">
                        <textarea name="notes" id="internal_notes" class="form-control" rows="6" placeholder="Ajoutez des notes internes sur cet ambassadeur...">{{ $notes ?? '' }}</textarea>
                        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                            <button type="button" id="notesMicButton" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                    <line x1="12" y1="19" x2="12" y2="23"></line>
                                    <line x1="8" y1="23" x2="16" y2="23"></line>
                                </svg>
                                <span id="notesMicButtonText">Activer le microphone</span>
                            </button>
                            <button type="button" id="notesAiButton" style="padding: 0.5rem 1rem; background: #6366f1; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                    <path d="M2 17l10 5 10-5"></path>
                                    <path d="M2 12l10 5 10-5"></path>
                                </svg>
                                <span>Reformuler avec IA</span>
                            </button>
                        </div>
                    </div>
                    <div style="margin-top: 1rem; display: flex; justify-content: flex-end;">
                        <button type="submit" class="btn btn-primary" style="background: #6fb87d; border: none; padding: 0.625rem 1.5rem; border-radius: 6px; font-weight: 600; transition: all 0.2s ease;">
                            Enregistrer les notes
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Onglet 1: Prospects -->
        <div class="tab-content" id="prospects-tab">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="section-title mb-0">Prospects affiliés</h3>
            </div>
            
            <!-- Barre de recherche -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <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="prospectSearch" class="search-input" placeholder="Rechercher par nom, prénom ou email...">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nom / Prénom</th>
                            <th>Email</th>
                            <th>Source</th>
                            <th>Nombre de devis</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($prospects as $prospect)
                        <tr>
                            <td>
                                <div style="font-weight: 600; color: #1f2937; font-size: 0.95rem;">
                                    {{ trim(($prospect->first_name ?? '') . ' ' . ($prospect->last_name ?? '')) ?: 'N/A' }}
                                </div>
                            </td>
                            <td>
                                <div style="font-size: 0.9rem; color: #1f2937;">{{ $prospect->email ?? 'N/A' }}</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);">
                                    {{ $prospect->source ?? 'Manuel' }}
                                </span>
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                <span style="font-weight: 600; color: #6fb87d; font-size: 1rem;">
                                    {{ $prospect->devis ? $prospect->devis->count() : 0 }}
                                </span>
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                <div class="action-buttons">
                                    <a href="{{ route('prospects.show', $prospect->id) }}" class="action-btn" title="Voir les détails" style="color: #6fb87d;">
                                        <svg width="16" height="16" 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>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <p class="text-muted">Aucun prospect affilié</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Onglet 2: Clients -->
        <div class="tab-content" id="clients-tab">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="section-title mb-0">Clients affiliés</h3>
            </div>
            
            <!-- Barre de recherche -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <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="clientSearch" class="search-input" placeholder="Rechercher par nom, prénom ou email...">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nom / Prénom</th>
                            <th>Email</th>
                            <th>Source</th>
                            <th>Nombre de devis</th>
                            <th>État du dossier</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($clients as $client)
                        <tr>
                            <td>
                                <div style="font-weight: 600; color: #1f2937; font-size: 0.95rem;">
                                    {{ trim(($client->first_name ?? '') . ' ' . ($client->last_name ?? '')) ?: 'N/A' }}
                                </div>
                            </td>
                            <td>
                                <div style="font-size: 0.9rem; color: #1f2937;">{{ $client->email ?? 'N/A' }}</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);">
                                    {{ $client->source ?? 'Manuel' }}
                                </span>
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                <span style="font-weight: 600; color: #6fb87d; font-size: 1rem;">
                                    {{ $client->devis ? $client->devis->count() : 0 }}
                                </span>
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                @if($client->dossier_complet)
                                    <span class="badge" style="background-color: #6fb87d; color: white; border: none;">
                                        Conforme
                                    </span>
                                @else
                                    <span class="badge" style="background-color: #fbbf24; color: white; border: none;">
                                        Incomplet
                                    </span>
                                @endif
                            </td>
                            <td style="text-align: center; vertical-align: middle;">
                                <div class="action-buttons">
                                    <a href="{{ route('portefeuille.show', $client->id) }}" class="action-btn" title="Voir les détails" style="color: #6fb87d;">
                                        <svg width="16" height="16" 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>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <p class="text-muted">Aucun client affilié</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Onglet 3: Parrainages -->
        <div class="tab-content" id="parrainages-tab">
            <h3 class="section-title">Gestion des parrainages</h3>
            
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
                <div class="stat-card">
                    <div class="stat-value">{{ $nombreClients }}</div>
                    <div class="stat-label">Clients dans le portefeuille</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ number_format($montantParClient, 2, ',', ' ') }} €</div>
                    <div class="stat-label">Montant par client</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ number_format($montantTotal, 2, ',', ' ') }} €</div>
                    <div class="stat-label">Montant total dû</div>
                </div>
            </div>
            
            <form id="parrainageForm" style="max-width: 500px;">
                @csrf
                <div class="form-group">
                    <label for="montantParClient" class="form-label">Montant par client (€)</label>
                    <input type="number" step="0.01" min="0" class="form-control" id="montantParClient" name="montant_par_client" value="{{ $montantParClient }}" required>
                </div>
                <button type="submit" class="btn btn-primary">Enregistrer le montant</button>
            </form>
            
            <!-- Zone de notes pour les parrainages -->
            <div style="margin-top: 2rem; padding-top: 2rem; border-top: 2px solid #e5e7eb;">
                <h4 style="margin-bottom: 1rem; font-size: 1.125rem; font-weight: 600; color: #1f2937;">Notes sur les parrainages</h4>
                <form id="parrainageNotesForm">
                    @csrf
                    <div class="form-group">
                        <label for="parrainageNotes" class="form-label">Commentaires</label>
                        <textarea class="form-control" id="parrainageNotes" name="notes" rows="6" style="resize: vertical;">{{ $parrainageNotes ?? '' }}</textarea>
                        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                            <button type="button" id="parrainageMicButton" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                    <line x1="12" y1="19" x2="12" y2="23"></line>
                                    <line x1="8" y1="23" x2="16" y2="23"></line>
                                </svg>
                                <span id="parrainageMicButtonText">Activer le microphone</span>
                            </button>
                            <button type="button" id="parrainageAiButton" style="padding: 0.5rem 1rem; background: #6366f1; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                    <path d="M2 17l10 5 10-5"></path>
                                    <path d="M2 12l10 5 10-5"></path>
                                </svg>
                                <span>Reformuler avec IA</span>
                            </button>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Enregistrer les notes</button>
                </form>
            </div>
        </div>
        
        <!-- Onglet 4: Paiements -->
        <div class="tab-content" id="paiements-tab">
            <h3 class="section-title">Paiements</h3>
            
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
                <div class="stat-card">
                    <div class="stat-value">{{ number_format($montantTotal, 2, ',', ' ') }} €</div>
                    <div class="stat-label">Montant total dû</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ number_format($montantPaye, 2, ',', ' ') }} €</div>
                    <div class="stat-label">Montant payé</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-value" style="color: #6fb87d;">{{ number_format($montantRestant, 2, ',', ' ') }} €</div>
                <div class="stat-label">Montant restant à payer</div>
            </div>
            
            <h4 style="margin-top: 2rem; margin-bottom: 1rem;">Ajouter un paiement</h4>
            <form id="paiementForm" style="max-width: 500px;">
                @csrf
                <div class="form-group">
                    <label for="montantPaiement" class="form-label">Montant (€)</label>
                    <input type="number" step="0.01" min="0" class="form-control" id="montantPaiement" name="montant" required>
                </div>
                <div class="form-group">
                    <label for="datePaiement" class="form-label">Date du paiement</label>
                    <input type="date" class="form-control" id="datePaiement" name="date_paiement" value="{{ date('Y-m-d') }}" required>
                </div>
                <div class="form-group">
                    <label for="notesPaiement" class="form-label">Notes (optionnel)</label>
                    <textarea class="form-control" id="notesPaiement" name="notes" rows="3"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Ajouter le paiement</button>
            </form>
            
            @if($paiements->count() > 0)
                <h4 style="margin-top: 2rem; margin-bottom: 1rem;">Historique des paiements</h4>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Montant</th>
                            <th>Notes</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($paiements as $paiement)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($paiement->date_paiement)->format('d/m/Y') }}</td>
                            <td>{{ number_format($paiement->montant, 2, ',', ' ') }} €</td>
                            <td>{{ $paiement->notes ?? '-' }}</td>
                            <td>
                                <button type="button" class="btn btn-secondary js-delete-paiement" data-paiement-id="{{ $paiement->id }}" style="padding: 0.5rem 1rem; font-size: 0.75rem; background: #ef4444;">Supprimer</button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        
        <!-- Onglet RGPD -->
        <div class="tab-content" id="rgpd-tab">
            <div style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 2rem; max-width: 640px;">
                <h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Export des données personnelles</h3>
                <p style="color: #6b7280; font-size: 0.9375rem; margin-bottom: 1.5rem;">Conformément au RGPD, vous pouvez télécharger l’intégralité des données liées à cet ambassadeur : informations générales et paiements (archive ZIP).</p>
                <a href="{{ route('ambassadeurs.rgpd.export', $ambassadeur->id) }}" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #6fb87d; color: white; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background 0.2s;" onmouseover="this.style.background='#5ea66d';" onmouseout="this.style.background='#6fb87d';">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    Télécharger toutes les données (ZIP)
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
// Gestion des onglets
window.switchTab = function(tabName) {
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    document.querySelectorAll('.tab-item').forEach(item => {
        item.classList.remove('active');
    });
    
    const tabContent = document.getElementById(tabName + '-tab');
    const tabItem = document.querySelector(`[data-tab="${tabName}"]`);
    
    if (tabContent) tabContent.classList.add('active');
    if (tabItem) tabItem.classList.add('active');
};

// Attacher les handlers sans attributs inline (compatible CSP strict)
document.addEventListener('DOMContentLoaded', function() {
    // Tabs
    document.querySelectorAll('.tab-item[data-tab]').forEach(function(tab) {
        tab.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            if (tabName) window.switchTab(tabName);
        });
    });

    // Copier lien d'affiliation
    const copyBtn = document.getElementById('copyAffiliationBtn');
    if (copyBtn && typeof window.copyAffiliationLink === 'function') {
        copyBtn.addEventListener('click', function() {
            window.copyAffiliationLink();
        });
    }

    // Empêcher la fermeture de la modal en cliquant à l'intérieur
    document.querySelectorAll('.js-modal-dialog').forEach(function(dialog) {
        dialog.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });

    // Confirmer suppression lien d'affiliation
    const confirmDeleteAffBtn = document.getElementById('deleteAffiliationModalConfirm');
    if (confirmDeleteAffBtn) {
        confirmDeleteAffBtn.addEventListener('click', function(e) {
            if (window.confirmDeleteAffiliationLink) {
                window.confirmDeleteAffiliationLink(e);
            }
        });
    }

    // Clicks globaux (suppression paiement, renvoi lien mot de passe)
    document.addEventListener('click', function(e) {
        const resendBtn = e.target.closest('.js-resend-password-link');
        if (resendBtn) {
            e.preventDefault();
            if (resendBtn.disabled) return;
            const originalText = resendBtn.textContent;
            resendBtn.disabled = true;
            resendBtn.textContent = 'Envoi en cours...';

            fetch('{{ route("ambassadeurs.resendPasswordLink", $ambassadeur->id) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    resendBtn.textContent = 'Lien envoyé';
                    setTimeout(() => {
                        resendBtn.disabled = false;
                        resendBtn.textContent = originalText;
                    }, 3000);
                } else {
                    alert(data.message || 'Erreur lors de l\'envoi du lien.');
                    resendBtn.disabled = false;
                    resendBtn.textContent = originalText;
                }
            })
            .catch(error => {
                console.error('Erreur envoi lien mot de passe:', error);
                alert('Erreur lors de l\'envoi du lien. Veuillez réessayer.');
                resendBtn.disabled = false;
                resendBtn.textContent = originalText;
            });

            return;
        }

        const deleteBtn = e.target.closest('.js-delete-paiement');
        if (deleteBtn) {
            const paiementId = deleteBtn.getAttribute('data-paiement-id');
            if (paiementId && typeof window.deletePaiement === 'function') {
                window.deletePaiement(parseInt(paiementId, 10));
            }
        }
    });
});

// Gestion du formulaire de parrainage
document.getElementById('parrainageForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    fetch('{{ route("ambassadeurs.update.parrainage", $ambassadeur->id) }}', {
        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) {
            submitButton.textContent = 'Enregistré !';
            submitButton.style.background = '#22c55e';
            setTimeout(() => {
                location.reload();
            }, 3000);
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de l\'enregistrement');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

// Gestion du formulaire de paiement
document.getElementById('paiementForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    fetch('{{ route("ambassadeurs.add.paiement", $ambassadeur->id) }}', {
        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) {
            submitButton.textContent = 'Enregistré !';
            submitButton.style.background = '#22c55e';
            setTimeout(() => {
                location.reload();
            }, 3000);
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de l\'ajout du paiement');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

// Supprimer un paiement
function deletePaiement(paiementId) {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce paiement ?')) return;
    
    const deleteButton = event.target.closest('button');
    const originalText = deleteButton.textContent;
    
    deleteButton.disabled = true;
    deleteButton.textContent = 'Suppression...';
    
    fetch('{{ route("ambassadeurs.delete.paiement", $ambassadeur->id) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ paiement_id: paiementId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            deleteButton.textContent = 'Supprimé !';
            deleteButton.style.background = '#22c55e';
            setTimeout(() => {
                location.reload();
            }, 3000);
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            deleteButton.disabled = false;
            deleteButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la suppression');
        deleteButton.disabled = false;
        deleteButton.textContent = originalText;
    });
}

// Gestion du formulaire de notes
document.getElementById('notesForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    
    console.log('Soumission du formulaire de notes', {
        'notes': formData.get('notes'),
        'csrf': formData.get('_token')
    });
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    fetch('{{ route("ambassadeurs.update.notes", $ambassadeur->id) }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Réponse reçue', response.status);
        if (!response.ok) {
            return response.text().then(text => {
                console.error('Erreur HTTP:', text);
                throw new Error('Erreur HTTP: ' + response.status);
            });
        }
        return response.json();
    })
    .then(data => {
        console.log('Données reçues:', data);
        if (data.success) {
            submitButton.textContent = 'Enregistré !';
            submitButton.style.background = '#22c55e';
            setTimeout(() => {
                submitButton.disabled = false;
                submitButton.textContent = originalText;
                submitButton.style.background = '';
            }, 3000);
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de l\'enregistrement: ' + error.message);
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});


// Gestion du formulaire de notes de parrainage
document.getElementById('parrainageNotesForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    fetch('{{ route("ambassadeurs.update.parrainage.notes", $ambassadeur->id) }}', {
        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) {
            submitButton.textContent = 'Enregistré !';
            submitButton.style.background = '#22c55e';
            setTimeout(() => {
                submitButton.disabled = false;
                submitButton.textContent = originalText;
                submitButton.style.background = '';
            }, 3000);
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de l\'enregistrement');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

// Reconnaissance vocale pour les notes de parrainage
let parrainageRecognition = null;
let isParrainageRecording = false;
let parrainageBaseText = '';

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    parrainageRecognition = new SpeechRecognition();
    parrainageRecognition.lang = 'fr-FR';
    parrainageRecognition.continuous = true;
    parrainageRecognition.interimResults = false;
    
    parrainageRecognition.onresult = function(event) {
        const notesTextarea = document.getElementById('parrainageNotes');
        if (!notesTextarea) return;
        
        // Ajouter seulement les nouveaux résultats finaux
        for (let i = event.resultIndex; i < event.results.length; i++) {
            if (event.results[i].isFinal) {
                notesTextarea.value += event.results[i][0].transcript + ' ';
            }
        }
    };
    
    parrainageRecognition.onerror = function(event) {
        console.error('Erreur de reconnaissance vocale:', event.error);
        stopParrainageRecording();
    };
    
    parrainageRecognition.onend = function() {
        if (isParrainageRecording) {
            try {
                parrainageRecognition.start();
            } catch (e) {
                stopParrainageRecording();
            }
        }
    };
}

function toggleParrainageRecording() {
    if (!parrainageRecognition) {
        alert('La reconnaissance vocale n\'est pas supportée par votre navigateur.');
        return;
    }
    
    if (isParrainageRecording) {
        stopParrainageRecording();
    } else {
        startParrainageRecording();
    }
}

function startParrainageRecording() {
    try {
        const notesTextarea = document.getElementById('parrainageNotes');
        if (notesTextarea) {
            parrainageBaseText = notesTextarea.value;
        }
        
        parrainageRecognition.start();
        isParrainageRecording = true;
        const micButton = document.getElementById('parrainageMicButton');
        const micButtonText = document.getElementById('parrainageMicButtonText');
        if (micButton) {
            micButton.style.background = '#ef4444';
            micButtonText.textContent = 'Arrêter l\'enregistrement';
        }
    } catch (e) {
        console.error('Erreur lors du démarrage:', e);
        alert('Impossible de démarrer l\'enregistrement.');
    }
}

function stopParrainageRecording() {
    if (parrainageRecognition && isParrainageRecording) {
        isParrainageRecording = false;
        parrainageRecognition.stop();
        
        const micButton = document.getElementById('parrainageMicButton');
        const micButtonText = document.getElementById('parrainageMicButtonText');
        if (micButton) {
            micButton.style.background = '#6fb87d';
            micButtonText.textContent = 'Activer le microphone';
        }
    }
}

document.getElementById('parrainageMicButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    toggleParrainageRecording();
});

// Reformulation IA pour les notes de parrainage
document.getElementById('parrainageAiButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    const notesTextarea = document.getElementById('parrainageNotes');
    if (!notesTextarea || !notesTextarea.value.trim()) {
        alert('Veuillez d\'abord saisir du texte à reformuler.');
        return;
    }
    
    const originalText = notesTextarea.value;
    const aiButton = this;
    const originalButtonText = aiButton.innerHTML;
    
    aiButton.disabled = true;
    aiButton.innerHTML = '<span>Reformulation en cours...</span>';
    
    fetch('/api/mistral/reformulate', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ text: originalText })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.reformulated_text) {
            notesTextarea.value = data.reformulated_text;
        } else {
            alert('Erreur lors de la reformulation : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la reformulation avec l\'IA.');
    })
    .finally(() => {
        aiButton.disabled = false;
        aiButton.innerHTML = originalButtonText;
    });
});

// Ancien gestionnaire pour notesAiButton supprimé - maintenant géré plus bas pour internal_notes

// Gestion de l'édition des informations personnelles
document.querySelectorAll('.editable-field').forEach(fieldElement => {
    fieldElement.addEventListener('click', function() {
        const container = this.closest('.editable-field-container');
        if (!container) return;
        
        const field = container.getAttribute('data-field');
        const originalValue = container.getAttribute('data-original') || '';
        const currentText = this.textContent.trim();
        const currentValue = currentText === 'Non renseigné' ? '' : currentText;
        const validateBtn = container.querySelector('.validate-btn');
        
        // Si déjà en mode édition, ne rien faire
        if (this.querySelector('input')) return;
        
        // Créer un input pour éditer
        const input = document.createElement('input');
        input.type = field === 'email' ? 'email' : 'text';
        input.value = currentValue;
        input.style.cssText = 'flex: 1; padding: 0.5rem; border: 2px solid #6fb87d; border-radius: 6px; font-size: 1rem; outline: none;';
        
        // Remplacer le texte par l'input
        this.innerHTML = '';
        this.appendChild(input);
        this.style.border = '2px solid #6fb87d';
        this.style.background = '#f0fdf4';
        this.style.cursor = 'text';
        
        // Afficher le bouton de validation
        if (validateBtn) {
            validateBtn.style.display = 'block';
        }
        
        input.focus();
        input.select();
        
        // Fonction pour sauvegarder
        const saveField = () => {
            const newValue = input.value.trim();
            
            fetch('{{ route("ambassadeurs.update.info", $ambassadeur->id) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    [field]: newValue
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Mettre à jour l'affichage
                    this.innerHTML = newValue || 'Non renseigné';
                    this.style.border = '1px dashed #cbd5e1';
                    this.style.background = 'transparent';
                    this.style.cursor = 'pointer';
                    container.setAttribute('data-original', newValue);
                    
                    // Cacher le bouton de validation
                    if (validateBtn) {
                        validateBtn.style.display = 'none';
                    }
                    
                    // Mettre à jour la classe empty si nécessaire
                    if (newValue) {
                        this.classList.remove('empty');
                    } else {
                        this.classList.add('empty');
                    }
                    
                    // Recharger la page pour mettre à jour le nom complet
                    if (field === 'first_name' || field === 'last_name') {
                        setTimeout(() => location.reload(), 500);
                    }
                } else {
                    alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
                    this.innerHTML = currentText;
                    this.style.border = '1px dashed #cbd5e1';
                    this.style.background = 'transparent';
                    this.style.cursor = 'pointer';
                    if (validateBtn) {
                        validateBtn.style.display = 'none';
                    }
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                alert('Une erreur est survenue lors de la mise à jour');
                this.innerHTML = currentText;
                this.style.border = '1px dashed #cbd5e1';
                this.style.background = 'transparent';
                this.style.cursor = 'pointer';
                if (validateBtn) {
                    validateBtn.style.display = 'none';
                }
            });
        };
        
        // Sauvegarder sur Enter
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                saveField();
            } else if (e.key === 'Escape') {
                this.innerHTML = currentText;
                this.style.border = '1px dashed #cbd5e1';
                this.style.background = 'transparent';
                this.style.cursor = 'pointer';
                if (validateBtn) {
                    validateBtn.style.display = 'none';
                }
            }
        });
        
        // Sauvegarder sur clic du bouton de validation
        if (validateBtn) {
            validateBtn.onclick = saveField;
        }
    });
});

// Reconnaissance vocale pour les notes internes
let internalNotesRecognition = null;
let isInternalNotesRecording = false;
let internalNotesBaseText = '';

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    internalNotesRecognition = new SpeechRecognition();
    internalNotesRecognition.lang = 'fr-FR';
    internalNotesRecognition.continuous = true;
    internalNotesRecognition.interimResults = true;
    
    internalNotesRecognition.onresult = function(event) {
        let finalTranscript = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
            if (event.results[i].isFinal) {
                finalTranscript += event.results[i][0].transcript + ' ';
            }
        }
        const notesTextarea = document.getElementById('internal_notes');
        if (notesTextarea) {
            notesTextarea.value = notesTextarea.value + finalTranscript;
        }
    };
    
    internalNotesRecognition.onerror = function(event) {
        console.error('Erreur de reconnaissance vocale notes internes:', event.error);
        if (event.error === 'no-speech') {
            alert('Aucune parole détectée. Veuillez réessayer.');
        } else if (event.error === 'audio-capture') {
            alert('Aucun microphone détecté. Veuillez vérifier votre configuration.');
        } else {
            alert('Erreur de reconnaissance vocale: ' + event.error);
        }
        stopInternalNotesRecording();
    };
    
    internalNotesRecognition.onend = function() {
        if (isInternalNotesRecording) {
            internalNotesRecognition.start();
        }
    };
}

function toggleInternalNotesRecording() {
    if (!internalNotesRecognition) {
        alert('La reconnaissance vocale n\'est pas disponible dans votre navigateur.');
        return;
    }
    
    if (isInternalNotesRecording) {
        stopInternalNotesRecording();
    } else {
        startInternalNotesRecording();
    }
}

function startInternalNotesRecording() {
    try {
        const notesTextarea = document.getElementById('internal_notes');
        if (notesTextarea) {
            internalNotesBaseText = notesTextarea.value;
        }
        
        internalNotesRecognition.start();
        isInternalNotesRecording = true;
        const micButton = document.getElementById('notesMicButton');
        const micButtonText = document.getElementById('notesMicButtonText');
        if (micButton) {
            micButton.style.background = '#ef4444';
            micButtonText.textContent = 'Arrêter l\'enregistrement';
        }
    } catch (e) {
        console.error('Erreur lors du démarrage:', e);
        alert('Impossible de démarrer l\'enregistrement.');
    }
}

function stopInternalNotesRecording() {
    if (internalNotesRecognition && isInternalNotesRecording) {
        isInternalNotesRecording = false;
        internalNotesRecognition.stop();
        
        const micButton = document.getElementById('notesMicButton');
        const micButtonText = document.getElementById('notesMicButtonText');
        if (micButton) {
            micButton.style.background = '#6fb87d';
            micButtonText.textContent = 'Activer le microphone';
        }
    }
}

// Gestion du bouton microphone pour les notes internes (onglet Général)
const notesMicButtonGeneral = document.getElementById('notesMicButton');
if (notesMicButtonGeneral && notesMicButtonGeneral.closest('#general-tab')) {
    notesMicButtonGeneral.addEventListener('click', function(e) {
        e.preventDefault();
        toggleInternalNotesRecording();
    });
}

// Reformulation IA pour les notes internes
document.getElementById('notesAiButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    const notesTextarea = document.getElementById('internal_notes');
    if (!notesTextarea || !notesTextarea.value.trim()) {
        alert('Veuillez d\'abord saisir du texte à reformuler.');
        return;
    }
    
    const originalText = notesTextarea.value;
    const aiButton = this;
    const originalButtonText = aiButton.innerHTML;
    
    aiButton.disabled = true;
    aiButton.innerHTML = '<span>Reformulation en cours...</span>';
    
    fetch('/api/mistral/format-internal-notes', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            text: originalText
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.reformulated_text) {
            notesTextarea.value = data.reformulated_text;
        } else {
            alert('Erreur lors de la reformulation: ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la reformulation avec l\'IA.');
    })
    .finally(() => {
        aiButton.disabled = false;
        aiButton.innerHTML = originalButtonText;
    });
});

// Gestion du bouton Enregistrer pour le lien d'affiliation
document.getElementById('saveAffiliationBtn')?.addEventListener('click', function() {
    const input = document.getElementById('affiliation-link-input');
    const url = input.value.trim();
    const submitButton = this;
    const originalText = submitButton.textContent;
    
    if (!url) {
        alert('Veuillez saisir une URL');
        return;
    }
    
    // Validation basique de l'URL
    try {
        new URL(url);
    } catch (e) {
        alert('Veuillez saisir une URL valide (commençant par http:// ou https://)');
        return;
    }
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    const formData = new FormData();
    formData.append('affiliation_link', url);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
    
    fetch('{{ route("ambassadeurs.update.affiliation-link", $ambassadeur->id) }}', {
        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) {
            var deleteAffiliationBtn = document.getElementById('deleteAffiliationBtn');
            if (deleteAffiliationBtn) deleteAffiliationBtn.style.display = '';
            submitButton.style.display = 'none';
            submitButton.textContent = originalText;
            submitButton.style.background = '#6fb87d';
            submitButton.disabled = false;
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de l\'enregistrement');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

// Sauvegarder aussi sur Enter dans l'input
document.getElementById('affiliation-link-input')?.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        document.getElementById('saveAffiliationBtn')?.click();
    }
});

// Suppression du lien d'affiliation : ouvrir la popup
document.getElementById('deleteAffiliationBtn')?.addEventListener('click', function() {
    var modal = document.getElementById('deleteAffiliationModal');
    if (modal) modal.style.display = 'flex';
});

// Annuler la suppression
document.getElementById('deleteAffiliationModalCancel')?.addEventListener('click', function() {
    var modal = document.getElementById('deleteAffiliationModal');
    if (modal) modal.style.display = 'none';
});

// Confirmer la suppression du lien d'affiliation (fonction globale pour onclick + addEventListener)
function confirmDeleteAffiliationLink(ev) {
    if (ev) ev.stopPropagation();
    var btn = document.getElementById('deleteAffiliationModalConfirm');
    var modal = document.getElementById('deleteAffiliationModal');
    var deleteAffiliationBtn = document.getElementById('deleteAffiliationBtn');
    var saveAffiliationBtn = document.getElementById('saveAffiliationBtn');
    var input = document.getElementById('affiliation-link-input');
    if (!btn) return;
    btn.disabled = true;
    var originalText = btn.textContent;
    btn.textContent = 'Suppression...';
    var formData = new FormData();
    formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
    fetch('{{ route("ambassadeurs.delete.affiliation-link", $ambassadeur->id) }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(function(response) {
        var contentType = response.headers.get('content-type') || '';
        if (!response.ok) {
            return response.text().then(function(text) {
                try { var d = JSON.parse(text); throw { message: d.message || text || 'Erreur ' + response.status }; } catch (e) {
                    if (e.message) throw e;
                    throw { message: text || 'Erreur ' + response.status };
                }
            });
        }
        if (contentType.indexOf('application/json') !== -1) return response.json();
        return { success: true };
    })
    .then(function(data) {
        if (data && data.success !== false) {
            if (input) { input.value = ''; input.placeholder = 'https://exemple.com/affiliation'; }
            if (saveAffiliationBtn) saveAffiliationBtn.style.display = '';
            if (deleteAffiliationBtn) deleteAffiliationBtn.style.display = 'none';
            if (modal) modal.style.display = 'none';
        } else {
            alert('Erreur : ' + (data && data.message ? data.message : 'Erreur inconnue'));
        }
        btn.disabled = false;
        btn.textContent = originalText;
    })
    .catch(function(err) {
        console.error('Erreur:', err);
        alert('Erreur lors de la suppression : ' + (err && err.message ? err.message : 'réseau ou serveur'));
        if (btn) { btn.disabled = false; btn.textContent = originalText; }
    });
}
document.getElementById('deleteAffiliationModalConfirm')?.addEventListener('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    confirmDeleteAffiliationLink(e);
});

window.confirmDeleteAffiliationLink = confirmDeleteAffiliationLink;

// Fermer la popup en cliquant à l'extérieur
document.getElementById('deleteAffiliationModal')?.addEventListener('click', function(e) {
    if (e.target === this) this.style.display = 'none';
});

// Fonction pour copier le lien d'affiliation
function copyAffiliationLink() {
    const input = document.getElementById('affiliation-link-input');
    const url = input.value.trim();
    const btn = document.getElementById('copyAffiliationBtn');
    const originalText = btn.innerHTML;
    
    if (!url) {
        alert('Aucune URL à copier');
        return;
    }
    
    // Sélectionner le texte pour le fallback
    input.select();
    input.setSelectionRange(0, 99999); // Pour mobile
    
    // Essayer d'utiliser l'API Clipboard moderne
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Copié !';
            btn.style.background = '#22c55e';
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.style.background = '#6fb87d';
            }, 2000);
        }).catch(function(err) {
            console.error('Erreur lors de la copie:', err);
            alert('Erreur lors de la copie');
        });
    } else {
        // Fallback pour les navigateurs plus anciens
        try {
            document.execCommand('copy');
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Copié !';
            btn.style.background = '#22c55e';
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.style.background = '#6fb87d';
            }, 2000);
        } catch (err) {
            alert('Erreur lors de la copie');
        }
    }
}
// Fonction pour filtrer les prospects
function filterProspects() {
    const searchTerm = document.getElementById('prospectSearch')?.value.toLowerCase() || '';
    const prospectRows = document.querySelectorAll('#prospects-tab tbody tr');
    
    prospectRows.forEach(function(row) {
        // Ignorer la ligne vide si elle existe
        if (row.querySelector('td[colspan]')) {
            return;
        }
        
        // Recherche par nom, prénom ou email uniquement
        const nameCell = row.querySelector('td:first-child');
        const name = nameCell ? nameCell.textContent.toLowerCase() : '';
        const email = row.querySelector('td:nth-child(2)')?.textContent.toLowerCase() || '';
        
        const matchesSearch = !searchTerm || 
            name.includes(searchTerm) || 
            email.includes(searchTerm);
        
        if (matchesSearch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Fonction pour filtrer les clients
function filterClients() {
    const searchTerm = document.getElementById('clientSearch')?.value.toLowerCase() || '';
    const clientRows = document.querySelectorAll('#clients-tab tbody tr');
    
    clientRows.forEach(function(row) {
        // Ignorer la ligne vide si elle existe
        if (row.querySelector('td[colspan]')) {
            return;
        }
        
        // Recherche par nom, prénom ou email uniquement
        const nameCell = row.querySelector('td:first-child');
        const name = nameCell ? nameCell.textContent.toLowerCase() : '';
        const email = row.querySelector('td:nth-child(2)')?.textContent.toLowerCase() || '';
        
        const matchesSearch = !searchTerm || 
            name.includes(searchTerm) || 
            email.includes(searchTerm);
        
        if (matchesSearch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Initialiser les filtres pour les prospects
document.addEventListener('DOMContentLoaded', function() {
    const prospectSearch = document.getElementById('prospectSearch');
    
    if (prospectSearch) {
        prospectSearch.addEventListener('input', filterProspects);
    }
    
    // Initialiser les filtres pour les clients
    const clientSearch = document.getElementById('clientSearch');
    
    if (clientSearch) {
        clientSearch.addEventListener('input', filterClients);
    }
});
</script>
@endpush