@extends('layouts.dashboard')

@section('title', ($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show' ? 'Détails du Client' : 'Détails du Prospect')
@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: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .page-subtitle {
        color: #6b7280;
        font-size: 1rem;
    }
    
    .main-card {
        background: white !important;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
        margin-bottom: 1.5rem;
    }
    
    .main-card:hover {
        background: white !important;
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .category-section {
        margin-top: 2.5rem;
        margin-bottom: 2rem;
    }
    
    .category-section:first-of-type {
        margin-top: 0;
    }
    
    .info-item:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .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;
    }
    
    .info-value.empty {
        color: #9ca3af;
        font-style: italic;
    }
    
    .badge {
        display: inline-block;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .badge-status {
        background-color: rgba(111, 184, 125, 0.2);
        color: #6fb87d;
        border: 1px solid rgba(111, 184, 125, 0.3);
    }
    
    .badge-dossier-complet {
        background-color: rgba(34, 197, 94, 0.2);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }
    
    .badge-dossier-incomplet {
        background-color: rgba(251, 146, 60, 0.2);
        color: #fb923c;
        border: 1px solid rgba(251, 146, 60, 0.3);
    }
    
    .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;
    }
    
    /* Styles pour les onglets */
    .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;
        background: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    
    .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;
    }
    
    /* Form styles */
    .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;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 3px rgba(111, 184, 125, 0.1);
    }
    
    .form-select {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 0.875rem;
        background-color: white;
        cursor: pointer;
    }
    
    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
    }
    
    .btn-primary {
        background-color: #6fb87d;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #5da66d;
    }
    
    .btn-secondary {
        background-color: #6b7280;
        color: white;
    }
    
    .btn-secondary:hover {
        background-color: #4b5563;
    }
    
    /* Styles pour les checkboxes de l'onglet Mail - même style que Documents */
    .mail-checkbox,
    .mail-refusal-checkbox {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        cursor: pointer !important;
        flex-shrink: 0;
        margin: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: white !important;
        position: relative;
        transition: all 0.2s ease;
        z-index: 1;
    }
    
    .mail-checkbox:hover {
        border-color: #6fb87d !important;
        transform: scale(1.1);
    }
    
    .mail-refusal-checkbox:hover {
        border-color: #ef4444 !important;
        transform: scale(1.1);
    }
    
    .mail-checkbox:checked {
        background-color: #6fb87d !important;
        border-color: #6fb87d !important;
    }
    
    .mail-refusal-checkbox:checked {
        background-color: #ef4444 !important;
        border-color: #ef4444 !important;
    }
    
    .mail-checkbox:checked::after,
    .mail-refusal-checkbox:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
    }
    
    /* Style hover pour les conteneurs de checkboxes Mail */
    #mail-tab div[style*="display: flex"]:has(.mail-checkbox):hover {
        background: #f8fafc;
        border-color: #6fb87d !important;
    }
    
    #mail-tab div[style*="display: flex"]:has(.mail-refusal-checkbox):hover {
        background: #fef2f2;
        border-color: #ef4444 !important;
    }
    
    /* Document checklist */
    .document-checklist {
        margin-top: 1.5rem;
    }
    
    .checklist-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        background: white;
    }
    
    .checklist-item-modern:hover {
        background: #f8fafc;
        border-color: #6fb87d !important;
    }
    
    /* Checkboxes de la checklist en vert bumper */
    .checklist-checkbox {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        cursor: pointer !important;
        flex-shrink: 0;
        margin: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: white !important;
        position: relative;
        transition: all 0.2s ease;
        z-index: 1;
    }
    
    .checklist-checkbox:hover {
        border-color: #6fb87d !important;
        transform: scale(1.1);
    }
    
    .checklist-checkbox:checked {
        background-color: #6fb87d !important;
        border-color: #6fb87d !important;
    }
    
    .checklist-checkbox:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
    }
    
    /* Checkboxes des packs FIC en vert bumper */
    .fic-pack-checkbox {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        cursor: pointer !important;
        flex-shrink: 0;
        margin: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: white !important;
        position: relative;
        transition: all 0.2s ease;
        z-index: 1;
        accent-color: #6fb87d;
    }
    
    .fic-pack-checkbox:hover {
        border-color: #6fb87d !important;
        transform: scale(1.1);
    }
    
    .fic-pack-checkbox:checked {
        background-color: #6fb87d !important;
        border-color: #6fb87d !important;
    }
    
    .fic-pack-checkbox:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
    }
    
    /* Style hover pour les conteneurs de checkboxes FIC */
    #fic-tab div[style*="display: flex"]:has(.fic-pack-checkbox):hover {
        background: #f8fafc;
        border-color: #6fb87d !important;
    }
    
    /* Forcer fond blanc sur les cartes "Déposer le devis" et "Devis chargé" même au hover */
    .fic-card-white {
        background: white !important;
    }
    
    .fic-card-white:hover {
        background: white !important;
    }
    
    /* Empêcher l'effet hover gris sur les divs parents dans l'onglet FIC */
    .fic-container:hover,
    .fic-grid-container:hover {
        background: transparent !important;
    }
    
    .fic-container > div:hover,
    .fic-grid-container > div:hover {
        background: transparent !important;
    }
    
    /* Pointer events pour faciliter le clic */
    .checklist-item-modern {
        pointer-events: auto;
    }
    
    .checklist-item-modern * {
        pointer-events: auto;
    }
    
    /* Upload zone */
    .upload-zone {
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        padding: 3rem;
        text-align: center;
        background: #f8fafc;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .upload-zone:hover {
        border-color: #6fb87d;
        background: #f0fdf4;
    }
    
    .upload-zone.drag-over {
        border-color: #6fb87d;
        background: #f0fdf4;
        transform: scale(1.02);
    }
    
    /* Document list */
    .document-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background: white;
        transition: all 0.2s ease;
    }
    
    .document-item:hover {
        background: #f8fafc;
        border-color: #6fb87d;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    
    .document-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 0;
        color: #6fb87d;
        flex-shrink: 0;
        font-weight: 700;
    }
    
    .document-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .document-name {
        font-size: 0.9375rem;
        font-weight: 500;
        color: #1f2937;
        word-break: break-word;
        line-height: 1.4;
    }
    
    .document-meta {
        font-size: 0.75rem;
        color: #6b7280;
        line-height: 1.4;
    }
    
    .document-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    
    .document-action-btn {
        padding: 0.5rem;
        border: none;
        background: transparent;
        color: #6b7280;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .document-action-btn.view-btn {
        color: #6fb87d;
    }
    
    .document-action-btn.view-btn:hover {
        background: #f0fdf4;
        color: #5da66d;
    }
    
    .document-action-btn.delete-btn {
        color: #ef4444;
    }
    
    .document-action-btn.delete-btn:hover {
        background: #fef2f2;
        color: #dc2626;
    }
    
    /* Édition du nom du document */
    .document-name-editable {
        cursor: pointer;
        position: relative;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    
    .document-name-editable:hover {
        background: transparent;
    }
    
    .document-name-editable.editing {
        background: white;
        border: 2px solid #6fb87d;
        padding: 0.25rem 0.5rem;
    }
    
    .document-name-input {
        width: 100%;
        border: 2px solid #6fb87d;
        border-radius: 4px;
        padding: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 500;
        color: #1f2937;
    }
    
    .document-name-input:focus {
        outline: none;
        border-color: #5da66d;
        box-shadow: 0 0 0 3px rgba(111, 184, 125, 0.1);
    }
    
    /* Modal de confirmation de suppression */
    .confirm-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: 2000;
        animation: fadeIn 0.2s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    .confirm-modal-content {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    .confirm-modal h3 {
        margin: 0 0 1rem 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
    }
    
    .confirm-modal p {
        margin: 0 0 1.5rem 0;
        color: #6b7280;
        line-height: 1.6;
        white-space: pre-line;
    }
    
    .confirm-modal-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
    }
    
    .confirm-modal-btn {
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
    }
    
    .confirm-modal-btn-cancel {
        background: #f3f4f6;
        color: #374151;
    }
    
    .confirm-modal-btn-cancel:hover {
        background: #e5e7eb;
    }
    
    .confirm-modal-btn-confirm {
        background: #6fb87d;
        color: white;
    }
    
    .confirm-modal-btn-confirm:hover {
        background: #5da66d;
    }
    
    .checklist-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 0.75rem;
        cursor: pointer;
    }
    
    .checklist-item label {
        flex: 1;
        cursor: pointer;
        font-size: 0.875rem;
        color: #1f2937;
    }
    
    .document-list {
        margin-top: 1.5rem;
    }
    
    .document-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        background: #f8fafc;
    }
    
    .document-name {
        font-size: 0.875rem;
        color: #1f2937;
        font-weight: 500;
    }
    
    .document-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .switch-container {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
    }
    
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cbd5e1;
        transition: .4s;
        border-radius: 24px;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    
    input:checked + .slider {
        background-color: #6fb87d !important;
    }
    
    input:checked + .slider:before {
        transform: translateX(20px);
    }
    
    /* Forcer le switch à être vert */
    .switch input:checked + .slider {
        background-color: #6fb87d !important;
    }
