@extends('layouts.dashboard')

@section('title', ($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show'
    ? ('Détails du client - ' . (trim(($prospect->first_name ?? '') . ' ' . ($prospect->last_name ?? '')) ?: 'Prénom NOM'))
    : ('Détails du Prospect - ' . (trim(($prospect->first_name ?? '') . ' ' . ($prospect->last_name ?? '')) ?: 'Prénom NOM')))
@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;
    }

    /* CSP-safe hover pour les champs éditables (remplace onmouseover/onmouseout inline) */
    .editable-field:hover {
        border-color: #6fb87d !important;
        background: #f0fdf4 !important;
    }

    /* CSP-safe hover pour la table devis */
    .devis-row:hover td {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%) !important;
    }
    .devis-row:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    .devis-view-link:hover {
        transform: scale(1.1);
    }

    .rgpd-export-btn:hover {
        background: #5ea66d !important;
    }

    .download-link:hover {
        background: #6fb87d !important;
        color: white !important;
    }
    
    .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;
    }
    
    .confirm-modal-btn-confirm.confirm-modal-btn-danger {
        background: #ef4444;
    }
    
    .confirm-modal-btn-confirm.confirm-modal-btn-danger:hover {
        background: #dc2626;
    }
    
    .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;
    }

    /* Contrats - tableau façon "Ambassadeurs" */
    .contracts-list-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e5e7eb;
        width: 100%;
        margin: 0;
        table-layout: fixed; /* Force une largeur stable des 3 colonnes */
    }

    .contracts-list-table th {
        background: #f8fafc;
        border: none;
        border-bottom: 2px solid #e5e7eb;
        font-weight: 700;
        color: #1f2937;
        padding: 1.25rem 1rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .contracts-list-table td {
        padding: 1rem 1rem;
        vertical-align: top;
        border-bottom: 1px solid #f1f5f9;
        background: white;
    }

    /* Colonne 1 (Contrat): plus large, texte aligné en haut */
    .contracts-list-table th:nth-child(1),
    .contracts-list-table td:nth-child(1) {
        width: 60%;
        text-align: left;
    }

    /* Colonne 2 (Statut): petite colonne, contenu centré verticalement */
    .contracts-list-table th:nth-child(2),
    .contracts-list-table td:nth-child(2) {
        width: 20%;
        vertical-align: middle;
        text-align: center;
    }

    /* Colonne 3 (Actions): petite colonne, contenu centré verticalement */
    .contracts-list-table th:nth-child(3),
    .contracts-list-table td:nth-child(3) {
        width: 20%;
        vertical-align: middle;
        text-align: center;
    }

    .contracts-list-table .action-buttons {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
    }

    .contracts-list-table tbody tr:nth-child(even) td {
        background: rgba(111, 184, 125, 0.06) !important;
    }

    .contracts-list-table tbody tr:hover td {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%) !important;
    }

    /* Affichage lecture seule du contrat */
    .contracts-readonly-cell {
        display: block;
    }

    .contracts-readonly-assureur {
        font-weight: 800;
        color: #1f2937;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .contracts-readonly-details {
        color: #6b7280;
        font-size: 0.9rem;
        line-height: 1.3;
        /* pre-line évite que des retours/espaces invisibles en DB
           fassent "descendre" le texte au mauvais endroit. */
        white-space: pre-line;
        overflow-wrap: anywhere;
        margin-top: 0.25rem;
    }

    /* Le stylo doit rester cliquable */
    .js-contract-edit {
        cursor: pointer !important;
        pointer-events: auto !important;
        position: relative;
        z-index: 2;
    }

    .contracts-details-save-btn {
        display: none;
        background: #6fb87d;
        border: none;
        color: white;
        font-weight: 700;
        padding: 0.55rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .contracts-details-save-btn:hover {
        background: #5da66d;
    }
</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;">
                @php
                    $prospectFullName = trim(($prospect->first_name ?? '') . ' ' . ($prospect->last_name ?? ''));
                    $prospectFullName = $prospectFullName ?: 'Prénom NOM';
                @endphp
                {{ ($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show'
                    ? ('Détails du client - ' . $prospectFullName)
                    : ('Détails du Prospect - ' . $prospectFullName)
                }}
            </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::currentRouteName() === 'portefeuille.show' ? route('portefeuille') : 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">
                            Général
                        </li>
                        <li class="tab-item" data-tab="informations">
                            Devis
                        </li>
                        <li class="tab-item" data-tab="contrat">
                            Contrat
                        </li>
                        <li class="tab-item" data-tab="documents">
                            Documents
                        </li>
                        <li class="tab-item" data-tab="mail">
                            Mail
                        </li>
                        <li class="tab-item" data-tab="fic">
                            Proposition
                        </li>
                        @if(($prospect->prospect_type ?? 'prospect') === 'client' && Route::currentRouteName() === 'portefeuille.show')
                        <li class="tab-item" data-tab="reclamations">
                            Réclamations
                        </li>
                        @endif
                        <li class="tab-item" data-tab="exchanges">
                            Échanges
                        </li>
                        <li class="tab-item" data-tab="rgpd">
                            RGPD
                        </li>
                    </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;">
                                        {{ $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;">
                                        ✓
                                    </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;">
                                        {{ $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;">
                                        ✓
                                    </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;">
                                        {{ $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;">
                                        ✓
                                    </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;">
                                        {{ $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;">
                                        ✓
                                    </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" disabled aria-disabled="true" 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: not-allowed; opacity: 0.85; 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 class="devis-row" style="transition: all 0.2s ease;">
                                            <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 }}"
                                                      data-prospect-id="{{ $prospect->id }}"
                                                      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;') }}"
                                                      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 devis-view-link" 
                                                   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;"
                                                   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: Contrat -->
                <div class="tab-content" id="contrat-tab">
                    @php
                        $assureurOptions = ['Xenassur', 'Mutuelle des motards', 'April', 'Solly Azar'];
                        $contractsRaw = $prospect->form_data['contracts'] ?? null;
                        $contracts = is_array($contractsRaw) ? $contractsRaw : [];
                        $isPortefeuilleShow = Route::currentRouteName() === 'portefeuille.show';
                    @endphp

                    <div style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;">
                            <div>
                                <h2 class="section-title" style="font-size: 1.125rem; margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb;">
                                    Contrats
                                </h2>
                                <p class="text-muted" style="margin-top: 0.75rem; margin-bottom: 0;">
                                    Le Type du prospect est calculé automatiquement selon les contrats (actif / résilié).
                                </p>
                            </div>

                            <button type="button" class="btn btn-primary js-toggle-contract-add" style="background: #6fb87d; border: none; padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 600; color: white; cursor: pointer;">
                                Ajouter un contrat
                            </button>
                        </div>

                        <div id="contractAddFormContainer" class="js-contract-add-container" style="display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
                            <form id="contractAddForm">
                                @csrf
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start;">
                                    <div style="background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem;">
                                        <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.75rem;">Assureur</label>
                                        <select id="contractAddAssureurSelect" class="form-select" style="padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937; cursor: pointer;">
                                            @foreach($assureurOptions as $opt)
                                                <option value="{{ $opt }}">{{ $opt }}</option>
                                            @endforeach
                                            <option value="Autre" selected>Autre</option>
                                        </select>
                                        <input type="text" id="contractAddAssureurOtherInput" class="form-control" placeholder="Tapez l'autre assureur..." style="margin-top: 0.75rem; display: none; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937;">
                                    </div>

                                    <div style="background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem;">
                                        <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.75rem;">Statut</label>
                                        <div class="switch-container" style="display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0;">
                                            <label class="switch" style="margin: 0;">
                                                <input type="checkbox" id="contractAddStatusToggle" checked>
                                                <span class="slider"></span>
                                            </label>
                                            <span id="contractAddStatusLabel" style="font-weight: 700; color: #6b7280;">Actif</span>
                                        </div>
                                    </div>
                                </div>

                                <div style="background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; margin-top: 1rem;">
                                    <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.75rem;">Détails</label>
                                    <textarea id="contractAddDetailsInput" class="form-control" rows="4" style="padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937; resize: vertical;"></textarea>
                                </div>

                                <div style="display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem;">
                                    <button type="button" class="btn btn-secondary js-contract-add-cancel" style="padding: 0.625rem 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937; cursor: pointer;">
                                        Annuler
                                    </button>
                                    <button type="button" class="btn btn-primary js-contract-add-submit" style="padding: 0.625rem 1.5rem; border-radius: 8px; border: none; background: #6fb87d; color: white; cursor: pointer; font-weight: 700;">
                                        Enregistrer le contrat
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div 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.25rem;">Liste des contrats</h3>

                        @if(count($contracts) === 0)
                            <p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1.5rem; margin: 0;">Aucun contrat pour le moment</p>
                        @else
                            @if($isPortefeuilleShow)
                                <div class="table-responsive">
                                    <table class="contracts-list-table table">
                                        <thead>
                                            <tr>
                                                <th>Contrat</th>
                                                <th style="text-align: center;">Statut</th>
                                                <th style="text-align: center;">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($contracts as $contract)
                                                @php
                                                    $contractId = (string)($contract['id'] ?? '');
                                                    $contractAssureurRaw = (string)($contract['assureur'] ?? 'A compléter');
                                        if (trim($contractAssureurRaw) === 'Mutuelle des mots') {
                                            $contractAssureurRaw = 'Mutuelle des motards';
                                        }
                                                    $contractAssureur = $contractAssureurRaw;
                                                    $isInList = in_array($contractAssureur, $assureurOptions, true);
                                                    $otherValue = $isInList ? '' : $contractAssureur;
                                                    $contractDetails = (string)($contract['details'] ?? '');
                                                    $contractStatut = ($contract['statut'] ?? 'resilie') === 'actif' ? 'actif' : 'resilie';

                                                    $leftColor = $contractStatut === 'actif' ? '#6fb87d' : '#1f2937';
                                                @endphp
                                                <tr
                                                    data-contract-id="{{ $contractId }}"
                                                    data-contract-assureur="{{ e($contractAssureur) }}"
                                                    data-contract-details="{{ e($contractDetails) }}"
                                                    data-contract-statut="{{ $contractStatut }}"
                                                >
                                                    <td style="vertical-align: top; border-left: 6px solid {{ $leftColor }};">
                                                        <div class="contracts-readonly-cell">
                                                            <div class="contracts-readonly-assureur js-contract-assureur-text">
                                                                {{ mb_strtoupper($contractAssureur) }}
                                                            </div>
                                                            <div class="contracts-readonly-details js-contract-details-text">
                                                                {{ $contractDetails }}
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td style="vertical-align: middle; text-align: center;">
                                                        <label class="switch" style="margin: 0; display: inline-flex; align-items: center; gap: 0.5rem;">
                                                            <input type="checkbox" class="js-contract-status-toggle" data-contract-id="{{ $contractId }}" {{ $contractStatut === 'actif' ? 'checked' : '' }}>
                                                            <span class="slider"></span>
                                                        </label>
                                                    </td>
                                                    <td style="vertical-align: middle; text-align: center;">
                                                        <div class="action-buttons" style="justify-content: center;">
                                                            <button type="button"
                                                                    class="btn btn-danger js-contract-delete"
                                                                    data-contract-id="{{ $contractId }}"
                                                                    data-contract-assureur="{{ e($contractAssureur) }}"
                                                                    style="background: transparent; border: none; padding: 0.25rem; cursor: pointer; color: #ef4444;">
                                                                <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>
                                                            <button type="button"
                                                                    class="js-contract-edit"
                                                                    data-contract-id="{{ $contractId }}"
                                                                    aria-label="Modifier le contrat"
                                                                    style="background: transparent; border: none; padding: 0.25rem; cursor: pointer; color: #6fb87d;">
                                                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                                    <path d="M12 20h9"></path>
                                                                    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"></path>
                                                                </svg>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="contracts-list" style="display: flex; flex-direction: column; gap: 1rem;">
                                    @foreach($contracts as $contract)
                                        @php
                                            $contractId = (string)($contract['id'] ?? '');
                                            $contractAssureurRaw = (string)($contract['assureur'] ?? 'A compléter');
                                            if (trim($contractAssureurRaw) === 'Mutuelle des mots') {
                                                $contractAssureurRaw = 'Mutuelle des motards';
                                            }
                                            $contractAssureur = $contractAssureurRaw;
                                            $isInList = in_array($contractAssureur, $assureurOptions, true);
                                            $otherValue = $isInList ? '' : $contractAssureur;
                                            $contractDetails = (string)($contract['details'] ?? '');
                                            $contractStatut = ($contract['statut'] ?? 'resilie') === 'actif' ? 'actif' : 'resilie';

                                            $cardBorderColor = $contractStatut === 'actif' ? 'rgba(111, 184, 125, 0.40)' : 'rgba(31, 41, 55, 0.25)';
                                            $cardBg = $contractStatut === 'actif' ? 'rgba(111, 184, 125, 0.12)' : 'rgba(31, 41, 55, 0.06)';
                                        @endphp
                                        <div
                                            class="contract-item"
                                            data-contract-id="{{ $contractId }}"
                                            data-contract-assureur="{{ e($contractAssureur) }}"
                                            data-contract-details="{{ e($contractDetails) }}"
                                            data-contract-statut="{{ $contractStatut }}"
                                            style="background: {{ $cardBg }}; border: 1px solid {{ $cardBorderColor }}; border-radius: 12px; padding: 0.75rem; border-left: 6px solid {{ $contractStatut === 'actif' ? '#6fb87d' : '#1f2937' }};">
                                            <div style="display: grid; grid-template-columns: 1fr 175px; gap: 0.5rem; align-items: start;">
                                                <div>
                                                    <div class="contracts-readonly-assureur js-contract-assureur-text" style="font-weight: 800; color: #1f2937; letter-spacing: 0.05em; text-transform: uppercase;">
                                                        {{ mb_strtoupper($contractAssureur) }}
                                                    </div>
                                                    <div class="contracts-readonly-details js-contract-details-text" style="margin-top: 0.25rem; color: #6b7280; font-size: 0.9rem;">
                                                        {{ $contractDetails }}
                                                    </div>
                                                </div>
                                                <div style="display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end;">
                                                    <label class="switch" style="margin: 0; display: inline-flex; align-items: center; gap: 0.5rem;">
                                                        <input type="checkbox" class="js-contract-status-toggle" data-contract-id="{{ $contractId }}" {{ $contractStatut === 'actif' ? 'checked' : '' }}>
                                                        <span class="slider"></span>
                                                    </label>
                                                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                                                        <button type="button"
                                                                class="btn btn-danger js-contract-delete"
                                                                data-contract-id="{{ $contractId }}"
                                                                data-contract-assureur="{{ e($contractAssureur) }}"
                                                                style="background: transparent; border: none; padding: 0.25rem; cursor: pointer; color: #ef4444;">
                                                            <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>
                                                        <button type="button"
                                                                class="js-contract-edit"
                                                                data-contract-id="{{ $contractId }}"
                                                                aria-label="Modifier le contrat"
                                                                style="background: transparent; border: none; padding: 0.25rem; cursor: pointer; color: #6fb87d;">
                                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                                <path d="M12 20h9"></path>
                                                                <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"></path>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        @endif
                    </div>
                </div>

                <!-- Modal édition contrat -->
                <div id="contractEditModalOverlay" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999999;">
                    <div id="contractEditModal" style="background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); max-width: 520px; width: 90%; margin: 8vh auto; padding: 1.25rem 1.25rem;">
                        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;">
                            <h3 style="margin: 0; font-size: 1.1rem; font-weight: 700; color: #1f2937;">Modifier le contrat</h3>
                            <button type="button" id="contractEditModalCloseBtn" style="background: transparent; border: none; cursor: pointer; color: #6b7280; font-size: 1.25rem; line-height: 1;">×</button>
                        </div>

                        <div style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
                            <div style="background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem;">
                                <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.75rem;">Assureur</label>
                                <select id="contractEditAssureurSelect" class="form-select" style="padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937; cursor: pointer;">
                                    @foreach($assureurOptions as $opt)
                                        <option value="{{ $opt }}">{{ $opt }}</option>
                                    @endforeach
                                    <option value="Autre">Autre</option>
                                </select>
                                <input type="text" id="contractEditAssureurOtherInput" class="form-control" placeholder="Tapez l'autre assureur..." style="margin-top: 0.75rem; display: none; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937;">
                            </div>

                            <div style="background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem;">
                                <label style="display: block; font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 0.75rem;">Détails</label>
                                <textarea id="contractEditDetailsInput" class="form-control" rows="4" style="padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937; resize: vertical;"></textarea>
                            </div>
                        </div>

                        <div style="display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem;">
                            <button type="button" id="contractEditCancelBtn" style="padding: 0.625rem 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb; background: white; color: #1f2937; cursor: pointer; font-weight: 600;">Annuler</button>
                            <button type="button" id="contractEditSaveBtn" style="padding: 0.625rem 1.5rem; border-radius: 8px; border: none; background: #6fb87d; color: white; cursor: pointer; font-weight: 700;">Enregistrer</button>
                        </div>
                    </div>
                </div>

                <!-- Onglet 4: 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" class="btn btn-primary js-file-picker" data-target-input-id="document" 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 Échanges (fichiers échangés avec le client) -->
                <div class="tab-content" id="exchanges-tab">
                    <div>
                        <div class="upload-zone" id="exchangeUploadZone" 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="exchangeUploadForm" method="POST" action="{{ route('prospects.exchanges.upload', $prospect->id) }}" enctype="multipart/form-data" style="display: none;">
                                @csrf
                                <input type="file" name="document" id="exchangeDocument" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.mov,.avi" multiple>
                            </form>
                            <div id="exchangeUploadZoneContent">
                                <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" class="btn btn-primary js-file-picker" data-target-input-id="exchangeDocument" style="margin-top: 0.5rem;">Parcourir les fichiers</button>
                                <p style="font-size: 0.75rem; color: #9ca3af; margin-top: 1rem;">PDF, Word, images (JPG, PNG, GIF, WebP), vidéos (MP4, WebM, MOV, AVI) — max 100 Mo</p>
                            </div>
                            <div id="exchangeUploadProgress" style="display: none;">
                                <div style="width: 100%; background: #e5e7eb; border-radius: 8px; height: 8px; margin-top: 1rem;">
                                    <div id="exchangeProgressBar" 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 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>
                                Fichiers déposés (échanges avec le client)
                            </h3>
                            <div id="exchangesList" style="min-height: 200px;">
                                <p style="color: #9ca3af; font-style: italic; text-align: center; padding: 2rem;">Aucun fichier pour le moment</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Onglet RGPD : export des données (conformité) -->
                <div class="tab-content" id="rgpd-tab">
                    <div style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 2rem; max-width: 640px;">
                        <h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Export des données personnelles</h3>
                        <p style="color: #6b7280; font-size: 0.9375rem; margin-bottom: 1.5rem;">Conformément au RGPD, vous pouvez télécharger l’intégralité des données et documents liés à ce prospect : informations générales, devis, documents déposés, échanges et emails envoyés (le tout dans une archive ZIP).</p>
                        <a href="{{ route('prospects.rgpd.export', $prospect->id) }}" class="btn btn-primary rgpd-export-btn" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #6fb87d; color: white; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background 0.2s;">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                <polyline points="7 10 12 15 17 10"></polyline>
                                <line x1="12" y1="15" x2="12" y2="3"></line>
                            </svg>
                            Télécharger toutes les données (ZIP)
                        </a>
                    </div>
                </div>
                
                <!-- 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: Proposition -->
                <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" class="btn btn-primary js-file-picker" data-target-input-id="ficDevis" 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>
                            </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 class="devis-row" style="transition: all 0.2s ease;">
                                                    <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 devis-view-link" 
                                                               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;"
                                                               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"
                                                                    class="action-btn js-delete-reclamation"
                                                                    data-prospect-id="{{ $prospect->id }}"
                                                                    data-reclamation-id="{{ $reclamation->id }}"
                                                                    data-reclamation-subject="{{ $reclamation->sujet ?? 'cette réclamation' }}"
                                                                    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;"
                                                                    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 nonce="{{ $cspNonce }}">
// 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');
    }
};

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

    // Devis status badge
    document.addEventListener('click', function(e) {
        const badge = e.target.closest('.devis-status-badge');
        if (!badge) return;
        const prospectId = badge.getAttribute('data-prospect-id');
        const devisId = badge.getAttribute('data-devis-id');
        const currentStatus = badge.getAttribute('data-current-status');
        if (prospectId && devisId && currentStatus && typeof window.toggleDevisStatus === 'function') {
            window.toggleDevisStatus(parseInt(prospectId, 10), parseInt(devisId, 10), currentStatus);
        }
    });

    // File picker buttons
    document.querySelectorAll('.js-file-picker[data-target-input-id]').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const id = this.getAttribute('data-target-input-id');
            const input = id ? document.getElementById(id) : null;
            if (input) input.click();
        });
    });

    // Documents list actions (edit name / delete)
    const docsList = document.getElementById('documentsList');
    if (docsList) {
        docsList.addEventListener('click', function(e) {
            const el = e.target.closest('.js-doc-action');
            if (!el) return;
            const action = el.getAttribute('data-action');
            const docId = el.getAttribute('data-document-id');
            const docName = el.getAttribute('data-document-name') || 'Document';
            if (!docId) return;
            if (action === 'edit-name' && typeof window.editDocumentName === 'function') {
                window.editDocumentName(parseInt(docId, 10), docName);
            } else if (action === 'delete' && typeof window.confirmDeleteDocument === 'function') {
                window.confirmDeleteDocument(parseInt(docId, 10), docName);
            }
        });
    }
});

