@extends('layouts.app')

@php $activePage = 'indicateurs'; @endphp

@section('extra_css')
<style>
    .chart-box {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }

    .chart-header {
        background: linear-gradient(135deg, #1baec7 0%, #6a89cc 100%);
        color: white;
        padding: 15px;
        border-radius: 5px 5px 0 0;
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        margin: -18px -18px 18px -18px;
    }

    .main-charts-wrapper {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .charts-container {
        flex: 0 0 60%;
    }

    .charts-inner-wrapper {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .chart-item {
        flex: 1;
    }

    .info-container {
        flex: 0 0 40%;
    }

    .chart-canvas {
        position: relative;
        height: 280px;
    }

    .chart-footer {
        background: #e8f4f8;
        padding: 12px 15px;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        color: #2c3e50;
        margin-top: 20px;
    }

    .chart-footer strong {
        color: #4a69bd;
    }

    .legend-custom {
        margin-top: 15px;
        padding: 10px 0;
    }

    .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 13px;
    }

    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 8px;
    }

    .legend-text {
        color: #2c3e50;
    }

    .w-full {
        width: 100%;
    }
    .p-3 {
        padding: 12px;
    }
    .border {
        border: 1px solid #ddd;
    }
    .rounded-md {
        border-radius: 4px;
    }
    .block {
        display: block;
    }
    .text-sm {
        font-size: 14px;
    }
    .font-medium {
        font-weight: 500;
    }
    .flex {
        display: flex;
    }
    .gap-3 {
        gap: 12px;
    }
    .flex-1 {
        flex: 1;
    }

    .btn-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .btn-container .btn {
        padding: 12px 24px;
        border-radius: 6px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-width: 250px;
    }

    @media (max-width: 768px) {
        .btn-container {
            flex-wrap: wrap;
        }

        .btn-container .btn {
            width: 100%;
        }

        .main-charts-wrapper {
            flex-direction: column;
        }

        .charts-container,
        .info-container {
            flex: 0 0 100%;
        }
    }

    /* Spinner de chargement */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(255,255,255,.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>
@endsection

@section('content')
<!-- Breadcrumbs -->
<div class="breadcrumbs overlay">
    <div class="container">
        <div class="bread-inner">
            <div class="row">
                <div class="col-12">
                    <h2>Les Indicateurs de l'Observatoire</h2>
                    <ul class="bread-list">
                        <li><a href="{{ route('accueil') }}">Accueil</a></li>
                        <li><i class="icofont-simple-right"></i></li>
                        <li class="active">Indicateurs OPCC</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="service-details-area section">
    <div class="container">
        <div class="services-details-img">
            <h4 class="text-dark">
                <strong>Ratios &euro;/m&sup2; &amp; R&eacute;partition des co&ucirc;ts par chapitre de la nomenclature (Niveau National).</strong>
            </h4>
            <p>
                D&eacute;couvrez les indicateurs cl&eacute;s de l'observatoire permanent des co&ucirc;ts de la construction. Ces donn&eacute;es vous permettent d'analyser les ratios de co&ucirc;ts et la r&eacute;partition par chapitre de nomenclature au niveau national.
            </p>
        </div>

        <div class="main-charts-wrapper">
            <!-- Bloc Gauche: Les deux diagrammes cote a cote -->
            <div class="charts-container">
                <div class="chart-box">
                    <div class="chart-header">
                        Ratio euro/m&sup2; &amp; R&eacute;partition des co&ucirc;ts par chapitre de la nomenclature (Niveau National)
                    </div>

                    <div class="charts-inner-wrapper">
                        <!-- Diagramme a barres -->
                        <div class="chart-item">
                            <div class="chart-canvas">
                                <canvas id="barChart"></canvas>
                            </div>
                        </div>

                        <!-- Diagramme circulaire -->
                        <div class="chart-item">
                            <div class="chart-canvas">
                                <canvas id="pieChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Legend -->
                    <div class="legend-custom" id="legendContainer">
                        <div class="legend-item">
                            <div class="legend-color" style="background: #ef5350;"></div>
                            <span class="legend-text" id="legend-a1">Chargement...</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #5c6bc0;"></div>
                            <span class="legend-text" id="legend-a2">Chargement...</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #ff9800;"></div>
                            <span class="legend-text" id="legend-a3">Chargement...</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #66bb6a;"></div>
                            <span class="legend-text" id="legend-b">Chargement...</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #26c6da;"></div>
                            <span class="legend-text" id="legend-c">Chargement...</span>
                        </div>
                    </div>

                    <div class="chart-footer" id="chartFooter">
                        <span class="loading-spinner"></span> Chargement des donn&eacute;es...
                    </div>
                </div>
            </div>

            <!-- Bloc Droite: Texte et Formulaire -->
            <div class="info-container">
                <div class="service-details-inner">
                    <h2>Acc&egrave;s aux donn&eacute;es d&eacute;taill&eacute;es</h2>
                    <p>
                        Les indicateurs de l'Observatoire permanent des co&ucirc;ts de constructions (OPCC) vous offrent une vision pr&eacute;cise des co&ucirc;ts de construction par poste. Ces donn&eacute;es sont issues de projets finalis&eacute;s et valid&eacute;s au niveau national.
                    </p>
                    <p>
                        <strong>Que contiennent ces indicateurs ?</strong>
                    </p>
                    <ul>
                        <li>- Ratios de co&ucirc;ts au m&sup2; - Surface de planch&eacute; (SDP) et Surface Utile (SU)</li>
                        <li>- R&eacute;partition d&eacute;taill&eacute;e par chapitre de nomenclature (Niveau National)</li>
                        <li>- Analyses comparatives par cath&eacute;gorie de b&acirc;timent</li>
                        <li>- Tendances et &eacute;volutions des co&ucirc;ts, niveau nation et r&eacute;gional</li>
                        <li>- Ces ratios sont &agrave; la date de valeur des prix de 2025, en fonction du dernier indice BT01 connu.</li>
                        <p>Pour en savoir plus, allez sur <a href="https://data-collect.fr/" class="text-primary">Data-Collect.fr</a> et demander un profil utilisateur</p>
                    </ul>
                    <br>
                    <div class="btn-container">
                        <a href="javascript:void(0);" id="btnIndicateurs" class="btn primary text-white" target="_blank">
                            <i class="fas fa-chart-bar mr-2"></i> Acc&eacute;der aux indicateurs OPCC
                        </a>

                        <a href="{{ asset('documentations/template_saisie_automatique_affaire dans_DataCollect.xlsx') }}" download class="btn primary text-white" target="_blank">
                            <i class="fa fa-file mr-2"></i> Template de contribution Data-Collect
                        </a>
                    </div>
                    <!-- Contact Form (Hidden by default) -->
                    <!--
                    <div id="contactFormContainer" style="display: none; margin-top: 25px; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6;">
                        <h3 style="margin-bottom: 20px; color: #2c3e50; font-size: 18px;">
                            <i class="fas fa-envelope mr-2"></i>Formulaire de demande d'acc&egrave;s aux indicateurs d&eacute;taill&eacute;s de l'OPCC
                        </h3>
                        <form id="contactForm">
                            @csrf
                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">Vous &ecirc;tes *</label>
                                <select name="profil" class="w-full p-3 border rounded-md" required>
                                    <option value="">Choisissez une option</option>
                                    <option value="Architecte">Architecte</option>
                                    <option value="Ing&eacute;nieur">Ing&eacute;nieur</option>
                                    <option value="Promoteur Immobilier">Promoteur Immobilier</option>
                                    <option value="Constructeur">Constructeur</option>
                                    <option value="&Eacute;conomiste de la construction">&Eacute;conomiste de la construction</option>
                                    <option value="Autre">Autre</option>
                                </select>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">Nom</label>
                                <input type="text" name="nom" placeholder="Votre nom complet" class="w-full p-3 border rounded-md" required>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">Pr&eacute;nom</label>
                                <input type="text" name="prenom" placeholder="Votre pr&eacute;nom" class="w-full p-3 border rounded-md" required>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">Entreprise</label>
                                <input type="text" name="entreprise" placeholder="Nom de l'entreprise" class="w-full p-3 border rounded-md" required>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">Statut OPCC</label>
                                <select name="statut_opcc" class="w-full p-3 border rounded-md" required>
                                    <option value="Untec">Untec</option>
                                    <option value="USH">USH</option>
                                    <option value="FFB P&ocirc;le Habitat">FFB P&ocirc;le Habitat</option>
                                    <option value="CSTB">CSTB</option>
                                    <option value="FPI">FPI</option>
                                    <option value="Untec Services">Untec Services</option>
                                    <option value="Autre">Autre</option>
                                </select>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">Email professionnel *</label>
                                <input type="email" name="email" placeholder="votre.email@entreprise.fr" class="w-full p-3 border rounded-md" required>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-2">T&eacute;l&eacute;phone *</label>
                                <input type="tel" name="telephone" placeholder="06 12 34 56 78" class="w-full p-3 border rounded-md" required>
                            </div>

                            <-- Zone d'alerte --
                            <div id="formAlert" style="display: none; margin-bottom: 15px; padding: 15px; border-radius: 5px;"></div>

                            <div class="flex gap-3">
                                <button type="submit" class="btn primary text-white flex-1">
                                    <i class="fas fa-paper-plane mr-2"></i>
                                    Envoyer ma demande
                                </button>
                                <button type="button" id="cancelBtn" class="btn primary">
                                    <i class="fas fa-times mr-2"></i>
                                    Annuler
                                </button>
                            </div>
                        </form>
                    </div>
                    -->
                </div>
            </div>
        </div>

        <div class="services-details-img">
            <br><br>
            <h2 class="text-dark">
                <strong>Pourquoi utiliser les indicateurs de l'OPCC ?</strong>
            </h2>
            <p>
                Les indicateurs de l'Observatoire Permanent des Co&ucirc;ts de la Construction vous permettent de disposer de r&eacute;f&eacute;rences fiables et actualis&eacute;es pour vos estimations de projets. Bas&eacute;s sur des donn&eacute;es r&eacute;elles et valid&eacute;es, ils constituent un outil pr&eacute;cieux pour les professionnels de la construction.
            </p>
            <blockquote>
                <i class="fa fa-quote-left"></i>
                Gr&acirc;ce aux indicateurs de l'OPCC, vous b&eacute;n&eacute;ficiez d'une vision claire et objective des co&ucirc;ts de construction au niveau national. Ces donn&eacute;es vous aident &agrave; affiner vos estimations, &agrave; comparer vos projets et &agrave; prendre des d&eacute;cisions &eacute;clair&eacute;es pour vos investissements immobiliers.
                Pour en savoir plus, allez sur <a href="https://data-collect.fr/" class="text-primary">Data-Collect.fr</a> et demander un profil utilisateur.
            </blockquote>
        </div>
        <br><br>
    </div>
</div>
@endsection

@section('extra_js')
<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<!-- Chart.js Datalabels Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>

<script>
    // Configuration de l'API
    const API_URL = 'https://api-indicateurs.data-collect.fr/api';

    // Variables globales pour les graphiques
    let barChart, pieChart;

    // Register the plugin
    Chart.register(ChartDataLabels);

    // Fonction de formatage des nombres
    function formatNumber(number) {
        return new Intl.NumberFormat('fr-FR', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(number);
    }

    // Fonction pour charger les statistiques depuis l'API
    async function chargerStatistiques() {
        try {
            const response = await fetch(`${API_URL}/statistiques-nationales`);

            if (!response.ok) {
                throw new Error(`Erreur API: ${response.status}`);
            }

            const result = await response.json();

            if (!result.success) {
                throw new Error(result.message || 'Erreur lors de la r\u00e9cup\u00e9ration des donn\u00e9es');
            }

            const data = result.data;

            // Mettre a jour les graphiques
            mettreAJourGraphiques(data);

            // Mettre a jour la legende
            mettreAJourLegende(data);

            // Mettre a jour le footer
            mettreAJourFooter(data);

        } catch (error) {
            console.error('Erreur lors du chargement des statistiques:', error);

            document.getElementById('chartFooter').innerHTML =
                '<span style="color: #e74c3c;"><i class="fas fa-exclamation-triangle"></i> Erreur de connexion \u00e0 l\'API. V\u00e9rifiez que le serveur est lanc\u00e9 sur le port 3000.</span>';
        }
    }

    // Fonction pour mettre a jour les graphiques
    function mettreAJourGraphiques(data) {
        if (barChart) barChart.destroy();
        if (pieChart) pieChart.destroy();

        // Bar Chart avec donnees dynamiques
        const barCtx = document.getElementById('barChart').getContext('2d');
        barChart = new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: ['Co\u00fbt Euro/m\u00b2 SDP', 'Co\u00fbt Euro/m\u00b2 SU'],
                datasets: [{
                    data: [
                        parseFloat(data.cout_moyen_sdp) || 0,
                        parseFloat(data.cout_moyen_su) || 0
                    ],
                    backgroundColor: ['#e91e63', '#673ab7'],
                    borderRadius: 8,
                    barThickness: 80
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return formatNumber(context.parsed.y) + ' \u20ac HT';
                            }
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'top',
                        formatter: function(value) {
                            return formatNumber(value) + ' \u20ac HT';
                        },
                        color: '#000',
                        font: { weight: 'bold', size: 12 },
                        offset: 4
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: Math.ceil((Math.max(
                            parseFloat(data.cout_moyen_sdp) || 0,
                            parseFloat(data.cout_moyen_su) || 0
                        ) * 1.2) / 500) * 500,
                        title: { display: true, text: 'Euros HT' },
                        ticks: {
                            callback: function(value) {
                                return formatNumber(value);
                            }
                        }
                    },
                    x: { grid: { display: false } }
                }
            }
        });

        // Calculer les pourcentages pour le diagramme circulaire
        const repartition = data.repartition || {};
        const total =
            parseFloat(repartition.infrastructure || 0) +
            parseFloat(repartition.superstructure || 0) +
            parseFloat(repartition.equipement || 0) +
            parseFloat(repartition.sujection_adaptation_site || 0) +
            parseFloat(repartition.equipement_specialise || 0);

        const pourcentages = {
            a1: ((parseFloat(repartition.infrastructure || 0) / total) * 100).toFixed(1),
            a2: ((parseFloat(repartition.superstructure || 0) / total) * 100).toFixed(1),
            a3: ((parseFloat(repartition.equipement || 0) / total) * 100).toFixed(1),
            b: ((parseFloat(repartition.sujection_adaptation_site || 0) / total) * 100).toFixed(1),
            c: ((parseFloat(repartition.equipement_specialise || 0) / total) * 100).toFixed(1)
        };

        // Pie Chart avec donnees dynamiques
        const pieCtx = document.getElementById('pieChart').getContext('2d');
        pieChart = new Chart(pieCtx, {
            type: 'doughnut',
            data: {
                labels: ['A1', 'A2', 'A3', 'B', 'C'],
                datasets: [{
                    data: [
                        parseFloat(pourcentages.a1),
                        parseFloat(pourcentages.a2),
                        parseFloat(pourcentages.a3),
                        parseFloat(pourcentages.b),
                        parseFloat(pourcentages.c)
                    ],
                    backgroundColor: ['#ef5350', '#5c6bc0', '#ff9800', '#66bb6a', '#26c6da'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    },
                    datalabels: {
                        color: '#fff',
                        font: { weight: 'bold', size: 14 },
                        formatter: function(value) {
                            return value + '%';
                        }
                    }
                }
            }
        });
    }

    // Fonction pour mettre a jour la legende
    function mettreAJourLegende(data) {
        const repartition = data.repartition || {};

        document.getElementById('legend-a1').textContent =
            `A1 - Infrastructure (${formatNumber(repartition.infrastructure || 0)} \u20ac HT)`;
        document.getElementById('legend-a2').textContent =
            `A2 - Superstructure (${formatNumber(repartition.superstructure || 0)} \u20ac HT)`;
        document.getElementById('legend-a3').textContent =
            `A3 - \u00c9quipement (${formatNumber(repartition.equipement || 0)} \u20ac HT)`;
        document.getElementById('legend-b').textContent =
            `B - Suggestion Adaptation Site (${formatNumber(repartition.sujection_adaptation_site || 0)} \u20ac HT)`;
        document.getElementById('legend-c').textContent =
            `C - \u00c9quipement Sp\u00e9cialis\u00e9 (${formatNumber(repartition.equipement_specialise || 0)} \u20ac HT)`;
    }

    // Fonction pour mettre a jour le footer
    function mettreAJourFooter(data) {
        document.getElementById('chartFooter').innerHTML =
            `Ces Ratios sont issus de <strong>${data.nombre_total_projets}</strong> projets finalis\u00e9s au niveau national, valid\u00e9s conforme toute cat\u00e9gorie de construction. Type de construction : Neuf et R\u00e9novation`;
    }

    // Charger les donnees au chargement de la page
    document.addEventListener('DOMContentLoaded', function() {
        chargerStatistiques();
    });

    // Gestion du bouton avec animation de chargement de 2 secondes
    document.getElementById('btnIndicateurs').addEventListener('click', function(e) {
        e.preventDefault();
        const btn = this;
        const originalContent = btn.innerHTML;

        // Afficher le spinner de chargement
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement en cours...';
        btn.style.pointerEvents = 'none'; // Désactiver les clics pendant le chargement

        // Attendre 2 secondes puis rediriger
        setTimeout(function() {
            window.location.href = "{{ route('indicateurs-opcc') }}";
        }, 2000);
    });

    /*
    // Show/Hide contact form
    document.getElementById('voirPlanBtn').addEventListener('click', function(e) {
        e.preventDefault();
        const formContainer = document.getElementById('contactFormContainer');
        const button = document.getElementById('voirPlanBtn');

        if (formContainer.style.display === 'none') {
            formContainer.style.display = 'block';
            button.innerHTML = '<i class="fas fa-eye-slash mr-2"></i>Masquer le formulaire';
            setTimeout(function() {
                formContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 100);
        } else {
            formContainer.style.display = 'none';
            button.innerHTML = '<i class="fas fa-eye mr-2"></i>En Savoir Plus sur les indicateurs';
        }
    });

    // Cancel button
    document.getElementById('cancelBtn').addEventListener('click', function() {
        const formContainer = document.getElementById('contactFormContainer');
        const button = document.getElementById('voirPlanBtn');

        formContainer.style.display = 'none';
        button.innerHTML = '<i class="fas fa-eye mr-2"></i>En Savoir Plus sur les indicateurs';
        document.getElementById('contactForm').reset();
    });

    // Fonction pour afficher une alerte styl&eacute;e dans le formulaire
    function showFormAlert(type, message) {
        const alertDiv = document.getElementById('formAlert');
        if (type === 'success') {
            alertDiv.style.background = '#d4edda';
            alertDiv.style.color = '#155724';
            alertDiv.style.border = '1px solid #c3e6cb';
            alertDiv.innerHTML = '<i class="fas fa-check-circle" style="margin-right:8px;"></i>' + message;
        } else {
            alertDiv.style.background = '#f8d7da';
            alertDiv.style.color = '#721c24';
            alertDiv.style.border = '1px solid #f5c6cb';
            alertDiv.innerHTML = '<i class="fas fa-exclamation-triangle" style="margin-right:8px;"></i>' + message;
        }
        alertDiv.style.display = 'block';
        alertDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function hideFormAlert() {
        const alertDiv = document.getElementById('formAlert');
        if (alertDiv) alertDiv.style.display = 'none';
    }

    // Masquer l'alerte quand l'utilisateur modifie un champ
    document.querySelectorAll('#contactForm input, #contactForm select').forEach(function(el) {
        el.addEventListener('focus', hideFormAlert);
    });

    // Form submission → envoi email via Laravel puis redirection vers indicateurs-opcc
    document.getElementById('contactForm').addEventListener('submit', function(e) {
        e.preventDefault();
        hideFormAlert();

        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Envoi en cours...';
        submitBtn.disabled = true;

        const formData = new FormData(e.target);

        fetch("{{ route('demande-indicateurs') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(errData => {
                    throw errData;
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                showFormAlert('success', 'Votre demande a \u00e9t\u00e9 envoy\u00e9e avec succ\u00e8s ! Redirection en cours...');
                document.getElementById('contactForm').reset();
                setTimeout(function() {
                    window.location.href = "{{ route('indicateurs-opcc') }}";
                }, 2000);
            } else {
                showFormAlert('error', data.message || 'Une erreur est survenue. Veuillez r\u00e9essayer.');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            let errorMsg = 'Une erreur est survenue lors de l\'envoi. Veuillez r\u00e9essayer.';
            if (error && error.errors) {
                errorMsg = '';
                for (let field in error.errors) {
                    errorMsg += error.errors[field].join(', ') + '<br>';
                }
            } else if (error && error.message) {
                errorMsg = error.message;
            }
            showFormAlert('error', errorMsg);
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
    **/
</script>
@endsection