@extends('layouts.base')

@section('title', 'Tableau de bord')

@push('styles')
    <link rel="stylesheet" media="screen, print" href="{{ asset('/assets/css/fullcalendar/fullcalendar.bundle.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist-plugin-legend/0.6.2/chartist-plugin-legend.js"></script>
    <link rel="stylesheet" media="screen, print" href="{{ asset('/assets/css/c3/c3.css') }}">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.css" rel="stylesheet">
    <style>
        .map-nav.card-header.card-tabs {
            margin-right: 100px;
        }
        /* .color-box {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-left: 3px;
        vertical-align: middle;
        } */
    </style>
    <style>
    /* Légende Rectangle (Première) */
    .legend.planning {
        display: flex;
        justify-content: end; /* Centré */
        gap: 6px; /* Espacement entre chaque élément */
        margin-top: 5px;
    }

    .legend-item.planning {
        display: flex;
        align-items: center;
        gap: 10px; /* Espace entre le texte et la couleur */
        font-size: 13px;
    }

    .color-box {
        width: 15px;
        height: 15px;
        border-radius: 0px; /* Rectangle */
    }

    /* Légende des Statuts (Deuxième) */
    .legend-status {
        display: flex;
        justify-content: flex-end; /* Aligne à droite */
        gap: 6px;
        margin-bottom: 7px;
        margin-top: 0px;
    }

    .status-box {
        width: 15px;
        height: 15px;
        border-radius: 50%; /* Puce ronde */
    }

    /* Row container for the title and legend */
    .row.w-100 {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .col-auto {
        display: flex;
        align-items: center;
    }

    </style>
    <style>
        .custom-dot .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 2px !important;
            vertical-align: middle;
            border: 2px solid white;
        }
    </style>
    <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">
        </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-3">
                <div
                    class="rotate-demande p-3 bg-primary-200-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_demande_encours">{{ $demandeEnCours }}</span>
                            <small class="card-number m-0 l-h-n">Demandes en cours</small>
                            <br>
                            <small class="card-infos m-0 l-h-n">Demandes traitées : <b id="t_demande_traite">{{ $demandeTraite }}</b></small>
                        </h3>
                    </div>
                    <i class="fal fa-comment-edit position-absolute pos-right pos-top opacity-15 mt-n4 mr-n5"
                        style="font-size: 9.5rem;"></i>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <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_attente">{{ $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="montant_devis">{{ number_format($montantdevisEnAttente, 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>

            @if(config('app.display_facture'))
                <div class="col-sm-6 col-xl-3">
                    <div
                        class="rotate-facture p-3 bg-primary-600-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_facture">{{ $nbrFacture }}</span>
                                <small class="card-number m-0 l-h-n">Factures</small>
                                <br>
                                <small class="card-infos m-0 l-h-n">Montant total :
                                    <b><span id="montant_facture">{{ number_format($totalFacture, thousands_separator: ' ', decimal_separator: ',', decimals: 2) }}€</span></b></small>
                            </h3>
                        </div>
                        <i class="fal fa-file-pdf position-absolute pos-right pos-top opacity-25 mt-n3 mr-n4"
                            style="font-size: 8rem;"></i>
                    </div>
                </div>
            @endif

            <div class="col-sm-6 col-xl-3">
                <div
                    class="rotate-rapport p-3 bg-primary-800-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_rapport">{{ $nbrRapport }}</span>
                            <small class="card-number m-0 l-h-n">Rapports disponibles</small>
                            <br />

                            <small class="card-infos m-0 l-h-n"><br><!--Montant total : <b>24 350€</b>--></small>
                        </h3>
                    </div>
                    <i class="fal fa-file-signature position-absolute pos-right pos-top opacity-25 mt-n3 mr-n5"
                        style="font-size: 8rem;"></i>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-xl-4">
                <div id="panel-9" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            État <span class="fw-300"> des visites</span>
                        </h2>

                    </div>
                    <div class="panel-container show">
                        <div class="tab-content">
                            <div class="tab-pane active" id="entretien" role="tabpanel">
                                <div id="chartvisites"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-4">
                <div id="panel-9" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            État <span class="fw-300">des interventions</span>
                        </h2>

                        <div class="visite-nav card-header card-tabs">
                            <ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#curative" role="tab" aria-controls="curative"
                                        aria-selected="false">Visite curative</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#demande" role="tab" aria-controls="demande"
                                        aria-selected="false">Avancement demande</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="panel-container show">
                        <div class="tab-content">
                            <div class="tab-pane active" id="curative" role="tabpanel" aria-labelledby="history-tab">
                                <div id="chartcurrative"></div>
                            </div>
                            <div class="tab-pane" id="demande" role="tabpanel" aria-labelledby="history-tab">
                                <div id="chartdemande"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-4">
                <div id="panel-22" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            État <span class="fw-300">du parc immobilier</span>
                        </h2>

                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <!--<div id="gaugeChartFill" class="ct-chart" style="width:100%; height:300px;"><svg                                                                                                                      </svg></div>-->
                            <div id="chartimmobilier" class="ct-chart" style="height: 333px !important;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-xl-6">
                <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close>
                    <div class="panel-hdr">
                        <div class="row w-100">
                            <!-- Titre -->
                            <div class="col-6">
                                <h2>
                                    Planning prévisionnel<span class="fw-300"> des interventions</span>
                                </h2>
                            </div>

                            <!-- Légende des Offres (Rectangle) -->
                            <div class="col-6 ml-auto">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="legend planning legend-horizontal">
                                            <div class="legend-item planning">
                                                <span class="color-box rectangle" style="background-color: #7289aa;"></span>
                                                <span>Devis</span>
                                            </div>
                                            <div class="legend-item planning">
                                                <span class="color-box rectangle" style="background-color: #ff7f00;"></span>
                                                <span>Contrat</span>
                                            </div>
                                            <div class="legend-item planning">
                                                <span class="color-box rectangle" style="background-color: #1a252f;"></span>
                                                <span>Fiche</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Légende des Statuts (Puce Ronde) -->
                                    <div class="col-12 ml-auto">
                                        <div class="legend planning legend-status">
                                            <div class="legend-item planning">
                                                <span class="status-box" style="background-color: yellow;"></span>
                                                <span>En cours</span>
                                            </div>
                                            <div class="legend-item planning">
                                                <span class="status-box" style="background-color: green;"></span>
                                                <span>Terminé</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="panel-container show">
                        <div class="panel-content">
                            <div id="fullCalendar"></div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="col-sm-12 col-xl-6">
                <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close>
                    <div class="panel-hdr">
                        <h2>
                            Cartographie<span class="fw-300"> des sites en contrat avec SMAC</span>
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <div id="map" style="height: 600px;"></div>
                        </div>
                    </div>
                </div>
            </div> --}}

            <div class="col-sm-6 col-xl-6">
                <div id="panel-9" class="panel">
                    <div class="panel-hdr">
                        <h2><i class="fal fa-map-marked-alt fa-lg mr-2"></i>Cartographie <span class="fw-300">des sites</span></h2>
                        <div class="map-nav card-header card-tabs">
                            <ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#en_contrat" role="tab" aria-controls="en_contrat"
                                        aria-selected="false">Sites en contrat</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#hors_contrat" role="tab" aria-controls="hors_contrat"
                                        aria-selected="false">Sites hors contrat</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#all_contrat" role="tab" aria-controls="all_contrat"
                                       aria-selected="false">Tous les sites</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-container show">
                        <div class="tab-content">
                            <div class="tab-pane active" id="en_contrat" role="tabpanel" aria-labelledby="history-tab">
                                <div id="mapContrat" style="height: 635px;"></div>
                            </div>
                            <div class="tab-pane" id="hors_contrat" role="tabpanel" aria-labelledby="history-tab">
                                <div id="mapHorsContrat" style="height: 635px;"></div>
                            </div>
                            <div class="tab-pane" id="all_contrat" role="tabpanel" aria-labelledby="all_contrat-tab">
                                <div id="mapAll" style="height: 635px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </main>