// 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';
    } else if (['mp4', 'webm', 'mov', 'avi'].includes(ext)) {
        fileType = 'VID';
    }
    
    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 js-doc-action" data-action="edit-name" data-document-id="${doc.id}" data-document-name="${(doc.name || doc.file_name || 'Document')}" 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 class="document-action-btn delete-btn js-doc-action" data-action="delete" data-document-id="${doc.id}" data-document-name="${(doc.name || doc.file_name || 'Document')}" 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
// showConfirmDialog(title, message, onConfirm, cancelLabel?, confirmLabel?)
function showConfirmDialog(title, message, onConfirm, cancelLabel, confirmLabel) {
    cancelLabel = cancelLabel || 'Annuler';
    confirmLabel = confirmLabel || 'Confirmer';
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3>${title.replace(/</g, '&lt;')}</h3>
            <p>${message}</p>
            <div class="confirm-modal-buttons">
                <button class="confirm-modal-btn confirm-modal-btn-cancel">${cancelLabel.replace(/</g, '&lt;')}</button>
                <button class="confirm-modal-btn confirm-modal-btn-confirm ${confirmLabel === 'Supprimer' ? 'confirm-modal-btn-danger' : ''}">${confirmLabel.replace(/</g, '&lt;')}</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);
        }
        if (this.getAttribute('data-tab') === 'exchanges') {
            setTimeout(loadExchanges, 100);
        }
    });
});

