@extends('layouts.base')

@section('title', 'Site - '. (Auth::check() ? $site->libelle : '-'))

@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">

        @inject('format', 'App\Services\CoordinateService')
        <!-- EN-TETE LIEU-->
        <div class="row">
            <div class="col-xl-6 col-md-6">
                <div
                    class="rounded-pill-lieu-fiche bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center  flex-shrink-0 border-lieu">
                    <img src="{{ $photoPath ? $photoPath . '?t=' . $tokenFile : 'https://placehold.co/600x400/EEE/31343C' }}"
                    alt="Jovanni Lo" class="img-thumbnail img-responsive rounded-circle" style="width: 18rem; height: 18rem; object-fit: cover;">
                    <div class="ml-2 mr-3 col">
                        <h3 class="m-0">{{ $site ? $site->libelle : '-'  }}<br>
                            <small class="m-0 fw-300">
                                {{ $site ? $format->escapeCaracter($site->adresse) : '-'  }} <br>
                                {{ $site ? $site->cp : '-'  }}
                                {{ $site ? $site->ville : '-'  }}
                            </small>
                        </h3>
                        <p></p>
                        <div class="p-3 rounded-3 mb-2" style="background-color: #efefef;">
                            <p class="card-title">Réferent: {{ $site->t_user ? $site->t_user->prenom : '-'  }} {{ $site->t_user ? $site->t_user->nom : '-'  }}</p>
                            <br />Télephone: {{ $site->t_user ? $site->t_user->telephone : '-'  }}
                            <br />Mail:<a href="mailto:f.berger@documenthom.net" class="link-danger">
                                {{ $site->t_user ? $site->t_user->email : '-'  }} </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-md-6">
                <div class="card border-0 d-flex flex-fill">
                    <div class="card-body">
                        <div class="card-title text-dark fs-5 fw-bold">Géolocalisation</div>
                        <div id="map" style="height: 250px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ETIQUETTES SERVICES -->
        <div class="row etiquettes mt-3 d-flex d-flex-row justify-content-center">
            <div class="col-sm-6 col-xl-2">
                <div class="p-3 bg-primary-100-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_intervention">{{ $nombreInterventions }}</span>
                            <small class="m-0 l-h-n">Interventions</small>
                        </h3>
                    </div>
                    <i class="fal fa-digging position-absolute pos-right pos-bottom opacity-25 mb-n1 mr-n4"
                        style="font-size: 6rem;"></i>
                </div>
            </div>
            <div class="col-sm-6 col-xl-2">
                <div class="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">{{ $nombreDemandes }}</span>
                            <small class="m-0 l-h-n">Demandes</small>
                        </h3>
                    </div>
                    <i class="fal fa-comment-edit position-absolute pos-right pos-bottom opacity-25 mb-n1 mr-n4"
                        style="font-size: 6rem;"></i>
                </div>
            </div>
            <div class="col-sm-6 col-xl-2">
                <div class="p-3 bg-primary-400-blue rounded overflow-hidden position-relative text-white mb-g rotate-devis">
                    <div class="">
                        <h3 class="display-4 d-block l-h-n m-0 fw-500">
                            <span id="t_devis">{{ $nombreDevis }}</span>
                            <small class="m-0 l-h-n">Devis</small>
                        </h3>
                    </div>
                    <i class="ni ni-calculator position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4"
                        style="font-size: 6rem;"></i>
                </div>
            </div>
            @if(config('app.display_facture'))
                <div class="col-sm-6 col-xl-2">
                    <div
                        class="p-3 bg-primary-600-blue rounded overflow-hidden position-relative text-white mb-g rotate-facture">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span id="t_facture">{{ $nombreFactures }}</span>
                                <small class="m-0 l-h-n">Factures</small>
                            </h3>
                        </div>
                        <i class="fal fa-file-pdf position-absolute pos-right pos-bottom opacity-25 mb-n1 mr-n3"
                            style="font-size: 6.5rem;"></i>
                    </div>
                </div>
            @endif
            <div class="col-sm-6 col-xl-2">
                <div
                    class="p-3 bg-primary-800-blue rounded overflow-hidden position-relative text-white mb-g rotate-rapport">
                    <div class="">
                        <h3 class="display-4 d-block l-h-n m-0 fw-500">
                            <span id="t_rapport">{{ $nombreRapports }}</span>
                            <small class="m-0 l-h-n">Rapports</small>
                        </h3>
                    </div>
                    <i class="fal fa-file-signature position-absolute pos-right pos-bottom opacity-25 mb-n0 mr-n4"
                        style="font-size: 6rem;"></i>
                </div>
            </div>
        </div>

        <!-- CARDS DES SERVICES -->
        <div class="card border-0 mb-3">
            <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="fal fa-comment-edit demande t-ico color-primary-200 fa-2x"></i>&nbsp; Demandes</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 }">{{ $pourcentageDemadneEnCours/10 }}/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">En cours</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_demande_stat_encours">{{ $pourcentageDemadneEnCours }}%</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 }">{{ $pourcentageDemadneTraiter/10 }}/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">Traitées</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_demande_stat_traite">{{ $pourcentageDemadneTraiter }}%</span></h4>
                        </div>
                    </div>
                </div>

                <div class="row" id="cd-demande" 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-demande" class="table table-bordered table-hover table-striped w-100">
                            <thead class="bg-primary-200">
                                <tr>
                                    <th>Date</th>
                                    <th>Numéro</th>
                                    <th>Description</th>
                                    <th>Créateur</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($dataDemandes as $dataDemande)
                                <tr>
                                    <td data-order="{{ $dataDemande->date_create ? $dataDemande->date_create->format('Y-m-d') : '' }}">{{ $dataDemande->date_create ? $dataDemande->date_create->format('d/m/Y') : '-' }}</td>
                                    <td>{{ $dataDemande->id }}</td>
                                    <td>{{ $dataDemande->infos }}</td>
                                    <td>{{ $dataDemande->createur->nom }} {{ $dataDemande->createur->prenom }}</span>
                                    </td>
                                    <td>
                                        <span @class(['status d-inline-block', 'valide' => $dataDemande->traite, 'traite' => !$dataDemande->traite])>
                                            <i class="fal fa-comment-edit img-responsive rounded-circle ico-tab"></i>
                                            <span class="status-value">{{ $dataDemande->traite ? '1' : '0' }}</span>
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                {{-- Laisser vide car l'absence de donnée est géré par DataTable --}}
                                {{-- <tr>
                                    <td colspan="12" class="text-center">Aucun enregistrement trouvé</td>
                                </tr> --}}
                                @endforelse

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Date</th>
                                    <th>Numéro</th>
                                    <th>Description</th>
                                    <th>Créateur</th>
                                    <th id="filterStatusDemande">Statut</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 mb-3">
            <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 devis"
                                data-peity="{ &quot;fill&quot;: [&quot;#a1a8ae&quot;, &quot;#a1a8ae63&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">{{ $pourcentageDevisEnCours/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">{{ $pourcentageDevisEnCours }}%</span></h4>
                        </div>
                    </div>
                    <div class="d-flex mr-0">
                        <div class="mr-2">
                            <span class="peity-donut devis"
                                data-peity="{ &quot;fill&quot;: [&quot;#d6dd39&quot;, &quot;#d6dd394d&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">{{ $pourcentageDevisEnCours/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_commander">{{ $pourcentageDevisCommander }}%</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-400">
                                <tr>
                                    <th>Date</th>
                                    <th>Numéro</th>
                                    <th>Titre</th>
                                    <th>Montant</th>
                                    <th>Fichier</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($dataDevis as $dataDevi)
                                <tr>
                                    <td data-order="{{ $dataDevi->date_create ? $dataDevi->date_create->format('Y-m-d') : '' }}">{{ $dataDevi->date_create ? $dataDevi->date_create->format('d/m/Y') : '-' }}</td>
                                    <td>{{ $dataDevi->id_libelle }}</td>
                                    <td>{{ $dataDevi->libelle }}</td>
                                    <td>
                                        @if ($dataDevi->id_contrat_entretien && $dataDevi->validation_client == 1)
                                            @php
                                                $total = $dataDevi->t_devis_sites->sum('total_sum');
                                            @endphp
                                            @if($total > 0)
                                                {{ number_format($total, 2, ',', ' ') }} €
                                            @else
                                                -
                                            @endif
                                        @else
                                            @if ($dataDevi->total_ht > 0)
                                                {{ number_format($dataDevi->total_ht, 2, ',', ' ') }} €
                                            @else
                                                -
                                            @endif
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if ($dataDevi->fichier() != '#')
                                        <a href="{{ $dataDevi->fichier() }}?t={{ $tokenFile }}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                                            <i class="fal fa-file-invoice-dollar"></i>
                                        </a>
                                        @else
                                            <span class="text-muted">Fichier non disponible</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $statut = $dataDevi->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>Numéro</th>
                                    <th>Titre</th>
                                    <th>Montant</th>
                                    <th>Fichier</th>
                                    <th id="filterStatusDevis">Statut</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>

        @if(config('app.display_facture'))
            <div class="card border-0 mb-3">
                <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="fal fa-file-pdf facture t-ico color-primary-600 fa-2x"></i>&nbsp; Factures</h3>
                        <div class="d-flex mr-0">
                            <div class="mr-2">
                                <span class="peity-donut"
                                    data-peity="{ &quot;fill&quot;: [&quot;#d6dd39&quot;, &quot;#d6dd3999&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">10/10</span>
                            </div>
                            <div>
                                <label class="fs-sm mb-0 mt-2 mt-md-0">Facturés</label>
                                <h4 class="font-weight-bold mb-0"><span id="t_facture_stat_facture">{{ $nombreFactures }}</span></h4>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="cd-facture" style="display: none; margin-bottom: 5px;">
                    </div>

                    <div class="row d-flex d-flex-row mr-2 ml-2 mt-3">
                        <div class="col-md-12">
                            <!-- datatable start -->
                            <table id="dt-facture" class="table table-bordered table-hover table-striped w-100">
                                <thead class="bg-primary-600">
                                    <tr>
                                        <th>Date d'émission</th>
                                        <th>Date d'échéance</th>
                                        <th>Agence de facturation</th>
                                        <th>Numéro de facture</th>
                                        <th>Offre</th>
                                        <th>Montant HT</th>
                                        <th>Fichier(s)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($dataFactures as $dataFacture)
                                        @if ($dataFacture->t_planning && $dataFacture->t_planning->t_devi && $dataFacture->t_planning->t_devi->t_factures->isNotEmpty())
                                            @foreach ($dataFacture->t_planning->t_devi->t_factures->unique('id') as $facture)
                                                <tr>
                                                    <td data-order="{{ $facture->date_facture ? $facture->date_facture->format('Y-m-d') : '' }}">
                                                        {{ $facture->date_facture ? $facture->date_facture->format('d/m/Y') : 'N/A' }}
                                                    </td>
                                                    <td data-order="{{ $facture->date_echeance ? $facture->date_echeance->format('Y-m-d') : '' }}">
                                                        {{ $facture->date_echeance ? $facture->date_echeance->format('d/m/Y') : 'N/A' }}
                                                    </td>
                                                    <td>
                                                        <b>{{ $facture->agenceFacturation ? $facture->agenceFacturation->libelle : ' - ' }}</b><br />
                                                        {{ $facture->agenceFacturation ? $facture->agenceFacturation->adresse : ' - ' }}<br />
                                                        {{ $facture->agenceFacturation ? $facture->agenceFacturation->cp : ' - ' }} -
                                                        {{ $facture->agenceFacturation ? $facture->agenceFacturation->ville : ' - ' }}
                                                    </td>
                                                    <td>{{ $facture->id_libelle ?? 'N/A' }}</td>
                                                    <td>{{ $dataFacture->t_planning->t_devi->id_libelle }}</td>
                                                    <td data-order="{{ $facture->total_ht }}">{{ number_format($facture->total_ht, 2, ',', ' ') }} €</td>
                                                    <td class="text-center">
                                                        @if ($facture->fichier() != '#')
                                                            <a href="{{ $facture->fichier() }}?t={{ $tokenFile }}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                                                                <i class="fal fa-file-invoice-dollar"></i>
                                                            </a>
                                                        @else
                                                            <span class="text-muted">Fichier non disponible</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="7" class="text-center">Aucune facture trouvée pour ce site.</td>
                                            </tr>
                                        @endif
                                    @empty
                                        {{-- <tr>
                                            <td colspan="7" class="text-center">Aucune facture trouvée pour ce site.</td>
                                        </tr> --}}
                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Date d'émission</th>
                                        <th>Date d'échéance</th>
                                        <th>Agence de facturation</th>
                                        <th>Numéro de facture</th>
                                        <th>Offre</th>
                                        <th>Montant HT</th>
                                        <th>Fichier(s)</th>
                                    </tr>
                                </tfoot>
                            </table>
                            <!-- datatable end -->
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="card border-0 mb-3">
            <div class="card-body pt-0">
                <div class="row pl-3 pr-3">
                    <h3 class="d-flex flex-row mr-auto align-items-center"><i
                            class="fal fa-digging intervention t-ico fa-2x color-primary-200"></i>&nbsp; Interventions</h3>
                    <div class="d-flex mr-4 align-items-center">
                        <div class="mr-2">
                            <span class="peity-donut"
                                data-peity="{ &quot;fill&quot;: [&quot;#dce0e4&quot;, &quot;#dce0e454&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">{{ $pourcentagePlanifie/10 }}/10
                            </span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">Planifiées</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_inter_stat_planifie">{{ $pourcentagePlanifie }}%</span></h4>
                        </div>
                    </div>
                    <i class="fal fa-arrow-alt-right ico-status d-flex align-items-center"></i>
                    <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 }">{{ $pourcentageEnCours/10 }}/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">En cours</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_inter_stat_encours">{{ $pourcentageEnCours }}%</span></h4>
                        </div>
                    </div>
                    <div class="d-flex mr-0 align-items-center">
                        <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 }">{{ $pourcentageTermine/10 }}/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">Terminées</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_inter_stat_termine">{{ $pourcentageTermine }}%</span></h4>
                        </div>
                    </div>
                </div>

                <div class="row" id="cd-inter" 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-inter" class="table table-bordered table-hover table-striped w-100">
                            <thead class="bg-primary-100">
                                <tr>
                                    <th>Date</th>
                                    <th>Offre</th>
                                    <th>Titre</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ( $dataInterventions as $row)
                                <tr>
                                    <td data-order="{{ $row->t_planning ? $row->t_planning->date_start->format('Y-m-d') : '' }}">{{ $row->t_planning ? $row->t_planning->date_start->format('d/m/Y') : '-' }}</td>
                                    <td>{{ $row->t_planning->t_devi ? $row->t_planning->t_devi->id_libelle : '-' }}</td>
                                    <td>{{ $row->t_planning->t_devi ? $row->t_planning->t_devi->libelle : '-' }}</td>
                                    <td>
                                        @php
                                            $statut = $row->t_planning->statut();
                                        @endphp
                                        <span @class([
                                            'status d-inline-block',
                                            'traite' => $statut === 'planifié',
                                            'valide' => $statut === 'terminé',
                                            'en-cours' => $statut === 'en cours',
                                        ])>
                                            <i class="fal fa-digging 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>Offre</th>
                                    <th>Titre</th>
                                    <th id="filterStatusInter">Statut</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 mb-3">
            <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="fal fa-file-signature rapport t-ic color-primary-800 fa-2x"></i>&nbsp; Rapports</h3>
                    <div class="d-flex mr-0">
                        <div class="mr-2">
                            <span class="peity-donut"
                                data-peity="{ &quot;fill&quot;: [&quot;#d6dd39&quot;, &quot;#d6dd3999&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">10/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">Traitées</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_rapport_stat_rapport">{{ $nombreRapports }}</span></h4>
                        </div>
                    </div>
                </div>

                <div class="row" id="cd-rapport" 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-rapport" class="table table-bordered table-hover table-striped w-100">
                            <thead class="bg-primary-800">
                                <tr>
                                    <th>Date</th>
                                    <th>Devis</th>
                                    <th>Conclusion</th>
                                    <th>Etat</th>
                                    <th>Sécurité existante</th>
                                    <th>Conformité sécurité</th>
                                    <th>Rapport</th>
                                    <th>Devis Complémentaire</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ( $dataRapports as $dataRapport)
                                <tr>
                                    <td data-order="{{ $dataRapport->date ? $dataRapport->date->format('Y-m-d') : '' }}">{{ $dataRapport->date ? $dataRapport->date->format('d/m/Y') : ' - ' }}</td>
                                    <td>{{ $dataRapport->t_planning->t_devi ? $dataRapport->t_planning->t_devi->id_libelle : ' - ' }}</td>
                                    <td>{{ $dataRapport->bilan ? $dataRapport->bilan : ' - ' }}</td>
                                    <td>
                                        @php
                                            $etatText = '';
                                            $etatIcon = '';
                                            if ($dataRapport->etat_general == -1 || $dataRapport->etat_general == -2) {
                                                $etatText = "À déterminer";
                                                $etatIcon = '<i class="text-muted fal fa-question-circle"></i>';
                                            } elseif ($dataRapport->etat_general == 0) {
                                                $etatText = "Bon";
                                                $etatIcon = '<i class="fal fa-tachometer-alt-fastest bon-etat"></i>';
                                            } elseif ($dataRapport->etat_general == 1) {
                                                $etatText = "Usé";
                                                $etatIcon = '<i class="fal fa-tachometer-alt-average etat-use"></i>';
                                            } elseif ($dataRapport->etat_general == 1.5) {
                                                $etatText = "À refaire";
                                                $etatIcon = '<i class="fal fa-tachometer-alt-slow etat-mauvais"></i>';
                                            } elseif ($dataRapport->etat_general == 2) {
                                                $etatText = "Mauvais";
                                                $etatIcon = '<i class="fal fa-tachometer-alt-slowest etat-reparer"></i>';
                                            }
                                        @endphp
                                        <span class="etat-value" data-order="{{ $dataRapport->etat_general }}" data-search="{{ mb_strtolower($etatText, 'UTF-8') }}">
                                            {!! $etatIcon !!} {{ $etatText }}
                                        </span>
                                    </td>
                                    <td>
                                        @php
                                            $securiteText = '';
                                            $securiteIcon = '';
                                            if ($dataRapport->securite_exist == -1) {
                                                $securiteText = "À déterminer";
                                                $securiteIcon = '<i class="text-muted fal fa-question-circle"></i>';
                                            } elseif ($dataRapport->securite_exist == 0) {
                                                $securiteText = "Présent";
                                                $securiteIcon = '<i class="fal fa-check-circle bon-etat"></i>';
                                            } elseif ($dataRapport->securite_exist == 2) {
                                                $securiteText = "Non présent";
                                                $securiteIcon = '<i class="fal fa-times-circle etat-reparer"></i>';
                                            }
                                        @endphp
                                        <span class="securite-value" data-order="{{ $dataRapport->securite_exist }}" data-search="{{ mb_strtolower($securiteText, 'UTF-8') }}">
                                            {!! $securiteIcon !!} {{ $securiteText }}
                                        </span>
                                    </td>
                                    <td>
                                        @php
                                            $conformiteText = '';
                                            $conformiteIcon = '';
                                            if ($dataRapport->securite_conforme == -1) {
                                                $conformiteText = "À déterminer";
                                                $conformiteIcon = '<i class="text-muted fal fa-question-circle"></i>';
                                            } elseif ($dataRapport->securite_conforme == 0) {
                                                $conformiteText = "Conforme";
                                                $conformiteIcon = '<i class="fal fa-shield-alt conforme"></i>';
                                            } elseif ($dataRapport->securite_conforme == 1.5) {
                                                $conformiteText = "Non conforme";
                                                $conformiteIcon = '<i class="fal fa-shield-alt non-conforme"></i>';
                                            }
                                        @endphp
                                        <span class="conformite-value" data-order="{{ $dataRapport->securite_conforme }}" data-search="{{ mb_strtolower($conformiteText, 'UTF-8') }}">
                                            {!! $conformiteIcon !!} {{ $conformiteText }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if ($dataRapport->fichier() != '#')
                                            <a href="{{ $dataRapport->fichier() }}?t={{ $tokenFile }}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                                                <i class="fal fa-file-invoice-dollar"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">Fichier non disponible</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($dataRapport->devisComplementaire() !== '#')
                                        <a class="btn btn-primary waves-effect waves-themed"
                                            href="{{ $dataRapport->devisComplementaire() }}?t={{ $tokenFile }}" target="_blank"
                                            title="Consulter le rapport en PDF" class="text-danger"><i
                                        class="fal fa-file-invoice"></i></a>
                                        @else
                                            <span class="text-muted">Aucun devis complémentaire disponible.</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                {{-- Laisser vide car l'absence de donnée est géré par DataTable --}}
                                {{-- <tr>
                                    <td colspan="8" class="text-center">Aucun enregistrement trouvé</td>
                                </tr> --}}
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Date</th>
                                    <th>Devis</th>
                                    <th>Conclusion</th>
                                    <th id="filterStatusEtat">Etat</th>
                                    <th id="filterStatusSecurite">Sécurité existante</th>
                                    <th id="filterStatusConformite">Conformité sécurité</th>
                                    <th>Rapport</th>
                                    <th>Devis Complémentaire</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->

                    </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>
    // Initialisation de la carte
    var lieuCoordinates = [{{ $site->latitude }}, {{ $site->longitude }}];
    var map = L.map('map').setView(lieuCoordinates, 6); // Position initiale par défaut
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxNativeZoom: 19,
        maxZoom: 20,
        minZoom: 0,
        zoomControl: true
    }).addTo(map);

    // Utiliser json pour transformer l'objet PHP en JSON
    var site = @json($site);

    // Coordonnées du site
    var lat = site.latitude;
    var lon = site.longitude;

    // Vérification que les coordonnées sont valides
    if (lat !== 0 && lon !== 0 && lat !== null && lon !== null) {
        // Contenu de la popup
        var popupContent = `<strong>${site.libelle}</strong><br>
                            ${site.adresse}<br>
                            ${site.cp} <br>
                            ${site.ville}`;

    var redIcon  = L.icon({
    iconUrl: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    iconSize: [50, 50],
    shadowSize: [2, 2],
    iconAnchor:   [22, 24],
    shadowAnchor: [4, 62],
    popupAnchor:  [2, -15]
    });

        // Création d'un marqueur Leaflet avec le contenu de la popup
        var leafletMarker = L.marker([lat, lon], { icon: redIcon })
            .bindPopup(popupContent)
            .addTo(map).openPopup(); // Ajoute le marqueur à la carte directement

        // Centrer la carte sur le marqueur
        map.setView([lat, lon], 14);
    }
</script>
<script>
    $(document).ready(function() {
        // DEMANDE
        let tableDemande = $('#dt-demande').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-demande',
                    action: function () {
                        toggleViewDemande('#dt-demande', '#cd-demande', '.dt-btn-demande', '.cd-btn-demande');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-demande',
                    action: function () {
                        toggleViewDemande('#cd-demande', '#dt-demande', '.cd-btn-demande', '.dt-btn-demande');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-demande').insertBefore('#dt-demande');
                addColumnFiltersDemande(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-demande">
                            ${data[4]}
                            <div class="ml-2">
                                <h5>Demande : ${data[1]}</h5>
                                <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}<br>Créateur : ${data[3]}
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-demande').append(item);
            },
            preDrawCallback: function () {
                $('#cd-demande').empty();
            }
        });

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

        function addColumnFiltersDemande(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="0">En cours</option><option value="1">Traitées</option></select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else {
                    $('<input type="text" class="form-control" placeholder="Rechercher" style="width: 100%;">')
                        .appendTo(header)
                        .on('keyup', function () {
                            column.search($(this).val()).draw();
                        });
                }
            });
        }

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

        $('#filterStatusDemande').on('change', function () {
            tableDemande.draw();
        }).trigger('change');
    });
    //END DEMANDE

    // DEVIS
    $(document).ready(function() {

        let tableDevis = $('#dt-devis').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            lengthChange: true,
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 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[5]}
                            <div class="ml-2">
                                <h5>Devis : ${data[1]}</h5>
                                <h5>Montant : ${data[3]}</h5>
                                <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </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 = $('#filterStatusDevis').val();
            let status = $(tableDevis.row(dataIndex).node()).find('.status-value').text().trim();
            return selected === '' || selected === status;
        });

        $('#filterStatusDevis').on('change', function () {
            tableDevis.draw();
        }).trigger('change');

    });
    // END DEVIS

    // FACTURE
    $(document).ready(function() {
        $('#dt-facture').dataTable({
            responsive: true,
            order: [[0, 'desc'],
                    [1, 'desc']],
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-facture',
                    action: function () {
                        toggleViewFacture('#dt-facture', '#cd-facture', '.dt-btn-facture', '.cd-btn-facture');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-facture',
                    action: function () {
                        toggleViewFacture('#cd-facture', '#dt-facture', '.cd-btn-facture', '.dt-btn-facture');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-facture').insertBefore('#dt-facture');
                addColumnFiltersFacture(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-inter">
                            <span class="d-inline-block ">
                                <i class="fal fa-file-pdf img-responsive rounded-circle ico-carte border-facture-ico"></i>
                            </span>
                            <div class="ml-2">
                                <h5>Facture : ${data[1]["@data-order"]}</h5>
                                <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-facture').append(item);
            },
            preDrawCallback: function () {
                $('#cd-facture').empty();
            }
        });

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

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

                $('<input type="text" class="form-control" placeholder="Rechercher">')
                    .appendTo(header)
                    .on('keyup', function () {
                        column.search($(this).val()).draw();
                });
            });
        }
    });
    //END FACTURE

    // INTER
    $(document).ready(function() {

        let tableInter = $('#dt-inter').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-inter',
                    action: function () {
                        toggleView('#dt-inter', '#cd-inter', '.dt-btn-inter', '.cd-btn-inter');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-inter',
                    action: function () {
                        toggleView('#cd-inter', '#dt-inter', '.cd-btn-inter', '.dt-btn-inter');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-inter').insertBefore('#dt-inter');
                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-inter">
                            ${data[3]}
                            <div class="ml-2">
                                <h5>Inter : ${data[1]}</h5>
                                <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-inter').append(item);
            },
            preDrawCallback: function () {
                $('#cd-inter').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') {
                    $('<select class="form-control"><option value="">Tous</option><option value="planifié">Planifié</option><option value="en cours">En Cours</option><option value="terminé">Terminé</option></select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else {
                    $('<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 = $('#filterStatusInter').val();
            let status = $(tableInter.row(dataIndex).node()).find('.status-value').text().trim();
            return selected === '' || selected === status;
        });

        $('#filterStatusInter').on('change', function () {
            tableInter.draw();
        }).trigger('change');

    });
    //END INTER

</script>
@endpush

@push('script_02')
<script>
    // RAPPORT
    $(document).ready(function() {
        let tabRapport = $('#dt-rapport').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            columns: [
                    {"width": "5%"},
                    {"width": "10%"},
                    {"width": "40%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "5%"},

            ],
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-rapport',
                    action: function () {
                        toggleViewRapport('#dt-rapport', '#cd-rapport', '.dt-btn-rapport', '.cd-btn-rapport');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-rapport',
                    action: function () {
                        toggleViewRapport('#cd-rapport', '#dt-rapport', '.cd-btn-rapport', '.dt-btn-rapport');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-rapport').insertBefore('#dt-rapport');
                addColumnFiltersRapport(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-inter">
                            <span class="d-inline-block ">
                                <i class="fal fa-file-signature img-responsive rounded-circle ico-carte "></i>
                            </span>
                            <div class="ml-2">
                                <h5>Rapport : ${data[1]}</h5>
                                <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-rapport').append(item);
            },
            preDrawCallback: function () {
                $('#cd-rapport').empty();
            }
        });

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

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

                if (header.text().trim() === 'Etat') {
                    $('<select id="filterStatusEtat" class="form-control">' +
                        '<option value="">Tous</option>' +
                        '<option value="bon">Bon</option>' +
                        '<option value="usé">Usé</option>' +
                        '<option value="à refaire">À refaire</option>' +
                        '<option value="mauvais">Mauvais</option>' +
                        '<option value="à déterminer">À déterminer</option>' +
                    '</select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else if (header.text().trim() === 'Sécurité existante') {
                    $('<select id="filterStatusSecurite" class="form-control">' +
                        '<option value="">Tous</option>' +
                        '<option value="présent">Présent</option>' +
                        '<option value="non présent">Non présent</option>' +
                        '<option value="à déterminer">À déterminer</option>' +
                    '</select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else if (header.text().trim() === 'Conformité sécurité') {
                    $('<select id="filterStatusConformite" class="form-control">' +
                        '<option value="">Tous</option>' +
                        '<option value="conforme">Conforme</option>' +
                        '<option value="non conforme">Non conforme</option>' +
                        '<option value="à déterminer">À déterminer</option>' +
                    '</select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else {
                    $('<input type="text" class="form-control" placeholder="Rechercher">')
                        .appendTo(header)
                        .on('keyup', function () {
                            column.search($(this).val()).draw();
                    });
                }
            });
        }

        // Ajout du filtrage personnalisé pour la colonne "Etat"
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            let selectedEtat = $('#filterStatusEtat').val();
            let etatText = $(tabRapport.row(dataIndex).node()).find('.etat-value').attr('data-search');

            return selectedEtat === '' || selectedEtat === etatText;
        });

        // Filtrer les données en fonction de la sélection
        $('#filterStatusEtat').on('change', function () {
            tabRapport.draw();
        }).trigger('change');

        // Ajout du filtrage personnalisé pour la colonne "Sécurité existante"
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
            let selectedSecurite = $('#filterStatusSecurite').val();
            let securiteText = $(tabRapport.row(dataIndex).node()).find('.securite-value').attr('data-search');

            // Si rien n'est sélectionné, on affiche tout
            if (selectedSecurite === '') {
                return true;
            }

            // Comparaison stricte entre ce qui est sélectionné et le texte dans data-search
            return selectedSecurite === securiteText;
        });

        // Lorsque le filtre est changé, redessine le tableau
        $('#filterStatusSecurite').on('change', function() {
            tabRapport.draw();
        }).trigger('change');

        // Ajout du filtrage personnalisé pour la colonne "Conformité sécurité"
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            let selectedConformite = $('#filterStatusConformite').val();
            let conformiteText = $(tabRapport.row(dataIndex).node()).find('.conformite-value').attr('data-search');

            // Comparaison stricte avec les options filtrées
            if (selectedConformite === '') {
                return true;  // Afficher toutes les lignes si rien n'est sélectionné
            }

            return selectedConformite === conformiteText;
        });

        // Filtrer les données en fonction de la sélection
        $('#filterStatusConformite').on('change', function () {
            tabRapport.draw();
        }).trigger('change');

    });
    //END RAPPORT