</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;">
    <!-- En-tête avec bouton retour aligné à droite -->
    <div class="page-header mb-4">
        <div>
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">{{ ($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show' ? 'Détails du Client' : 'Détails du Prospect' }}</h1>
            <p class="text-muted" style="font-size: 1.1rem;">{{ ($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show' ? 'Informations complètes du client' : 'Informations complètes du prospect' }}</p>
        </div>
        <a href="{{ route('prospects') }}" class="back-button">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
            Retour à la liste
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <!-- Onglets -->
                <div class="tabs-container">
                    <ul class="tabs-list">
                        <li class="tab-item active" data-tab="general" onclick="switchTab('general')">
                            Général
                        </li>
                        <li class="tab-item" data-tab="informations" onclick="switchTab('informations')">
                            Devis
                        </li>
                        <li class="tab-item" data-tab="documents" onclick="switchTab('documents')">
                            Documents
                        </li>
                        <li class="tab-item" data-tab="mail" onclick="switchTab('mail')">
                            Relance
                        </li>
                        <li class="tab-item" data-tab="fic" onclick="switchTab('fic')">
                            FIC
                        </li>
                        @if(($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show')
                        <li class="tab-item" data-tab="reclamations" onclick="switchTab('reclamations')">
                            Réclamations
                        </li>
                        @endif
                    </ul>
                </div>
                
                <!-- Onglet 1: Général -->
                <div class="tab-content active" id="general-tab">
                    <!-- Informations Personnelles -->
                    <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">
                            <div class="info-item">
                                <span class="info-label">Prénom</span>
                                <div class="editable-field-container" data-field="first_name" data-original="{{ $prospect->first_name ?? '' }}" style="display: flex; align-items: center; gap: 0.5rem;">
                                    <span class="info-value editable-field {{ empty($prospect->first_name) ? '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';">
                                        {{ $prospect->first_name ?? '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="{{ $prospect->last_name ?? '' }}" style="display: flex; align-items: center; gap: 0.5rem;">
                                    <span class="info-value editable-field {{ empty($prospect->last_name) ? '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';">
                                        {{ $prospect->last_name ?? '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="{{ $prospect->email ?? '' }}" style="display: flex; align-items: center; gap: 0.5rem;">
                                    <span class="info-value editable-field {{ empty($prospect->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';">
                                        {{ $prospect->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="{{ $prospect->phone ?? '' }}" style="display: flex; align-items: center; gap: 0.5rem;">
                                    <span class="info-value editable-field {{ empty($prospect->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';">
                                        {{ $prospect->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>
                    </div>
                    
                    <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;">
                                {{ $prospect->created_at ? $prospect->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">Date du dernier devis</span>
                            <span class="info-value" style="font-size: 1rem; color: #1f2937; font-weight: 500;">
                                @if($prospect->devis && $prospect->devis->count() > 0)
                                    {{ $prospect->devis->sortByDesc('devis_requested_at')->first()->devis_requested_at->tz(config('app.timezone'))->format('d/m/Y à H:i') }}
                                @else
                                    Aucun devis
                                @endif
                            </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">Dernière modification</span>
                            <span class="info-value" style="font-size: 1rem; color: #1f2937; font-weight: 500;">
                                {{ $prospect->updated_at ? $prospect->updated_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">Source</span>
                            <span class="badge badge-status" style="margin-top: 0.5rem;">
                                {{ $prospect->source ?? 'Manuel' }}
                            </span>
                        </div>
                        @if($prospect->ambassadeur)
                        <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">Ambassadeur</span>
                            <span class="info-value" style="font-size: 1rem; color: #1f2937; font-weight: 500;">
                                {{ $prospect->ambassadeur->first_name }} {{ $prospect->ambassadeur->last_name }}
                            </span>
                        </div>
                        @endif
                        <div class="info-item" style="background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%); padding: 1.25rem; border-radius: 8px; border: 2px solid #6fb87d; transition: all 0.2s ease;">
                            <span class="info-label" style="color: #15803d;">Nombre de devis</span>
                            <span class="info-value" style="font-size: 1.5rem; color: #6fb87d; font-weight: 700;">
                                {{ $prospect->devis ? $prospect->devis->count() : 0 }}
                            </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">Statut du client</span>
                            <select id="clientStatusSelect" class="form-select" style="margin-top: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; border: 1px solid #e5e7eb; background: white; color: #1f2937; cursor: pointer; width: 100%;">
                                <option value="a_traiter" {{ ($prospect->client_status ?? 'a_traiter') === 'a_traiter' ? 'selected' : '' }}>À traiter</option>
                                <option value="traite" {{ ($prospect->client_status ?? '') === 'traite' ? 'selected' : '' }}>Traité</option>
                                <option value="relance" {{ ($prospect->client_status ?? '') === 'relance' ? 'selected' : '' }}>Relancé</option>
                            </select>
                        </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">Dossier complet</span>
                            <span class="badge" style="margin-top: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; {{ ($prospect->dossier_complet ?? 0) ? 'background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3);' : 'background-color: rgba(251, 146, 60, 0.2); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3);' }}">
                                {{ ($prospect->dossier_complet ?? 0) ? 'Dossier complet' : 'Dossier incomplet' }}
                            </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">Type</span>
                            <select id="prospectTypeSelect" class="form-select" style="margin-top: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; border: 1px solid #e5e7eb; background: white; color: #1f2937; cursor: pointer; width: 100%;">
                                <option value="prospect" {{ ($prospect->prospect_type ?? 'prospect') === 'prospect' ? 'selected' : '' }}>Prospect</option>
                                <option value="client" {{ ($prospect->prospect_type ?? 'prospect') === 'client' ? 'selected' : '' }}>Client</option>
                                <option value="resilie" {{ ($prospect->prospect_type ?? 'prospect') === 'resilie' ? 'selected' : '' }}>Résilié</option>
                            </select>
                        </div>
                    </div>
                    
                    <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('prospects.update', $prospect->id) }}">
                            @csrf
                            @method('PUT')
                            <div class="form-group">
                                <textarea name="internal_notes" id="internal_notes" class="form-control" rows="6" placeholder="Ajoutez des notes internes sur ce prospect...">{{ $prospect->internal_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 2: Devis -->
                <div class="tab-content" id="informations-tab">
                    <!-- Section Liste des devis -->
                    <h2 class="section-title" style="margin-top: 2rem;">Devis créés</h2>
                    @if($prospect->devis && $prospect->devis->count() > 0)
                        <div class="table-responsive" style="margin-top: 1.5rem;">
                            <table class="table" style="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;">
                                <thead>
                                    <tr>
                                        <th style="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;">Numéro de devis</th>
                                        <th style="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;">Date du devis</th>
                                        <th style="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; text-align: center;">Statut</th>
                                        <th style="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; text-align: center;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($prospect->devis->sortByDesc('devis_requested_at') as $devis)
                                        <tr style="transition: all 0.2s ease;" onmouseover="this.style.background='linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%)'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 12px rgba(111, 184, 125, 0.1)';" onmouseout="this.style.background='white'; this.style.transform=''; this.style.boxShadow='';">
                                            <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; font-weight: 600; color: #1f2937;">
                                                Devis #{{ $devis->id }}
                                            </td>
                                            <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; color: #1f2937;">
                                                {{ $devis->devis_requested_at ? $devis->devis_requested_at->tz(config('app.timezone'))->format('d/m/Y à H:i') : 'Date non disponible' }}
                                            </td>
                                            <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; text-align: center;">
                                                <span class="devis-status-badge" 
                                                      data-devis-id="{{ $devis->id }}" 
                                                      data-current-status="{{ $devis->status }}"
                                                      style="display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; {{ $devis->status === 'traite' ? 'background: #6fb87d; color: white;' : ($devis->status === 'en_attente' ? 'background: #fbbf24; color: white;' : 'background: #6b7280; color: white;') }}"
                                                      onclick="toggleDevisStatus({{ $prospect->id }}, {{ $devis->id }}, '{{ $devis->status }}')"
                                                      title="Cliquer pour changer le statut">
                                                    @if($devis->status === 'traite')
                                                        Traité
                                                    @elseif($devis->status === 'en_attente')
                                                        En attente
                                                    @else
                                                        {{ ucfirst(str_replace('_', ' ', $devis->status)) }}
                                                    @endif
                                                </span>
                                            </td>
                                            <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; text-align: center;">
                                                <a href="{{ route('devis.show', ['prospect_id' => $prospect->id, 'devis_id' => $devis->id]) }}" 
                                                   class="action-btn" 
                                                   style="width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; text-decoration: none; cursor: pointer; color: #6fb87d;"
                                                   onmouseover="this.style.transform='scale(1.1)';"
                                                   onmouseout="this.style.transform='scale(1)';"
                                                   title="Voir les détails du devis">
                                                    <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"></path>
                                                        <circle cx="12" cy="12" r="3"></circle>
                                                    </svg>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div style="background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px; padding: 1rem; margin-top: 1rem;">
                            <p style="color: #92400e; margin: 0; font-weight: 600;">Aucun devis créé pour ce prospect.</p>
                        </div>
                    @endif
                </div>
                
                <!-- Onglet 3: Documents -->
                <div class="tab-content" id="documents-tab">
                    <div style="display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start;">
                        <!-- Colonne gauche : Upload et liste des documents -->
                        <div>
                            <!-- Zone de drag & drop -->
                            <div class="upload-zone" id="uploadZone" style="border: 2px dashed #cbd5e1; border-radius: 12px; padding: 3rem; text-align: center; background: #f8fafc; transition: all 0.3s ease; cursor: pointer; margin-bottom: 2rem;">
                                <form id="documentUploadForm" method="POST" action="{{ route('prospects.documents.upload', $prospect->id) }}" enctype="multipart/form-data" style="display: none;">
                                    @csrf
                                    <input type="file" name="document" id="document" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" multiple>
                                </form>
                                <div id="uploadZoneContent">
                                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d; margin: 0 auto 1rem;">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                        <polyline points="17 8 12 3 7 8"></polyline>
                                        <line x1="12" y1="3" x2="12" y2="15"></line>
                                    </svg>
                                    <p style="font-size: 1rem; font-weight: 600; color: #1f2937; margin: 0.5rem 0;">Glissez-déposez vos fichiers ici</p>
                                    <p style="font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0;">ou</p>
                                    <button type="button" onclick="document.getElementById('document').click()" class="btn btn-primary" style="margin-top: 0.5rem;">Parcourir les fichiers</button>
                                    <p style="font-size: 0.75rem; color: #9ca3af; margin-top: 1rem;">Formats acceptés : PDF, DOC, DOCX, JPG, JPEG, PNG</p>
                                </div>
                                <div id="uploadProgress" style="display: none;">
                                    <div style="width: 100%; background: #e5e7eb; border-radius: 8px; height: 8px; margin-top: 1rem;">
                                        <div id="progressBar" style="width: 0%; background: #6fb87d; height: 8px; border-radius: 8px; transition: width 0.3s ease;"></div>
                                    </div>
                                    <p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem;">Upload en cours...</p>
                                </div>
                            </div>
                            
                            <!-- Liste des documents -->
                            <div class="document-list-container" style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem;">
                                <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                        <polyline points="14 2 14 8 20 8"></polyline>
                                    </svg>
                                    Documents uploadés
                                </h3>
                                <div id="documentsList" style="min-height: 200px;">
                                    <p style="color: #9ca3af; font-style: italic; text-align: center; padding: 2rem;">Aucun document uploadé pour le moment</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Colonne droite : Checklist et validation -->
                        <div style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; position: sticky; top: 1rem;">
                            <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                                    <polyline points="9 11 12 14 22 4"></polyline>
                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                </svg>
                                Checklist des documents
                            </h3>
                            
                            <form id="documentChecklistForm" method="POST" action="{{ route('prospects.documents.checklist', $prospect->id) }}">
                                @csrf
                                @method('PUT')
                                @php
                                    try {
                                        // Récupérer toutes les entrées de checklist avec checked = 1
                                        $checklistItems = $prospect->documentChecklist()->where('checked', 1)->pluck('document_type')->toArray();
                                        // Créer un tableau avec true pour les types cochés
                                        $checklist = [];
                                        foreach ($checklistItems as $type) {
                                            $checklist[$type] = true;
                                        }
                                    } catch (\Exception $e) {
                                        $checklist = [];
                                    }
                                @endphp
                                
                                <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;">
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="permis" id="doc_permis" {{ ($checklist['permis'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_permis" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Permis</label>
                                    </div>
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="releve_auto" id="doc_releve_auto" {{ ($checklist['releve_auto'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_releve_auto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Relevé auto</label>
                                    </div>
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="releve_moto" id="doc_releve_moto" {{ ($checklist['releve_moto'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_releve_moto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Relevé moto</label>
                                    </div>
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="carte_grise" id="doc_carte_grise" {{ ($checklist['carte_grise'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_carte_grise" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Carte grise</label>
                                    </div>
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="rib" id="doc_rib" {{ ($checklist['rib'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_rib" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">RIB</label>
                                    </div>
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="piece_identite" id="doc_piece_identite" {{ ($checklist['piece_identite'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_piece_identite" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Pièce d'identité</label>
                                    </div>
                                    <div class="checklist-item-modern" style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="documents[]" value="fic" id="doc_fic" {{ ($checklist['fic'] ?? false) ? 'checked' : '' }} class="checklist-checkbox">
                                        <label for="doc_fic" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">FIC</label>
                                    </div>
                                </div>
                                
                                <!-- Validation dossier complet -->
                                <div style="border-top: 1px solid #e5e7eb; padding-top: 1.5rem;">
                                    <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Statut du dossier</label>
                                    <div class="switch-container" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 8px;">
                                        <label class="switch" style="margin: 0;">
                                            <input type="checkbox" id="dossier_complet_checklist" {{ ($prospect->dossier_complet ?? 0) ? 'checked' : '' }}>
                                            <span class="slider"></span>
                                        </label>
                                        <label for="dossier_complet_checklist" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500;">Dossier complet</label>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Onglet 4: Mail -->
                <div class="tab-content" id="mail-tab">
                    <div style="display: flex; flex-direction: column; gap: 2rem;">
                        <!-- Formulaire d'envoi d'email -->
                        <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
                            <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Envoyer un email</h3>
                            <form id="mailForm" method="POST" action="{{ route('prospects.sendMail', $prospect->id) }}">
                                @csrf
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="mail_to" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Destinataire *</label>
                                    <input type="email" id="mail_to" name="to" class="form-control" value="{{ $prospect->email ?? '' }}" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem;">
                                </div>
                                
                                @if(!(($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show'))
                                <!-- Cases à cocher pour les refus/refus partiels -->
                                <div style="margin-bottom: 1.5rem; padding: 1rem; background: #fef2f2; border-radius: 8px; border: 1px solid #fecaca;">
                                    <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #991b1b; margin-bottom: 1rem;">Refus / Refus partiels :</label>
                                    @php
                                        $savedRefusals = [];
                                        try {
                                            if (\Schema::hasTable('prospect_mail_refusals')) {
                                                $savedRefusals = \DB::table('prospect_mail_refusals')
                                                    ->where('prospect_id', $prospect->id)
                                                    ->where('checked', 1)
                                                    ->pluck('refusal_type')
                                                    ->toArray();
                                            }
                                        } catch (\Exception $e) {
                                            \Log::warning('Erreur chargement refus mail', ['error' => $e->getMessage()]);
                                            $savedRefusals = [];
                                        }
                                    @endphp
                                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem;">
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="refusal_info[]" value="aucune_compagnie" id="refusal_aucune_compagnie" class="mail-refusal-checkbox" {{ in_array('aucune_compagnie', $savedRefusals) ? 'checked' : '' }}>
                                            <label for="refusal_aucune_compagnie" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Aucune compagnie</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="refusal_info[]" value="deja_meilleure_compagnie" id="refusal_deja_meilleure_compagnie" class="mail-refusal-checkbox" {{ in_array('deja_meilleure_compagnie', $savedRefusals) ? 'checked' : '' }}>
                                            <label for="refusal_deja_meilleure_compagnie" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Déjà chez meilleure compagnie</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="refusal_info[]" value="trop_infos_manquantes" id="refusal_trop_infos_manquantes" class="mail-refusal-checkbox" {{ in_array('trop_infos_manquantes', $savedRefusals) ? 'checked' : '' }}>
                                            <label for="refusal_trop_infos_manquantes" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Trop d'infos manquantes</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="refusal_info[]" value="acquisition_trop_lointaine" id="refusal_acquisition_trop_lointaine" class="mail-refusal-checkbox" {{ in_array('acquisition_trop_lointaine', $savedRefusals) ? 'checked' : '' }}>
                                            <label for="refusal_acquisition_trop_lointaine" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Acquisition trop lointaine</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="refusal_info[]" value="obtention_permis_trop_lointaine" id="refusal_obtention_permis_trop_lointaine" class="mail-refusal-checkbox" {{ in_array('obtention_permis_trop_lointaine', $savedRefusals) ? 'checked' : '' }}>
                                            <label for="refusal_obtention_permis_trop_lointaine" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Obtention permis trop lointaine</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="refusal_info[]" value="date_anniversaire_trop_lointaine" id="refusal_date_anniversaire_trop_lointaine" class="mail-refusal-checkbox" {{ in_array('date_anniversaire_trop_lointaine', $savedRefusals) ? 'checked' : '' }}>
                                            <label for="refusal_date_anniversaire_trop_lointaine" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Date anniversaire trop lointaine</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Cases à cocher pour les informations manquantes -->
                                <div style="margin-bottom: 1.5rem; padding: 1rem; background: #f8fafc; border-radius: 8px; border: 1px solid #e5e7eb;">
                                    <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Informations complémentaires à demander :</label>
                                    @php
                                        $savedMissingInfo = [];
                                        try {
                                            if (\Schema::hasTable('prospect_mail_missing_info')) {
                                                $savedMissingInfo = \DB::table('prospect_mail_missing_info')
                                                    ->where('prospect_id', $prospect->id)
                                                    ->where('checked', 1)
                                                    ->pluck('missing_info_type')
                                                    ->toArray();
                                            }
                                        } catch (\Exception $e) {
                                            \Log::warning('Erreur chargement infos manquantes mail', ['error' => $e->getMessage()]);
                                            $savedMissingInfo = [];
                                        }
                                    @endphp
                                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem;">
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="modele_vehicule" id="missing_modele_vehicule" class="mail-checkbox" {{ in_array('modele_vehicule', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_modele_vehicule" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Modèle du véhicule</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="code_postal_ville" id="missing_code_postal_ville" class="mail-checkbox" {{ in_array('code_postal_ville', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_code_postal_ville" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Code postal & Ville manquants</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="details_sinistre" id="missing_details_sinistre" class="mail-checkbox" {{ in_array('details_sinistre', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_details_sinistre" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Détails sur sinistre</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="nb_mois_annees_auto" id="missing_nb_mois_annees_auto" class="mail-checkbox" {{ in_array('nb_mois_annees_auto', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_nb_mois_annees_auto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Nombre mois et années assu AUTO</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="nb_mois_annees_moto" id="missing_nb_mois_annees_moto" class="mail-checkbox" {{ in_array('nb_mois_annees_moto', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_nb_mois_annees_moto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Nombre mois et années assu MOTO</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="date_permis_a2" id="missing_date_permis_a2" class="mail-checkbox" {{ in_array('date_permis_a2', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_date_permis_a2" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Date permis A2</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="date_permis_a" id="missing_date_permis_a" class="mail-checkbox" {{ in_array('date_permis_a', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_date_permis_a" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Date permis A</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="date_permis_b" id="missing_date_permis_b" class="mail-checkbox" {{ in_array('date_permis_b', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_date_permis_b" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Date permis B</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="date_formation_125" id="missing_date_formation_125" class="mail-checkbox" {{ in_array('date_formation_125', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_date_formation_125" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Date formation 125</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="sportive" id="missing_sportive" class="mail-checkbox" {{ in_array('sportive', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_sportive" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Sportive</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="bonus_auto" id="missing_bonus_auto" class="mail-checkbox" {{ in_array('bonus_auto', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_bonus_auto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Bonus AUTO</label>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                            <input type="checkbox" name="missing_info[]" value="bonus_moto" id="missing_bonus_moto" class="mail-checkbox" {{ in_array('bonus_moto', $savedMissingInfo) ? 'checked' : '' }}>
                                            <label for="missing_bonus_moto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Bonus MOTO</label>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="mail_subject" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Sujet *</label>
                                    <input type="text" id="mail_subject" name="subject" class="form-control" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem;">
                                </div>
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="mail_body" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Message *</label>
                                    <textarea id="mail_body" name="body" class="form-control" rows="12" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem; resize: vertical;"></textarea>
                                    <div style="display: flex; gap: 0.75rem; margin-top: 0.75rem;">
                                        <button type="button" id="mailMicButton" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: background 0.2s;">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <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="mailMicButtonText">Activer le microphone</span>
                                        </button>
                                        <button type="button" id="mailAiButton" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: #6366F1; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: background 0.2s;">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <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="display: flex; justify-content: flex-end; gap: 1rem;">
                                    <button type="submit" class="btn btn-primary" style="padding: 0.75rem 1.5rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9375rem; font-weight: 500;">
                                        Envoyer l'email
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Onglet 5: FIC -->
                <div class="tab-content" id="fic-tab">
                    <div class="fic-container" style="display: flex; flex-direction: column; gap: 2rem;">
                        <!-- Section Upload et affichage du devis -->
                        <div class="fic-grid-container" style="display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start;">
                            <!-- Colonne gauche : Upload du devis -->
                            <div>
                                <div class="fic-card-white" style="background: white !important; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
                                    <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                            <polyline points="14 2 14 8 20 8"></polyline>
                                        </svg>
                                        Déposer le devis
                                    </h3>
                                    
                                    <!-- Zone de drag & drop -->
                                    <div class="upload-zone" id="ficUploadZone" style="border: 2px dashed #cbd5e1; border-radius: 12px; padding: 3rem; text-align: center; background: #f8fafc; transition: all 0.3s ease; cursor: pointer;">
                                        <form id="ficUploadForm" method="POST" action="{{ route('prospects.fic.upload', $prospect->id) }}" enctype="multipart/form-data" style="display: none;">
                                            @csrf
                                            <input type="file" name="devis" id="ficDevis" accept=".pdf,.doc,.docx">
                                        </form>
                                        <div id="ficUploadZoneContent">
                                            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d; margin: 0 auto 1rem;">
                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                                <polyline points="17 8 12 3 7 8"></polyline>
                                                <line x1="12" y1="3" x2="12" y2="15"></line>
                                            </svg>
                                            <p style="font-size: 1rem; font-weight: 600; color: #1f2937; margin: 0.5rem 0;">Glissez-déposez le devis ici</p>
                                            <p style="font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0;">ou</p>
                                            <button type="button" onclick="document.getElementById('ficDevis').click()" class="btn btn-primary" style="margin-top: 0.5rem;">Parcourir les fichiers</button>
                                            <p style="font-size: 0.75rem; color: #9ca3af; margin-top: 1rem;">Formats acceptés : PDF, DOC, DOCX</p>
                                        </div>
                                        <div id="ficUploadProgress" style="display: none;">
                                            <div style="width: 100%; background: #e5e7eb; border-radius: 8px; height: 8px; margin-top: 1rem;">
                                                <div id="ficProgressBar" style="width: 0%; background: #6fb87d; height: 8px; border-radius: 8px; transition: width 0.3s ease;"></div>
                                            </div>
                                            <p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem;">Upload en cours...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Colonne droite : Affichage du devis et FIC généré -->
                            <div style="display: flex; flex-direction: column; gap: 2rem;">
                                <!-- Devis chargé -->
                                <div class="fic-card-white" style="background: white !important; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem;">
                                    <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                            <polyline points="14 2 14 8 20 8"></polyline>
                                        </svg>
                                        Devis chargé
                                    </h3>
                                    <div id="ficDevisDisplay" style="min-height: 120px;">
                                        <p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1.5rem;">Aucun devis chargé pour le moment</p>
                                    </div>
                                </div>
                                
                                <!-- FIC généré -->
                                <div class="fic-card-white" style="background: white !important; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem;">
                                    <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                            <polyline points="14 2 14 8 20 8"></polyline>
                                        </svg>
                                        FIC généré
                                    </h3>
                                    <div id="ficGeneratedDisplay" style="min-height: 120px;">
                                        <p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1.5rem;">Aucun FIC généré pour le moment</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Section Packs assureur -->
                        <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
                            <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Pack assureur</h3>
                            <form id="ficPackForm" method="POST" action="{{ route('prospects.fic.packs', $prospect->id) }}">
                                @csrf
                                @method('PUT')
                                @php
                                    $savedPacks = [];
                                    try {
                                        if (\Schema::hasTable('prospect_fic_packs')) {
                                            $savedPacks = \DB::table('prospect_fic_packs')
                                                ->where('prospect_id', $prospect->id)
                                                ->where('checked', 1)
                                                ->pluck('pack_type')
                                                ->toArray();
                                        }
                                    } catch (\Exception $e) {
                                        \Log::warning('Erreur chargement packs FIC', ['error' => $e->getMessage()]);
                                        $savedPacks = [];
                                    }
                                @endphp
                                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem;">
                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="packs[]" value="april_moto" id="pack_april_moto" class="fic-pack-checkbox" {{ in_array('april_moto', $savedPacks) ? 'checked' : '' }}>
                                        <label for="pack_april_moto" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Pack APRIL MOTO</label>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="packs[]" value="amdm" id="pack_amdm" class="fic-pack-checkbox" {{ in_array('amdm', $savedPacks) ? 'checked' : '' }}>
                                        <label for="pack_amdm" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Pack AMDM</label>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="packs[]" value="solly_azar" id="pack_solly_azar" class="fic-pack-checkbox" {{ in_array('solly_azar', $savedPacks) ? 'checked' : '' }}>
                                        <label for="pack_solly_azar" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Pack SOLLY AZAR</label>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; transition: background 0.2s ease; cursor: pointer; border: 1px solid #e5e7eb;">
                                        <input type="checkbox" name="packs[]" value="xenassur" id="pack_xenassur" class="fic-pack-checkbox" {{ in_array('xenassur', $savedPacks) ? 'checked' : '' }}>
                                        <label for="pack_xenassur" style="flex: 1; cursor: pointer; font-size: 0.9375rem; color: #1f2937; margin: 0; font-weight: 500; user-select: none;">Pack XENASSUR</label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Section Envoi de mail -->
                        <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
                            <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Envoyer un email</h3>
                            <form id="ficMailForm" method="POST" action="{{ route('prospects.sendMail', $prospect->id) }}">
                                @csrf
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="fic_mail_subject" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Sujet *</label>
                                    <input type="text" id="fic_mail_subject" name="subject" class="form-control" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem;">
                                </div>
                                
                                <!-- Encadré Pièces jointes -->
                                <div id="ficAttachmentsBox" style="margin-bottom: 1.5rem; padding: 1rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; display: none;">
                                    <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.75rem;">Pièces jointes</label>
                                    <div id="ficAttachmentsList" style="display: flex; flex-direction: column; gap: 0.5rem;">
                                        <!-- Les fichiers seront ajoutés ici dynamiquement -->
                                    </div>
                                </div>
                                
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="fic_mail_body" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Message *</label>
                                    <textarea id="fic_mail_body" name="body" class="form-control" rows="12" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem; resize: vertical;"></textarea>
                                    <div style="display: flex; gap: 0.75rem; margin-top: 0.75rem;">
                                        <button type="button" id="ficMailMicButton" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: background 0.2s;">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <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="ficMailMicButtonText">Activer le microphone</span>
                                        </button>
                                        <button type="button" id="ficMailAiButton" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: #6366F1; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: background 0.2s;">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <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>
                                <input type="hidden" name="to" value="{{ $prospect->email ?? '' }}">
                                <div style="display: flex; justify-content: flex-end; gap: 1rem;">
                                    <button type="submit" class="btn btn-primary" style="padding: 0.75rem 1.5rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9375rem; font-weight: 500;">
                                        Envoyer l'email
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Onglet 6: Réclamations (uniquement pour les clients du portefeuille) -->
                @if(($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show')
                <div class="tab-content" id="reclamations-tab">
                    <div style="display: flex; flex-direction: column; gap: 2rem;">
                        <!-- Formulaire d'ajout de réclamation -->
                        <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
                            <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Nouvelle réclamation</h3>
                            <form id="reclamationForm" method="POST" action="{{ route('portefeuille.show', $prospect->id) }}/reclamations">
                                @csrf
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="reclamation_sujet" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Sujet *</label>
                                    <input type="text" id="reclamation_sujet" name="sujet" class="form-control" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem;">
                                </div>
                                <div style="margin-bottom: 1.5rem;">
                                    <label for="reclamation_details" style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Détails de la réclamation *</label>
                                    <div style="position: relative;">
                                        <textarea id="reclamation_details" name="details" class="form-control" rows="6" required style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem; resize: vertical;"></textarea>
                                        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                                            <button type="button" id="micButton" 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="micButtonText">Activer le microphone</span>
                                            </button>
                                            <button type="button" id="aiButton" 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>
                                <div style="display: flex; justify-content: flex-end; gap: 1rem;">
                                    <button type="submit" class="btn btn-primary" style="padding: 0.75rem 1.5rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9375rem; font-weight: 500;">
                                        Enregistrer la réclamation
                                    </button>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Liste des réclamations -->
                        <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
                            <h3 class="section-title" style="font-size: 1.125rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">Réclamations</h3>
                            @if($prospect->reclamations && $prospect->reclamations->count() > 0)
                                <div class="table-responsive" style="margin-top: 1.5rem;">
                                    <table class="table" style="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;">
                                        <thead>
                                            <tr>
                                                <th style="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;">Sujet</th>
                                                <th style="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;">Date de création</th>
                                                <th style="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; text-align: center;">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($prospect->reclamations ?? collect())->sortByDesc('created_at') as $reclamation)
                                                <tr style="transition: all 0.2s ease;" onmouseover="this.style.background='linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%)'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 12px rgba(111, 184, 125, 0.1)';" onmouseout="this.style.background='white'; this.style.transform=''; this.style.boxShadow='';">
                                                    <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; font-weight: 600; color: #1f2937;">
                                                        {{ $reclamation->sujet ?? 'Sans sujet' }}
                                                    </td>
                                                    <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; color: #1f2937;">
                                                        {{ $reclamation->created_at->tz(config('app.timezone'))->format('d/m/Y à H:i') }}
                                                    </td>
                                                    <td style="padding: 1.25rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; background: white; text-align: center;">
                                                        <div style="display: flex; gap: 0.5rem; justify-content: center; align-items: center;">
                                                            <a href="{{ route('portefeuille.show', $prospect->id) }}/reclamations/{{ $reclamation->id }}" 
                                                               class="action-btn" 
                                                               style="width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; text-decoration: none; cursor: pointer; color: #6fb87d;"
                                                               onmouseover="this.style.transform='scale(1.1)';"
                                                               onmouseout="this.style.transform='scale(1)';"
                                                               title="Voir les détails de la réclamation">
                                                                <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"></path>
                                                                    <circle cx="12" cy="12" r="3"></circle>
                                                                </svg>
                                                            </a>
                                                            <button type="button" 
                                                                    onclick="deleteReclamation({{ $prospect->id }}, {{ $reclamation->id }}, '{{ $reclamation->sujet ?? 'cette réclamation' }}')"
                                                                    class="action-btn" 
                                                                    style="width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; color: #ef4444; background: transparent; border: none; padding: 0;"
                                                                    onmouseover="this.style.transform='scale(1.1)';"
                                                                    onmouseout="this.style.transform='scale(1)';"
                                                                    title="Supprimer la réclamation">
                                                                <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"></polyline>
                                                                    <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"></path>
                                                                    <line x1="10" y1="11" x2="10" y2="17"></line>
                                                                    <line x1="14" y1="11" x2="14" y2="17"></line>
                                                                </svg>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div style="background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px; padding: 1rem; margin-top: 1rem;">
                                    <p style="color: #92400e; margin: 0; font-weight: 600;">Aucune réclamation enregistrée</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Gestion des onglets - doit être global
window.switchTab = function(tabName) {
    // Masquer tous les contenus
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    
    // Désactiver tous les onglets
    document.querySelectorAll('.tab-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // Activer l'onglet sélectionné
    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');
    }
};

// Soumission du formulaire général
// Gestion du formulaire de notes internes
// Gestion du changement de statut du client
document.getElementById('clientStatusSelect')?.addEventListener('change', function() {
    const clientStatus = this.value;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    const prospectId = {{ $prospect->id }};
    
    console.log('Changement de statut client:', clientStatus);
    
    fetch(`/prospects/${prospectId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            client_status: clientStatus
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                console.error('Erreur:', text);
                throw new Error('Erreur HTTP: ' + response.status);
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            console.log('Statut client mis à jour avec succès');
            // Feedback visuel
            const select = document.getElementById('clientStatusSelect');
            const originalBorder = select.style.border;
            select.style.border = '2px solid #6fb87d';
            setTimeout(() => {
                select.style.border = originalBorder;
            }, 1000);
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            // Revenir à la valeur précédente en cas d'erreur
            location.reload();
        }
    })
    .catch(error => {
        console.error('Erreur lors de la mise à jour du statut client:', error);
        alert('Erreur lors de la mise à jour du statut client');
        location.reload();
    });
});

// Gestion du changement de type prospect
document.getElementById('prospectTypeSelect')?.addEventListener('change', function() {
    const prospectType = this.value;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    const prospectId = {{ $prospect->id }};
    
    console.log('Changement de type prospect:', prospectType);
    
    fetch(`/prospects/${prospectId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            prospect_type: prospectType
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                console.error('Erreur:', text);
                throw new Error('Erreur HTTP: ' + response.status);
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            console.log('Type prospect mis à jour avec succès');
            // Feedback visuel
            const select = document.getElementById('prospectTypeSelect');
            const originalBorder = select.style.border;
            select.style.border = '2px solid #6fb87d';
            setTimeout(() => {
                select.style.border = originalBorder;
            }, 1000);
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            // Revenir à la valeur précédente en cas d'erreur
            location.reload();
        }
    })
    .catch(error => {
        console.error('Erreur lors de la mise à jour du type:', error);
        alert('Erreur lors de la mise à jour du type prospect');
        location.reload();
    });
});

document.getElementById('notesForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Arrêter l'enregistrement si actif
    if (isNotesRecording) {
        stopNotesRecording();
    }
    
    const internalNotes = document.getElementById('internal_notes').value;
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    
    console.log('Envoi des notes internes:', internalNotes);
    console.log('CSRF Token:', csrfToken ? 'Présent' : 'Manquant');
    
    // Désactiver le bouton pendant la sauvegarde
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    fetch(this.action, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            internal_notes: internalNotes
        })
    })
    .then(response => {
        console.log('Réponse status:', response.status);
        if (!response.ok) {
            return response.text().then(text => {
                console.error('Réponse erreur:', 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.textContent = originalText;
                submitButton.style.background = '#6fb87d';
                submitButton.disabled = false;
            }, 2000);
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur complète:', error);
        alert('Une erreur est survenue lors de l\'enregistrement: ' + error.message);
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

// Gestion du drag & drop
const uploadZone = document.getElementById('uploadZone');
const documentInput = document.getElementById('document');
const uploadForm = document.getElementById('documentUploadForm');

if (uploadZone && documentInput) {
    // Clic sur la zone pour ouvrir le gestionnaire de fichiers
    uploadZone.addEventListener('click', function(e) {
        if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'INPUT') {
            documentInput.click();
        }
    });
    
    // Gestion du drag & drop
    uploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadZone.classList.add('drag-over');
    });
    
    uploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadZone.classList.remove('drag-over');
    });
    
    uploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadZone.classList.remove('drag-over');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            documentInput.files = files;
            handleFileUpload();
        }
    });
    
    // Gestion du changement de fichier
    documentInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            handleFileUpload();
        }
    });
}

// Fonction pour gérer l'upload
function handleFileUpload() {
    const formData = new FormData(uploadForm);
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadZoneContent = document.getElementById('uploadZoneContent');
    const progressBar = document.getElementById('progressBar');
    
    // Afficher la progression
    uploadZoneContent.style.display = 'none';
    uploadProgress.style.display = 'block';
    progressBar.style.width = '0%';
    
    fetch(uploadForm.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
        }
    })
    .then(response => response.json())
    .then(data => {
        progressBar.style.width = '100%';
        setTimeout(() => {
            uploadProgress.style.display = 'none';
            uploadZoneContent.style.display = 'block';
            progressBar.style.width = '0%';
            
            if (data.success) {
                loadDocuments();
                documentInput.value = '';
            } else {
                alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            }
        }, 500);
    })
    .catch(error => {
        console.error('Erreur:', error);
        uploadProgress.style.display = 'none';
        uploadZoneContent.style.display = 'block';
        progressBar.style.width = '0%';
        alert('Une erreur est survenue lors de l\'upload');
    });
}

// Fonction pour obtenir le type de fichier en texte
function getFileIcon(fileName) {
    const ext = fileName.split('.').pop().toLowerCase();
    let fileType = 'DOC';
    
    if (['pdf'].includes(ext)) {
        fileType = 'PDF';
    } else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
        fileType = 'IMG';
    } else if (['doc', 'docx'].includes(ext)) {
        fileType = 'DOC';
    } else if (['xls', 'xlsx'].includes(ext)) {
        fileType = 'XLS';
    } else if (['txt'].includes(ext)) {
        fileType = 'TXT';
    }
    
    return `<span style="font-size: 0.75rem; font-weight: 700; color: #6fb87d; letter-spacing: 0.05em;">${fileType}</span>`;
}

// Fonction pour formater la taille du fichier
function formatFileSize(bytes) {
    if (!bytes) return 'N/A';
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

// Charger les documents
function loadDocuments() {
    fetch('{{ route("prospects.documents.list", $prospect->id) }}')
        .then(response => response.json())
        .then(data => {
            const list = document.getElementById('documentsList');
            if (data.documents && data.documents.length > 0) {
                list.innerHTML = data.documents.map(doc => `
                    <div class="document-item">
                        <div class="document-icon">
                            ${getFileIcon(doc.name || doc.file_name || 'file')}
                        </div>
                        <div class="document-info">
                            <div class="document-name-editable" onclick="editDocumentName(${doc.id}, '${(doc.name || doc.file_name || 'Document').replace(/'/g, "\\'")}')" title="Cliquer pour renommer" style="margin: 0; padding: 0;">
                                <span class="document-name-text" style="display: inline-block;">${doc.name || doc.file_name || 'Document'}</span>
                            </div>
                            <div class="document-meta" style="margin: 0; padding: 0;">
                                ${doc.created_at || ''} ${doc.file_size ? ' • ' + formatFileSize(doc.file_size) : ''}
                            </div>
                        </div>
                        <div class="document-actions">
                            <a href="${doc.url || doc.file_url || '#'}" target="_blank" class="document-action-btn view-btn" title="Consulter">
                                <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"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                            </a>
                            <button onclick="confirmDeleteDocument(${doc.id}, '${(doc.name || doc.file_name || 'Document').replace(/'/g, "\\'")}')" class="document-action-btn delete-btn" 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"></polyline>
                                    <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"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                `).join('');
            } else {
                list.innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 2rem;">Aucun document uploadé pour le moment</p>';
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
        });
}

// Sauvegarde automatique de la checklist - délégation d'événements sur le formulaire
(function() {
    let isInitialized = false;
    
    function initChecklistAutoSave() {
        const form = document.getElementById('documentChecklistForm');
        if (!form) {
            return;
        }
        
        // Si déjà initialisé, ne pas réinitialiser
        if (isInitialized) {
            return;
        }
        
        console.log('Initialisation de la sauvegarde automatique de la checklist');
        isInitialized = true;
        
        // Utiliser la délégation d'événements sur le formulaire
        form.addEventListener('change', function(e) {
            if (e.target && e.target.classList.contains('checklist-checkbox')) {
                const changedCheckbox = e.target;
                console.log('Checkbox changée:', changedCheckbox.value, changedCheckbox.checked);
                
                // Construire manuellement les données avec toutes les checkboxes
                const formData = new FormData();
                formData.append('_method', 'PUT');
                formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
                
                // Récupérer toutes les checkboxes du formulaire
                const allCheckboxes = form.querySelectorAll('input.checklist-checkbox[type="checkbox"]');
                const checkedValues = [];
                
                console.log('Toutes les checkboxes trouvées:', allCheckboxes.length);
                allCheckboxes.forEach((cb, index) => {
                    console.log(`Checkbox ${index}:`, {
                        id: cb.id,
                        value: cb.value,
                        checked: cb.checked,
                        name: cb.name
                    });
                    
                    if (cb.checked) {
                        formData.append('documents[]', cb.value);
                        checkedValues.push(cb.value);
                        console.log('  ✓ Checkbox cochée ajoutée:', cb.value);
                    }
                });
                
                console.log('Valeurs à envoyer:', checkedValues);
                console.log('FormData entries:', Array.from(formData.entries()));
                
                // Vérifier que toutes les valeurs sont bien dans le FormData
                const formDataArray = Array.from(formData.entries());
                const documentsInFormData = formDataArray.filter(([key]) => key === 'documents[]').map(([, value]) => value);
                console.log('Documents dans FormData:', documentsInFormData);
                
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                
                fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken || '',
                        'Accept': 'application/json',
                    },
                    body: formData
                })
                .then(response => {
                    console.log('Status:', response.status);
                    if (!response.ok) {
                        return response.text().then(text => {
                            console.error('Réponse erreur:', text);
                            throw new Error('Erreur serveur: ' + response.status);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Réponse:', data);
                    if (data.success) {
                        console.log('✅ Checklist sauvegardée avec succès');
                    } else {
                        console.error('❌ Erreur:', data.message);
                        changedCheckbox.checked = !changedCheckbox.checked;
                        alert('Erreur: ' + (data.message || 'Erreur inconnue'));
                    }
                })
                .catch(error => {
                    console.error('❌ Erreur fetch:', error);
                    changedCheckbox.checked = !changedCheckbox.checked;
                    alert('Erreur: ' + error.message);
                });
            }
        });
        
        console.log('✅ Event listener attaché sur le formulaire');
    }
    
    // Initialiser au chargement
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initChecklistAutoSave);
    } else {
        initChecklistAutoSave();
    }
    
    // Réinitialiser quand on change d'onglet vers Documents
    document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
            if (this.getAttribute('data-tab') === 'documents') {
                isInitialized = false;
                setTimeout(initChecklistAutoSave, 100);
            }
        });
    });
})();

// Fonction pour afficher la modal de confirmation
function showConfirmDialog(title, message, onConfirm) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3>${title}</h3>
            <p>${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);
    
    const cancelBtn = modal.querySelector('.confirm-modal-btn-cancel');
    const confirmBtn = modal.querySelector('.confirm-modal-btn-confirm');
    
    cancelBtn.addEventListener('click', () => {
        modal.remove();
    });
    
    confirmBtn.addEventListener('click', () => {
        modal.remove();
        onConfirm();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

// Fonction pour confirmer la suppression d'un document
function confirmDeleteDocument(documentId, documentName) {
    showConfirmDialog(
        'Supprimer le document',
        `Êtes-vous sûr de vouloir supprimer le document "${documentName}" ?\n\nCette action est irréversible.`,
        () => deleteDocument(documentId)
    );
}

// Fonction pour supprimer un document
function deleteDocument(documentId) {
    const url = '{{ url("/prospects") }}/{{ $prospect->id }}/documents/' + documentId;
    
    fetch(url, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            loadDocuments();
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Une erreur est survenue');
    });
}

// Charger les documents au chargement de la page
if (document.getElementById('documents-tab').classList.contains('active')) {
    loadDocuments();
}

// Recharger les documents quand on change d'onglet
document.querySelectorAll('.tab-item').forEach(tab => {
    tab.addEventListener('click', function() {
        if (this.getAttribute('data-tab') === 'documents') {
            setTimeout(loadDocuments, 100);
        }
    });
});

// Fonction pour changer le statut d'un devis
function toggleDevisStatus(prospectId, devisId, currentStatus) {
    // Basculer entre 'en_attente' et 'traite'
    let newStatus, statusText, statusColor;
    
    if (currentStatus === 'traite') {
        newStatus = 'en_attente';
        statusText = 'En attente';
        statusColor = '#fbbf24';
    } else if (currentStatus === 'en_attente') {
        newStatus = 'traite';
        statusText = 'Traité';
        statusColor = '#6fb87d';
    } else {
        // Si le statut est autre chose (envoye, accepte, etc.), on le remet à 'en_attente'
        newStatus = 'en_attente';
        statusText = 'En attente';
        statusColor = '#fbbf24';
    }
    
    fetch(`/prospects/${prospectId}/devis/${devisId}/status`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            status: newStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Mettre à jour le badge
            const badge = document.querySelector(`[data-devis-id="${devisId}"]`);
            if (badge) {
                badge.setAttribute('data-current-status', newStatus);
                badge.textContent = statusText;
                badge.style.background = statusColor;
            }
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Une erreur est survenue lors de la mise à jour du statut');
    });
}


// Validation du dossier complet depuis la colonne droite (switch)
document.getElementById('dossier_complet_checklist')?.addEventListener('change', function() {
    const isComplete = this.checked;
    
    fetch('{{ route("prospects.update", $prospect->id) }}', {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            dossier_complet: isComplete ? 1 : 0
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Recharger la page pour mettre à jour l'affichage dans l'onglet Général
            setTimeout(() => {
                location.reload();
            }, 500);
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            // Revenir à l'état précédent en cas d'erreur
            this.checked = !isComplete;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Une erreur est survenue');
        // Revenir à l'état précédent en cas d'erreur
        this.checked = !isComplete;
    });
});

// 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("prospects.update", $prospect->id) }}', {
                method: 'PUT',
                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');
                    }
                } 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') {
                e.preventDefault();
                fieldElement.innerHTML = currentText;
                fieldElement.style.border = '1px dashed #cbd5e1';
                fieldElement.style.background = 'transparent';
                fieldElement.style.cursor = 'pointer';
                if (validateBtn) {
                    validateBtn.style.display = 'none';
                }
            }
        });
        
        // Sauvegarder au clic sur le bouton de validation
        if (validateBtn) {
            validateBtn.onclick = (e) => {
                e.stopPropagation();
                saveField();
            };
        }
    });
});

// Gestion des réclamations
let recognition = null;
let isRecording = false;

// Gestion des notes internes
let notesRecognition = null;
let isNotesRecording = false;

// Initialiser la reconnaissance vocale
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    recognition = new SpeechRecognition();
    recognition.lang = 'fr-FR';
    recognition.continuous = true;
    recognition.interimResults = true;
    
    recognition.onresult = function(event) {
        let interimTranscript = '';
        let finalTranscript = '';
        
        for (let i = event.resultIndex; i < event.results.length; i++) {
            const transcript = event.results[i][0].transcript;
            if (event.results[i].isFinal) {
                finalTranscript += transcript + ' ';
            } else {
                interimTranscript += transcript;
            }
        }
        
        const detailsTextarea = document.getElementById('reclamation_details');
        if (detailsTextarea) {
            detailsTextarea.value = detailsTextarea.value + finalTranscript;
        }
    };
    
    recognition.onerror = function(event) {
        console.error('Erreur de reconnaissance vocale:', 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 microphone.');
        } else if (event.error === 'not-allowed') {
            alert('Permission d\'accès au microphone refusée.');
        }
        stopRecording();
    };
    
    recognition.onend = function() {
        if (isRecording) {
            // Relancer automatiquement si on est toujours en mode enregistrement
            try {
                recognition.start();
            } catch (e) {
                console.error('Erreur lors de la relance:', e);
                stopRecording();
            }
        }
    };
    
    // Initialiser la reconnaissance vocale pour les notes internes
    notesRecognition = new SpeechRecognition();
    notesRecognition.lang = 'fr-FR';
    notesRecognition.continuous = true;
    notesRecognition.interimResults = true;
    
    notesRecognition.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;
        }
    };
    
    notesRecognition.onerror = function(event) {
        console.error('Erreur de reconnaissance vocale notes:', 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 microphone.');
        } else if (event.error === 'not-allowed') {
            alert('Permission d\'accès au microphone refusée.');
        }
        stopNotesRecording();
    };
    
    notesRecognition.onend = function() {
        if (isNotesRecording) {
            try {
                notesRecognition.start();
            } catch (e) {
                console.error('Erreur lors de la relance notes:', e);
                stopNotesRecording();
            }
        }
    };
}

// Fonction pour démarrer/arrêter l'enregistrement
function toggleRecording() {
    if (!recognition) {
        alert('La reconnaissance vocale n\'est pas supportée par votre navigateur.');
        return;
    }
    
    if (isRecording) {
        stopRecording();
    } else {
        startRecording();
    }
}

function startRecording() {
    try {
        recognition.start();
        isRecording = true;
        const micButton = document.getElementById('micButton');
        const micButtonText = document.getElementById('micButtonText');
        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 stopRecording() {
    if (recognition && isRecording) {
        recognition.stop();
        isRecording = false;
        const micButton = document.getElementById('micButton');
        const micButtonText = document.getElementById('micButtonText');
        if (micButton) {
            micButton.style.background = '#6fb87d';
            micButtonText.textContent = 'Activer le microphone';
        }
    }
}

// Bouton microphone pour réclamations
document.getElementById('micButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    toggleRecording();
});

// Fonctions pour le microphone des notes internes
function toggleNotesRecording() {
    if (!notesRecognition) {
        alert('La reconnaissance vocale n\'est pas supportée par votre navigateur.');
        return;
    }
    
    if (isNotesRecording) {
        stopNotesRecording();
    } else {
        startNotesRecording();
    }
}

function startNotesRecording() {
    try {
        notesRecognition.start();
        isNotesRecording = 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 notes:', e);
        alert('Impossible de démarrer l\'enregistrement.');
    }
}

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

// Bouton microphone pour notes internes
document.getElementById('notesMicButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    toggleNotesRecording();
});

// Bouton IA pour reformuler
document.getElementById('aiButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    const detailsTextarea = document.getElementById('reclamation_details');
    if (!detailsTextarea || !detailsTextarea.value.trim()) {
        alert('Veuillez d\'abord saisir du texte à reformuler.');
        return;
    }
    
    const originalText = detailsTextarea.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) {
            detailsTextarea.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;
    });
});

// Bouton IA pour reformuler 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;
    });
});

// Reconnaissance vocale pour le mail
let mailRecognition = null;
let isMailRecording = false;

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    mailRecognition = new SpeechRecognition();
    mailRecognition.lang = 'fr-FR';
    mailRecognition.continuous = true;
    mailRecognition.interimResults = false;
    
    mailRecognition.onresult = function(event) {
        const mailBody = document.getElementById('mail_body');
        if (!mailBody) return;
        
        let finalTranscript = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
            if (event.results[i].isFinal) {
                finalTranscript += event.results[i][0].transcript + ' ';
            }
        }
        
        if (finalTranscript.trim()) {
            mailBody.value = (mailBody.value + ' ' + finalTranscript.trim()).trim();
        }
    };
    
    mailRecognition.onerror = function(event) {
        console.error('Erreur reconnaissance vocale mail:', event.error);
        if (event.error === 'no-speech') {
            stopMailRecording();
        }
    };
    
    mailRecognition.onend = function() {
        if (isMailRecording) {
            mailRecognition.start();
        }
    };
}

function toggleMailRecording() {
    if (isMailRecording) {
        stopMailRecording();
    } else {
        startMailRecording();
    }
}

function startMailRecording() {
    if (!mailRecognition) {
        alert('La reconnaissance vocale n\'est pas disponible dans votre navigateur.');
        return;
    }
    
    try {
        mailRecognition.start();
        isMailRecording = true;
        
        const micButton = document.getElementById('mailMicButton');
        const micButtonText = document.getElementById('mailMicButtonText');
        if (micButton) {
            micButton.style.background = '#dc2626';
            if (micButtonText) micButtonText.textContent = 'Arrêter le microphone';
        }
    } catch (error) {
        console.error('Erreur démarrage microphone mail:', error);
        alert('Erreur lors du démarrage du microphone.');
    }
}

function stopMailRecording() {
    if (mailRecognition && isMailRecording) {
        mailRecognition.stop();
        isMailRecording = false;
        
        const micButton = document.getElementById('mailMicButton');
        const micButtonText = document.getElementById('mailMicButtonText');
        if (micButton) {
            micButton.style.background = '#6fb87d';
            if (micButtonText) micButtonText.textContent = 'Activer le microphone';
        }
    }
}

// Bouton microphone pour le mail
document.getElementById('mailMicButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    toggleMailRecording();
});

// Bouton IA pour reformuler le mail de manière professionnelle
document.getElementById('mailAiButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    const mailBody = document.getElementById('mail_body');
    if (!mailBody || !mailBody.value.trim()) {
        alert('Veuillez d\'abord saisir du texte à reformuler.');
        return;
    }
    
    const originalText = mailBody.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,
            context: 'Reformule ce mail de manière professionnelle et polie pour un client. Structure le mail avec des paragraphes clairs, des sauts de ligne appropriés et une mise en forme lisible. Utilise des retours à la ligne pour séparer les idées principales et rendre le texte aéré et facile à lire.'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.reformulated_text) {
            mailBody.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;
    });
});

// Soumission du formulaire de réclamation
// Génération dynamique de l'email selon les cases cochées
function generateMailContent() {
    const refusalCheckboxes = document.querySelectorAll('.mail-refusal-checkbox:checked');
    const missingCheckboxes = document.querySelectorAll('.mail-checkbox:checked');
    const refusalValues = Array.from(refusalCheckboxes).map(cb => cb.value);
    const missingValues = Array.from(missingCheckboxes).map(cb => cb.value);
    
    const mailSubject = document.getElementById('mail_subject');
    const mailBody = document.getElementById('mail_body');
    
    // Si une case de refus est cochée, prioriser celle-ci
    if (refusalValues.length > 0) {
        const refusalTemplate = {
            'aucune_compagnie': {
                subject: 'Suite à votre demande de devis',
                body: `Bonjour,

Je fais suite à votre demande de devis.

Actuellement, aucune de nos compagnies partenaires n'est en mesure de vous assurer compte tenu de vos déclarations.

Merci tout de même pour votre sollicitation.

Cordialement,`
            },
            'deja_meilleure_compagnie': {
                subject: 'Suite à votre demande de devis',
                body: `Bonjour,

Je fais suite à votre demande de devis.

Malheureusement notre compagnie la mieux placée est votre assureur actuel.

De ce fait, je suis au regret de ne pouvoir vous aider d'avantage.

Merci tout de même pour votre sollicitation,

Cordialement,`
            },
            'trop_infos_manquantes': {
                subject: 'Suite à votre demande de devis',
                body: `Bonjour,

Je fais suite à votre demande de devis.

Le formulaire envoyé ne permet pas d'établit une tarification cohérente, trop d'informations sont manquantes.

De ce fait, je vous invite à formuler une nouvelle demande complète via ce lien : bit.ly/DevisMoto

Restant disponible,

Cordialement,`
            },
            'acquisition_trop_lointaine': {
                subject: 'Suite à votre demande de devis',
                body: `Bonjour,

Je vous remercie pour votre intérêt et votre demande de devis.

Compte tenu de la date prévisionnelle d'acquisition du véhicule à + de 3 mois, il nous est impossible de vous proposer une tarification fiable.

La sinistralité du véhicule pouvant évoluer, tout comme les grilles de tarification.

Je vous invite à nous solliciter de nouveau lorsque le projet se rapprochera, et nous étudierons le dossier avec plaisir.

Bien cordialement,`
            },
            'obtention_permis_trop_lointaine': {
                subject: 'Suite à votre demande de devis',
                body: `Bonjour,

Je vous remercie pour votre intérêt et votre demande de devis.

Compte tenu de la date prévisionnelle d'obtention de votre permis, il nous est impossible de vous proposer une tarification fiable.

Je vous invite à nous solliciter de nouveau lorsque le projet se rapprochera, et nous étudierons le dossier avec plaisir.

Bien cordialement,`
            },
            'date_anniversaire_trop_lointaine': {
                subject: 'Suite à votre demande de devis',
                body: `Bonjour,

Je vous remercie pour votre intérêt et votre demande de devis.

Compte tenu de la première date anniversaire de votre contrat à + de 3 mois, il nous est impossible de vous proposer une tarification fiable.

La sinistralité du véhicule pouvant évoluer, tout comme les grilles de tarification.

Je vous invite à nous solliciter de nouveau lorsque cette date se rapprochera, et nous étudierons le dossier avec plaisir.

Bien cordialement,`
            }
        };
        
        // Prendre la première case de refus cochée
        const firstRefusal = refusalValues[0];
        const template = refusalTemplate[firstRefusal];
        
        if (template) {
            mailSubject.value = template.subject;
            mailBody.value = template.body;
            
            // Décocher toutes les cases d'informations manquantes
            missingCheckboxes.forEach(cb => cb.checked = false);
            return;
        }
    }
    
    // Si aucune case de refus n'est cochée, générer le mail pour les informations manquantes
    if (missingValues.length === 0) {
        // Si aucune case n'est cochée, laisser les champs vides
        mailSubject.value = '';
        mailBody.value = '';
        return;
    }
    
    // Si au moins une case est cochée, définir le sujet
    mailSubject.value = 'Demande de devis - Informations complémentaires';
    
    // Générer le corps du mail avec les points correspondants
    const mailTemplate = {
        'modele_vehicule': '• <strong>Merci de nous indiquer le modèle précis du véhicule</strong>',
        'code_postal_ville': '• <strong>Merci de nous indiquer votre adresse postale complète (ville et CP sont manquants)</strong>',
        'details_sinistre': '• <strong>En cas de sinistre responsable, merci de nous indiquer pour chaque sinistre ayant eu lieu au cours des 36 derniers mois :</strong>\n  - Date\n  - Nature\n  - Véhicule impliqué\n  - % de responsabilité',
        'nb_mois_annees_auto': '• <strong>Merci de nous indiquer la durée en mois et années d\'assurance AUTO à votre actif</strong>',
        'nb_mois_annees_moto': '• <strong>Merci de nous indiquer la durée en mois et années d\'assurance DEUX ROUES à votre actif</strong>',
        'date_permis_a2': '• <strong>Merci de nous indiquer la date d\'obtention de votre permis A2</strong>',
        'date_permis_a': '• <strong>Merci de nous indiquer la date d\'obtention de votre permis A</strong>',
        'date_permis_b': '• <strong>Merci de nous indiquer la date d\'obtention de votre permis B</strong>',
        'date_formation_125': '• <strong>Merci de nous indiquer la date d\'obtention de votre formation 125</strong>',
        'sportive': '• <strong>Merci de nous indiquer si vous avez été assuré à minima 24 mois sur les 36 derniers mois en DEUX ROUES</strong>',
        'bonus_auto': '• <strong>Merci de nous indiquer votre coefficient bonus/malus en AUTO</strong>',
        'bonus_moto': '• <strong>Merci de nous indiquer votre coefficient bonus/malus en MOTO</strong>'
    };
    
    // Construire la liste des points à inclure
    const points = missingValues.map(value => mailTemplate[value]).filter(Boolean);
    
    // Construire le corps complet du mail
    const body = `Bonjour,

Je fais suite à votre demande de devis.

Afin d'étudier au mieux le dossier, nous aurions besoin de quelques précisions :

${points.join('\n\n')}

Vous pouvez également nous transmettre vos relevés d'informations d'assurance, sur lesquels figurent ces informations.

Dès réception, je vous communiquerai nos meilleures propositions.

 

Si votre demande est urgente, n'hésitez pas à me recontacter directement au 0646226364.

 

Dans l'attente de votre retour,

Bien cordialement,`;
    
    mailBody.value = body;
    
    // Décocher toutes les cases de refus
    refusalCheckboxes.forEach(cb => cb.checked = false);
}

// Sauvegarde automatique des refus - exactement comme la checklist documents
(function() {
    let isInitialized = false;
    
    function initRefusalAutoSave() {
        const mailForm = document.getElementById('mailForm');
        if (!mailForm) {
            return;
        }
        
        // Si déjà initialisé, ne pas réinitialiser
        if (isInitialized) {
            return;
        }
        
        console.log('Initialisation de la sauvegarde automatique des refus');
        isInitialized = true;
        
        // Utiliser la délégation d'événements sur le formulaire
        mailForm.addEventListener('change', function(e) {
            if (e.target && e.target.classList.contains('mail-refusal-checkbox')) {
                const changedCheckbox = e.target;
                console.log('Checkbox refus changée:', changedCheckbox.value, changedCheckbox.checked);
                
                // Si cette case est cochée, décocher toutes les autres cases de refus ET toutes les cases d'infos manquantes
                if (changedCheckbox.checked) {
                    document.querySelectorAll('.mail-refusal-checkbox').forEach(cb => {
                        if (cb !== changedCheckbox) {
                            cb.checked = false;
                        }
                    });
                    // Décocher toutes les cases d'informations complémentaires
                    document.querySelectorAll('.mail-checkbox').forEach(cb => {
                        cb.checked = false;
                    });
                }
                
                // Générer le contenu du mail
                generateMailContent();
                
                // Construire manuellement les données avec toutes les checkboxes
                const formData = new FormData();
                formData.append('_method', 'PUT');
                formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
                
                // Récupérer toutes les checkboxes de refus du formulaire
                const allRefusalCheckboxes = mailForm.querySelectorAll('input.mail-refusal-checkbox[type="checkbox"]');
                const checkedValues = [];
                
                console.log('Toutes les checkboxes refus trouvées:', allRefusalCheckboxes.length);
                allRefusalCheckboxes.forEach((cb, index) => {
                    console.log(`Checkbox refus ${index}:`, {
                        id: cb.id,
                        value: cb.value,
                        checked: cb.checked
                    });
                    
                    if (cb.checked) {
                        formData.append('refusals[]', cb.value);
                        checkedValues.push(cb.value);
                        console.log('  ✓ Checkbox refus cochée ajoutée:', cb.value);
                    }
                });
                
                console.log('Valeurs refus à envoyer:', checkedValues);
                
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                
                fetch('{{ route("prospects.mail.refusals", $prospect->id) }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken || '',
                        'Accept': 'application/json',
                    },
                    body: formData
                })
                .then(response => {
                    console.log('Status:', response.status);
                    if (!response.ok) {
                        return response.text().then(text => {
                            console.error('Réponse erreur:', text);
                            throw new Error('Erreur serveur: ' + response.status);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Réponse:', data);
                    if (data.success) {
                        console.log('✅ Refus sauvegardés avec succès');
                    } else {
                        console.error('❌ Erreur:', data.message);
                        changedCheckbox.checked = !changedCheckbox.checked;
                        alert('Erreur: ' + (data.message || 'Erreur inconnue'));
                    }
                })
                .catch(error => {
                    console.error('❌ Erreur fetch:', error);
                    changedCheckbox.checked = !changedCheckbox.checked;
                    alert('Erreur: ' + error.message);
                });
            }
            
            // Gestion des checkboxes d'informations complémentaires
            if (e.target && e.target.classList.contains('mail-checkbox')) {
                const changedCheckbox = e.target;
                console.log('Checkbox info manquante changée:', changedCheckbox.value, changedCheckbox.checked);
                
                // Si une case d'info manquante est cochée, décocher toutes les cases de refus
                if (changedCheckbox.checked) {
                    document.querySelectorAll('.mail-refusal-checkbox').forEach(cb => {
                        cb.checked = false;
                    });
                }
                
                // Générer le contenu du mail
                generateMailContent();
                
                // Construire manuellement les données avec toutes les checkboxes
                const formData = new FormData();
                formData.append('_method', 'PUT');
                formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
                
                // Récupérer toutes les checkboxes d'infos manquantes du formulaire
                const allMissingInfoCheckboxes = mailForm.querySelectorAll('input.mail-checkbox[type="checkbox"]');
                const checkedValues = [];
                
                console.log('Toutes les checkboxes infos manquantes trouvées:', allMissingInfoCheckboxes.length);
                allMissingInfoCheckboxes.forEach((cb, index) => {
                    console.log(`Checkbox info manquante ${index}:`, {
                        id: cb.id,
                        value: cb.value,
                        checked: cb.checked
                    });
                    
                    if (cb.checked) {
                        formData.append('missing_info[]', cb.value);
                        checkedValues.push(cb.value);
                        console.log('  ✓ Checkbox info manquante cochée ajoutée:', cb.value);
                    }
                });
                
                console.log('Valeurs infos manquantes à envoyer:', checkedValues);
                
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                
                fetch('{{ route("prospects.mail.missingInfo", $prospect->id) }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken || '',
                        'Accept': 'application/json',
                    },
                    body: formData
                })
                .then(response => {
                    console.log('Status:', response.status);
                    if (!response.ok) {
                        return response.text().then(text => {
                            console.error('Réponse erreur:', text);
                            throw new Error('Erreur serveur: ' + response.status);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Réponse:', data);
                    if (data.success) {
                        console.log('✅ Informations complémentaires sauvegardées avec succès');
                    } else {
                        console.error('❌ Erreur:', data.message);
                        changedCheckbox.checked = !changedCheckbox.checked;
                        alert('Erreur: ' + (data.message || 'Erreur inconnue'));
                    }
                })
                .catch(error => {
                    console.error('❌ Erreur fetch:', error);
                    changedCheckbox.checked = !changedCheckbox.checked;
                    alert('Erreur: ' + error.message);
                });
            }
        });
        
        console.log('✅ Event listener attaché sur le formulaire mail pour les refus');
    }
    
    // Initialiser au chargement
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            initRefusalAutoSave();
            // Générer le contenu du mail si des checkboxes sont déjà cochées au chargement
            setTimeout(generateMailContent, 100);
        });
    } else {
        initRefusalAutoSave();
        // Générer le contenu du mail si des checkboxes sont déjà cochées au chargement
        setTimeout(generateMailContent, 100);
    }
    
    // Réinitialiser quand on change d'onglet vers Mail
    document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
            if (this.getAttribute('data-tab') === 'mail') {
                isInitialized = false;
                setTimeout(function() {
                    initRefusalAutoSave();
                    generateMailContent();
                }, 100);
            }
        });
    });
})();

// Écouter les changements sur les checkboxes d'informations manquantes
document.querySelectorAll('.mail-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        // Si une case de refus est cochée, ne pas générer le contenu pour les informations manquantes
        const refusalChecked = document.querySelectorAll('.mail-refusal-checkbox:checked').length > 0;
        if (!refusalChecked) {
            generateMailContent();
        }
    });
});

// Gestion du formulaire d'envoi d'email
document.getElementById('mailForm')?.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 = 'Envoi en cours...';
    
    fetch('{{ route("prospects.sendMail", $prospect->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 = 'Email envoyé !';
            submitButton.style.background = '#22c55e';
            // Réinitialiser le formulaire mais garder l'email du destinataire
            const emailValue = document.getElementById('mail_to').value;
            this.reset();
            document.getElementById('mail_to').value = emailValue;
            // Décocher toutes les cases
            document.querySelectorAll('.mail-checkbox').forEach(cb => cb.checked = false);
            document.querySelectorAll('.mail-refusal-checkbox').forEach(cb => cb.checked = false);
            
            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\'envoi de l\'email');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

document.getElementById('reclamationForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Arrêter l'enregistrement si actif
    if (isRecording) {
        stopRecording();
    }
    
    const formData = new FormData(this);
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    
    submitButton.disabled = true;
    submitButton.textContent = 'Enregistrement...';
    
    fetch(this.action, {
        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) {
            // Afficher le message de succès
            submitButton.textContent = 'Réclamation enregistrée avec succès !';
            submitButton.style.background = '#6fb87d';
            submitButton.disabled = true;
            
            // Réinitialiser le formulaire
            this.reset();
            
            // Recharger la page après 3 secondes
            setTimeout(() => {
                location.reload();
            }, 3000);
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Une erreur est survenue lors de l\'enregistrement.');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
});

// Arrêter l'enregistrement si on quitte l'onglet
document.querySelectorAll('.tab-item').forEach(tab => {
    tab.addEventListener('click', function() {
        if (this.getAttribute('data-tab') !== 'reclamations' && isRecording) {
            stopRecording();
        }
    });
});

// Supprimer une réclamation
function deleteReclamation(prospectId, reclamationId, reclamationSujet) {
    showConfirmDialog(
        'Supprimer la réclamation',
        `Êtes-vous sûr de vouloir supprimer la réclamation "${reclamationSujet}" ?\n\nCette action est irréversible.`,
        () => {
            fetch(`/portefeuille/${prospectId}/reclamations/${reclamationId}`, {
                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 || 'Une erreur est survenue'));
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                alert('Une erreur est survenue lors de la suppression.');
            });
        }
    );
}
// ========== GESTION ONGLET FIC ==========

// Charger le devis FIC au chargement de la page
// Variable globale pour stocker le devis actuel
let currentFicDevis = null;

function loadFicDevis() {
    return fetch('{{ route("prospects.fic.devis", $prospect->id) }}')
        .then(response => response.json())
        .then(data => {
            const display = document.getElementById('ficDevisDisplay');
            if (data.devis && data.devis.file_path) {
                const fileName = data.devis.file_name || data.devis.name || 'devis.pdf';
                const fileUrl = data.devis.file_path;
                
                // Stocker le devis pour l'utiliser dans les pièces jointes
                currentFicDevis = {
                    name: fileName,
                    file_path: fileUrl
                };
                
                display.innerHTML = `
                    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: center;">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                        </svg>
                        <div style="text-align: center;">
                            <p style="font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">${fileName}</p>
                            <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
                                <a href="${fileUrl}" download="${fileName}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">Télécharger</a>
                                <button type="button" onclick="generateFic()" class="btn" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer;">Générer le FIC</button>
                                <button type="button" onclick="deleteFicDevis()" class="btn" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer;">Supprimer</button>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                currentFicDevis = null;
                display.innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 2rem;">Aucun devis chargé pour le moment</p>';
            }
        })
        .catch(error => {
            console.error('Erreur chargement devis FIC:', error);
            currentFicDevis = null;
        });
}

// Charger le FIC généré
function loadFicGenerated() {
    return fetch('{{ route("prospects.fic.generated", $prospect->id) }}')
        .then(response => response.json())
        .then(data => {
            const display = document.getElementById('ficGeneratedDisplay');
            if (data.fic && data.fic.file_path) {
                // Utiliser la route de téléchargement dédiée
                const downloadUrl = '{{ route("prospects.fic.download", $prospect->id) }}';
                
                display.innerHTML = `
                    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: center;">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                        </svg>
                        <div style="text-align: center;">
                            <p style="font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">FIC généré</p>
                            <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
                                <a href="${downloadUrl}" download="FIC_generated.pdf" target="_blank" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.875rem; text-decoration: none; display: inline-block;">Télécharger</a>
                                <button type="button" onclick="editFic()" class="btn" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer;">Modifier</button>
                                <button type="button" onclick="deleteFicGenerated()" class="btn" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer;">Supprimer</button>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                display.innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1.5rem;">Aucun FIC généré pour le moment</p>';
            }
        })
        .catch(error => {
            console.error('Erreur chargement FIC généré:', error);
        });
}

// Générer le FIC avec OCR
function generateFic() {
    // Vérifier si une génération est déjà en cours
    const display = document.getElementById('ficGeneratedDisplay');
    if (display && display.dataset.generating === 'true') {
        alert('Une génération est déjà en cours. Veuillez patienter...');
        return;
    }
    
    showConfirmDialog(
        'Générer le FIC',
        'Générer le FIC à partir du devis uploadé ?\n\nCette opération peut prendre plusieurs minutes (OCR des premières pages + extraction structurée).',
        () => {
            // Marquer que la génération est en cours
            if (display) {
                display.dataset.generating = 'true';
            }
            
            display.innerHTML = '<div style="text-align: center; padding: 2rem;"><div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #6fb87d; border-radius: 50%; animation: spin 1s linear infinite;"></div><p style="margin-top: 1rem; color: #6b7280;">Génération du FIC en cours...<br/>OCR des premières pages du devis...<br/>Extraction structurée des données...<br/><small style="color: #9ca3af;">Cela peut prendre jusqu\'à 10 minutes selon le nombre de pages.</small></p></div>';
            
            // Créer un AbortController pour gérer le timeout
            // Augmenter le timeout à 10 minutes (600 secondes) pour l'OCR multi-pages
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {
                controller.abort();
                console.log('Timeout atteint après 10 minutes');
                if (display) {
                    display.dataset.generating = 'false';
                }
            }, 600000); // 600 secondes (10 minutes)
            
            fetch('{{ route("prospects.fic.generate", $prospect->id) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Accept': 'application/json'
                },
                signal: controller.signal
            })
            .then(async response => {
                clearTimeout(timeoutId);
                let errorData = null;
                try {
                    errorData = await response.json();
                } catch (e) {
                    // Si la réponse n'est pas du JSON, on utilise le texte brut
                }
                
                if (!response.ok) {
                    const errorMessage = errorData?.message || `Erreur ${response.status}: ${response.statusText}`;
                    throw new Error(errorMessage);
                }
                return errorData || response.json();
            })
            .then(data => {
                if (data.success) {
                    loadFicGenerated();
                } else {
                    display.innerHTML = '<p style="color: #ef4444; text-align: center; padding: 2rem;">Erreur : ' + (data.message || 'Une erreur est survenue lors de la génération') + '</p>';
                    loadFicGenerated();
                }
            })
            .catch(error => {
                clearTimeout(timeoutId);
                console.error('Erreur détaillée:', error);
                if (error.name === 'AbortError' || error.message === 'signal is aborted without reason') {
                    display.innerHTML = '<div style="color: #ef4444; text-align: center; padding: 2rem;"><p><strong>⏱️ Délai d\'attente dépassé</strong></p><p style="font-size: 0.875rem; margin-top: 0.5rem;">L\'OCR multi-pages prend du temps. La génération continue en arrière-plan.<br/>Veuillez patienter quelques instants puis rafraîchir la page.</p><p style="margin-top: 1rem;"><button onclick="loadFicGenerated()" style="padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer;">Vérifier le statut</button></p></div>';
                } else {
                    const errorMsg = error.message || 'Erreur réseau';
                    display.innerHTML = '<p style="color: #ef4444; text-align: center; padding: 2rem;">Une erreur est survenue lors de la génération du FIC : ' + errorMsg + '</p>';
                    loadFicGenerated();
                }
            });
        }
    );
}

// Éditer le FIC - Ouvrir l'éditeur dans une modale
function editFic() {
    // Charger les données du FIC généré
    fetch('{{ route("prospects.fic.generated", $prospect->id) }}')
        .then(response => response.json())
        .then(data => {
            if (data.success && data.fic) {
                openFicEditorModal(data.fic);
            } else {
                alert('Aucun FIC généré trouvé. Veuillez d\'abord générer le FIC.');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            alert('Erreur lors du chargement du FIC');
        });
}

// Ouvrir la modale d'édition FIC
function openFicEditorModal(ficData) {
    const modal = document.getElementById('ficEditorModal');
    const modalContent = document.getElementById('ficEditorModalContent');
    
    // Afficher la modale
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    
    // Charger le PDF dans l'iframe
    const pdfFrame = document.getElementById('ficEditorPdfFrame');
    // Utiliser directement l'URL du storage (qui ne passe pas par le middleware SecurityHeaders)
    let pdfUrl = ficData.file_path;
    
    // Convertir l'URL en chemin relatif vers le storage
    if (pdfUrl.startsWith('http')) {
        try {
            const url = new URL(pdfUrl);
            // Extraire le chemin après /storage/
            const storageIndex = url.pathname.indexOf('/storage/');
            if (storageIndex !== -1) {
                pdfUrl = url.pathname.substring(storageIndex);
            } else {
                // Si pas de /storage/, essayer de trouver le chemin du fichier
                // Le chemin devrait être quelque chose comme /storage/prospects/3/fic/...
                const pathParts = url.pathname.split('/');
                const storagePart = pathParts.indexOf('storage');
                if (storagePart !== -1 && storagePart < pathParts.length - 1) {
                    pdfUrl = '/storage/' + pathParts.slice(storagePart + 1).join('/');
                } else {
                    pdfUrl = url.pathname;
                }
            }
        } catch (e) {
            console.error('Erreur parsing URL:', e);
            // Si erreur, essayer de construire l'URL depuis le file_path stocké
            pdfUrl = '/storage/' + ficData.file_path.replace(/^storage\//, '');
        }
    } else if (!pdfUrl.startsWith('/storage/')) {
        // Si c'est un chemin relatif sans /storage/, l'ajouter
        if (pdfUrl.startsWith('/')) {
            pdfUrl = '/storage' + pdfUrl;
        } else {
            pdfUrl = '/storage/' + pdfUrl;
        }
    }
    
    console.log('Chargement PDF:', pdfUrl);
    pdfFrame.src = pdfUrl + '#toolbar=1';
    
    // Afficher les données OCR
    displayOcrDataInModal(ficData.extracted_data);
    
    // Charger le devis
    loadDevisInModal();
}

// Basculer entre les onglets OCR et Devis
function switchFicEditorTab(tab) {
    const ocrTab = document.getElementById('ficEditorTabOcr');
    const devisTab = document.getElementById('ficEditorTabDevis');
    const ocrContent = document.getElementById('ficEditorOcrTab');
    const devisContent = document.getElementById('ficEditorDevisTab');
    
    if (tab === 'ocr') {
        ocrTab.classList.add('active');
        ocrTab.style.background = '#6fb87d';
        ocrTab.style.color = 'white';
        devisTab.classList.remove('active');
        devisTab.style.background = '#e5e7eb';
        devisTab.style.color = '#6b7280';
        ocrContent.style.display = 'block';
        devisContent.style.display = 'none';
    } else {
        devisTab.classList.add('active');
        devisTab.style.background = '#6fb87d';
        devisTab.style.color = 'white';
        ocrTab.classList.remove('active');
        ocrTab.style.background = '#e5e7eb';
        ocrTab.style.color = '#6b7280';
        ocrContent.style.display = 'none';
        devisContent.style.display = 'block';
    }
}

// Charger le devis dans la modale
function loadDevisInModal() {
    fetch('{{ route("prospects.fic.devis", $prospect->id) }}')
        .then(response => response.json())
        .then(data => {
            const devisFrame = document.getElementById('ficEditorDevisFrame');
            if (data.success && data.devis && data.devis.file_path) {
                let devisUrl = data.devis.file_path;
                
                // Convertir l'URL en chemin relatif vers le storage
                if (devisUrl.startsWith('http')) {
                    try {
                        const url = new URL(devisUrl);
                        const storageIndex = url.pathname.indexOf('/storage/');
                        if (storageIndex !== -1) {
                            devisUrl = url.pathname.substring(storageIndex);
                        } else {
                            devisUrl = url.pathname;
                        }
                    } catch (e) {
                        devisUrl = '/storage/' + data.devis.file_path.replace(/^storage\//, '');
                    }
                } else if (!devisUrl.startsWith('/storage/')) {
                    if (devisUrl.startsWith('/')) {
                        devisUrl = '/storage' + devisUrl;
                    } else {
                        devisUrl = '/storage/' + devisUrl;
                    }
                }
                
                devisFrame.src = devisUrl + '#toolbar=1';
            } else {
                devisFrame.src = 'about:blank';
                const devisContent = document.getElementById('ficEditorDevisTab');
                devisContent.innerHTML = '<div style="padding: 2rem; text-align: center; color: #9ca3af;"><p>Aucun devis chargé</p></div>';
            }
        })
        .catch(error => {
            console.error('Erreur chargement devis:', error);
            const devisFrame = document.getElementById('ficEditorDevisFrame');
            devisFrame.src = 'about:blank';
        });
}

// Fermer la modale d'édition FIC
function closeFicEditorModal() {
    const modal = document.getElementById('ficEditorModal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Afficher les données OCR dans la modale dans l'ordre spécifique demandé
function displayOcrDataInModal(extractedData) {
    const container = document.getElementById('ficEditorOcrList');
    container.innerHTML = '';
    
    if (!extractedData) {
        container.innerHTML = '<p style="color: #9ca3af; text-align: center; padding: 1rem;">Aucune donnée OCR disponible</p>';
        return;
    }
    
    // Ordre d'affichage EXACT demandé - TOUJOURS afficher tous les champs même s'ils sont vides
    const displayOrder = [
        // 1. Nom & Prénom (combinaison de prenom + nom)
        { label: 'Nom & Prénom', getValue: () => {
            const prenom = extractedData.assure?.prenom || '';
            const nom = extractedData.assure?.nom || '';
            return (prenom + ' ' + nom).trim() || '';
        }},
        // 2. Adresse (combinaison de adresse + code_postal + ville)
        { label: 'Adresse', getValue: () => {
            const adresse = extractedData.assure?.adresse || '';
            const codePostal = extractedData.assure?.code_postal || '';
            const ville = extractedData.assure?.ville || '';
            return [adresse, codePostal, ville].filter(v => v).join(' ').trim() || '';
        }},
        // 3. CRM Auto
        { label: 'CRM Auto', getValue: () => extractedData.crm?.crm_auto || '' },
        // 4. CRM Moto
        { label: 'CRM Moto', getValue: () => extractedData.crm?.crm_moto || '' },
        // 5. Date permis B
        { label: 'Date permis B', getValue: () => extractedData.permis?.date_permis_b || '' },
        // 6. Date Permis A2
        { label: 'Date Permis A2', getValue: () => extractedData.permis?.permis_a2 || '' },
        // 7. Date Permis A
        { label: 'Date Permis A', getValue: () => extractedData.permis?.permis_a || '' },
        // 8. Marque du véhicule
        { label: 'Marque du véhicule', getValue: () => extractedData.vehicule?.marque || '' },
        // 9. Cylindrée du véhicule
        { label: 'Cylindrée du véhicule', getValue: () => extractedData.vehicule?.cylindree || '' },
        // 10. Modèle du véhicule
        { label: 'Modèle du véhicule', getValue: () => extractedData.vehicule?.modele || '' },
        // 11. Première mise en circulation du véhicule
        { label: 'Première mise en circulation du véhicule', getValue: () => extractedData.vehicule?.date_mise_en_circulation || '' },
        // 12. Date d'acquisition du véhicule
        { label: 'Date d\'acquisition du véhicule', getValue: () => extractedData.vehicule?.date_acquisition || '' },
        // 13. Immatriculation du véhicule
        { label: 'Immatriculation du véhicule', getValue: () => extractedData.vehicule?.immatriculation || '' },
        // 14. Usage du véhicule
        { label: 'Usage du véhicule', getValue: () => extractedData.vehicule?.usage || '' },
        // 15. Formule retenue des garanties
        { label: 'Formule retenue des garanties', getValue: () => extractedData.garanties?.formule || '' },
        // 16. Options retenues des garanties
        { label: 'Options retenues des garanties', getValue: () => extractedData.garanties?.options_retenues || '' },
        // 17. Ancien assureur
        { label: 'Ancien assureur', getValue: () => extractedData.ancien_assureur?.nom || '' },
        // 18. depuis le (il est assuré chez l'ancien assureur)
        { label: 'depuis le (il est assuré chez l\'ancien assureur)', getValue: () => extractedData.ancien_assureur?.depuis_le || '' },
        // 19. Assureur choisi
        { label: 'Assureur choisi', getValue: () => extractedData.assureur?.nom || '' },
        // 20. Produit choisi
        { label: 'Produit choisi', getValue: () => extractedData.assureur?.produit || '' },
        // 21. Justification du choix choisi
        { label: 'Justification du choix choisi', getValue: () => extractedData.assureur?.justification || '' }
    ];
    
    // Afficher TOUS les champs dans l'ordre, même s'ils sont vides
    displayOrder.forEach(({ label, getValue }) => {
        const value = getValue();
        const item = createOcrItemForModal(label, value);
        container.appendChild(item);
    });
}

// Créer un élément OCR avec bouton copier pour la modale
function createOcrItemForModal(label, value) {
    const item = document.createElement('div');
    item.style.cssText = 'background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;';
    
    const labelDiv = document.createElement('div');
    labelDiv.style.cssText = 'font-size: 0.75rem; font-weight: 600; color: #6b7280;';
    labelDiv.textContent = label + ' :';
    
    const valueDiv = document.createElement('div');
    valueDiv.style.cssText = 'font-size: 0.875rem; color: #1f2937; word-break: break-word; padding: 0.5rem; background: white; border: 1px solid #e5e7eb; border-radius: 4px; min-height: 2rem;';
    valueDiv.textContent = value || '(vide)';
    if (!value || value.trim() === '') {
        valueDiv.style.color = '#9ca3af';
        valueDiv.style.fontStyle = 'italic';
    }
    
    const copyButton = document.createElement('button');
    copyButton.style.cssText = 'padding: 0.5rem 1rem; background: #6fb87d; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; align-self: flex-start; display: flex; align-items: center; gap: 0.5rem;';
    copyButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copier';
    copyButton.onmouseover = function() { this.style.background = '#5ea66d'; };
    copyButton.onmouseout = function() { this.style.background = '#6fb87d'; };
    copyButton.onclick = function() {
        const textToCopy = value || '';
        if (!textToCopy || textToCopy.trim() === '') {
            alert('Aucune valeur à copier');
            return;
        }
        navigator.clipboard.writeText(textToCopy).then(() => {
            const originalHTML = copyButton.innerHTML;
            copyButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copié';
            copyButton.style.background = '#10b981';
            setTimeout(() => {
                copyButton.innerHTML = originalHTML;
                copyButton.style.background = '#6fb87d';
            }, 2000);
        }).catch(err => {
            console.error('Erreur lors de la copie:', err);
            alert('Erreur lors de la copie dans le presse-papiers');
        });
    };
    
    item.appendChild(labelDiv);
    item.appendChild(valueDiv);
    item.appendChild(copyButton);
    
    return item;
}

// Formater le label OCR
function formatOcrLabel(key) {
    const labels = {
        'prenom': 'Prénom',
        'nom': 'Nom',
        'date_naissance': 'Date de naissance',
        'adresse': 'Adresse',
        'code_postal': 'Code postal',
        'ville': 'Ville',
        'telephone': 'Téléphone',
        'email': 'Email',
        'marque': 'Marque',
        'modele': 'Modèle',
        'immatriculation': 'Immatriculation',
        'date_mise_en_circulation': 'Date mise en circulation',
        'cylindree': 'Cylindrée',
        'date_acquisition': 'Date d\'acquisition',
        'usage': 'Usage',
        'formule': 'Formule',
        'montant_prime': 'Montant prime',
        'franchise': 'Franchise',
        'options_retenues': 'Options retenues',
        'date_debut': 'Date début',
        'date_fin': 'Date fin',
        'date_effet': 'Date effet',
        'date_permis_b': 'Date permis B',
        'permis_a': 'Permis A',
        'permis_a2': 'Permis A2',
        'crm_auto': 'CRM Auto',
        'crm_moto': 'CRM Moto',
        'depuis_le': 'Depuis le',
        'produit': 'Produit'
    };
    
    return labels[key] || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
}

// Télécharger le FIC depuis la modale
function downloadFicFromModal() {
    const downloadUrl = '{{ route("prospects.fic.download", $prospect->id) }}';
    window.open(downloadUrl, '_blank');
}

// Sauvegarder le FIC modifié depuis la modale
async function saveFicFromModal() {
    const saveButton = document.getElementById('ficEditorSaveButton');
    const originalText = saveButton.innerHTML;
    
    try {
        saveButton.disabled = true;
        saveButton.innerHTML = 'Enregistrement...';
        
        // Récupérer l'URL du PDF depuis l'iframe
        const iframe = document.getElementById('ficEditorPdfFrame');
        let pdfUrl = iframe.src.split('#')[0];
        
        // Si l'URL est relative, la rendre absolue
        if (!pdfUrl.startsWith('http')) {
            pdfUrl = window.location.origin + pdfUrl;
        }
        
        // Charger le PDF actuel depuis l'URL
        const response = await fetch(pdfUrl);
        if (!response.ok) {
            throw new Error('Impossible de charger le PDF');
        }
        
        const pdfBlob = await response.blob();
        
        // Créer un FormData pour envoyer le PDF
        const formData = new FormData();
        formData.append('pdf', pdfBlob, 'fic_modified.pdf');
        
        // Envoyer au serveur
        const saveResponse = await fetch('{{ route("prospects.fic.save", $prospect->id) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            },
            body: formData
        });
        
        if (!saveResponse.ok) {
            const errorData = await saveResponse.json().catch(() => ({ message: 'Erreur serveur' }));
            throw new Error(errorData.message || 'Erreur lors de la sauvegarde');
        }
        
        const result = await saveResponse.json();
        
        if (result.success) {
            // Afficher un message de succès
            alert('Le FIC a été enregistré avec succès !');
            
            // Fermer la modale
            closeFicEditorModal();
            
            // Recharger le FIC généré pour mettre à jour l'affichage
            loadFicGenerated();
        } else {
            throw new Error(result.message || 'Erreur lors de la sauvegarde');
        }
    } catch (error) {
        console.error('Erreur:', error);
        alert('Erreur lors de la sauvegarde : ' + error.message);
    } finally {
        saveButton.disabled = false;
        saveButton.innerHTML = originalText;
    }
}

// Supprimer le FIC généré
function deleteFicGenerated() {
    showConfirmDialog(
        'Supprimer le FIC',
        'Êtes-vous sûr de vouloir supprimer ce FIC généré ?',
        () => {
            fetch('{{ route("prospects.fic.generated.delete", $prospect->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) {
                    loadFicGenerated();
                } else {
                    alert('Erreur : ' + (data.message || 'Une erreur est survenue lors de la suppression'));
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                alert('Une erreur est survenue lors de la suppression du FIC');
            });
        }
    );
}

// Fonction pour supprimer le devis FIC
function deleteFicDevis() {
    showConfirmDialog(
        'Supprimer le devis',
        'Êtes-vous sûr de vouloir supprimer ce devis ?\n\nCette action est irréversible.',
        () => {
            fetch('{{ route("prospects.fic.devis.delete", $prospect->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) {
                    currentFicDevis = null;
                    loadFicDevis().then(() => {
                        // Mettre à jour les pièces jointes après suppression
                        const selectedPack = document.querySelector('input.fic-pack-checkbox:checked');
                        if (selectedPack) {
                            updateFicAttachments(selectedPack.value);
                        } else {
                            updateFicAttachments(null);
                        }
                    });
                } else {
                    alert('Erreur : ' + (data.message || 'Une erreur est survenue'));
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                alert('Une erreur est survenue lors de la suppression');
            });
        }
    );
}

// Gestion upload devis FIC
const ficUploadZone = document.getElementById('ficUploadZone');
const ficDevisInput = document.getElementById('ficDevis');
const ficUploadForm = document.getElementById('ficUploadForm');

if (ficUploadZone && ficDevisInput) {
    ficUploadZone.addEventListener('click', function(e) {
        if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'INPUT') {
            ficDevisInput.click();
        }
    });
    
    ficUploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        ficUploadZone.classList.add('drag-over');
    });
    
    ficUploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        ficUploadZone.classList.remove('drag-over');
    });
    
    ficUploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        ficUploadZone.classList.remove('drag-over');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            ficDevisInput.files = files;
            handleFicDevisUpload();
        }
    });
    
    ficDevisInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            handleFicDevisUpload();
        }
    });
}