@endsection

@section('callable')
<!-- Modale visites -->
<div class="modal fade " id="interventionModal" tabindex="-1" role="dialog" aria-labelledby="interventionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interventionModalLabel">Détails de l'état des visites</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p id="interventionDetails"></p>
                        <table id="dt-demande-chart" class="table table-striped table-bordered custom-table-width w-100">
                            <thead>
                                <tr>
                                    <th>Libelle</th>
                                    <th>Adresse</th>
                                    <th>Date planifiée</th>
                                    <th>Description</th>
                                    <th>Offre</th>
                                </tr>
                            </thead>
                            <tbody id="modalTableBody">
                                <!-- Les détails dynamiques seront ajoutés ici -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale des intervention currative -->
<div class="modal fade" id="interventionModalCurrative" tabindex="-1" role="dialog" aria-labelledby="interventionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interventionModalLabel">Détails de l'état de visite currative</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p id="interventionDetailsCurrative"></p>
                        <table id="dt-currative-chart" class="table table-striped table-bordered custom-table-width w-100">
                            <thead>
                                <tr>
                                    <th>Libelle</th>
                                    <th>Adresse</th>
                                    <th>Date planifiée</th>
                                    <th>Description</th>
                                    <th>Offre</th>
                                </tr>
                            </thead>
                            <tbody id="modalTableBodyCurrative">
                                <!-- Les détails dynamiques seront ajoutés ici -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale des intervention demande -->
<div class="modal fade" id="interventionModalDemande" tabindex="-1" role="dialog" aria-labelledby="interventionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interventionModalLabel">Détails de l'état d'avancement demande</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p id="interventionDetailsDemande"></p>
                        <table id ="dt-inter-demande-chart" class="table table-striped table-bordered custom-table-width w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Description</th>
                                    <th>Statut</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody id="modalTableBodyDemande">
                                <!-- Les détails dynamiques seront ajoutés ici -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale du parc immobilier -->
<div class="modal fade" id="interventionModalImmobilier" tabindex="-1" role="dialog" aria-labelledby="interventionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interventionModalLabel">Détails de l'état du parc immobilier</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p id="interventionDetailsImmobilier"></p>
                        <table id="dt-inter-immob-chart" class="table table-striped table-bordered custom-table-width w-100">
                            <thead>
                                <tr>
                                    <th>Libelle</th>
                                    <th>Adresse</th>
                                    <th>Code postal</th>
                                    <th>Ville</th>
                                    <th>Etat</th>
                                </tr>
                            </thead>
                            <tbody id="modalTableBodyImmobilier">
                                <!-- Les détails dynamiques seront ajoutés ici -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Bootstrap -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="eventModalLabel">Détails de l'événement</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p><strong>Id :</strong> <span id="modalEventId"></span></p>
          <p><strong>Libellé :</strong> <span id="modalEventTitle"></span></p>
          <p><strong>Date :</strong> <span id="modalEventDate"></span></p>
          <p><strong>Heure :</strong> <span id="modalEventTime"></span></p>
          <p><strong>Lieu :</strong> <span id="modalEventLieu"></span></p>
        </div>
        <div class="modal-footer">
          <div id="modalDevisButton" style="display: none; margin-top: 4px;"></div>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>
        </div>
      </div>
    </div>
  </div>

@endsection