// --- Onglet Échanges ---
// Emails chargés (to, subject, body, attachments, emailId) pour la popup — évite d'injecter le HTML dans le DOM (sinon </div> etc. s'affichent dans la liste)
var _exchangesEmailsById = {};
var _sentAttachmentBaseUrl = '{{ url("/prospects/" . $prospect->id . "/sent-email-attachments") }}';

function showEmailPopup(to, subject, body, attachments, emailId) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    const safeSubject = (subject || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    const safeTo = (to || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    const attachmentsList = Array.isArray(attachments) && attachments.length ? attachments : [];
    const canOpen = typeof emailId === 'number' && !isNaN(emailId) && _sentAttachmentBaseUrl;
    const attachmentsHtml = attachmentsList.length
        ? '<div style="margin-bottom: 1rem;"><div style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.25rem;">Pièces jointes</div><ul style="margin: 0; padding-left: 1.25rem; font-size: 0.875rem; list-style: none;">'
          + attachmentsList.map(function(a, idx) {
              var n = (a && a.name) ? String(a.name).replace(/</g, '&lt;') : 'Pièce jointe';
              if (canOpen) {
                  var url = _sentAttachmentBaseUrl + '/' + emailId + '/' + idx;
                  return '<li style="margin-bottom: 0.35rem;"><span style="margin-right: 0.5rem;">' + n + '</span> <a href="' + url.replace(/"/g, '&quot;') + '" target="_blank" rel="noopener" style="color: #6fb87d; font-size: 0.8125rem;">Ouvrir</a></li>';
              }
              return '<li style="margin-bottom: 0.35rem;">' + n + '</li>';
          }).join('')
          + '</ul></div>'
        : '';
    modal.innerHTML = `
        <div class="confirm-modal-content" style="max-width: 640px; max-height: 90vh; display: flex; flex-direction: column;">
            <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem;">Email envoyé</h3>
            <div style="margin-bottom: 1rem;">
                <div style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.25rem;">Destinataire</div>
                <div style="font-weight: 500;">${safeTo}</div>
            </div>
            <div style="margin-bottom: 1rem;">
                <div style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.25rem;">Objet</div>
                <div style="font-weight: 500;">${safeSubject}</div>
            </div>
            ${attachmentsHtml}
            <div style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.25rem;">Contenu</div>
            <div class="email-popup-body" style="flex: 1; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; background: #f9fafb; max-height: 320px; font-size: 0.875rem; line-height: 1.5;"></div>
            <div class="confirm-modal-buttons" style="margin-top: 1.5rem;">
                <button type="button" class="confirm-modal-btn confirm-modal-btn-cancel close-email-popup">Fermer</button>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
    const bodyEl = modal.querySelector('.email-popup-body');
    if (bodyEl && body) bodyEl.innerHTML = body;
    modal.querySelector('.close-email-popup').addEventListener('click', () => modal.remove());
    modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
}

function showEmailPopupById(emailId) {
    var email = _exchangesEmailsById[emailId];
    if (email) showEmailPopup(email.to || '', email.subject || '', email.body || '', email.attachments || [], email.emailId);
}

function loadExchanges() {
    fetch('{{ route("prospects.exchanges.list", $prospect->id) }}')
        .then(response => response.json())
        .then(data => {
            const list = document.getElementById('exchangesList');
            if (!list) return;
            function toSortIso(item) {
                if (item.sort_at_iso) return item.sort_at_iso;
                var s = (item.created_at || item.sent_at || '').toString();
                var m = s.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})\s*à\s*(\d{1,2}):(\d{2})/);
                if (m) return m[3] + '-' + m[2].padStart(2,'0') + '-' + m[1].padStart(2,'0') + 'T' + m[4].padStart(2,'0') + ':' + m[5] + ':00';
                return s;
            }
            const docs = (data.documents || []).map(d => ({ ...d, type: 'file', sort_at_iso: toSortIso(d) }));
            const emails = (data.emails || []).map(e => ({ ...e, type: 'email', sort_at_iso: toSortIso(e) }));
            _exchangesEmailsById = {};
            emails.forEach(e => {
                var numId = (e.id || '').toString().replace(/^email_/, '');
                _exchangesEmailsById[e.id] = { to: e.to, subject: e.subject, body: e.body, attachments: e.attachments || [], emailId: numId ? parseInt(numId, 10) : null };
            });
            // Tri : du plus récent au plus ancien (sort_at_iso en ordre décroissant)
            const merged = [...docs, ...emails].sort((a, b) => {
                const isoA = a.sort_at_iso || '';
                const isoB = b.sort_at_iso || '';
                return isoB.localeCompare(isoA);
            });
            if (merged.length === 0) {
                list.innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 2rem;">Aucun échange pour le moment</p>';
                return;
            }
            list.innerHTML = merged.map(item => {
                if (item.type === 'email') {
                    const idEsc = (item.id || '').replace(/'/g, "\\'");
                    return `
                    <div class="document-item">
                        <div class="document-icon"><span style="font-size: 0.75rem; font-weight: 700; color: #6b7280; letter-spacing: 0.05em;">MAIL</span></div>
                        <div class="document-info">
                            <div class="document-name" style="margin: 0; padding: 0;"><span class="document-name-text">${(item.subject || 'Email').replace(/</g, '&lt;')}</span></div>
                            <div class="document-meta" style="margin: 0; padding: 0;">${item.created_at || item.sent_at || ''} • Envoyé à ${(item.to || '').replace(/</g, '&lt;')}</div>
                        </div>
                        <div class="document-actions">
                            <button type="button" class="document-action-btn view-btn js-view-exchange-email" data-email-id="${idEsc}" title="Voir le contenu">
                                <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>
                            </button>
                        </div>
                    </div>
                    `;
                }
                return `
                    <div class="document-item">
                        <div class="document-icon">${getFileIcon(item.name || 'file')}</div>
                        <div class="document-info">
                            <div class="document-name" style="margin: 0; padding: 0;"><span class="document-name-text">${(item.name || 'Fichier').replace(/</g, '&lt;')}</span></div>
                            <div class="document-meta" style="margin: 0; padding: 0;">${item.created_at || ''} ${item.file_size ? ' • ' + formatFileSize(item.file_size) : ''}</div>
                        </div>
                        <div class="document-actions">
                            <a href="${item.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 type="button" class="document-action-btn delete-btn js-delete-exchange" data-exchange-id="${item.id}" data-exchange-name="${(item.name || 'Fichier')
                                    .replace(/"/g, '&quot;')
                                    .replace(/'/g, "\\'")
                                    .replace(/</g, '&lt;')
                                    .replace(/\r?\n/g, ' ')}" 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('');
        })
        .catch(() => { if (document.getElementById('exchangesList')) document.getElementById('exchangesList').innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 2rem;">Erreur chargement</p>'; });
}

function handleExchangeUpload() {
    const form = document.getElementById('exchangeUploadForm');
    const formData = new FormData(form);
    const progress = document.getElementById('exchangeUploadProgress');
    const content = document.getElementById('exchangeUploadZoneContent');
    const bar = document.getElementById('exchangeProgressBar');
    const input = document.getElementById('exchangeDocument');
    if (!form || !progress || !content) return;
    content.style.display = 'none';
    progress.style.display = 'block';
    if (bar) bar.style.width = '0%';
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '' }
    })
    .then(r => r.json())
    .then(data => {
        if (bar) bar.style.width = '100%';
        setTimeout(() => {
            progress.style.display = 'none';
            content.style.display = 'block';
            if (bar) bar.style.width = '0%';
            if (data.success) {
                loadExchanges();
                if (input) input.value = '';
            } else {
                alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
            }
        }, 500);
    })
    .catch(() => {
        progress.style.display = 'none';
        content.style.display = 'block';
        if (bar) bar.style.width = '0%';
        alert('Erreur lors de l\'upload');
    });
}

(function() {
    const zone = document.getElementById('exchangeUploadZone');
    const input = document.getElementById('exchangeDocument');
    if (!zone || !input) return;
    zone.addEventListener('click', function(e) {
        if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'INPUT') input.click();
    });
    zone.addEventListener('dragover', function(e) { e.preventDefault(); zone.classList.add('drag-over'); });
    zone.addEventListener('dragleave', function(e) { e.preventDefault(); zone.classList.remove('drag-over'); });
    zone.addEventListener('drop', function(e) {
        e.preventDefault();
        zone.classList.remove('drag-over');
        if (e.dataTransfer.files.length > 0) {
            input.files = e.dataTransfer.files;
            handleExchangeUpload();
        }
    });
    input.addEventListener('change', function() {
        if (this.files.length > 0) handleExchangeUpload();
    });
})();