function handleFicDevisUpload() {
    const formData = new FormData(ficUploadForm);
    const uploadProgress = document.getElementById('ficUploadProgress');
    const uploadZoneContent = document.getElementById('ficUploadZoneContent');
    const progressBar = document.getElementById('ficProgressBar');
    
    uploadZoneContent.style.display = 'none';
    uploadProgress.style.display = 'block';
    progressBar.style.width = '0%';
    
    fetch(ficUploadForm.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
        }
    })
    .then(response => response.json())
    .then(data => {
        progressBar.style.width = '100%';
        setTimeout(() => {
            uploadProgress.style.display = 'none';
            uploadZoneContent.style.display = 'block';
            progressBar.style.width = '0%';
            
            if (data.success) {
                loadFicDevis().then(() => {
                    // Après le chargement du devis, mettre à jour les pièces jointes avec le pack sélectionné
                    const selectedPack = document.querySelector('input.fic-pack-checkbox:checked');
                    if (selectedPack) {
                        updateFicAttachments(selectedPack.value);
                    } else {
                        updateFicAttachments(null);
                    }
                });
                // Charger le FIC généré s'il existe
                loadFicGenerated();
                ficDevisInput.value = '';
            } else {
                alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            }
        }, 500);
    })
    .catch(error => {
        console.error('Erreur:', error);
        uploadProgress.style.display = 'none';
        uploadZoneContent.style.display = 'block';
        progressBar.style.width = '0%';
        alert('Une erreur est survenue lors de l\'upload');
    });
}