@push('script')
<script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
<script src="{{ asset('/assets/js/flot/flot.bundle.js') }}"></script>
<script src="{{ asset('/assets/js/easypiechart/easypiechart.bundle.js') }}"></script>
@endpush
@push('script_02')
<script src="{{ asset('/assets/js/fullcalendar/fullcalendar.bundle.js') }}"></script>
<script src="{{ asset('/assets/js/d3/d3.js') }}"></script>
<script src="{{ asset('/assets/js/c3/c3.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 src="{{ asset('/assets/js/fullcalendar/moment.min.js') }}"></script>
<script src="{{ asset('/assets/js/fullcalendar/fullcalendar.main.js') }}"></script>
<script src="{{ asset('/assets/js/fullcalendar/locales-all.global.js') }}"></script>
<script>
    // Carte pour les lieux avec contrat
    var mapContrat = L.map('mapContrat').setView([46.6070, 2.2897], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(mapContrat);

    // Carte pour les lieux hors contrat
    var mapHorsContrat = L.map('mapHorsContrat').setView([46.6070, 2.2897], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(mapHorsContrat);

    // Carte pour tous les lieux (contrat + hors contrat)
    var mapAll = L.map('mapAll').setView([46.6070, 2.2897], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(mapAll);

    // Récupérer les marqueurs depuis Laravel
    var markersContrat = @json($markersContrat);
    var markersHorsContrat = @json($markersHorsContrat);

    // Fusionner les marqueurs de sites en contrat et hors contrat
    var allMarkers = markersContrat.map(marker => ({...marker, type: 'contrat'}))
    .concat(markersHorsContrat.map(marker => ({...marker, type: 'hors_contrat'})));

    // Fonction pour ajouter des marqueurs sur une carte donnée
    function addMarkersToMap(markers, map) {
        markers.forEach(function(marker) {
            var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
            var popupContent = `<strong>${marker.title}</strong><br>
                                ${marker.adresse}<br>
                                ${marker.cp} <br>
                                ${marker.ville} <br>
                                <div class="text-center">
                                    <a href="${siteDetailsUrl}" class="btn btn-success text-white rounded-2 mt-2">Détails du site</a>
                                </div>`;

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

            var markerColor = '';
            if (marker.etat_general === "-1" || marker.etat_general === "-2") {
                markerColor = 'gray';
            } else if (marker.etat_general === "0.0") {
                markerColor = 'green';
            } else if (marker.etat_general === "1.0") {
                markerColor = '#fafa33';
            } else if (marker.etat_general === "1.5") {
                markerColor = '#ffbf00';
            } else if (marker.etat_general === "2.0") {
                markerColor = 'red';
            }

            // Créer une icône personnalisée pour le marqueur
            var customIcon = L.divIcon({
                className: 'custom-marker-icon',
                html: `<i class="fas fa-map-marker-alt" style="color: ${markerColor}; font-size: 30px;"></i>`,
                iconSize: [30, 30],
                iconAnchor: [12, 24],
            });

            // Créer un marqueur et l'ajouter à la carte
            var leafletMarker = L.marker([lat, lon], {icon: customIcon})
                .bindPopup(popupContent);

            leafletMarker.addTo(map);
        });
    }

    function addMarkersHorsContratToMap(markers, map) {
        markers.forEach(function(marker) {
            var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
            var popupContent = `<strong>${marker.title}</strong><br>
                                ${marker.adresse}<br>
                                ${marker.cp} <br>
                                ${marker.ville} <br>
                                <div class="text-center">
                                    <a href="${siteDetailsUrl}" class="btn btn-success text-white rounded-2 mt-2">Détails du site</a>
                                </div>`;

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

            var markerColor = '';

            if(marker.etat_securite_conforme === "0.0"){
                markerColor = '#238c3e';
            }else if(marker.etat_securite_conforme === "1.5"){
                markerColor = '#d20616';
            }else{
                markerColor = 'gray';
            }

            // Créer une icône personnalisée pour le marqueur
            var customIcon = L.divIcon({
                className: 'custom-marker-icon',
                html: `<i class="fas fa-map-marker-alt" style="color: ${markerColor}; font-size: 30px;"></i>`,
                iconSize: [30, 30],
                iconAnchor: [12, 24],
            });

            // Créer un marqueur et l'ajouter à la carte
            var leafletMarker = L.marker([lat, lon], {icon: customIcon})
                .bindPopup(popupContent);

            leafletMarker.addTo(map);
        });
    }

    // Ajouter les marqueurs fusionnés sur la carte "tous les sites"
    function addMarkersToMapWithType(markers, map) {
        markers.forEach(function(marker) {
            var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
            var popupContent = `<strong>${marker.title}</strong><br>
                                ${marker.adresse}<br>
                                ${marker.cp} <br>
                                ${marker.ville} <br>
                                <div class="text-center">
                                    <a href="${siteDetailsUrl}" class="btn btn-success text-white rounded-2 mt-2">Détails du site</a>
                                </div>`;

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

            var markerColor = marker.color;
            if (marker.type === 'contrat') {
                markerColor = '#238c3e'; // Garder la couleur originale
            } else if (marker.type === 'hors_contrat') {
                markerColor = '#f79025'; // Bleu pour hors contrat
            }

            var customIcon = L.divIcon({
                className: 'custom-marker-icon',
                html: `<i class="fas fa-map-marker-alt" style="color: ${markerColor}; font-size: 30px;"></i>`,
                iconSize: [30, 30],
                iconAnchor: [12, 24],
            });

            var leafletMarker = L.marker([lat, lon], {icon: customIcon})
                .bindPopup(popupContent);
            leafletMarker.addTo(map);
        });
    }

    // Ajouter les marqueurs pour les lieux avec contrat sur la carte correspondante
    addMarkersToMap(markersContrat, mapContrat);

    // Ajouter les marqueurs pour les lieux hors contrat sur la carte correspondante
    addMarkersHorsContratToMap(markersHorsContrat, mapHorsContrat);

    // Ajouter les marqueurs fusionnés sur la carte "tous les sites"
    addMarkersToMapWithType(allMarkers, mapAll);

    // Fonction pour ajouter une légende
    function addLegend(map) {
        var legend = L.control({ position: "bottomright" });

        legend.onAdd = function(map) {
            var div = L.DomUtil.create("div", "info legend");

            // Style de la légende
            div.style.backgroundColor = "rgba(255, 255, 255, 1)";
            div.style.color = "black";
            div.style.padding = "10px";
            div.style.borderRadius = "5px";
            div.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";

            // Contenu de la légende
            div.innerHTML += `<div><strong>Légende des États</strong></div>`;
            div.innerHTML += `<div><i style="background: #238c3e; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Bon état</div>`;
            div.innerHTML += `<div><i style="background: #fafa33; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Usé</div>`;
            div.innerHTML += `<div><i style="background: #ffbf00; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> À refaire</div>`;
            div.innerHTML += `<div><i style="background: #d20616; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Mauvais état</div>`;
            div.innerHTML += `<div><i style="background: #cacaca; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> À déterminer</div>`;

            return div;
        };

        legend.addTo(map);
    }

    function addLegendHorsContrat(map) {
        var legend = L.control({ position: "bottomright" });

        legend.onAdd = function(map) {
            var div = L.DomUtil.create("div", "info legend");

            // Style de la légende
            div.style.backgroundColor = "rgba(255, 255, 255, 1)";
            div.style.color = "black";
            div.style.padding = "10px";
            div.style.borderRadius = "5px";
            div.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";

            // Contenu de la légende
            div.innerHTML += `<div><strong>Légende des conformités</strong></div>`;
            div.innerHTML += `<div><i style="background: #238c3e; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Conforme</div>`;
            div.innerHTML += `<div><i style="background: #d20616; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Non conforme</div>`;
            div.innerHTML += `<div><i style="background: #cacaca; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> À déterminer</div>`;

            return div;
        };

        legend.addTo(map);
    }

    // Ajouter la légende sur les deux cartes
    addLegend(mapContrat);
    addLegendHorsContrat(mapHorsContrat);

    // Fonction pour ajouter une légende mise à jour
    function addLegendWithType(map) {
        var legend = L.control({ position: "bottomright" });

        legend.onAdd = function(map) {
            var div = L.DomUtil.create("div", "info legend");
            div.style.backgroundColor = "rgba(255, 255, 255, 1)";
            div.style.color = "black";
            div.style.padding = "10px";
            div.style.borderRadius = "5px";
            div.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";

            div.innerHTML += `<div><strong>Légende des sites</strong></div>`;
            div.innerHTML += `<div><i style="background: #238c3e; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Sites en contrat</div>`;
            div.innerHTML += `<div><i style="background: #f79025; width: 12px; height: 12px; display: inline-block; margin-right: 8px;"></i> Sites hors contrat</div>`;

            return div;
        };

        legend.addTo(map);
    }

    addLegendWithType(mapAll);

    // Fonction pour redimensionner les cartes lorsqu'un onglet est activé
    $('#bologna-list a').on('shown.bs.tab', function (e) {
        if ($(e.target).attr('href') === '#en_contrat') {
            mapContrat.invalidateSize(); // Redimensionner la carte des sites en contrat
        } else if ($(e.target).attr('href') === '#hors_contrat') {
            mapHorsContrat.invalidateSize(); // Redimensionner la carte des sites hors contrat
        } else if ($(e.target).attr('href') === '#all_contrat') {
            mapAll.invalidateSize(); // Redimensionner la carte combinée
        }
    });
</script>
<script type="text/javascript">

    // Initialisation du graphique avec les données par défaut
    document.addEventListener("DOMContentLoaded", function () {
        // Initialisation des données par défaut issues de Laravel
        var defaultData = {
            visiteTermine: {{ $nbrVisiteTermine ?? 0 }},
            visitePlanifie: {{ $nbrVisitePlanifie ?? 0 }},
            visiteNonPlanifie: {{ $nbrVisiteNonPlanifie ?? 0 }},
        };

        // Initialiser les séries du graphique avec les valeurs par défaut
        var chartOptions = {
            series: [defaultData.visiteTermine, defaultData.visitePlanifie, defaultData.visiteNonPlanifie],
            chart: {
                id: 'chartvisites',
                height: 360,
                type: 'pie',
                events: {
                    dataPointSelection: function(event, chartContext, config) {
                        var seriesIndex = config.dataPointIndex;
                        var label = config.w.config.labels[seriesIndex];
                        var percentage = config.w.config.series[seriesIndex];

                        // Récupérer les données des visites pour la série sélectionnée
                        var interventions = window.visiteDetails[seriesIndex] || [];

                        // Détruire et réinitialiser DataTables
                        if ($.fn.DataTable.isDataTable('#dt-demande-chart')) {
                            let table = $('#dt-demande-chart').DataTable();
                            table.clear(); // Vider les anciennes données

                            interventions.forEach(function(intervention) {
                                let formattedDate = intervention.date_start
                                    ? new Date(intervention.date_start).toLocaleDateString('fr-FR')
                                    : 'Non disponible';

                                console.log(intervention);

                                table.row.add([
                                    seriesIndex == 2
                                        ? (intervention.t_location
                                            ? `<a href="/sites/details/${intervention.t_location.id}" target="_blank">${intervention.t_location.libelle}</a>`
                                            : 'Non disponible')
                                        : (intervention.t_location
                                            ? `<a href="/sites/details/${intervention.t_location.id}" target="_blank">${intervention.t_location.libelle}</a>`
                                            : 'Non disponible'),
                                    seriesIndex == 2
                                        ? (intervention.t_location
                                            ? intervention.t_location.ville + ' ' + intervention.t_location.adresse
                                            : 'Non disponible')
                                        : (intervention.t_location
                                            ? intervention.t_location.ville + ' ' + intervention.t_location.adresse
                                            : 'Non disponible'),
                                    formattedDate,
                                    seriesIndex === 2 ? (intervention.t_devi.libelle || 'Non disponible') : (intervention.t_devi ? intervention.t_devi.libelle : 'Non disponible'),
                                    seriesIndex === 2 ? (intervention.t_devi.id_libelle || 'Non disponible') : (intervention.t_devi ? intervention.t_devi.id_libelle : 'Non disponible')
                                ]);
                            });

                            table.draw(); // Rafraîchir les données
                        } else {
                            // Initialisation si ce n'est pas encore fait
                            $('#dt-demande-chart').DataTable({
                                data: interventions.map(intervention => {
                                    let formattedDate = intervention.date_start
                                        ? new Date(intervention.date_start).toLocaleDateString('fr-FR')
                                        : 'Non disponible';

                                    return [
                                        seriesIndex == 2
                                            ? (intervention.t_location
                                                ? `<a href="/sites/details/${intervention.t_location.id}" target="_blank">${intervention.t_location.libelle}</a>`
                                                : 'Non disponible')
                                            : (intervention.t_location
                                                ? `<a href="/sites/details/${intervention.t_location.id}" target="_blank">${intervention.t_location.libelle}</a>`
                                                : 'Non disponible'),
                                        seriesIndex == 2
                                            ? (intervention.t_location
                                                ? intervention.t_location.ville + ' ' + intervention.t_location.adresse
                                                : 'Non disponible')
                                            : (intervention.t_location
                                                ? intervention.t_location.ville + ' ' + intervention.t_location.adresse
                                                : 'Non disponible'),
                                        formattedDate,
                                        seriesIndex === 2 ? (intervention.t_devi.libelle || 'Non disponible') : (intervention.t_devi ? intervention.t_devi.libelle : 'Non disponible'),
                                        seriesIndex === 2 ? (intervention.t_devi.id_libelle || 'Non disponible') : (intervention.t_devi ? intervention.t_devi.id_libelle : 'Non disponible')
                                    ];
                                }),
                                paging: true,
                                pageLength: 10,
                                language: {
                                    url: "{{ asset('assets/js/core/fr-FR.json') }}"
                                },
                                searching: true,
                                lengthChange: false,
                                info: true,
                                responsive: false,
                                width: '100%',
                                dom: "<'row mb-3'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6'lB>>" +
                                    "<'row'<'col-sm-12'tr>>" +
                                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                                buttons: [
                                    {
                                        extend: 'csvHtml5',
                                        text: 'CSV',
                                        className: 'btn-outline-primary btn-sm float-right'
                                    }
                                ]
                            });
                        }

                        // Afficher les détails dans la modale
                        document.getElementById('interventionDetails').textContent = `Détails pour : ${label} (${percentage})`;
                        $('#interventionModal').modal('show');
                    },
                },
            },
            labels: ["Terminée", "Planifiée", "Non planifiée"],
            legend: {
                position: 'bottom',
                fontSize: '12px',
                fontWeight: 600,
                markers: {
                    width: 11,
                    height: 11,
                    radius: 1
                },
            },
            colors: ["#318c38", "#ffca5b", "#cc000a"],
        };

        // Créer et afficher le graphique avec les données par défaut
        var chart = new ApexCharts(document.querySelector("#chartvisites"), chartOptions);
        chart.render();

        // Initialiser la variable `window.visiteDetails` avec les données par défaut
        window.visiteDetails = {
            0: @json($visiteTermineGet),
            1: @json($visitePlanifieGet),
            2: @json($visiteNonPlanifieGet),
        };
    });

    // end visite

    // Currative
        // Initialisation du graphique avec les données par défaut
        document.addEventListener("DOMContentLoaded", function () {
        // Initialisation des données par défaut issues de Laravel
        var defaultData = {
            curativeTermine: {{ $curativeTermineCount ?? 0 }},
            curativePlanifie: {{ $curativePlanifieCount ?? 0 }},
            curativeNonPlanifie: {{ $curativeNonPlanifieCount ?? 0 }},
        };

        // Initialiser les séries du graphique avec les valeurs par défaut
        var chartOptions = {
            series: [defaultData.curativeTermine, defaultData.curativePlanifie, defaultData.curativeNonPlanifie],
            chart: {
                id: 'chartcurrative',
                height: 360,
                type: 'pie',
                events: {
                    dataPointSelection: function(event, chartContext, config) {
                        var seriesIndex = config.dataPointIndex;
                        var label = config.w.config.labels[seriesIndex];
                        var percentage = config.w.config.series[seriesIndex];

                        // Récupérer les données des visites pour la série sélectionnée
                        var interventions = window.curativeDetails[seriesIndex] || [];

                        // Détruire et réinitialiser DataTables
                        if ($.fn.DataTable.isDataTable('#dt-currative-chart')) {
                            $('#dt-currative-chart').DataTable().clear().destroy();
                        }

                        // Insérer les nouvelles données dans la modale
                        var modalTableBodyCurrative = document.getElementById('modalTableBodyCurrative');
                        modalTableBodyCurrative.innerHTML = '';
                        interventions.forEach(function(intervention) {
                            let formattedDate = intervention.date_start
                                ? new Date(intervention.date_start).toLocaleDateString('fr-FR')
                                : 'Non disponible';

                                modalTableBodyCurrative.innerHTML += `
                                <tr>
                                    <td>
                                        ${seriesIndex == 2
                                            ? (intervention.t_devis_locations && intervention.t_devis_locations[0]?.t_location
                                                ? `<a href="/sites/details/${intervention.t_devis_locations[0].t_location.id}" target="_blank">${intervention.t_devis_locations[0].t_location.libelle}</a>`
                                                : 'Non disponible')
                                            : (intervention.t_location
                                                ? `<a href="/sites/details/${intervention.t_location.id}" target="_blank">${intervention.t_location.libelle}</a>`
                                                : 'Non disponible')}
                                    </td>
                                    <td>
                                        ${seriesIndex == 2
                                            ? (intervention.t_devis_locations && intervention.t_devis_locations[0]?.t_location
                                                ? intervention.t_devis_locations[0].t_location.ville + ' ' + intervention.t_devis_locations[0].t_location.adresse
                                                : 'Non disponible')
                                            : (intervention.t_location
                                                ? intervention.t_location.ville + ' ' + intervention.t_location.adresse
                                                : 'Non disponible')}
                                    </td>
                                    <td>${formattedDate}</td>
                                    <td>${seriesIndex === 2 ? (intervention.libelle || 'Non disponible') : (intervention.t_devi ? intervention.t_devi.libelle : 'Non disponible')}</td>
                                    <td>${seriesIndex === 2 ? (intervention.id_libelle || 'Non disponible') : (intervention.t_devi ? intervention.t_devi.id_libelle : 'Non disponible')}</td>

                                </tr>
                            `;
                        });

                        // Réinitialiser DataTables
                        $('#dt-currative-chart').DataTable({
                            destroy: true,
                            paging: true,
                            pageLength: 10,
                            language: {
                            url: "{{ asset('assets/js/core/fr-FR.json') }}",
                            },
                            searching: true,
                            lengthChange: false,
                            info: true,
                            responsive: false,
                            dom: "<'row mb-3'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6'lB>>" +
                                    "<'row'<'col-sm-12'tr>>" +
                                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                            buttons: [
                                {
                                    extend: 'csvHtml5',
                                    text: 'CSV',
                                    className: 'btn-outline-primary btn-sm float-right' // Aligné à droite
                                },
                            ],
                            initComplete: function () {
                                // Activation du filtre par colonne
                                this.api().columns().every(function () {
                                    var column = this;
                                    var input = document.createElement("input");
                                    $(input).appendTo($(column.footer()).empty())
                                        .on('keyup change', function () {
                                            column.search($(this).val(), false, false, true).draw();
                                        });
                                });
                            }
                        });

                        // Afficher les détails dans la modale
                        document.getElementById('interventionDetailsCurrative').textContent = `Détails pour : ${label} (${percentage})`;
                        $('#interventionModalCurrative').modal('show');
                    },
                },
            },
            labels: ["Terminée", "Planifiée", "Non planifiée"],
            legend: {
                position: 'bottom',
                fontSize: '12px',
                fontWeight: 600,
                markers: {
                    width: 11,
                    height: 11,
                    radius: 1
                },
            },
            colors: ["#318c38", "#ffca5b", "#cc000a"],
        };

        // Créer et afficher le graphique avec les données par défaut
        var chart = new ApexCharts(document.querySelector("#chartcurrative"), chartOptions);
        chart.render();

        // Initialiser la variable `window.visiteDetails` avec les données par défaut
        window.curativeDetails = {
            0: @json($curativeTermineGet),
            1: @json($curativePlanifieGet),
            2: @json($curativeNonPlanifieGet),
        };
    });

    //End currative

    // Demande

    // Initialisation du graphique avec les données par défaut
    document.addEventListener("DOMContentLoaded", function () {
        // Initialisation des données par défaut issues de Laravel
        var defaultData = {
            demandeTermine: {{ $demandeTermineCount ?? 0 }},
            demandePlanifie: {{ $demandePlanifieCount ?? 0 }},
            demandeNonPlanifie: {{ $demandeNonPlanifieCount ?? 0 }},
        };

        // Initialiser les séries du graphique avec les valeurs par défaut
        var chartOptions = {
            series: [defaultData.demandeTermine, defaultData.demandePlanifie, defaultData.demandeNonPlanifie],
            chart: {
                id: 'chartdemande',
                height: 360,
                type: 'pie',
                events: {
                    dataPointSelection: function(event, chartContext, config) {
                        var seriesIndex = config.dataPointIndex;
                        var label = config.w.config.labels[seriesIndex];
                        var percentage = config.w.config.series[seriesIndex];

                        // Récupérer les données des visites pour la série sélectionnée
                        var demandes = window.demandeDetails[seriesIndex] || [];

                        // Détruire et réinitialiser DataTables
                        if ($.fn.DataTable.isDataTable('#dt-inter-demande-chart')) {
                            $('#dt-inter-demande-chart').DataTable().clear().destroy();
                        }

                        // Insérer les nouvelles données dans la modale
                        var modalTableBodyDemande = document.getElementById('modalTableBodyDemande');
                        modalTableBodyDemande.innerHTML = '';
                        demandes.forEach(function(demande) {
                            let formattedDate = demande.date_create
                                ? new Date(demande.date_create).toLocaleDateString('fr-FR')
                                : 'Non disponible';
                                if (seriesIndex === 2) { // Non planifié
                                    modalTableBodyDemande.innerHTML += `
                                    <tr>
                                        <td>${demande.id}</td>
                                        <td>${demande.infos ? demande.infos : 'Non disponible'}</td>
                                        <td>${demande.traite ? 'Terminée' : 'Non planifiée'}</td>
                                        <td>${formattedDate || 'Non disponible'}</td>
                                    </tr>
                                    `;
                                } else if (seriesIndex === 1) { // planifié
                                    modalTableBodyDemande.innerHTML += `
                                    <tr>
                                        <td>${demande.id}</td>
                                        <td>${demande.infos ? demande.infos : 'Non disponible'}</td>
                                        <td>Planifiée</td>
                                        <td>${formattedDate || 'Non disponible'}</td>
                                    </tr>
                                    `;
                                } else { // Terminé
                                    modalTableBodyDemande.innerHTML += `
                                    <tr>
                                        <td>${demande.id}</td>
                                        <td>${demande.infos ? demande.infos : 'Non disponible'}</td>
                                        <td>Terminée</td>
                                        <td>${formattedDate || 'Non disponible'}</td>
                                    </tr>
                                `;
                                }
                        });

                        // Réinitialiser DataTables
                        $('#dt-inter-demande-chart').DataTable({
                            destroy: true,
                            paging: true,
                            pageLength: 10,
                            language: {
                            url: "{{ asset('assets/js/core/fr-FR.json') }}",
                            },
                            searching: true,
                            lengthChange: false,
                            info: true,
                            responsive: false,
                            dom: "<'row mb-3'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6'lB>>" +
                                 "<'row'<'col-sm-12'tr>>" +
                                 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                            buttons: [
                                {
                                    extend: 'csvHtml5',
                                    text: 'CSV',
                                    className: 'btn-outline-primary btn-sm float-right' // Aligné à droite
                                },
                            ],
                        });

                        // Afficher les détails dans la modale
                        document.getElementById('interventionDetailsDemande').textContent = `Détails pour : ${label} (${percentage})`;
                        $('#interventionModalDemande').modal('show');
                    },
                },
            },
            labels: ["Terminée", "Planifiée", "Non planifiée"],
            legend: {
                position: 'bottom',
                fontSize: '12px',
                fontWeight: 600,
                markers: {
                    width: 11,
                    height: 11,
                    radius: 1
                },
            },
            colors: ["#318c38", "#ffca5b", "#cc000a"],
        };

        // Créer et afficher le graphique avec les données par défaut
        var chart = new ApexCharts(document.querySelector("#chartdemande"), chartOptions);
        chart.render();

        // Initialiser la variable `window.visiteDetails` avec les données par défaut
        window.demandeDetails = {
            0: @json($demandeTermineGet),
            1: @json($demandePlanifieGet),
            2: @json($demandeNonPlanifieGet),
        };
    });

    //End demande

    // Immobilier

    var bon = {{ $chartDataBon }};
    var use = {{ $chartDataUse }};
    var mauvais = {{ $chartDataMauvais }};
    var aRefaire = {{ $chartDataARefaire }};
    var aDeterminerLieu = {{ $chartDataADeterminerLieu }};
    var bonDetails = @json($chartDataBonGet);
    var aRefaireDetails = @json($chartDataaRefaireGet);
    var mauvaisDetails = @json($chartDatamauvaisGet);
    var aDeterminerLieuDetails = @json($chartDataaDeterminerLieuGet);

    var options = {
        series: [bon, use, aRefaire, mauvais, aDeterminerLieu],
        chart: {
            type: 'donut',
            events: {
                dataPointSelection: function(event, chartContext, config) {
                    var seriesIndex = config.dataPointIndex;
                    var label = config.w.config.labels[seriesIndex];
                    var percentage = config.w.config.series[seriesIndex];

                    // Récupérer les données des visites pour la série sélectionnée
                    var immobilier = window.ImmobilierDetails[seriesIndex] || [];
                    // Convertir l'objet en tableau
                    immobilier = Object.values(immobilier);

                    // Détruire et réinitialiser DataTables
                    if ($.fn.DataTable.isDataTable('#dt-inter-immob-chart')) {
                        $('#dt-inter-immob-chart').DataTable().clear().destroy();
                    }

                    var modalTableBodyImmobilier = document.getElementById('modalTableBodyImmobilier');
                    modalTableBodyImmobilier.innerHTML = '';
                    immobilier.forEach(function(location) {
                        // Mise à jour de l'état général en fonction de l'index
                        if (seriesIndex === 0) {
                            location.etat_general = 'Bon état';
                        } else if (seriesIndex === 1) {
                            location.etat_general = 'Usé';
                        } else if (seriesIndex === 2) {
                            location.etat_general = 'À refaire';
                        } else if (seriesIndex === 3) {
                            location.etat_general = 'Mauvais état';
                        } else if (seriesIndex === 4) {
                            location.etat_general = 'À déterminer';
                        }

                        // Générer la ligne du tableau en fonction des données
                        modalTableBodyImmobilier.innerHTML += `
                        <tr>
                            <td>${location ? `<a href="/sites/details/${location.id}" target="_blank">${location.libelle}</a>` : 'Non disponible'}</td>
                            <td>${location.adresse}</td>
                            <td>${location.cp}</td>
                            <td>${location.ville}</td>
                            <td>${location.etat_general}</td>
                        </tr>
                        `;
                    });

                    // Réinitialiser DataTables
                    $('#dt-inter-immob-chart').DataTable({
                            destroy: true,
                            paging: true,
                            pageLength: 10,
                            language: {
                            url: "{{ asset('assets/js/core/fr-FR.json') }}",
                            },
                            searching: true,
                            lengthChange: false,
                            info: true,
                            responsive: false,
                            dom: "<'row mb-3'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6'lB>>" +
                                 "<'row'<'col-sm-12'tr>>" +
                                 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                            buttons: [
                                {
                                    extend: 'csvHtml5',
                                    text: 'CSV',
                                    className: 'btn-outline-primary btn-sm float-right' // Aligné à droite
                                },
                            ],
                        });

                    var interventionDetailsImmobilier = document.getElementById(
                        'interventionDetailsImmobilier');
                    interventionDetailsImmobilier.textContent = `Détails pour : ${label} (${percentage})`;

                    $('#interventionModalImmobilier').modal('show');
                },
            },
            width: '100%',
        },
        dataLabels: {
            enabled: true,
            style: {
                fontSize: "13px",
                fontWeight: "normal"
            }
        },
        labels: ["Bon état", "Usé", "A refaire", "Mauvais état", "À déterminer"],
        legend: {
            position: 'right',
            fontSize: '12px',
            fontWeight: 600,
            markers: {
                width: 11,
                height: 11,
                radius: 1
            },
        },
        colors: ["#318c38", "#fafa33", "#ffbf00", "#cc000a", "#cacaca"],
        plotOptions: {
            pie: {
                startAngle: -90,
                endAngle: 90,
                offsetY: 10
            }
        },
        grid: {
            padding: {
                bottom: -80
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
            }
        }]
    };
    var chart = new ApexCharts(document.querySelector("#chartimmobilier"), options);
    chart.render();

    // Initialiser la variable `window.visiteDetails` avec les données par défaut
    window.ImmobilierDetails = {
            0: @json($chartDataBonGet),
            1: @json($chartDataUseGet),
            2: @json($chartDataaRefaireGet),
            3: @json($chartDatamauvaisGet),
            4: @json($chartDataaDeterminerLieuGet),
    };
    // End immobilier
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('fullCalendar');

        var rawEvents = @json($planning);

        // Transformer les données pour FullCalendar
        var events = rawEvents.map(function(event) {

            // Valeur par défaut pour la couleur de fond
            let backgroundColor = null;
            let dotColor = null;
            let color = 'yellow';

            // Appliquer les couleurs en fonction des conditions
            if (event.t_devi.id_contrat_entretien !== null) {
                // Offre de CTE
                backgroundColor = '#ff7f00';
                dotColor = '#ffffff';
            } else if (event.t_devi.id_fiche_travail !== null) {
                // Offre de FT
                backgroundColor = '#1a252f';
                dotColor = '#ffffff';
            } else {
                // Offre de DV (les deux null)
                backgroundColor = '#7289aa';
                dotColor = '#ffffff';
            }

            // Vérifier toutes les interventions pour déterminer la couleur
            if (event.t_interventions && event.t_interventions.length > 0) {
                // Prendre la première intervention
                let intervention = event.t_interventions[0];

                // Récupérer les valeurs de rapport_validate et date_starting
                let rapportValidate = intervention.rapport_validate;
                let dateStarting = intervention.date_starting;

                // Définir la couleur en fonction des règles
                if (rapportValidate === 1) {
                    color = 'green';  // Validé : Vert
                } else if (rapportValidate === 0) {
                    if (dateStarting !== null) {
                        color = 'yellow';
                    } else {
                        color = 'yellow';
                    }
                }
            }

            return {
                id: event.id,
                // title: event.t_devi.libelle || 'Événement sans titre',
                title: event.t_location.libelle || 'Événement sans titre',
                libelle: event.t_devi.id_libelle || 'Événement sans titre',
                start: event.date_start,
                end: event.date_end,
                description: event.infos || 'Pas de description',
                lieu: event.t_location.libelle || 'Lieu non spécifié',
                adresse: event.t_location.adresse || 'Adresse non spécifiée',
                code_postal: event.t_location.cp || 'Code postal non spécifié',
                ville: event.t_location.ville || 'Ville non spécifiée',
                id_lieu: event.t_location.id || 'Lieu non spécifié',
                devis_id: event.t_devi.id || null,
                fichier_url: event.t_devi.fichier_url || null,
                backgroundColor: backgroundColor,
                color: color,
                eventColor: 'transparent',
                borderColor: dotColor,
                extendedProps: {
                    color: color
                },
                classNames: ['custom-dot']
            };
        });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,list'
            },
            locale: 'fr',
            initialView: 'dayGridMonth',
            timeZone: 'Europe/Paris',

            events: events,
            eventDisplay: 'block',

            eventContent: function (info) {
                let dotColor = info.event.extendedProps.color;

                return {
                    html: `
                    <div class="dot" style="background-color:${dotColor};"></div>
                    <span>${info.event.title}</span>`
                };
            },

            eventClick: function(info) {
                // Récupérer les détails de l'événement
                let id = info.event.id;
                let title = info.event.title;
                let libelle = info.event.extendedProps.libelle;
                let description = info.event.extendedProps.description;
                let lieu = info.event.extendedProps.lieu;
                let adresse = info.event.extendedProps.adresse;
                let code_postal = info.event.extendedProps.code_postal;
                let ville = info.event.extendedProps.ville;
                let id_lieu = info.event.extendedProps.id_lieu;
                let devis_id = info.event.extendedProps.devis_id;
                let fichier_url = info.event.extendedProps.fichier_url;

                function formatTimeUTC(date) {
                    let utcHours = date.getUTCHours();
                    let utcMinutes = date.getUTCMinutes();
                    return `${utcHours.toString().padStart(2, '0')}:${utcMinutes.toString().padStart(2, '0')}`;
                }

                let startDate = new Date(info.event.start).toLocaleDateString();
                let startTime = formatTimeUTC(info.event.start);
                let endTime = formatTimeUTC(info.event.end);
                let timeRange = `${startTime} - ${endTime}`;
                let location = `${lieu} - ${adresse} - ${code_postal} - ${ville}`;
                let libelles = `${libelle} - ${title}`;

                document.getElementById('modalEventId').textContent = id;
                document.getElementById('modalEventTitle').textContent = libelles;
                document.getElementById('modalEventDate').textContent = startDate;
                document.getElementById('modalEventTime').textContent = timeRange;
                document.getElementById('modalEventLieu').innerHTML = `<a href="sites/details/${id_lieu}" target="_blank">${lieu}</a> - ${adresse} - ${code_postal} - ${ville}`;

                let devisButton = document.getElementById('modalDevisButton');
                if (devis_id) {
                    devisButton.innerHTML = `<a href="${fichier_url}" target="_blank" class="btn btn-primary"><i class="fal fa-file-invoice img-responsive mr-1"></i>Consulter le devis</a>`;
                    devisButton.style.display = "block";
                } else {
                    devisButton.style.display = "none";
                }

                let myModal = new bootstrap.Modal(document.getElementById('eventModal'));
                myModal.show();
            }
        });

        calendar.setOption('locale', 'fr');
        calendar.render();

    });