function confirmDeleteExchange(exchangeId, name) {
    showConfirmDialog(
        'Supprimer le fichier',
        'Supprimer « ' + (name || 'ce fichier').replace(/</g, '&lt;') + ' » ?',
        () => deleteExchange(exchangeId),
        'Annuler',
        'Supprimer'
    );
}

function deleteExchange(exchangeId) {
    const url = '{{ url("/prospects") }}/{{ $prospect->id }}/exchanges/' + exchangeId;
    fetch(url, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => { if (data.success) loadExchanges(); else alert('Erreur: ' + (data.message || '')); })
    .catch(() => alert('Erreur'));
}

// Actions sur les échanges (CSP-safe : remplace les onclick inline)
document.addEventListener('click', function(e) {
    const viewEmailBtn = e.target.closest('.js-view-exchange-email');
    if (viewEmailBtn) {
        e.preventDefault();
        const emailId = viewEmailBtn.getAttribute('data-email-id');
        if (emailId && typeof showEmailPopupById === 'function') {
            showEmailPopupById(emailId);
        }
        return;
    }

    const deleteExchangeBtn = e.target.closest('.js-delete-exchange');
    if (deleteExchangeBtn) {
        e.preventDefault();
        const exchangeId = parseInt(deleteExchangeBtn.getAttribute('data-exchange-id'), 10);
        const exchangeName = deleteExchangeBtn.getAttribute('data-exchange-name') || '';
        if (exchangeId && typeof confirmDeleteExchange === 'function') {
            confirmDeleteExchange(exchangeId, exchangeName);
        }
        return;
    }
});