// Templates de mail par pack
const ficPackMailTemplates = {
    'xenassur': {
        subject: 'Suite à votre demande de devis',
        body: `Bonjour,

Je fais suite à votre demande de devis.

Vous trouverez la proposition en PJ, en formule TOUS RISQUES à X€/mois avec :

- Assistance 0km (AST)
- Protection corporelle conducteur plafond 300.000€ (IP1)
- Accessoires et équipements plafond 1.000€ (AC1)

Il s'agit d'un premier devis estimatif, qui devra être confirmé via les pièces justificatives suivantes :

- Pièce d'identité
- Copie de permis
- Relevés d'informations d'assurance AUTO et MOTO sur les 36 derniers mois
- Copie de carte grise
- Copie de RIB

Restant à votre entière disposition,

Bien cordialement,`
    },
    'solly_azar': {
        subject: 'Suite à votre demande de devis',
        body: `Bonjour,

Je fais suite à votre demande de devis.

Vous trouverez la proposition en PJ, en formule TOUS RISQUES à X€/mois avec :

- Protection corporelle conducteur 
- Assistance 0km
- Accessoires et équipements plafond 2000€

Il s'agit d'un premier devis estimatif, qui devra être confirmé via les pièces justificatives suivantes :

- Pièce d'identité
- Copie de permis
- Relevés d'informations d'assurance AUTO et MOTO sur les 36 derniers mois
- Copie de carte grise
- Copie de RIB

Restant à votre entière disposition,

Bien cordialement,`
    },
    'amdm': {
        subject: 'Suite à votre demande de devis',
        body: `Bonjour,

Je fais suite à votre demande de devis.

Vous trouverez la proposition en PJ, en formule TOUS RISQUES à X€/mois, avec :

- Protection corporelle (inclus)
- Assistance 0km (inclus)
- Equipement pilote plafond 1000€ (inclus)

Il s'agit d'un premier devis estimatif, qui devra être confirmé via les pièces justificatives suivantes :

- Copie de permis
- Pièce d'identité
- Copie de carte grise 
- Relevé d'informations d'assurance AUTO et MOTO sur les 24 derniers mois
- Copie de RIB

Restant à votre entière disposition,

Bien cordialement,`
    },
    'april_moto': {
        subject: 'Suite à votre demande de devis',
        body: `Bonjour,

Je fais suite à votre demande de devis.

Vous trouverez la proposition en PJ, en formule TOUS RISQUES à X€/mois avec :

- Protection corporelle conducteur 
- Assistance 0km
- Accessoires et équipements plafond 2000€

Il s'agit d'un premier devis estimatif, qui devra être confirmé via les pièces justificatives suivantes :

- Pièce d'identité
- Copie de permis
- Relevés d'informations d'assurance AUTO et MOTO sur les 24 derniers mois
- Copie de carte grise
- Copie de RIB

Restant à votre entière disposition,

Bien cordialement,`
    }
};