</script>

<script>
    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 = '/dashboard/data';

        // Si les dates de début et de fin sont sélectionnées, elles ont la priorité
        if (startDate && endDate) {
            url += `?start_date=${startDate}&end_date=${endDate}`;
        }
        // Sinon, si une année est sélectionnée, l'utiliser
        else if (selectedYear !== 'all') {
            url += `?year=${selectedYear}`;
        }

        var displayFacture = @json(config('app.display_facture'));

        fetch(url)
            .then(response => response.json())
            .then(data => {
                document.getElementById('t_demande_encours').innerText = data.demandeEnCours ?? 0;
                document.getElementById('t_demande_traite').innerText = data.demandeTraite ?? 0;
                document.getElementById('t_devis_en_attente').innerText = data.nbrDevisEnAttente ?? 0;
                document.getElementById('montant_devis').innerText = new Intl.NumberFormat('fr-FR', {
                    style: 'currency', currency: 'EUR'
                }).format(data.montantDevisEnAttente ?? 0);

                var factureElement = document.getElementById('t_facture');
                var montantFactureElement = document.getElementById('montant_facture');

                if (factureElement && montantFactureElement) {  // Vérifie si les éléments existent
                    if (displayFacture) {  // Si DISPLAY_FACTURE est vrai
                        factureElement.innerText = data.nbrFacture ?? 0;
                        montantFactureElement.innerText = new Intl.NumberFormat('fr-FR', {
                            style: 'currency', currency: 'EUR'
                        }).format(data.totalFacture ?? 0);
                    } else {
                        factureElement.style.display = 'none';  // Cache l'élément si DISPLAY_FACTURE est false
                        montantFactureElement.style.display = 'none';  // Cache l'élément montant_facture si nécessaire
                    }
                } else {
                    console.warn('Un ou plusieurs éléments n\'ont pas été trouvés dans le DOM.');
                }
                document.getElementById('t_rapport').innerText = data.nbrRapport ?? 0;

                // Mise à jour des visites (pour le chart pie "État des visites")
                let visiteTermine = data.visiteTermine ?? 0;
                let visitePlanifie = data.visitePlanifie ?? 0;
                let visiteNonPlanifie = data.visiteNonPlanifie ?? 0;

                let curativeTermine = data.curativeTermine ?? 0;
                let curativePlanifie = data.curativePlanifie ?? 0;
                let curativeNonPlanifie = data.curativeNonPlanifie ?? 0;

                // Mettre à jour le graphique si nécessaire (si tu as un graphique avec Chart.js par exemple)
                updateVisiteChartData(data);
                updateCurativeChartData(data);
                updateDemandeChartData(data);

                updateMapContrat(data.locationContrat);
                updateMapHorsContrat(data.allLocationsHorsContrat);

                // Ajouter un type à chaque élément de locationContrat et allLocationsHorsContrat avant de les fusionner
                const addTypeToMarkers = (markers, type) => {
                    return markers.map(marker => ({
                        ...marker,
                        type: type
                    }));
                };

                // Ajouter un type 'contrat' à data.locationContrat
                const locationsContratWithType = addTypeToMarkers(data.locationContrat, 'contrat');

                // Ajouter un type 'hors_contrat' à data.allLocationsHorsContrat
                const locationsHorsContratWithType = addTypeToMarkers(data.allLocationsHorsContrat, 'hors_contrat');

                // Fusionner les deux sets de données pour la carte des sites combinés
                let allLocations = [...locationsContratWithType, ...locationsHorsContratWithType];
                updateMapAll(allLocations);

                // 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();
            });
    }

    // 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';
    }

    function updateMapContrat(locations) {

        // Vérification si "locations" est bien un tableau
        if (!Array.isArray(locations)) {
            console.error("Erreur : 'locations' n'est pas un tableau", locations);
            return;
        }

        // Supprimer tous les anciens marqueurs
        mapContrat.eachLayer(layer => {
            if (layer instanceof L.Marker) {
                mapContrat.removeLayer(layer);
            }
        });

        if (locations.length === 0) {
            console.log("Aucun lieu en contrat trouvé.");
            return;
        }

        // Ajouter les nouveaux marqueurs
        locations.forEach(marker => {
            var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
            var popupContent = `<strong>${marker.libelle}</strong><br>
                ${marker.adresse}<br>
                ${marker.cp} <br>
                ${marker.ville} <br>
                <div class="text-center">
                    <a href="${siteDetailsUrl}" class="btn btn-success text-white rounded-2 mt-2">Détails du site</a>
                </div>`;

            var lat = marker.latitude;
            var lon = marker.longitude;

            // Déterminer la pire notation pour la couleur
            var notations = [
                marker.etat_general,
            ];
            var worst = Math.max(...notations);

            var markerColor = 'gray';
            if (worst === -1 || worst === -2) {
                markerColor = 'gray';
            } else if (worst === 0) {
                markerColor = 'green';
            } else if (worst === 1) {
                markerColor = '#fafa33';
            } else if (worst === 1.5) {
                markerColor = '#ffbf00';
            } else if (worst === 2) {
                markerColor = 'red';
            }

            var customIcon = L.divIcon({
                className: 'custom-marker-icon',
                html: `<i class="fas fa-map-marker-alt" style="color: ${markerColor}; font-size: 30px;"></i>`,
                iconSize: [30, 30],
                iconAnchor: [12, 24],
            });

            var leafletMarker = L.marker([lat, lon], {icon: customIcon})
                .bindPopup(popupContent);

            leafletMarker.addTo(mapContrat);
        });
    }

    function updateMapHorsContrat(locations) {

        // Vérification si "locations" est bien un tableau
        if (!Array.isArray(locations)) {
            console.error("Erreur : 'locations' n'est pas un tableau", locations);
            return;
        }

        // Supprimer tous les anciens marqueurs
        mapHorsContrat.eachLayer(layer => {
            if (layer instanceof L.Marker) {
                mapHorsContrat.removeLayer(layer);
            }
        });

        if (locations.length === 0) {
            console.log("Aucun lieu en contrat trouvé.");
            return;
        }

        // Ajouter les nouveaux marqueurs
        locations.forEach(marker => {
            var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
            var popupContent = `<strong>${marker.libelle}</strong><br>
                                ${marker.adresse}<br>
                                ${marker.cp} <br>
                                ${marker.ville} <br>
                                <div class="text-center">
                                    <a href="${siteDetailsUrl}" class="btn btn-success text-white rounded-2 mt-2">Détails du site</a>
                                </div>`;

            var lat = marker.latitude;
            var lon = marker.longitude;

            // Déterminer la pire notation pour la couleur
            var notations = [
                marker.etat_general,
            ];
            var worst = Math.max(...notations);

            var markerColor = 'gray';
            if (worst === -1 || worst === -2) {
                markerColor = 'gray';
            } else if (worst === 0) {
                markerColor = 'green';
            } else if (worst === 1) {
                markerColor = '#fafa33';
            } else if (worst === 1.5) {
                markerColor = '#ffbf00';
            } else if (worst === 2) {
                markerColor = 'red';
            }

            var customIcon = L.divIcon({
                className: 'custom-marker-icon',
                html: `<i class="fas fa-map-marker-alt" style="color: ${markerColor}; font-size: 30px;"></i>`,
                iconSize: [30, 30],
                iconAnchor: [12, 24],
            });

            var leafletMarker = L.marker([lat, lon], {icon: customIcon})
                .bindPopup(popupContent);

            leafletMarker.addTo(mapHorsContrat);
        });
    }

    function updateMapAll(locations) {

        // Vérification si "locations" est bien un tableau
        if (!Array.isArray(locations)) {
            console.error("Erreur : 'locations' n'est pas un tableau", locations);
            return;
        }

        // Supprimer tous les anciens marqueurs
        mapAll.eachLayer(layer => {
            if (layer instanceof L.Marker) {
                mapAll.removeLayer(layer);
            }
        });

        if (locations.length === 0) {
            console.log("Aucun lieu trouvé.");
            return;
        }

        // Ajouter les nouveaux marqueurs
        locations.forEach(marker => {
            var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
            var popupContent = `<strong>${marker.libelle}</strong><br>
                                ${marker.adresse}<br>
                                ${marker.cp} <br>
                                ${marker.ville} <br>
                                <div class="text-center">
                                    <a href="${siteDetailsUrl}" class="btn btn-success text-white rounded-2 mt-2">Détails du site</a>
                                </div>`;

            var lat = marker.latitude;
            var lon = marker.longitude;

            var markerColor = marker.color;

            if (marker.type === 'contrat') {
                markerColor = '#238c3e';
            } else if (marker.type === 'hors_contrat') {
                markerColor = '#f79025';
            }

            var customIcon = L.divIcon({
                className: 'custom-marker-icon',
                html: `<i class="fas fa-map-marker-alt" style="color: ${markerColor}; font-size: 30px;"></i>`,
                iconSize: [30, 30],
                iconAnchor: [12, 24],
            });

            var leafletMarker = L.marker([lat, lon], {icon: customIcon})
                .bindPopup(popupContent);

            leafletMarker.addTo(mapAll);
        });
    }


    // Fonction pour mettre à jour le graphique des visites
    function updateVisiteChartData(data) {
        let chart = ApexCharts.getChartByID('chartvisites');
        chart.updateSeries([data.visiteTermine, data.visitePlanifie, data.visiteNonPlanifie]);

        // Stocker les nouvelles données pour la modale
        window.visiteDetails = {
            0: data.visiteTermineData,
            1: data.visitePlanifieData,
            2: data.visiteNonPlanifieData
        };
    }

    function updateCurativeChartData(data) {
        let chart = ApexCharts.getChartByID('chartcurrative');
        chart.updateSeries([data.curativeTermine, data.curativePlanifie, data.curativeNonPlanifie]);

        // Stocker les nouvelles données pour la modale
        window.curativeDetails = {
            0: data.curativeTermineData,
            1: data.curativePlanifieData,
            2: data.curativeNonPlanifieData
        };
    }

    function updateDemandeChartData(data) {
        let chart = ApexCharts.getChartByID('chartdemande');
        chart.updateSeries([data.demandeTermine, data.demandePlanifie, data.demandeNonPlanifie]);

        // Stocker les nouvelles données pour la modale
        window.demandeDetails = {
            0: data.demandeTermineData,
            1: data.demandePlanifieData,
            2: data.demandeNonPlanifieData
        };
    }

</script>
@endpush