if (document.getElementById('exchanges-tab') && document.getElementById('exchanges-tab').classList.contains('active')) {
    loadExchanges();
}

// 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'établir 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="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;
        });
}

// 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);
                    }
                });
                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: 'Votre devis personnalisé',
        body: `Bonjour,

Je fais suite à votre demande de devis.

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

- 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 :

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

Restant à votre entière disposition,

Bien cordialement,`
    },
    'solly_azar': {
        subject: 'Votre devis personnalisé',
        body: `Bonjour,

Je fais suite à votre demande de devis.

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

- 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 :

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

Restant à votre entière disposition,

Bien cordialement,`
    },
    'amdm': {
        subject: 'Votre devis personnalisé',
        body: `Bonjour,

Je fais suite à votre demande de devis.

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

- 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 :

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

Restant à votre entière disposition,

Bien cordialement,`
    },
    'april_moto': {
        subject: 'Votre devis personnalisé',
        body: `Bonjour,

Je fais suite à votre demande de devis.

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

- 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 :

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

Restant à votre entière disposition,

Bien cordialement,`
    }
};

// Mapping des pièces jointes par pack — ordre : Devis (ajouté à part), DG MOTO, DIPA MOTO, DER, ADHESION (si le pack en a)
const ficPackAttachments = {
    'april_moto': [
        { 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' },
        { name: 'ADHESION Bumper Assurances.pdf', folder: 'APRIL', filename: 'ADHESION 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: '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' },
        { name: 'ADHESION Bumper Assurances.pdf', folder: 'SOLLY', filename: 'ADHESION Bumper Assurances.pdf' }
    ],
    'xenassur': [
        { 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' },
        { name: 'ADHESION Bumper Assurances.pdf', folder: 'XENASSUR', filename: 'ADHESION 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" class="download-link" 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;" 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" class="download-link" 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;" 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 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);
            }
        });
    }
})();

