@extends('layouts.base')

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

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

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

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

    </style>
@endpush

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

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

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

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

        <select id="yearFilter" class="form-control custom-select ml-2">
            <option value="all">📊 Tous</option>
            @php
                $currentYear = date('Y');
                for ($i = 0; $i < 3; $i++) {
                    $year = $currentYear - $i;
                    echo "<option value='$year'>📅 $year</option>";
                }
            @endphp
        </select>
    </div>
    <!-- Overlay de chargement -->
    <div id="loader-overlay" class="loader-overlay" style="display: none;">
        <div class="spinner"></div>
    </div>
@endpush

@section('content')
    <main id="js-page-content" role="main" class="page-content">
        <div class="row etiquettes">
            <div class="col-sm-6 col-xl-6">
                <div id="panel-22" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            État <span class="fw-300">du parc immobilier</span>
                        </h2>

                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <div id="chartimmobilier" class="ct-chart" style="min-height: 31px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-6">
                <div id="panel-22" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Conformité <span class="fw-300"> des sécurités existantes</span>
                        </h2>

                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <div id="gaugeChartFill2" class="ct-chart" style="width:100%; height:250px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ETIQUETTES SERVICES -->
        <!-- 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-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 }">{{ $statTermine }}/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">{{ $statTermine }}</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-100">
                                <tr>
                                    <th>Date</th>
                                    <th>Site</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 ($rapports as $row)
                                    <tr>
                                        <td data-order="{{ $row->date ? $row->date->format('Y-m-d') : '' }}">
                                            {{ $row ? $row->date->format('d/m/Y') : '-' }}</td>
                                        <td>
                                            <b>{{ $row->t_planning->t_location?->libelle ?? '-' }}</b>
                                            <br>
                                            {{ $row->t_planning->t_location->adresse ?? '-' }}
                                            <br>
                                            {{ $row->t_planning->t_location->cp ?? '-' }} -
                                            {{ $row->t_planning->t_location->ville ?? '-' }}
                                            <br>
                                        </td>
                                        <td>{{ $row->t_planning->t_devi?->id_libelle ?? '-' }}</td>
                                        <td>{{ $row ? $row->bilan : '-' }}</td>
                                        <td>
                                            @php
                                                $etatText = '';
                                                $etatIcon = '';
                                                if ($row->etat_general == -1 || $row->etat_general == -2) {
                                                    $etatText = "À déterminer";
                                                    $etatIcon = '<i class="text-muted fal fa-question-circle"></i>';
                                                } elseif ($row->etat_general == 0) {
                                                    $etatText = "Bon";
                                                    $etatIcon = '<i class="fal fa-tachometer-alt-fastest bon-etat"></i>';
                                                } elseif ($row->etat_general == 1) {
                                                    $etatText = "Usé";
                                                    $etatIcon = '<i class="fal fa-tachometer-alt-average etat-use"></i>';
                                                } elseif ($row->etat_general == 1.5) {
                                                    $etatText = "À refaire";
                                                    $etatIcon = '<i class="fal fa-tachometer-alt-slow etat-mauvais"></i>';
                                                } elseif ($row->etat_general == 2) {
                                                    $etatText = "Mauvais";
                                                    $etatIcon = '<i class="fal fa-tachometer-alt-slowest etat-reparer"></i>';
                                                }
                                            @endphp
                                            <span class="etat-value" data-order="{{ $row->etat_general }}" data-search="{{ mb_strtolower($etatText, 'UTF-8') }}">
                                                {!! $etatIcon !!} {{ $etatText }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $securiteText = '';
                                                $securiteIcon = '';
                                                if ($row->securite_exist == -1) {
                                                    $securiteText = "À déterminer";
                                                    $securiteIcon = '<i class="text-muted fal fa-question-circle"></i>';
                                                } elseif ($row->securite_exist == 0) {
                                                    $securiteText = "Présent";
                                                    $securiteIcon = '<i class="fal fa-check-circle bon-etat"></i>';
                                                } elseif ($row->securite_exist == 2) {
                                                    $securiteText = "Non présent";
                                                    $securiteIcon = '<i class="fal fa-times-circle etat-reparer"></i>';
                                                }
                                            @endphp
                                            <span class="securite-value" data-order="{{ $row->securite_exist }}" data-search="{{ mb_strtolower($securiteText, 'UTF-8') }}">
                                                {!! $securiteIcon !!} {{ $securiteText }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $conformiteText = '';
                                                $conformiteIcon = '';
                                                if ($row->securite_conforme == -1) {
                                                    $conformiteText = "À déterminer";
                                                    $conformiteIcon = '<i class="text-muted fal fa-question-circle"></i>';
                                                } elseif ($row->securite_conforme == 0) {
                                                    $conformiteText = "Conforme";
                                                    $conformiteIcon = '<i class="fal fa-shield-alt conforme"></i>';
                                                } elseif ($row->securite_conforme == 1.5) {
                                                    $conformiteText = "Non conforme";
                                                    $conformiteIcon = '<i class="fal fa-shield-alt non-conforme"></i>';
                                                }
                                            @endphp
                                            <span class="conformite-value" data-order="{{ $row->securite_conforme }}" data-search="{{ mb_strtolower($conformiteText, 'UTF-8') }}">
                                                {!! $conformiteIcon !!} {{ $conformiteText }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            @if($row->fichier() !== '#')
                                                <a class="btn btn-primary waves-effect waves-themed"
                                                    href="{{ $row->fichier() }}?t={{ $tokenFile }}" target="_blank"
                                                    title="Voir le devis complémentaire" class="text-danger"><i
                                                class="fal fa-file-pdf"></i></a>
                                            @else
                                            <span class="text-muted">Fichier non disponible.</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                        @if($row->devisComplementaire() !== '#')
                                            <a class="btn btn-primary waves-effect waves-themed"
                                                href="{{ $row->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="9" class="text-center">Aucun enregistrement trouvé</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Date</th>
                                    <th>Site</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>

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

    <div class="modal fade" id="interventionModalSecurite" tabindex="-1" role="dialog" aria-labelledby="interventionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="interventionModalLabelSecurite">Détails des sécurités existantes</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p id="interventionDetailsSecurite"></p>
                            <table id="dt-inter-securite-chart" class="table table-striped table-bordered custom-table-width">
                                <thead>
                                    <tr>
                                        <th>Libelle</th>
                                        <th>Adresse</th>
                                        <th>Code postal</th>
                                        <th>Ville</th>
                                        <th>Sécurité</th>
                                    </tr>
                                </thead>
                                <tbody id="modalTableBodySecurite">
                                    <!-- Les détails dynamiques seront ajoutés ici -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
<script type="text/javascript">

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

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

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

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

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

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

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

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

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

// Initialiser la variable `window.visiteDetails` avec les données par défaut
window.ImmobilierDetails = {
        0: @json($chartDataBonGet),
        1: @json($chartDataUseGet),
        2: @json($chartDataaRefaireGet),
        3: @json($chartDatamauvaisGet),
        4: @json($chartDataaDeterminerLieuGet),
};
// End immobilier
</script>
<script type="text/javascript">
    var conforme = {{ $chartDataConforme }};
    var nonConforme = {{ $chartDataNonConforme }};
    var aDeterminer = {{ $chartDataADeterminer }};

    var options = {
        series: [conforme, nonConforme, aDeterminer], // Données dynamiques
        chart: {
            width: '100%',
            height: 238,
            type: 'pie',
            events: {
                dataPointSelection: function(event, chartContext, config) {
                    var seriesIndex = config.dataPointIndex;
                    var label = config.w.config.labels[seriesIndex];
                    var percentage = config.w.config.series[seriesIndex];

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

                    // Mise à jour du tableau avec les nouvelles données
                    updateTable(securite, seriesIndex);

                    // Mettre à jour le label du modal
                    var interventionDetailsImmobilier = document.getElementById('interventionDetailsSecurite');
                    interventionDetailsImmobilier.textContent = `Détails pour : ${label} (${percentage})`;

                    // Afficher le modal
                    $('#interventionModalSecurite').modal('show');
                },
            },
        },
        labels: ['Oui', 'Non', 'À déterminer'],
        colors: ["#318c38", "#cc000a", "#cacaca"],
        legend: {
            position: 'bottom',
            fontSize: '12px',
            fontWeight: 600,
            markers: {
                width: 11,
                height: 11,
                radius: 1
            },
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };

    // Initialiser le graphique
    var chart = new ApexCharts(document.querySelector("#gaugeChartFill2"), options);
    chart.render();

    // Initialiser la variable `window.SecuriteDetails` avec les données par défaut
    window.SecuriteDetails = {
        0: @json($chartDataConformeGet),
        1: @json($chartDataNonConformeGet),
        2: @json($chartDataADeterminerGet),
    };

    // Fonction d'optimisation de la mise à jour du tableau
    function updateTable(securite, seriesIndex) {
        var modalTableBodySecurite = document.getElementById('modalTableBodySecurite');
        var tableRows = [];

        // Mise à jour de la sécurité existant en fonction de l'index
        securite.forEach(function(location) {
            if (seriesIndex === 0) {
                location.securite_exist = 'Présent';
            } else if (seriesIndex === 1) {
                location.securite_exist = 'Non présent';
            } else if (seriesIndex === 2) {
                location.securite_exist = 'À déterminer';
            }

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

        // Utilisation de innerHTML une seule fois pour éviter les écritures multiples dans le DOM
        modalTableBodySecurite.innerHTML = tableRows.join('');

        // Initialiser ou réinitialiser DataTable si nécessaire
        initializeDataTable();
    }

    // Fonction d'initialisation de DataTable
    function initializeDataTable() {
        if ($.fn.DataTable.isDataTable('#dt-inter-securite-chart')) {
            var table = $('#dt-inter-securite-chart').DataTable();
            table.clear().rows.add($('#modalTableBodySecurite tr')).draw();  // Mise à jour des données sans recréer le DataTable
        } else {
            $('#dt-inter-securite-chart').DataTable({
                paging: true,
                pageLength: 10,
                language: {
                    url: "{{ asset('assets/js/core/fr-FR.json') }}",
                },
                searching: true,
                lengthChange: false,
                info: true,
                responsive: false,
                dom: "<'row mb-3'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6'lB>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                buttons: [
                    {
                        extend: 'csvHtml5',
                        text: 'CSV',
                        className: 'btn-outline-primary btn-sm float-right' // Aligné à droite
                    },
                ],
            });
        }
    }

    // Réinitialiser le tableau lorsque le modal est fermé
    $('#interventionModalSecurite').on('hidden.bs.modal', function () {
        var modalTableBodySecurite = document.getElementById('modalTableBodySecurite');
        modalTableBodySecurite.innerHTML = ''; // Vider le tableau lors de la fermeture du modal
    });

</script>
<script>
    $(document).ready(function() {
        // RAPPORT
        let tabRapport = $('#dt-rapport').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            columns: [
                    {"width": "5%"},
                    {"width": "20%"},
                    {"width": "10%"},
                    {"width": "35%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "5%"},
                    {"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',
                    titleAttr: 'Generate CSV',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    extend: '',
                    text: '<i class="fal fa-list"></i>',
                    titleAttr: 'Vue Tableau',
                    className: 'btn-primary btn-sm dt-btn-rapport',
                    action: function () {
                        toggleView('#dt-rapport', '#cd-rapport', '.dt-btn-rapport', '.cd-btn-rapport');
                    }
                },
                {
                    extend: '',
                    text: '<i class="fal fa-th-large"></i>',
                    titleAttr: 'Vue Carte',
                    className: 'btn-primary btn-sm cd-btn-rapport',
                    action: function () {
                        toggleView('#cd-rapport', '#dt-rapport', '.cd-btn-rapport', '.dt-btn-rapport');
                    }
                },
            ],
            initComplete: function () {
                $('#cd-rapport').insertBefore('#dt-rapport');
                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">
                            <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[2]}</h5>
                                <span>${data[1]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-rapport').append(item);
            },
            preDrawCallback: function () {
                $('#cd-rapport').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() === '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');

    });
    </script>
@endpush

@push('script_02')
<script>

    let tabRapport;

    // Initialisation de la table au démarrage
    function initDataTable() {
        tabRapport = $('#dt-rapport').DataTable({
            order: [[0, 'desc']],
            columns: [
                    {"width": "5%"},
                    {"width": "20%"},
                    {"width": "10%"},
                    {"width": "35%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "10%"},
                    {"width": "5%"},
                    {"width": "5%"},
            ],
            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',
                    titleAttr: 'Generate CSV',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    extend: '',
                    text: '<i class="fal fa-list"></i>',
                    titleAttr: 'Vue Tableau',
                    className: 'btn-primary btn-sm dt-btn-rapport',
                    action: function () {
                        toggleView('#dt-rapport', '#cd-rapport', '.dt-btn-rapport', '.cd-btn-rapport');
                    }
                },
                {
                    extend: '',
                    text: '<i class="fal fa-th-large"></i>',
                    titleAttr: 'Vue Carte',
                    className: 'btn-primary btn-sm cd-btn-rapport',
                    action: function () {
                        toggleView('#cd-rapport', '#dt-rapport', '.cd-btn-rapport', '.dt-btn-rapport');
                    }
                },
            ],
            initComplete: function () {
                $('#cd-rapport').insertBefore('#dt-rapport');
                addColumnFilters(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[2]}</h5>
                                <span>${data[1]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-rapport').append(item);
            },
            preDrawCallback: function () {
                $('#cd-rapport').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() === '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();
                    });
                }
            });
        }
    }

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

    function updateData() {

        // Afficher le loader
        showLoader();

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

        let url = `/rapport/data`;

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

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

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

        // Effectuer la requête AJAX
        fetch(url)
            .then(response => response.json())
            .then(data => {
                document.getElementById('t_rapport_stat').innerText = data.statTermine ?? 0;
                updateRapportTable(data.rapports ?? [], data.tokenFile ?? '');

                // 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 updateRapportTable(rapports, tokenFile) {
        // Détruire la table existante avant de la réinitialiser
        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();

        // Ajouter les nouvelles lignes de demandes à la table
        rapports.forEach(rapport => {

            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 = "À déterminer";
            } 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 = "À déterminer";
            } 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 = "À déterminer";
            } 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>';
            }

            console.log(statusEtat.toLocaleLowerCase('fr'));

            const row = [
                `<td data-order="${new Date(rapport.date).getTime()}">${new Date(rapport.date).toLocaleDateString('fr-FR')}</td>`,
                `<td><b>${rapport.t_location.libelle}</b><br>${rapport.t_location.adresse}<br>${rapport.t_location.cp} - ${rapport.t_location.ville}</td>`,
                `<td>${rapport.t_devi.id_libelle}</td>`,
                `<td>${rapport.bilan}</td>`,
                `<td><span class="etat-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>${fileLinkDevis}</td>`,
                `<td>${fileLinkDevisComplementaire}</td>`
            ];

            // Ajouter la ligne au tableau
            $("#dt-rapport tbody").append("<tr>" + row.join("") + "</tr>");
        });

        // Réinitialiser le DataTable après avoir ajouté les données
        initDataTable();
    }

</script>
@endpush