// Mapping des pièces jointes par pack
const ficPackAttachments = {
    'april_moto': [
        { name: 'ADHESION Bumper Assurances.pdf', folder: 'APRIL', filename: 'ADHESION Bumper Assurances.pdf' },
        { name: 'APRIL - DG MOTO.pdf', folder: 'APRIL', filename: 'APRIL - DG MOTO.pdf' },
        { name: 'APRIL - DIPA MOTO.pdf', folder: 'APRIL', filename: 'APRIL - DIPA MOTO.pdf' },
        { name: 'DER 2026 - Bumper Assurances.pdf', folder: 'APRIL', filename: 'DER 2026 - Bumper Assurances.pdf' }
    ],
    'amdm': [
        { name: 'AMDM - DG MOTO.pdf', folder: 'AMD', filename: 'AMDM - DG MOTO.pdf' },
        { name: 'AMDM - DIPA MOTO.pdf', folder: 'AMD', filename: 'AMDM - DIPA MOTO.pdf' },
        { name: 'DER 2026 - Bumper Assurances.pdf', folder: 'AMD', filename: 'DER 2026 - Bumper Assurances.pdf' }
    ],
    'solly_azar': [
        { name: 'ADHESION Bumper Assurances.pdf', folder: 'SOLLY', filename: 'ADHESION Bumper Assurances.pdf' },
        { name: 'SOLLY AZAR - DG MOTO.pdf', folder: 'SOLLY', filename: 'SOLLY AZAR - DG MOTO.pdf' },
        { name: 'SOLLY AZAR - DIPA MOTO.pdf', folder: 'SOLLY', filename: 'SOLLY AZAR - DIPA MOTO.pdf' },
        { name: 'DER 2026 - Bumper Assurances.pdf', folder: 'SOLLY', filename: 'DER 2026 - Bumper Assurances.pdf' }
    ],
    'xenassur': [
        { name: 'ADHESION Bumper Assurances.pdf', folder: 'XENASSUR', filename: 'ADHESION Bumper Assurances.pdf' },
        { name: 'XENASSUR - DG MOTO.pdf', folder: 'XENASSUR', filename: 'XENASSUR - DG MOTO.pdf' },
        { name: 'XENASSUR - DIPA MOTO.pdf', folder: 'XENASSUR', filename: 'XENASSUR - DIPA MOTO.pdf' },
        { name: 'DER 2026 - Bumper Assurances.pdf', folder: 'XENASSUR', filename: 'DER 2026 - Bumper Assurances.pdf' }
    ]
};