</script>
<script>
    let table;
    var displayFacture = @json(config('app.display_facture'));

    // Initialisation de la table au démarrage
    function initDemandeDataTable() {
        table = $('#dt-demande').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-demande',
                    action: function () {
                        toggleViewDemande('#dt-demande', '#cd-demande', '.dt-btn-demande', '.cd-btn-demande');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-demande',
                    action: function () {
                        toggleViewDemande('#cd-demande', '#dt-demande', '.cd-btn-demande', '.dt-btn-demande');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-demande').insertBefore('#dt-demande');
                addColumnFiltersDemande(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-demande').length === 0) {
                    $('body').append('<div class="row" id="cd-demande" 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-demande">
                            ${data[4]}
                            <div class="ml-2">
                                <h5>Demande : ${data[1]}</h5>
                                <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}<br>Créateur : ${data[3]}
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-demande').append(item);
            },
            preDrawCallback: function () {
                $('#cd-demande').empty(); // Vide la vue card avant chaque redraw
            }
        });

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

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

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

    // Initialisation de la table au démarrage
    function initDevisDataTable() {
        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 () {
                        toggleViewDevis('#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 () {
                        toggleViewDevis('#cd-devis', '#dt-devis', '.cd-btn-devis', '.dt-btn-devis');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-devis').insertBefore('#dt-devis');
                addColumnFiltersDevis(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[5]}
                            <div class="ml-2">
                                <h5>Devis : ${data[1]}</h5>
                                <h5>Montant : ${data[3]}</h5>
                                <small>${data[2]}</small><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-devis').append(item);
            },
            preDrawCallback: function () {
                $('#cd-devis').empty();
            }
        });

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

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

    // Initialisation de la table au démarrage
    function initFactureDataTable() {
        table = $('#dt-facture').DataTable({
            order: [[0, 'desc']],
            destroy: true,
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-facture',
                    action: function () {
                        toggleViewFacture('#dt-facture', '#cd-facture', '.dt-btn-facture', '.cd-btn-facture');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-facture',
                    action: function () {
                        toggleViewFacture('#cd-facture', '#dt-facture', '.cd-btn-facture', '.dt-btn-facture');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-facture').insertBefore('#dt-facture');
                addColumnFiltersFacture(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-facture').length === 0) {
                    $('body').append('<div class="row" id="cd-facture" 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-inter">
                            <span class="d-inline-block ">
                                <i class="fal fa-file-pdf img-responsive rounded-circle ico-carte border-facture-ico"></i>
                            </span>
                            <div class="ml-2">
                                <h5>Facture : ${data[1]["@data-order"]}</h5>
                                <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-facture').append(item);
            },
            preDrawCallback: function () {
                $('#cd-facture').empty();
            }
        });


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

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

                $('<input type="text" class="form-control" placeholder="Rechercher">')
                    .appendTo(header)
                    .on('keyup', function () {
                        column.search($(this).val()).draw();
                });
            });
        }
    }

    // Initialisation de la table au démarrage
    function initInterventionDataTable() {
        table = $('#dt-inter').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-inter',
                    action: function () {
                        toggleViewInter('#dt-inter', '#cd-inter', '.dt-btn-inter', '.cd-btn-inter');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-inter',
                    action: function () {
                        toggleViewInter('#cd-inter', '#dt-inter', '.cd-btn-inter', '.dt-btn-inter');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-inter').insertBefore('#dt-inter');
                addColumnFiltersInter(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-inter').length === 0) {
                    $('body').append('<div class="row" id="cd-inter" 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-inter">
                            ${data[3]}
                            <div class="ml-2">
                                <h5>Inter : ${data[1]}</h5>
                                <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-inter').append(item);
            },
            preDrawCallback: function () {
                $('#cd-inter').empty();
            }
        });

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

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

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

    // Initialisation de la table au démarrage
    function initRapportDataTable() {
        let tabRapports = $('#dt-rapport').DataTable({
            order: [[0, 'desc']],
            columns: [
                { width: '5%' },
                { width: '10%' },
                { width: '45%' },
                { width: '10%' },
                { width: '10%' },
                { width: '10%' },
                { width: '10%' },
                { width: '10%' },
            ],
            destroy: true,
            language: {
                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'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 mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-rapport',
                    action: function () {
                        toggleViewRapport('#dt-rapport', '#cd-rapport', '.dt-btn-rapport', '.cd-btn-rapport');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-rapport',
                    action: function () {
                        toggleViewRapport('#cd-rapport', '#dt-rapport', '.cd-btn-rapport', '.dt-btn-rapport');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-rapport').insertBefore('#dt-rapport');
                addColumnFiltersRapport(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-rapport').length === 0) {
                    $('body').append('<div class="row" id="cd-rapport" 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-inter">
                            <span class="d-inline-block ">
                                <i class="fal fa-file-signature img-responsive rounded-circle ico-carte "></i>
                            </span>
                            <div class="ml-2">
                                <h5>Rapport : ${data[1]}</h5>
                                <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-rapport').append(item);
            },
            preDrawCallback: function () {
                $('#cd-rapport').empty();
            }
        });

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

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

                if (header.text().trim() === 'Etat') {
                    $('<select class="form-control">' +
                        '<option value="">Tous</option>' +
                        '<option value="bon">Bon</option>' +
                        '<option value="usé">Usé</option>' +
                        '<option value="à refaire">À refaire</option>' +
                        '<option value="mauvais">Mauvais</option>' +
                        '<option value="à déterminer">À déterminer</option>' +
                    '</select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else if (header.text().trim() === 'Sécurité existante') {
                    $('<select class="form-control">' +
                        '<option value="">Tous</option>' +
                        '<option value="présent">Présent</option>' +
                        '<option value="non présent">Non présent</option>' +
                        '<option value="à déterminer">À déterminer</option>' +
                    '</select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else if (header.text().trim() === 'Conformité sécurité') {
                    $('<select class="form-control">' +
                        '<option value="">Tous</option>' +
                        '<option value="conforme">Conforme</option>' +
                        '<option value="non conforme">Non conforme</option>' +
                        '<option value="à déterminer">À déterminer</option>' +
                    '</select>')
                        .appendTo(header)
                        .on('change', function () {
                            column.search($(this).val()).draw();
                        });
                } else {
                    $('<input type="text" class="form-control" placeholder="Rechercher">')
                        .appendTo(header)
                        .on('keyup', function () {
                            column.search($(this).val()).draw();
                    });
                }
            });
        }

    }

    document.getElementById('startDate').addEventListener('change', updateData);
    document.getElementById('endDate').addEventListener('change', updateData);
    document.getElementById('yearFilter').addEventListener('change', updateData);

    function updateData() {

        // Afficher le loader
        showLoader();

        const siteId = window.location.pathname.split("/").pop();
        if (!siteId) {
            console.error("Erreur : ID du site introuvable !");
            return;
        }
        let startDate = document.getElementById('startDate').value;
        let endDate = document.getElementById('endDate').value;
        let selectedYear = document.getElementById('yearFilter').value;
        let url = `/sitesDetails/${siteId}/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}`;
        }

        fetch(url)
            .then(response => response.json())
            .then(data => {
                document.getElementById('t_demande').innerText = data.nbrDemande ?? 0;
                document.getElementById('t_devis').innerText = data.nbrDevis ?? 0;

                var factureElement = document.getElementById('t_facture');
                if (factureElement) {
                    if (displayFacture) {
                        factureElement.innerText = data.nbrFacture ?? 0;
                    } else {
                        factureElement.style.display = 'none';
                    }
                } else {
                    console.warn('Un ou plusieurs éléments n\'ont pas été trouvés dans le DOM.');
                }
                // document.getElementById('t_facture').innerText = data.nbrFacture ?? 0;
                document.getElementById('t_intervention').innerText = data.nbrIntervention ?? 0;
                document.getElementById('t_rapport').innerText = data.nbrRapport ?? 0;
                document.getElementById('t_demande_stat_encours').innerText = data.pourcentageDemadneEnCours ?? 0;
                document.getElementById('t_demande_stat_traite').innerText = data.pourcentageDemadneTraiter ?? 0;
                document.getElementById('t_devis_stat_encours').innerText = data.pourcentageDevisEnCours ?? 0;
                document.getElementById('t_devis_stat_commander').innerText = data.pourcentageDevisCommander ?? 0;
                document.getElementById('t_inter_stat_planifie').innerText = data.pourcentagePlanifie ?? 0;
                document.getElementById('t_inter_stat_encours').innerText = data.pourcentageEnCours ?? 0;
                document.getElementById('t_inter_stat_termine').innerText = data.pourcentageTermine ?? 0;

                var factureStat = document.getElementById('t_facture_stat_facture');
                if (factureStat) {
                    if (displayFacture) {
                        factureStat.innerText = data.nbrFacture ?? 0;
                    } else {
                        factureStat.style.display = 'none';
                    }
                } else {
                    console.warn('Un ou plusieurs éléments n\'ont pas été trouvés dans le DOM.');
                }

                // document.getElementById('t_facture_stat_facture').innerText = data.nbrFacture ?? 0;
                document.getElementById('t_rapport_stat_rapport').innerText = data.nbrRapport ?? 0;

                // Mise à jour du tableau des demandes
                updateDemandeTable(data.dataDemandes ?? []);
                updateInternvetionTable(data.dataInterventions ?? []);
                updateDevisTable(data.dataDevis ?? [], data.tokenFile ?? '');
                updateFactureTable(data.dataFactures ?? [], data.tokenFile ?? '');
                updateRapportTable(data.dataRapports ?? [], data.tokenFile ?? '');

                // Met à jour les jauges Peity avec les nouvelles données
                updatePeityDemandeCharts(data.pourcentageDemadneEnCours, data.pourcentageDemadneTraiter);
                updatePeityDevisCharts(data.pourcentageDevisEnCours, data.pourcentageDevisCommander);

                // 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 updateDemandeTable(demandes) {

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

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

        // Effacer le contenu existant dans le tableau
        $("#dt-demande tbody").empty();

        demandes.forEach(demande => {
            const row = document.createElement("tr");

            // Définition de la classe et de l'icône en fonction du statut
            let statusClass = demande.traite == 1 ? "status valide d-inline-block" : "status traite d-inline-block";
            let statusIcon = `<i class="fal fa-comment-edit img-responsive rounded-circle ico-tab"></i>`;

            row.innerHTML = `
                <td data-order="${ demande.date_create ?? ''}">${new Date(demande.date_create).toLocaleDateString()}</td>
                <td>${demande.id}</td>
                <td>${demande.infos}</td>
                <td>${demande.createur ? demande.createur.nom + " " + demande.createur.prenom : "N/A"}</td>
                <td><span class="${statusClass}">${statusIcon}</span></td>
            `;

            $('#dt-demande tbody').append(row);
            $('#cd-demande').append(row);
        });

        initDemandeDataTable();
    }

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

        // Effacer le contenu existant dans le tableau
        $("#dt-devis tbody").empty();

        devis.forEach(devi => {
            const row = document.createElement("tr");

            // Définition de la classe et de l'icône en fonction du statut
            let statusClass = '';
            let statusIcon = `<i class="ni ni-calculator img-responsive rounded-circle ico-tab"></i>`;

            // Vérification des conditions pour le statut
            if (devi.enabled === true && devi.etat === true) {
                if (devi.validation_client === false) {
                    statusClass = 'status en-cours d-inline-block';
                    statutText = 'en-cours';
                } else if (devi.validation_client === true && devi.date_validate !== null) {
                    statusClass = 'status valide d-inline-block';
                    statutText = 'commandé';
                }
            } else {
                statusClass = 'status alerte d-inline-block';
            }

            // Vérification de la disponibilité du fichier
            let fileLink = '';
            if (devi.fichier !== '#' && devi.fichier) {
                fileLink = `
                    <a href="${devi.fichier}?t=${tokenFile}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                        <i class="fal fa-file-invoice-dollar"></i>
                    </a>
                `;
            } else {
                fileLink = '<span class="text-muted">Fichier non disponible</span>';
            }

            row.innerHTML = `
                <td data-order="${devi.date_create ?? ''}">${new Date(devi.date_create).toLocaleDateString()}</td>
                <td>${devi.id_libelle}</td>
                <td>${devi.libelle}</td>
                <td>${devi.total_ht} €</td>
                <td class="text-center">${fileLink}</td>
                <td><span class="${statusClass}">${statusIcon}</span><span class="status-value">${statutText}</span></td>
            `;

            $('#dt-devis tbody').append(row);
        });
        // Réinitialiser le DataTable après avoir ajouté les données
        initDevisDataTable();
    }

    // Fonction pour mettre à jour les jauges Peity avec les nouvelles données
    function updatePeityDemandeCharts(pourcentageDemadneEnCours, pourcentageDemadneTraiter) {

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

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

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

    function updatePeityDevisCharts(pourcentageDevisEnCours, pourcentageDevisCommander) {

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

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

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

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

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

        // Effacer le contenu existant dans le tableau
        $("#dt-inter tbody").empty();

        internvetions.forEach(internvetion => {
            const row = document.createElement("tr");

            // Définition de la classe et de l'icône en fonction du statut
            let statusClass = '';

            // Vérification du statut et assignation de la classe correspondante
            if (internvetion.status === 'Terminé') {
                statusClass = 'status valide valide d-inline-block';  // Classe pour 'Terminé'
                statutText = 'terminé';
            } else if (internvetion.status === 'En cours') {
                statusClass = ' status en-cours d-inline-block';  // Classe pour 'En cours'
                statutText = 'en cours';
            } else if (internvetion.status === 'Planifié') {
                statusClass = 'status traite d-inline-block';  // Classe pour 'Planifié'
                statutText = 'planifié';
            } else {
                statusClass = '';
            }

            let statusIcon = `<i class="fal fa-digging img-responsive rounded-circle ico-tab"></i>`;

            row.innerHTML = `
                <td data-order="${internvetion.t_planning.date_start ?? ''}">${new Date(internvetion.t_planning.date_start).toLocaleDateString()}</td>
                <td>${internvetion.t_planning.t_devi.id_libelle}</td>
                <td>${internvetion.t_planning.t_devi.libelle}</td>
                <td><span class="${statusClass}">${statusIcon}</span><span class="status-value">${statutText}</span></td>
            `;

            $('#dt-inter').append(row);
        });

        initInterventionDataTable();
    }

    function updateFactureTable(factures, tokenFile) {

        // Vérifie si la DataTable existe déjà et la détruit si nécessaire
        if ($.fn.DataTable.isDataTable('#dt-facture')) {
            $('#dt-facture').DataTable().clear().destroy();
        }

        $('#dt-facture thead th select, #dt-facture thead th input').remove();
        $("#dt-facture tbody").empty();

        // Si 'factures' est vide ou non défini, on affiche un message d'erreur
        if (!factures || factures.length === 0) {
            $("#dt-facture tbody").html("<tr><td colspan='7' class='text-center'>Aucune facture trouvée pour cette année.</td></tr>");
        } else {
            let rowsHtml = "";

            factures.forEach(factureData => {
                if (factureData.t_planning && factureData.t_planning.t_devi && factureData.t_planning.t_devi.t_factures) {
                    factureData.t_planning.t_devi.t_factures.forEach(facture => {
                        const factureDate = facture.date_facture ? new Date(facture.date_facture).toLocaleDateString('fr-FR') : 'N/A';
                        const dateEcheance = facture.date_echeance ? new Date(facture.date_echeance).toLocaleDateString('fr-FR') : 'N/A';

                        const agenceFacturation = facture.agence_facturation ? `
                            <b>${facture.agence_facturation.libelle}</b><br />
                            ${facture.agence_facturation.adresse}<br />
                            ${facture.agence_facturation.cp} - ${facture.agence_facturation.ville}
                        ` : ' - ';

                        let fileLink = factureData.fichier && factureData.fichier !== '#' ? `
                            <a href="${factureData.fichier}?t=${tokenFile}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                                <i class="fal fa-file-invoice-dollar"></i>
                            </a>
                        ` : '<span class="text-muted">Fichier non disponible</span>';

                        rowsHtml += `
                            <tr>
                                <td>${factureDate}</td>
                                <td>${dateEcheance}</td>
                                <td>${agenceFacturation}</td>
                                <td>${facture.id_libelle}</td>
                                <td>${factureData.t_planning.t_devi.id_libelle}</td>
                                <td>${facture.total_ht} €</td>
                                <td class="text-center">${fileLink}</td>
                            </tr>
                        `;
                    });
                }
            });

            $("#dt-facture tbody").html(rowsHtml);

            // Ré-initialiser la DataTable après mise à jour
            setTimeout(() => {
                initFactureDataTable();
            }, 10);
        }
    }

    function updateRapportTable(rapports, tokenFile) {

        if ($.fn.DataTable.isDataTable('#dt-rapport')) {
            $('#dt-rapport').DataTable().clear().destroy();
        }

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

        // Effacer le contenu existant dans le tableau
        $("#dt-rapport tbody").empty();

        rapports.forEach(rapport => {
            const row = document.createElement("tr");

            // Définition de la classe et de l'icône en fonction du statut
            let statusIconEtat = '';
            let statusEtat = '';
            let statusIconSecuite = '';
            let statusSecurite = '';
            let statusIconConforme = '';
            let statusConforme = '';

            // Status etat
            if (rapport.etat_general == -1 || rapport.etat_general == -2) {
                statusIconEtat = `<i class="text-muted fal fa-question-circle"></i>`;
                statusEtat = "À determiner";
            } else if (rapport.etat_general == 0) {
                statusIconEtat = `<i class="fal fa-tachometer-alt-fastest bon-etat"></i>`;
                statusEtat = "Bon";
            } else if (rapport.etat_general == 1) {
                statusIconEtat = `<i class="fal fa-tachometer-alt-average etat-use"></i>`;
                statusEtat = "Usé";
            } else if (rapport.etat_general == 1.5) {
                statusIconEtat = `<i class="fal fa-tachometer-alt-slow etat-mauvais"></i>`;
                statusEtat = "À refaire";
            } else if (rapport.etat_general == 2) {
                statusIconEtat = `<i class="fal fa-tachometer-alt-slowest etat-reparer"></i>`;
                statusEtat = "Mauvais";
            } else {
                statusIconEtat = `<i class="fal fa-question-circle text-warning"></i>`;
                statusEtat = 'Inconnu';
            }

            // Status securité
            if (rapport.securite_exist == -1) {
                statusIconSecuite = `<i class="text-muted fal fa-question-circle"></i>`;
                statusSecurite = "À determiner";
            } else if (rapport.securite_exist == 0) {
                statusIconSecuite = `<i class="fal fa-check-circle bon-etat"></i>`;
                statusSecurite = "Présent";
            } else if (rapport.securite_exist == 2) {
                statusIconSecuite = `<i class="fal fa-times-circle etat-reparer"></i>`;
                statusSecurite = "Non présent";
            } else {
                statusIconSecuite = `<i class="fal fa-question-circle text-warning"></i>`;
                statusSecurite = "Inconnu";
            }

            // Status conforme
            if (rapport.securite_conforme == -1) {
                statusIconConforme = `<i class="text-muted fal fa-question-circle"></i>`;
                statusConforme = "À determiner";
            } else if (rapport.securite_conforme == 0) {
                statusIconConforme = `<i class="fal fa-shield-alt conforme"></i>`;
                statusConforme = "Conforme";
            } else if (rapport.securite_conforme == 1.5) {
                statusIconConforme = `<i class="fal fa-shield-alt non-conforme"></i>`;
                statusConforme = "Non conforme";
            } else {
                statusIconConforme = '<i class="fal fa-question-circle text-warning"></i>';
                statusConforme = "Inconnu";
            }

            let fileLinkDevis = '';
            if (rapport.fichier !== '#' && rapport.fichier) {
                fileLinkDevis = `
                    <a href="${rapport.fichier}?t=${tokenFile}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                        <i class="fal fa-file-invoice-dollar"></i>
                    </a>
                `;
            } else {
                fileLinkDevis = '<span class="text-muted">Fichier non disponible</span>';
            }

            let fileLinkDevisComplementaire = '';
            if (rapport.devisComplementaire !== '#' && rapport.devisComplementaire) {
                fileLinkDevisComplementaire = `
                    <a href="${rapport.devisComplementaire}?t=${tokenFile}" target="_blank" title="Consulter la facture en PDF" class="btn btn-primary">
                        <i class="fal fa-file-invoice-dollar"></i>
                    </a>
                `;
            } else {
                fileLinkDevisComplementaire = '<span class="text-muted">Fichier non disponible</span>';
            }

            row.innerHTML = `
                <td data-order="${rapport.date ?? ''}">${new Date(rapport.date).toLocaleDateString()}</td>
                <td>${rapport.t_devi.id_libelle}</td>
                <td>${rapport.bilan}</td>
                <td><span class="etats-value" data-order="${rapport.etat_general}" data-search="${statusEtat.toLocaleLowerCase('fr')}">
                    ${statusIconEtat} ${statusEtat}</span>
                </td>
                <td><span class="securite-value" data-order="${rapport.securite_exist}" data-search="${statusSecurite.toLocaleLowerCase('fr')}">
                    ${statusIconSecuite} ${statusSecurite}</span>
                </td>
                <td><span class="conformite-value" data-order="${rapport.securite_conforme}" data-search="${statusConforme.toLocaleLowerCase('fr')}">
                    ${statusIconConforme} ${statusConforme}</span>
                </td>
                <td class="text-center">${fileLinkDevis}</td>
                <td class="text-center">${fileLinkDevisComplementaire}</td>
            `;

            $('#dt-rapport tbody').append(row);
        });
        initRapportDataTable();
    }

</script>
@endpush