// 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';
            // Traçabilité: recharger l'onglet Échanges (inclut les emails envoyés)
            try { if (typeof loadExchanges === 'function') loadExchanges(); } catch (e) {}
            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;
    });
}

// =========================
// Onglet Contrat (actif / résilié)
// Stockage: prospects.form_data.contracts
// =========================
(function() {
    const prospectId = {{ $prospect->id }};
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    const assureurOptions = ['Xenassur', 'Mutuelle des motards', 'April', 'Solly Azar'];

    function getAssureurFromAssureurSelect(selectEl, otherInputEl) {
        if (!selectEl) return '';
        const val = selectEl.value;
        if (val === 'Autre') {
            const other = (otherInputEl?.value || '').trim();
            return other === 'Mutuelle des mots' ? 'Mutuelle des motards' : other;
        }
        return val === 'Mutuelle des mots' ? 'Mutuelle des motards' : val;
    }

    function getContractRowValues(row) {
        const contractId =
            row?.dataset?.contractId ||
            row?.getAttribute?.('data-contract-id') ||
            '';

        // On préfère dataset/attributs (valeur source), puis fallback DOM visuel.
        const assureurDom = (row?.querySelector?.('.contracts-readonly-assureur')?.textContent || '').trim();
        const assureurAttr = (row?.getAttribute?.('data-contract-assureur') || '').toString().trim();
        const assureurData = (row?.dataset?.contractAssureur || '').toString().trim();
        const assureur = assureurData || assureurAttr || assureurDom;

        const detailsDom = (row?.querySelector?.('.contracts-readonly-details')?.textContent || '').toString().trim();
        const detailsAttr = (row?.getAttribute?.('data-contract-details') || '').toString().trim();
        const detailsData = (row?.dataset?.contractDetails || '').toString().trim();
        const details = detailsDom || detailsAttr || detailsData;
        const statusToggle = row.querySelector('.js-contract-status-toggle');
        const statut = statusToggle?.checked ? 'actif' : 'resilie';

        return { contractId, assureur, details, statut };
    }

    function postJson(url, method, body) {
        return fetch(url, {
            method: method,
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(body || {})
        }).then(r => r.json());
    }

    function handleProspectTypeAfterContractMutation(data) {
        try {
            const newType = data?.prospect_type;
            // Depuis /portefeuille/{id}, si le prospect n'est plus de type client
            // alors la route /portefeuille/{id} renverra 404 (normal).
            // On redirige vers la liste /portefeuille pour éviter la 404.
            if (newType && newType !== 'client' && window.location.pathname.startsWith('/portefeuille/')) {
                window.location.replace('/portefeuille');
                return;
            }
        } catch (e) {}
        location.reload();
    }

    // Pour les changements "non statut" (assureur / détails) :
    // - pas de reload (pour garder un rendu fluide)
    // - uniquement redirection si jamais le type change (cas statut, mais on garde la sécurité)
    function handleProspectTypeAfterContractDetailsMutation(data) {
        try {
            const newType = data?.prospect_type;
            if (newType && newType !== 'client' && window.location.pathname.startsWith('/portefeuille/')) {
                window.location.replace('/portefeuille');
            }
        } catch (e) {}
    }

    // =========================
    // Modal édition contrat
    // =========================
    const contractEditOverlay = document.getElementById('contractEditModalOverlay');
    const contractEditCloseBtn = document.getElementById('contractEditModalCloseBtn');
    const contractEditCancelBtn = document.getElementById('contractEditCancelBtn');
    const contractEditSaveBtn = document.getElementById('contractEditSaveBtn');

    const contractEditAssureurSelect = document.getElementById('contractEditAssureurSelect');
    const contractEditOtherInput = document.getElementById('contractEditAssureurOtherInput');
    const contractEditDetailsInput = document.getElementById('contractEditDetailsInput');

    let editingContractId = null;
    let editingContractStatut = null;
    let editingContractRowEl = null;

    function syncContractEditOtherVisibility() {
        if (!contractEditAssureurSelect || !contractEditOtherInput) return;
        const show = contractEditAssureurSelect.value === 'Autre';
        contractEditOtherInput.style.display = show ? 'block' : 'none';
        if (!show) contractEditOtherInput.value = '';
    }

    function closeContractEditModal() {
        if (contractEditOverlay) contractEditOverlay.style.display = 'none';
    }

    function openContractEditModal(row) {
        if (!row) return;
        if (!contractEditOverlay) return;

        if (!contractEditAssureurSelect || !contractEditOtherInput || !contractEditDetailsInput) {
            return;
        }

        editingContractRowEl = row;
        editingContractId = row.dataset.contractId || '';
        editingContractStatut = row.dataset.contractStatut || 'resilie';

        // Récupération robuste (dataset + attributs + fallback DOM)
        const assureurRaw =
            (row.dataset?.contractAssureur || row.getAttribute('data-contract-assureur') || '').trim() ||
            (row.querySelector('.contracts-readonly-assureur')?.textContent || '').trim();

        const detailsRaw =
            (row.dataset?.contractDetails || row.getAttribute('data-contract-details') || '').toString() ||
            (row.querySelector('.contracts-readonly-details')?.textContent || '').toString();

        // Normalisation + mapping "Mutuelle des mots" historique
        let normalizedAssureur = (assureurRaw || '').trim();
        if (normalizedAssureur === 'Mutuelle des mots') normalizedAssureur = 'Mutuelle des motards';

        // Valeurs par défaut (toujours afficher quelque chose)
        contractEditAssureurSelect.value = 'Autre';
        contractEditOtherInput.value = normalizedAssureur;
        contractEditDetailsInput.value = detailsRaw;
        syncContractEditOtherVisibility();

        // Puis on tente de matcher dans la liste officielle
        const matchedOption = assureurOptions.find(opt => opt.toLowerCase() === normalizedAssureur.toLowerCase());
        if (matchedOption) {
            contractEditAssureurSelect.value = matchedOption;
            contractEditOtherInput.value = '';
            syncContractEditOtherVisibility();
        }

        contractEditOverlay.style.display = 'block';
    }

    if (contractEditAssureurSelect) {
        syncContractEditOtherVisibility();
        contractEditAssureurSelect.addEventListener('change', syncContractEditOtherVisibility);
    }

    if (contractEditCloseBtn) contractEditCloseBtn.addEventListener('click', closeContractEditModal);
    if (contractEditCancelBtn) contractEditCancelBtn.addEventListener('click', closeContractEditModal);
    if (contractEditOverlay) {
        contractEditOverlay.addEventListener('click', function(e) {
            if (e.target === contractEditOverlay) closeContractEditModal();
        });
    }

    if (contractEditSaveBtn) {
        contractEditSaveBtn.addEventListener('click', function() {
            if (!editingContractRowEl || !editingContractId) return;

            const selected = contractEditAssureurSelect?.value || '';
            let assureur = selected;

            if (selected === 'Autre') {
                assureur = (contractEditOtherInput?.value || '').trim();
            }

            if (assureur === 'Mutuelle des mots') assureur = 'Mutuelle des motards';
            if (!assureur) {
                alert('Assureur manquant');
                return;
            }

            const details = (contractEditDetailsInput?.value || '').toString();

            const url = `/prospects/${prospectId}/contracts/${editingContractId}`;
            postJson(url, 'PUT', { assureur, details, statut: editingContractStatut })
                .then(data => {
                    if (!data || !data.success) {
                        alert('Erreur lors de la mise à jour du contrat');
                        return;
                    }

                    // Update UI (lecture seule)
                    const row = editingContractRowEl;
                    row.dataset.contractAssureur = assureur;
                    row.dataset.contractDetails = details;

                    const assureurEl = row.querySelector('.js-contract-assureur-text');
                    const detailsEl = row.querySelector('.js-contract-details-text');
                    if (assureurEl) assureurEl.textContent = (assureur || '').toUpperCase();
                    if (detailsEl) detailsEl.textContent = details;

                    handleProspectTypeAfterContractDetailsMutation(data);
                    closeContractEditModal();
                })
                .catch(() => alert('Erreur réseau'));
        });
    }

    // Ouvrir popup au clic sur le stylo
    document.addEventListener('click', function(e) {
        const editBtn = e.target.closest('.js-contract-edit');
        if (!editBtn) return;
        e.preventDefault();

        // Important: le bouton .js-contract-edit possède aussi data-contract-id,
        // donc closest('[data-contract-id]') renverrait le bouton lui-même.
        // On veut le conteneur qui contient les champs affichés (tr/.contract-item).
        const row =
            editBtn.closest('tr[data-contract-id]') ||
            editBtn.closest('.contract-item[data-contract-id]');
        openContractEditModal(row);
    });

    // Affichage "Autre assureur" - Formulaire ajout
    const addSelect = document.getElementById('contractAddAssureurSelect');
    const addOtherInput = document.getElementById('contractAddAssureurOtherInput');
    const addStatusToggle = document.getElementById('contractAddStatusToggle');
    const addStatusLabel = document.getElementById('contractAddStatusLabel');
    const addContainer = document.getElementById('contractAddFormContainer');

    function syncAddAssureurOtherVisibility() {
        if (!addSelect || !addOtherInput) return;
        const show = addSelect.value === 'Autre';
        addOtherInput.style.display = show ? 'block' : 'none';
        if (!show) addOtherInput.value = '';
    }

    function syncAddStatusLabel() {
        if (!addStatusToggle || !addStatusLabel) return;
        addStatusLabel.textContent = addStatusToggle.checked ? 'Actif' : 'Résilié';
    }

    if (addSelect) {
        syncAddAssureurOtherVisibility();
        addSelect.addEventListener('change', syncAddAssureurOtherVisibility);
    }
    if (addStatusToggle) {
        syncAddStatusLabel();
        addStatusToggle.addEventListener('change', syncAddStatusLabel);
    }

    // Ouvrir/fermer la zone "Ajouter un contrat"
    document.addEventListener('click', function(e) {
        const toggleBtn = e.target.closest('.js-toggle-contract-add');
        if (toggleBtn) {
            e.preventDefault();
            if (!addContainer) return;
            addContainer.style.display = addContainer.style.display === 'none' ? 'block' : 'none';
            return;
        }

        const cancelBtn = e.target.closest('.js-contract-add-cancel');
        if (cancelBtn) {
            e.preventDefault();
            if (!addContainer) return;
            addContainer.style.display = 'none';
            return;
        }
    });

    // Toggle visibilité "Autre assureur" - lignes existantes
    document.addEventListener('change', function(e) {
        const assureurSelect = e.target.closest('.js-contract-assureur-select');
        if (!assureurSelect) return;
        const row = assureurSelect.closest('[data-contract-id]');
        if (!row) return;
        const otherInput = row.querySelector('.js-contract-assureur-other-input');
        if (!otherInput) return;

        const show = assureurSelect.value === 'Autre';
        otherInput.style.display = show ? 'block' : 'none';
        if (!show) otherInput.value = '';
    });

    // Toggle statut (actif / résilié) => update immédiat + reload
    document.addEventListener('change', function(e) {
        const statusToggle = e.target.closest('.js-contract-status-toggle');
        if (!statusToggle) return;

        // Idem: l'input possède data-contract-id. On cible le conteneur tr/.contract-item.
        const row =
            statusToggle.closest('tr[data-contract-id]') ||
            statusToggle.closest('.contract-item[data-contract-id]');
        if (!row || !row.dataset.contractId) return;

        const { contractId, assureur, details, statut } = getContractRowValues(row);
        if (!contractId) return;
        if (assureur === '') {
            alert('Assureur manquant');
            return;
        }

        const url = `/prospects/${prospectId}/contracts/${contractId}`;
        postJson(url, 'PUT', { assureur, details, statut })
            .then(data => {
                if (!data || !data.success) {
                    alert('Erreur lors de la mise à jour du contrat');
                    return;
                }
                handleProspectTypeAfterContractMutation(data);
            })
            .catch(() => alert('Erreur réseau'));
    });

    // Sauvegarder assureur + détails (button)
    document.addEventListener('click', function(e) {
        const saveBtn = e.target.closest('.js-contract-details-save');
        if (!saveBtn) return;
        e.preventDefault();

        const row = saveBtn.closest('[data-contract-id]');
        if (!row || !row.dataset.contractId) return;

        const { contractId, assureur, details, statut } = getContractRowValues(row);
        if (!contractId) return;
        if (assureur === '') {
            alert('Assureur manquant');
            return;
        }

        const url = `/prospects/${prospectId}/contracts/${contractId}`;
        postJson(url, 'PUT', { assureur, details, statut })
            .then(data => {
                if (!data || !data.success) {
                    alert('Erreur lors de la mise à jour du contrat');
                    return;
                }
                handleProspectTypeAfterContractDetailsMutation(data);
            })
            .catch(() => alert('Erreur réseau'));
    });

    // Ajouter un contrat
    document.addEventListener('click', function(e) {
        const addBtn = e.target.closest('.js-contract-add-submit');
        if (!addBtn) return;
        e.preventDefault();

        if (!addSelect) return;
        const details = (document.getElementById('contractAddDetailsInput')?.value || '').trim();
        const assureur = getAssureurFromAssureurSelect(addSelect, addOtherInput);
        if (!assureur) {
            alert('Assureur manquant');
            return;
        }

        const statut = addStatusToggle?.checked ? 'actif' : 'resilie';
        const url = `/prospects/${prospectId}/contracts`;
        postJson(url, 'POST', { assureur, details, statut })
            .then(data => {
                if (!data || !data.success) {
                    alert('Erreur lors de la création du contrat');
                    return;
                }
                handleProspectTypeAfterContractMutation(data);
            })
            .catch(() => alert('Erreur réseau'));
    });

    // Supprimer un contrat avec popup
    document.addEventListener('click', function(e) {
        const deleteBtn = e.target.closest('.js-contract-delete');
        if (!deleteBtn) return;
        e.preventDefault();

        const contractId = deleteBtn.getAttribute('data-contract-id');
        const assureur = deleteBtn.getAttribute('data-contract-assureur') || 'ce contrat';
        if (!contractId) return;

        showConfirmDialog(
            'Supprimer le contrat',
            'Supprimer « ' + assureur + ' » ?\n\nCette action est irréversible.',
            () => {
                const url = `/prospects/${prospectId}/contracts/${contractId}`;
                postJson(url, 'DELETE')
                    .then(data => {
                        if (!data || !data.success) {
                            alert('Erreur lors de la suppression du contrat');
                            return;
                        }
                        handleProspectTypeAfterContractMutation(data);
                    })
                    .catch(() => alert('Erreur réseau'));
            },
            'Annuler',
            'Supprimer'
        );
    });
})();

</script>
@endpush

@endsection