// Fonction pour afficher les pièces jointes
function updateFicAttachments(packType) {
    const attachmentsBox = document.getElementById('ficAttachmentsBox');
    const attachmentsList = document.getElementById('ficAttachmentsList');
    
    if (!attachmentsBox || !attachmentsList) return;
    
    attachmentsList.innerHTML = '';
    let hasAttachments = false;
    
    // Ajouter le devis en premier s'il existe
    if (currentFicDevis && currentFicDevis.file_path) {
        hasAttachments = true;
        const devisItem = document.createElement('div');
        devisItem.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;';
        
        devisItem.innerHTML = `
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d; flex-shrink: 0;">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
            </svg>
            <span style="font-size: 0.875rem; color: #1f2937; flex: 1; font-weight: 600;">${currentFicDevis.name}</span>
            <a href="${currentFicDevis.file_path}" download="${currentFicDevis.name}" target="_blank" style="display: flex; align-items: center; justify-content: center; padding: 0.375rem; background: transparent; border: 1px solid #6fb87d; border-radius: 4px; cursor: pointer; transition: all 0.2s; color: #6fb87d; text-decoration: none;" onmouseover="this.style.background='#6fb87d'; this.style.color='white';" onmouseout="this.style.background='transparent'; this.style.color='#6fb87d';" title="Télécharger">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <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>
            </a>
        `;
        attachmentsList.appendChild(devisItem);
    }
    
    // Ajouter les pièces jointes du pack sélectionné
    if (packType && ficPackAttachments[packType]) {
        hasAttachments = true;
        ficPackAttachments[packType].forEach(attachment => {
            const attachmentItem = document.createElement('div');
            attachmentItem.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;';
            
            // Construire l'URL de téléchargement
            const downloadUrl = '{{ route("fic.attachments.download", ["folder" => "FOLDER", "filename" => "FILENAME"]) }}'
                .replace('FOLDER', attachment.folder)
                .replace('FILENAME', encodeURIComponent(attachment.filename));
            
            attachmentItem.innerHTML = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d; flex-shrink: 0;">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                </svg>
                <span style="font-size: 0.875rem; color: #1f2937; flex: 1;">${attachment.name}</span>
                <a href="${downloadUrl}" download="${attachment.name}" target="_blank" style="display: flex; align-items: center; justify-content: center; padding: 0.375rem; background: transparent; border: 1px solid #6fb87d; border-radius: 4px; cursor: pointer; transition: all 0.2s; color: #6fb87d; text-decoration: none;" onmouseover="this.style.background='#6fb87d'; this.style.color='white';" onmouseout="this.style.background='transparent'; this.style.color='#6fb87d';" title="Télécharger">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <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>
                </a>
            `;
            attachmentsList.appendChild(attachmentItem);
        });
    }
    
    // Afficher ou masquer la boîte selon s'il y a des pièces jointes
    if (hasAttachments) {
        attachmentsBox.style.display = 'block';
    } else {
        attachmentsBox.style.display = 'none';
    }
}

// Fonction pour générer le mail selon le pack sélectionné
function generateFicMailFromPack(packType) {
    const template = ficPackMailTemplates[packType];
    if (!template) return;
    
    const subjectInput = document.getElementById('fic_mail_subject');
    const bodyTextarea = document.getElementById('fic_mail_body');
    
    if (subjectInput) {
        subjectInput.value = template.subject;
    }
    
    if (bodyTextarea) {
        bodyTextarea.value = template.body;
    }
    
    // Mettre à jour les pièces jointes
    updateFicAttachments(packType);
}

// Sauvegarde automatique des packs FIC
(function() {
    let isInitialized = false;
    
    function initFicPackAutoSave() {
        const form = document.getElementById('ficPackForm');
        if (!form || isInitialized) return;
        
        isInitialized = true;
        form.addEventListener('change', function(e) {
            if (e.target && e.target.classList.contains('fic-pack-checkbox')) {
                const clickedCheckbox = e.target;
                
                // Si une checkbox est cochée, décocher les autres (comportement radio)
                if (clickedCheckbox.checked) {
                    const allCheckboxes = form.querySelectorAll('input.fic-pack-checkbox[type="checkbox"]');
                    allCheckboxes.forEach(cb => {
                        if (cb !== clickedCheckbox) {
                            cb.checked = false;
                        }
                    });
                    
                    // Générer le mail selon le pack sélectionné
                    generateFicMailFromPack(clickedCheckbox.value);
                } else {
                    // Si la checkbox est décochée, vider le mail et masquer les pièces jointes
                    const subjectInput = document.getElementById('fic_mail_subject');
                    const bodyTextarea = document.getElementById('fic_mail_body');
                    if (subjectInput) subjectInput.value = '';
                    if (bodyTextarea) bodyTextarea.value = '';
                    updateFicAttachments(null);
                }
                
                // Sauvegarder les packs
                const formData = new FormData();
                formData.append('_method', 'PUT');
                formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
                
                const allCheckboxes = form.querySelectorAll('input.fic-pack-checkbox[type="checkbox"]');
                allCheckboxes.forEach(cb => {
                    if (cb.checked) {
                        formData.append('packs[]', cb.value);
                    }
                });
                
                fetch(form.action, {
                    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) {
                        console.error('Erreur sauvegarde packs FIC:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Erreur sauvegarde packs FIC:', error);
                });
            }
        });
        
        // Charger le devis et générer le mail si un pack est déjà sélectionné au chargement
        loadFicDevis().then(() => {
            const checkedPack = form.querySelector('input.fic-pack-checkbox[type="checkbox"]:checked');
            if (checkedPack) {
                generateFicMailFromPack(checkedPack.value);
            } else {
                updateFicAttachments(null);
            }
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initFicPackAutoSave);
    } else {
        initFicPackAutoSave();
    }
    
    // Réinitialiser quand on change d'onglet vers FIC
    document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
            if (this.getAttribute('data-tab') === 'fic') {
                isInitialized = false;
                setTimeout(initFicPackAutoSave, 100);
                // Charger le devis et mettre à jour les pièces jointes
                loadFicDevis().then(() => {
                    // Après le chargement du devis, mettre à jour les pièces jointes avec le pack sélectionné
                    const selectedPack = document.querySelector('input.fic-pack-checkbox:checked');
                    if (selectedPack) {
                        updateFicAttachments(selectedPack.value);
                    } else {
                        updateFicAttachments(null);
                    }
                    // Charger le FIC généré s'il existe
                    loadFicGenerated();
                });
            }
        });
    });
    
    // Charger le devis au chargement initial si on est sur l'onglet FIC
    if (document.querySelector('.tab-item[data-tab="fic"]')?.classList.contains('active')) {
        loadFicDevis().then(() => {
            const selectedPack = document.querySelector('input.fic-pack-checkbox:checked');
            if (selectedPack) {
                updateFicAttachments(selectedPack.value);
            } else {
                updateFicAttachments(null);
            }
            // Charger le FIC généré s'il existe
            loadFicGenerated();
        });
    }
})();

// Reconnaissance vocale pour le mail FIC
let ficMailRecognition = null;
let isFicMailRecording = false;

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    ficMailRecognition = new (window.webkitSpeechRecognition || window.SpeechRecognition)();
    ficMailRecognition.lang = 'fr-FR';
    ficMailRecognition.continuous = true;
    ficMailRecognition.interimResults = true;
    
    let ficMailBaseText = '';
    
    ficMailRecognition.onresult = function(event) {
        let interimTranscript = '';
        let finalTranscript = '';
        
        for (let i = event.resultIndex; i < event.results.length; i++) {
            const transcript = event.results[i][0].transcript;
            if (event.results[i].isFinal) {
                finalTranscript += transcript + ' ';
            } else {
                interimTranscript += transcript;
            }
        }
        
        const mailBody = document.getElementById('fic_mail_body');
        if (mailBody) {
            mailBody.value = ficMailBaseText + finalTranscript + interimTranscript;
        }
    };
    
    ficMailRecognition.onend = function() {
        if (isFicMailRecording) {
            ficMailRecognition.start();
        }
    };
    
    ficMailRecognition.onerror = function(event) {
        console.error('Erreur reconnaissance vocale mail FIC:', event.error);
        if (event.error === 'no-speech') {
            alert('Aucune parole détectée. Veuillez réessayer.');
        }
    };
}

function toggleFicMailRecording() {
    if (!ficMailRecognition) {
        alert('La reconnaissance vocale n\'est pas disponible dans votre navigateur.');
        return;
    }
    
    const mailBody = document.getElementById('fic_mail_body');
    if (!mailBody) return;
    
    if (isFicMailRecording) {
        ficMailRecognition.stop();
        isFicMailRecording = false;
        const micButton = document.getElementById('ficMailMicButton');
        const micButtonText = document.getElementById('ficMailMicButtonText');
        if (micButton) {
            micButton.style.background = '#6fb87d';
        }
        if (micButtonText) {
            micButtonText.textContent = 'Activer le microphone';
        }
    } else {
        ficMailBaseText = mailBody.value;
        ficMailRecognition.start();
        isFicMailRecording = true;
        const micButton = document.getElementById('ficMailMicButton');
        const micButtonText = document.getElementById('ficMailMicButtonText');
        if (micButton) {
            micButton.style.background = '#ef4444';
        }
        if (micButtonText) {
            micButtonText.textContent = 'Arrêter l\'enregistrement';
        }
    }
}

document.getElementById('ficMailMicButton')?.addEventListener('click', toggleFicMailRecording);

// Bouton IA pour reformuler le mail FIC
document.getElementById('ficMailAiButton')?.addEventListener('click', function(e) {
    e.preventDefault();
    const mailBody = document.getElementById('fic_mail_body');
    if (!mailBody || !mailBody.value.trim()) {
        alert('Veuillez d\'abord saisir du texte à reformuler.');
        return;
    }
    
    const originalText = mailBody.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,
            context: 'Reformule ce mail de manière professionnelle et polie pour un client. Structure le mail avec des paragraphes clairs, des sauts de ligne appropriés et une mise en forme lisible. Utilise des retours à la ligne pour séparer les idées principales et rendre le texte aéré et facile à lire.'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.reformulated_text) {
            mailBody.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 formulaire d'envoi d'email FIC
document.getElementById('ficMailForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (isFicMailRecording) {
        toggleFicMailRecording();
    }
    
    const formData = new FormData(this);
    
    // Récupérer le devis uploadé et l'ajouter en premier dans les pièces jointes
    const attachmentsForServer = [];
    
    // Récupérer le devis FIC uploadé
    fetch('{{ route("prospects.fic.devis", $prospect->id) }}')
        .then(response => response.json())
        .then(devisData => {
            if (devisData.devis && devisData.devis.file_path) {
                // Extraire le chemin relatif depuis l'URL complète
                // L'URL est du type: /storage/prospects/{id}/fic/{filename}
                // Le chemin dans la DB est: prospects/{id}/fic/{filename}
                // On doit utiliser le chemin tel quel car la route gère les deux formats
                const fileUrl = devisData.devis.file_path;
                let relativePath = fileUrl;
                
                // Si c'est une URL complète, extraire le chemin après /storage/
                if (fileUrl.startsWith('http://') || fileUrl.startsWith('https://')) {
                    const storageIndex = fileUrl.indexOf('/storage/');
                    if (storageIndex !== -1) {
                        // Extraire prospects/{id}/fic/{filename}
                        relativePath = fileUrl.substring(storageIndex + '/storage/'.length);
                    }
                } else if (fileUrl.startsWith('/storage/')) {
                    // Extraire prospects/{id}/fic/{filename}
                    relativePath = fileUrl.substring('/storage/'.length);
                }
                
                // Ajouter le devis en premier avec le chemin relatif
                attachmentsForServer.push({
                    name: devisData.devis.file_name || 'devis.pdf',
                    path: relativePath,
                    is_storage: true // Flag pour indiquer que c'est un fichier storage
                });
            }
            
            // Ajouter les pièces jointes selon le pack sélectionné
            const selectedPack = document.querySelector('input.fic-pack-checkbox:checked');
            if (selectedPack && ficPackAttachments[selectedPack.value]) {
                // Convertir la structure folder/filename en chemins complets pour le serveur
                const packAttachments = ficPackAttachments[selectedPack.value].map(att => ({
                    name: att.name,
                    path: `assets/${att.folder}/${att.filename}`
                }));
                attachmentsForServer.push(...packAttachments);
            }
            
            // Ajouter les pièces jointes au FormData
            if (attachmentsForServer.length > 0) {
                formData.append('attachments', JSON.stringify(attachmentsForServer));
            }
            
            // Envoyer l'email
            sendFicMail(formData);
        })
        .catch(error => {
            console.error('Erreur lors de la récupération du devis:', error);
            // Continuer quand même avec les pièces jointes du pack
            const selectedPack = document.querySelector('input.fic-pack-checkbox:checked');
            if (selectedPack && ficPackAttachments[selectedPack.value]) {
                const packAttachments = ficPackAttachments[selectedPack.value].map(att => ({
                    name: att.name,
                    path: `assets/${att.folder}/${att.filename}`
                }));
                formData.append('attachments', JSON.stringify(packAttachments));
            }
            sendFicMail(formData);
        });
});

// Fonction pour envoyer l'email FIC
function sendFicMail(formData) {
    const submitButton = document.querySelector('#ficMailForm button[type="submit"]');
    const originalText = submitButton.textContent;
    
    submitButton.disabled = true;
    submitButton.textContent = 'Envoi en cours...';
    
    fetch('{{ route("prospects.sendMail", $prospect->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 = 'Email envoyé !';
            submitButton.style.background = '#22c55e';
            setTimeout(() => {
                submitButton.disabled = false;
                submitButton.textContent = originalText;
                submitButton.style.background = '';
                document.getElementById('fic_mail_subject').value = '';
                document.getElementById('fic_mail_body').value = '';
            }, 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\'envoi de l\'email');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
}

</script>
@endpush
<!-- Modale d'édition FIC -->
<div id="ficEditorModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000; align-items: center; justify-content: center; padding: 2rem;">
    <div style="background: white; border-radius: 12px; width: 100%; max-width: 1600px; height: 90vh; max-height: 900px; display: flex; flex-direction: column; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);">
        <!-- En-tête de la modale -->
        <div style="padding: 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;">
            <h2 style="font-size: 1.5rem; font-weight: 600; color: #1f2937; margin: 0;">
                Éditeur FIC - {{ $prospect->prenom }} {{ $prospect->nom }}
            </h2>
            <div style="display: flex; gap: 0.75rem;">
                <button onclick="downloadFicFromModal()" id="ficEditorDownloadButton" style="padding: 0.625rem 1.25rem; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;" onmouseover="this.style.background='#2563eb';" onmouseout="this.style.background='#3b82f6';">
                    Télécharger
                </button>
                <button onclick="saveFicFromModal()" id="ficEditorSaveButton" style="padding: 0.625rem 1.25rem; background: #6fb87d; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;" onmouseover="this.style.background='#5ea66d';" onmouseout="this.style.background='#6fb87d';">
                    Enregistrer
                </button>
                <button onclick="closeFicEditorModal()" style="padding: 0.625rem 1.25rem; background: #6b7280; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;" onmouseover="this.style.background='#4b5563';" onmouseout="this.style.background='#6b7280';">
                    Fermer
                </button>
            </div>
        </div>
        
        <!-- Contenu de la modale -->
        <div style="flex: 1; display: flex; gap: 1rem; padding: 1.5rem; overflow: hidden;">
            <!-- Colonne gauche : Onglets Données OCR / Devis -->
            <div style="width: 400px; background: #f9fafb; border-radius: 12px; padding: 0; overflow: hidden; border: 1px solid #e5e7eb; display: flex; flex-direction: column;">
                <!-- Onglets -->
                <div style="display: flex; border-bottom: 2px solid #e5e7eb; background: white;">
                    <button onclick="switchFicEditorTab('ocr')" id="ficEditorTabOcr" class="fic-editor-tab active" style="flex: 1; padding: 0.75rem 1rem; background: #6fb87d; color: white; border: none; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;">
                        Données OCR
                    </button>
                    <button onclick="switchFicEditorTab('devis')" id="ficEditorTabDevis" class="fic-editor-tab" style="flex: 1; padding: 0.75rem 1rem; background: #e5e7eb; color: #6b7280; border: none; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;">
                        Devis
                    </button>
                </div>
                
                <!-- Contenu Onglet OCR -->
                <div id="ficEditorOcrTab" style="flex: 1; padding: 1.5rem; overflow-y: auto; display: block;">
                    <p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem;">Cliquez sur "Copier" pour coller dans le PDF</p>
                    <div id="ficEditorOcrList" style="display: flex; flex-direction: column; gap: 0.75rem;">
                        <!-- Les données OCR seront affichées ici -->
                    </div>
                </div>
                
                <!-- Contenu Onglet Devis -->
                <div id="ficEditorDevisTab" style="flex: 1; padding: 0; overflow: hidden; display: none;">
                    <div style="width: 100%; height: 100%; border: none;">
                        <iframe id="ficEditorDevisFrame" src="" style="width: 100%; height: 100%; border: none; min-height: 600px;"></iframe>
                    </div>
                </div>
            </div>
            
            <!-- Colonne droite : Visualisateur PDF éditable -->
            <div style="flex: 1; background: white; border-radius: 12px; padding: 1rem; overflow: hidden; border: 1px solid #e5e7eb; display: flex; flex-direction: column;">
                <div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
                    <h3 style="font-size: 1.125rem; font-weight: 600; color: #1f2937; margin: 0;">
                        FIC - Édition
                    </h3>
                    <span style="font-size: 0.875rem; color: #6b7280;">Vous pouvez modifier directement les champs du PDF</span>
                </div>
                <div style="flex: 1; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; position: relative;">
                    <iframe id="ficEditorPdfFrame" src="" style="width: 100%; height: 100%; min-height: 600px; border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
#ficEditorModal {
    backdrop-filter: blur(4px);
}

#ficEditorModal > div {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fermer la modale en cliquant sur le fond */
#ficEditorModal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
</style>

<script>
// Fermer la modale en cliquant sur le fond
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('ficEditorModal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                closeFicEditorModal();
            }
        });
    }
    
    // Fermer avec la touche Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const modal = document.getElementById('ficEditorModal');
            if (modal && modal.style.display === 'flex') {
                closeFicEditorModal();
            }
        }
    });
});
</script>

@endsection