@extends('layouts.base')

@section('title', 'Devis - ' . (Auth::check() ? Auth::user()->t_structure->libelle : 'Invité'))

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" integrity="sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* Style pour l'overlay qui couvre toute la page */
    .loader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* Opacité grisâtre */
        display: none; /* Initialement caché */
        z-index: 9999; /* Assurez-vous que c'est au-dessus du contenu */
        justify-content: center;
        align-items: center;
    }

    /* Style du spinner centré */
    .spinner {
        border: 4px solid rgba(255, 255, 255, 0.3); /* Couleur claire */
        border-top: 4px solid white; /* Couleur du spinner */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    /* Animation du spinner */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    </style>
@endpush

@section('breadcrumb')
    <div class="subheader-block d-lg-flex align-items-center">
        <ol class="breadcrumb page-breadcrumb m-0 mr-4">
            <li class="breadcrumb-item"><a href="{{ route('accueil') }}">Tableau de bord</a></li>
            <li class="breadcrumb-item">@yield('title')</li>
        </ol>
    </div>
@endsection

@push('filtre')
    <!-- 📌 Filtre par date stylisé avec icônes -->
    <div class="ml-4 d-flex align-items-center">
        <i class="fal fa-filter text-white mr-2"></i> <!-- Icône de filtre -->

        <!-- 📌 Filtre par date de début et de fin -->
        <label for="startDate" class="text-white mr-1">Date:</label>
        <input type="date" id="startDate" class="form-control ml-2" placeholder="Date de début">

        <label for="endDate" class="text-white mr-1 ml-2">Fin:</label>
        <input type="date" id="endDate" class="form-control ml-2" placeholder="Date de fin">

        <select id="yearFilter" class="form-control custom-select ml-2">
            <option value="all">📊 Tous</option>
            @php
                $currentYear = date('Y');
                for ($i = 0; $i < 3; $i++) {
                    $year = $currentYear - $i;
                    echo "<option value='$year'>📅 $year</option>";
                }
            @endphp
        </select>
    </div>

    <!-- Overlay de chargement -->
    <div id="loader-overlay" class="loader-overlay" style="display: none;">
        <div class="spinner"></div>
    </div>

@endpush

@section('content')
<main id="js-page-content" role="main" class="page-content">
    <div class="row etiquettes">
        <div class="col-sm-6 col-xl-6">
            <div class="rotate-devis p-3 bg-primary-400-blue rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        <span id="t_devis_en_ettente">{{ $nbrDevisEnAttente }}</span>
                        <small class="card-number m-0 l-h-n">Devis en attente de validation</small>
                        <br>
                        <small class="card-infos m-0 l-h-n">Montant total : <b><span id="t_devis_total_encours">{{ number_format($totalEnCours, thousands_separator: ' ', decimal_separator: ',', decimals: 2) }}€</span></b></small>
                    </h3>
              </div>
                <i class="ni ni-calculator position-absolute pos-right pos-top opacity-25 mt-n3 mr-n2" style="font-size: 8.2rem;"></i>
            </div>
        </div>
        <div class="col-sm-6 col-xl-6">
            <div class="rotate-devis p-3 bg-primary-400-blue rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        <span id="t_devis_year">{{ $nbrCommandeOfYear }}</span>
                        <small class="card-number m-0 l-h-n">Devis acceptés</small>
                        <br>
                        <small id="selectedYear" class="card-infos m-0 l-h-n">en <b>{{ date('Y') }}</b></small>
                    </h3>
              </div>
                <i class="ni ni-calculator position-absolute pos-right pos-top opacity-25 mt-n3 mr-n2" style="font-size: 8.2rem;"></i>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="card border-0 mb-3 col-xl-8 col-md-8">
            <div class="card-body">
                <div class="row pl-3 pr-3 pb-3">
                    <h3 class="d-flex flex-row mr-auto align-items-center"><i class="ni ni-calculator devis t-ico color-primary-400 fa-2x"></i>&nbsp; Devis</h3>
                    <div class="d-flex mr-4 align-items-center">
                        <div class="mr-2">
                            <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#a1a8ae&quot;, &quot;#a1a8ae63&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">{{ $statEnCours / 10 }}/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">En attente</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_devis_stat_encours">{{ $statEnCours  }}%</span></h4>
                        </div>
                    </div>
                    <div class="d-flex mr-0">
                        <div class="mr-2">
                            <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#d6dd39&quot;, &quot;#d6dd394d&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">{{ $statCommande / 10 }}/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">Commandés</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_devis_stat_commande">{{ $statCommande }}%</span></h4>
                        </div>
                    </div>
                </div>
                <div class="row" id="cd-devis" style="display: none; margin-bottom: 5px;">
                </div>
                <div class="row mr-2 ml-2 mt-3">
                    <div class="col-md-12">
                        <!-- datatable start -->
                        <table id="dt-devis" class="table table-bordered table-hover table-striped w-100">
                            <thead class="bg-primary-100">
                                <tr>
                                    <th>Date</th>
                                    <th>Site</th>
                                    <th>Numéro</th>
                                    <th>Titre</th>
                                    <th>Montant</th>
                                    <th>Fichier</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($devis as $row)
                            <tr>
                                <td data-order="{{ $row->date_create ? $row->date_create->format('Y-m-d') : '' }}">
                                    {{ ($row->date_update) ? $row->date_update->format('d/m/Y') : '-' }}
                                </td>
                                <td>
                                    @php
                                        // Vérifier si des "t_devis_locations" existent
                                        $locations = $row->t_devis_locations;
                                        $firstLocation = $locations->first();
                                        $moreLocations = $locations->slice(1);
                                    @endphp

                                    <!-- Affichage du premier lieu -->
                                    @if($firstLocation)
                                        <div>
                                            <b>{{ $firstLocation->t_location->libelle ?? '-' }}</b>
                                            <br>
                                            {{ $firstLocation->t_location->adresse ?? '-' }}
                                            <br>
                                            {{ $firstLocation->t_location->cp ?? '-' }} -
                                            {{ $firstLocation->t_location->ville ?? '-' }}
                                            <br>
                                            @if($firstLocation->t_location->latitude != 0 && $firstLocation->t_location->longitude != 0)
                                                <a href="#" class="btn btn-primary btn-sm fly-to" data-lat="{{ $firstLocation->t_location->latitude }}" data-lon="{{ $firstLocation->t_location->longitude }}">
                                                    <i class="fal fa-map-marked-alt"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">Coordonnée non trouvée</span>
                                            @endif
                                        </div>
                                    @endif

                                    <!-- Affichage du bouton "Voir tous les lieux" si plusieurs lieux existent -->
                                    @if($moreLocations->isNotEmpty())
                                        <button class="btn btn-primary btn-sm mt-2" type="button" data-toggle="collapse" data-target="#locations-{{ $row->id }}" aria-expanded="false" aria-controls="locations-{{ $row->id }}">
                                            Voir tous les lieux
                                        </button>
                                        <div class="collapse" id="locations-{{ $row->id }}">
                                            @foreach($moreLocations as $location)
                                                <div class="mt-2">
                                                    <b>{{ $location->t_location->libelle ?? '-' }}</b>
                                                    <br>
                                                    {{ $location->t_location->adresse ?? '-' }}
                                                    <br>
                                                    {{ $location->t_location->cp ?? '-' }} -
                                                    {{ $location->t_location->ville ?? '-' }}
                                                    <br>
                                                    @if($location->t_location->latitude != 0 && $location->t_location->longitude != 0)
                                                        <a href="#" class="btn btn-primary btn-sm fly-to" data-lat="{{ $location->t_location->latitude }}" data-lon="{{ $location->t_location->longitude }}">
                                                            <i class="fal fa-map-marked-alt"></i>
                                                        </a>
                                                    @else
                                                        <span class="text-muted">Coordonnée non trouvée</span>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $row->id_libelle }}</td>
                                <td>{{ $row->libelle }}</td>
                                <td data-order="{{ $row->total_ht }}">
                                    @if ($row->total_ht > 0)
                                    {{ number_format($row->total_ht, thousands_separator: ' ', decimal_separator: ',', decimals: 2) }}€
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($row->fichier() !== '#')
                                    <a href="{{ $row->fichier() }}?t={{ $tokenFile }}" target="_blank" title="Consulter le devis en PDF" class="btn btn-primary waves-effect waves-themed">
                                    <i class="fal fa-file-invoice img-responsive"></i>
                                    </a>
                                    @else
                                    <span class="text-muted">Fichier non disponible</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $statut = $row->statut();
                                    @endphp
                                    <span @class(['status d-inline-block', 'valide'=> $statut === 'commandé', 'traite' => $statut === 'en cours'])>
                                        <i class="ni ni-calculator img-responsive rounded-circle ico-tab"></i>
                                        <span class="status-value">{{ $statut }}</span>
                                    </span>
                                </td>
                            </tr>
                            @empty
                            {{-- Laisser vide car l'absence de donnée est géré par DataTable --}}
                            <tr>
                                <td colspan="7" class="text-center">Aucun enregistrement trouvé</td>
                            </tr>
                            @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Date</th>
                                    <th>Site</th>
                                    <th>Numéro</th>
                                    <th>Titre</th>
                                    <th>Montant</th>
                                    <th>Fichier</th>
                                    <th id="filterStatus">Statut</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-4">
            <div class="card border-0 d-flex flex-fill">
                <div class="card-body" >
                    <div class="card-title text-dark fs-5 font-weight-bold"><i class="fal fa-map-marked-alt fa-lg mr-2"></i>Géolocalisation</div>
                    <div id="map" style="height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('script')
<script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js" integrity="sha512-OFs3W4DIZ5ZkrDhBFtsCP6JXtMEDGmhl0QPlmWYBJay40TT1n3gt2Xuw8Pf/iezgW9CdabjkNChRqozl/YADmg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    var map = L.map('map').setView([46.6070, 2.2897], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(map);

    var markersLayer = L.markerClusterGroup();  // Utiliser MarkerClusterer

    // Récupérer les données de marqueurs depuis Laravel
    var markers = @json($markers);

    // Filtrer les marqueurs pour éliminer les doublons
    var uniqueMarkers = [];
    var seenCoordinates = new Set();

    markers.forEach(function(marker) {
        // Vérifier que les coordonnées sont valides (non nulles et non égales à 0)
        var lat = marker.coordinates[0];
        var lon = marker.coordinates[1];

        // Créer une clé unique basée sur la latitude et la longitude
        var coordinateKey = lat + "," + lon;

        if (lat !== 0 && lon !== 0 && lat !== null && lon !== null) {
            // Vérifier si les coordonnées ont déjà été vues
            if (!seenCoordinates.has(coordinateKey)) {
                seenCoordinates.add(coordinateKey);  // Marquer comme "vu"
                uniqueMarkers.push(marker);  // Ajouter le marqueur aux marqueurs uniques
            }
        }
    });

    // Ajouter les marqueurs uniques à la carte
    uniqueMarkers.forEach(function(marker) {
        // Construire le contenu de la popup
        var popupContent = `<strong>${marker.title}</strong><br>
                            ${marker.adresse}<br>
                            ${marker.cp} <br>
                            ${marker.ville}`;

        var lat = marker.coordinates[0];
        var lon = marker.coordinates[1];

        // Créer un marqueur Leaflet avec le contenu de la popup
        var leafletMarker = L.marker([lat, lon])
            .bindPopup(popupContent);

        // Ajouter le marqueur au groupe de clusters
        // markersLayer.addLayer(leafletMarker);
        map.addLayer(leafletMarker);
    });


    // Gestion des clics sur les icônes pour voler vers les marqueurs
    $(document).on("click", ".fly-to", function(event) {
        event.preventDefault(); // Empêcher l'ouverture du lien

        let lat = $(this).data("lat");
        let lon = $(this).data("lon");

        if (lat && lon && typeof map !== "undefined") {
            map.flyTo([lat, lon], 18); // Ajuster le zoom
        } else {
            alert("Carte non définie ou coordonnées invalides.");
        }
    });
</script>
<script>
    //Devis
    $(document).ready(function () {
        let table = $('#dt-devis').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            columns: [
                { width: '5%' },
                { width: '45%' },
                { width: '10%' },
                { width: '15%' },
                { width: '5%' },
                { width: '5%' },
                { width: '15%' }
            ],
            language: {
                searchPlaceholder: 'Rechercher',
                url: "{{ asset('assets/js/core/fr-FR.json') }}"
            },
            lengthChange: true,
            dom: `<'row mb-3'<'col-md-6 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'lB>>
                <'row'<'col-12'tr>>
                <'row'<'col-md-5'i><'col-md-7'p>>`,
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-devis',
                    action: function () {
                        toggleView('#dt-devis', '#cd-devis', '.dt-btn-devis', '.cd-btn-devis');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-devis',
                    action: function () {
                        toggleView('#cd-devis', '#dt-devis', '.cd-btn-devis', '.dt-btn-devis');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-devis').insertBefore('#dt-devis');
                addColumnFilters(this.api());
            },
            rowCallback: function (row, data) {
                let item = $(`
                    <div class="col-sm-6 col-md-4 p-1 mb-2">
                            <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center border-devis">
                                ${data[6]}
                                <div class="ml-2">
                                    <h5>Devis : ${data[2]}</h5>
                                    <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}
                                </div>
                            </div>
                    </div>`);
                $('#cd-devis').append(item);
            },
            preDrawCallback: function () {
                $('#cd-devis').empty();
            }
        });

        function toggleView(show, hide, btnActive, btnInactive) {
            $(show).show();
            $(hide).hide();
            $(btnActive).addClass('active');
            $(btnInactive).removeClass('active');
        }

        function addColumnFilters(api) {
            api.columns().every(function () {
                let column = this;
                let header = $(column.header());

                if (header.text().trim() === 'Statut') {
                    let select = $('<select class="form-control"><option value="">Tous</option><option value="en cours">En attente</option><option value="commandé">Commandées</option></select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else {
                    let input = $('<input type="text" class="form-control" placeholder="Rechercher">')
                        .appendTo(header)
                        .on('keyup', function () {
                            column.search($(this).val()).draw();
                        });
                }
            });
        }

        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            let selected = $('#filterStatus').val();
            let status = $(table.row(dataIndex).node()).find('.status-value').text().trim();
            return selected === '' || selected === status;
        });

        $('#filterStatus').on('change', function () {
            table.draw();
        }).trigger('change');
    });
</script>
@endpush

@push('script_02')
<script>

    let table;

    // Initialisation de la table au démarrage
    function initDataTable() {
        table = $('#dt-devis').DataTable({
            order: [[0, 'desc']],
            destroy: true,
            language: {

                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            dom: `<'row mb-3'<'col-md-6 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'lB>>
                <'row'<'col-12'tr>>
                <'row'<'col-md-5'i><'col-md-7'p>>`,
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-devis',
                    action: function () {
                        toggleView('#dt-devis', '#cd-devis', '.dt-btn-devis', '.cd-btn-devis');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-devis',
                    action: function () {
                        toggleView('#cd-devis', '#dt-devis', '.cd-btn-devis', '.dt-btn-devis');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-devis').insertBefore('#dt-devis');
                addColumnFilters(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-devis').length === 0) {
                    $('body').append('<div class="row" id="cd-devis" style="display: none; margin-bottom: 5px;">');
                }
                let item = $(`
                    <div class="col-sm-6 col-md-4 p-1 mb-2">
                            <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center border-devis">
                                ${data[6]}
                                <div class="ml-2">
                                    <h5>Devis : ${data[2]}</h5>
                                    <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}
                                </div>
                            </div>
                    </div>`);
                $('#cd-devis').append(item);
            },
            preDrawCallback: function () {
                $('#cd-devis').empty();
            }
        });

        // Gestion des clics sur les icônes pour voler vers les marqueurs
        $(".fly-to").click(function(event){
            event.preventDefault();

            var lat = $(this).data('lat');
            var lon = $(this).data('lon');

            if (lat && lon) {
                map.flyTo([lat, lon], 18);
            } else {
                alert("Coordinates not available.");
            }
        });
    }

    function toggleView(show, hide, btnActive, btnInactive) {
        $(show).show();
        $(hide).hide();
        $(btnActive).addClass('active');
        $(btnInactive).removeClass('active');
    }

    function addColumnFilters(api) {
        api.columns().every(function () {
            let column = this;
            let header = $(column.header());

            if (header.text().trim() === 'Statut') {
                let select = $('<select class="form-control"><option value="">Tous</option><option value="en cours">En attente</option><option value="commandé">Commandées</option></select>')
                    .appendTo(header)
                    .on('change', function () {
                        column.search($(this).val()).draw();
                    });
            } else {
                let input = $('<input type="text" class="form-control" placeholder="Rechercher">')
                    .appendTo(header)
                    .on('keyup', function () {
                        column.search($(this).val()).draw();
                    });
            }
        });
    }

    // Assure-toi que ta table est bien initialisée DataTable
    document.getElementById('startDate').addEventListener('change', updateData);
    document.getElementById('endDate').addEventListener('change', updateData);
    document.getElementById('yearFilter').addEventListener('change', updateData);

    function updateData() {

        // Afficher le loader
        showLoader();

        let startDate = document.getElementById('startDate').value;
        let endDate = document.getElementById('endDate').value;
        let selectedYear = document.getElementById('yearFilter').value;

        let url = `/devis/data`;

        // Ajouter les paramètres selon les sélections
        let queryParams = [];

        if (startDate && endDate) {
            queryParams.push(`start_date=${startDate}`);
            queryParams.push(`end_date=${endDate}`);
        } else if (selectedYear !== 'all') {
            queryParams.push(`year=${selectedYear}`);
        }

        // Si des paramètres sont présents, les ajouter à l'URL
        if (queryParams.length > 0) {
            url += `?${queryParams.join('&')}`;
        }

        // Effectuer la requête AJAX
        fetch(url)
            .then(response => response.json())
            .then(data => {
                // Si l'utilisateur a sélectionné "Tous", on affiche l'année actuelle
                if (selectedYear === 'all') {
                    selectedYear = new Date().getFullYear();
                }
                document.getElementById('selectedYear').innerHTML = `en <b>${selectedYear}</b>`;
                document.getElementById('t_devis_en_ettente').innerText = data.nbrDevisEnAttente ?? 0;
                document.getElementById('t_devis_year').innerText = data.nbrCommandeOfYear ?? 0;
                document.getElementById('t_devis_stat_encours').innerText = data.statEnCours ?? 0;
                document.getElementById('t_devis_stat_commande').innerText = data.statCommande ?? 0;
                document.getElementById('t_devis_year').innerText = data.nbrCommandeOfYear ?? 0;
                document.getElementById('t_devis_total_encours').innerText = new Intl.NumberFormat('fr-FR', {
                        style: 'currency', currency: 'EUR'
                    }).format(data.totalEnCours ?? 0);
                updateDevisTable(data.devis ?? [], data.tokenFile ?? '');

                // Met à jour les jauges Peity avec les nouvelles données
                updatePeityCharts(data.statEnCours, data.statCommande);

                // Masquer le loader après avoir mis à jour les données
                hideLoader();
            })
            .catch(error => {
                console.error('Erreur de mise à jour des données :', error);

                // Masquer le loader en cas d'erreur
                hideLoader();
            });
    }

    function updateDevisTable(devis, tokenFile) {
        // Détruire la table existante avant de la réinitialiser
        if ($.fn.DataTable.isDataTable('#dt-devis')) {
            $('#dt-devis').DataTable().clear().destroy();
        }

        $('#dt-devis thead th select, #dt-devis thead th input').remove();

        const tbody = $("#dt-devis tbody");
        tbody.empty();

        devis.forEach(devi => {
            let dateCreate = devi.date_create ? new Date(devi.date_create).toLocaleDateString('fr-FR') : '-';

            // Gestion des lieux (t_devis_locations)
            let locationHTML = '';
            if (devi.t_devis_locations && devi.t_devis_locations.length > 0) {
                let firstLocation = devi.t_devis_locations[0];
                let moreLocations = devi.t_devis_locations.slice(1);

                locationHTML = `
                    <b>${firstLocation.t_location.libelle ?? '-'}</b><br>
                    ${firstLocation.t_location.adresse ?? '-'}<br>
                    ${firstLocation.t_location.cp ?? '-'} - ${firstLocation.t_location.ville ?? '-'}<br>`;

                if (firstLocation.t_location.latitude !== 0 && firstLocation.t_location.longitude !== 0) {
                    locationHTML += `
                        <a href="#" class="btn btn-primary btn-sm fly-to" data-lat="${firstLocation.t_location.latitude}" data-lon="${firstLocation.t_location.longitude}">
                            <i class="fal fa-map-marked-alt"></i>
                        </a>`;
                } else {
                    locationHTML += `<span class="text-muted">Coordonnée non trouvée</span>`;
                }

                if (moreLocations.length > 0) {
                    let locationId = `locations-${devi.id}`;
                    locationHTML += `
                        <button class="btn btn-primary btn-sm mt-2" type="button" data-toggle="collapse" data-target="#${locationId}" aria-expanded="false" aria-controls="${locationId}">
                            Voir tous les lieux
                        </button>
                        <div class="collapse" id="${locationId}">`;

                    moreLocations.forEach(location => {
                        locationHTML += `
                            <div class="mt-2">
                                <b>${location.t_location.libelle ?? '-'}</b><br>
                                ${location.t_location.adresse ?? '-'}<br>
                                ${location.t_location.cp ?? '-'} - ${location.t_location.ville ?? '-'}<br>`;

                        if (location.t_location.latitude !== 0 && location.t_location.longitude !== 0) {
                            locationHTML += `
                                <a href="#" class="btn btn-primary btn-sm fly-to" data-lat="${location.t_location.latitude}" data-lon="${location.t_location.longitude}">
                                    <i class="fal fa-map-marked-alt"></i>
                                </a>`;
                        } else {
                            locationHTML += `<span class="text-muted">Coordonnée non trouvée</span>`;
                        }

                        locationHTML += `</div>`;
                    });

                    locationHTML += `</div>`;
                }
            } else {
                locationHTML = "<span class='text-muted'>Aucune location</span>";
            }

            // Format du prix
            let totalHT = devi.total_ht ? Number(devi.total_ht).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + "€" : "-";

            // Statut du devis
            let statutClass = devi.statut === "commandé" ? "valide" : (devi.statut === "en cours" ? "traite" : "");
            let statutText = devi.statut === "commandé" ? "commandé" : (devi.statut === "en cours" ? "en cours" : "");
            let statutHTML = `
                <span class="status d-inline-block ${statutClass}">
                    <i class="ni ni-calculator img-responsive rounded-circle ico-tab"></i>
                    <span class="status-value">${statutText}</span>
                </span>`;

            // Lien vers le fichier PDF
            let fichierHTML = devi.fichier && devi.fichier !== "#" ?
                `<a href="${devi.fichier}?t=${tokenFile}" target="_blank" title="Consulter le devis en PDF" class="btn btn-primary waves-effect waves-themed">
                    <i class="fal fa-file-invoice img-responsive"></i>
                </a>` :
                `<span class="text-muted">Fichier non disponible</span>`;

            // Création de la ligne du tableau
            const rowHTML = `
                <tr>
                    <td data-order="${devi.date_create ?? ''}">${dateCreate}</td>
                    <td>${locationHTML}</td>
                    <td>${devi.id_libelle}</td>
                    <td>${devi.libelle}</td>
                    <td data-order="${devi.total_ht}">${totalHT}</td>
                    <td class="text-center">${fichierHTML}</td>
                    <td>${statutHTML}</td>
                </tr>`;

            tbody.append(rowHTML);
        });

        initDataTable();
    }

    // Fonction pour afficher le loader
    function showLoader() {
        document.getElementById('loader-overlay').style.display = 'flex';
    }

    // Fonction pour masquer le loader
    function hideLoader() {
        document.getElementById('loader-overlay').style.display = 'none';
    }

    // Fonction pour mettre à jour les jauges Peity avec les nouvelles données
    function updatePeityCharts(statEnCours, statCommande) {

        // Sélectionner les éléments de jauge par leur classe .peity-donut
        const encoursElement = document.querySelectorAll('.peity-donut')[0];
        const commandeElement = document.querySelectorAll('.peity-donut')[1];

        // Mettre à jour les données des jauges avec les nouvelles valeurs converties
        if (encoursElement) {
            encoursElement.innerText = `${statEnCours/10 ?? 0}/10`;
        }
        if (commandeElement) {
            commandeElement.innerText = `${statCommande/10 ?? 0}/10`;
        }

        // Redessiner les jauges Peity en utilisant les nouvelles valeurs
        $(".peity-donut").peity("donut");
    }

</script>
@endpush