@extends('layouts.base')

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

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

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

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

    </style>
@endpush

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

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

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

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

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

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

@section('content')
<main id="js-page-content" role="main" class="page-content">
    <div class="row">
         <!-- Demandes -->
         <div class="card border-0 mb-3 col-xl-8 col-md-8">
             <div class="card-body">
                 <div class="row pl-3 pr-3 pb-3">
                     <h3 class="d-flex flex-row mr-auto align-items-center"><i class="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 }">{{ $statEnCours/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">{{ $statEnCours }}%</span></h4>
                         </div>
                     </div>
                     <div class="d-flex mr-0">
                         <div class="mr-2">
                             <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#d6dd39&quot;, &quot;#d6dd394d&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">{{ $statTraite/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">{{ $statTraite }}%</span></h4>
                         </div>
                     </div>
                 </div>
                 <div class="row mr-2 ml-2 mt-3">
                     <div class="col-xl-12 col-md-12">
                         <!-- datatable start -->
                         <table id="dt-demande" class="table table-bordered table-hover table-striped w-100">
                             <thead class="bg-primary-100">
                                 <tr>
                                     <th>Date</th>
                                     <th>Site</th>
                                     <th>Numéro</th>
                                     <th>Description</th>
                                     <th>Créateur</th>
                                     <th>Statut</th>
                                 </tr>
                             </thead>
                             <tbody>
                                @forelse ($demandes as $demande)
                                <tr>
                                    <td data-order="{{ $demande->date_create ? $demande->date_create->format('Y-m-d') : '' }}">{{ ($demande->date_create) ? $demande->date_create->format('d/m/Y') : '-' }}
                                    </td>
                                    <td>
                                        <b>{{ $demande->t_location->libelle ?? '-' }}</b>
                                            <br>
                                            {{ $demande->t_location->adresse ?? '-' }}
                                            <br>
                                            {{ $demande->t_location->cp ?? '-' }} -
                                            {{ $demande->t_location->ville ?? '-' }}
                                            <br>
                                        @if($demande->t_location && $demande->t_location->latitude != 0 && $demande->t_location->longitude != 0)
                                            <a href="#" class="btn btn-primary btn-sm fly-to"
                                            data-lat="{{ $demande->t_location->latitude }}"
                                            data-lon="{{ $demande->t_location->longitude }}">
                                            <i class="fal fa-map-marked-alt"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">coordonnée non trouvé</span>
                                        @endif
                                    </td>
                                    <td>{{ $demande->id }}</td>
                                    <td>{{ $demande->infos }}</td>
                                    <td>{{ ($demande->createur) ? ("{$demande->createur->prenom} {$demande->createur->nom}") : '-' }}</td>
                                    <td>
                                        <span @class(['status d-inline-block', 'valide' => $demande->traite, 'traite' => !$demande->traite])>
                                            <i class="fal fa-comment-edit img-responsive rounded-circle ico-tab"></i>
                                            <span class="status-value">{{ $demande->traite ? '1' : '0' }}</span>
                                        </span>
                                    </td>
                                </tr>
                            @empty
                            {{-- Laisser vide car l'absence de donnée est géré par DataTable --}}
                                <tr><td colspan="6" class="text-center">Aucun enregistrement trouvé</td></tr>
                            @endforelse
                             </tbody>
                             <tfoot>
                                 <tr>
                                     <th>Date</th>
                                     <th>Site</th>
                                     <th>Numéro</th>
                                     <th>Description</th>
                                     <th>Créateur</th>
                                     <th id="filterStatus">Statut</th>
                                 </tr>
                             </tfoot>
                         </table>
                         <!-- datatable end -->
                     </div>
                 </div>
                 <div class="row" id="cd-demande" style="display: none; margin-bottom: 5px;">
                </div>
             </div>
         </div>
         {{-- Map --}}
         <div class="col-xl-4 col-md-4">
             <div class="card border-0 d-flex flex-fill">
                 <div class="card-body">
                     <div class="card-title text-dark fs-5 font-weight-bold"><i class="fal fa-map-marked-alt fa-lg mr-2"></i>Géolocalisation</div>
                     <div id="map" style="height: 600px;"></div>
                 </div>
             </div>
         </div>
     </div>
 </main>
@endsection

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

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

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

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

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

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

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

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

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

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

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

        map.addLayer(leafletMarker);
    });


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

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

        if (lat && lon && typeof map !== "undefined") {
            map.flyTo([lat, lon], 18); // Ajuster le zoom
        } else {
            alert("Carte non définie ou coordonnées invalides.");
        }
    });
</script>
<script>
    $(document).ready(function () {
    let table = $('#dt-demande').DataTable({
        responsive: true,
        order: [[0, 'desc']],
        columns: [
            { "width": "5%" },
            { "width": "30%" },
            { "width": "5%" },
            { "width": "33%" },
            { "width": "15%" },
            { "width": "12%" },
        ],
        language: {
            searchPlaceholder: 'Rechercher',
            url: "{{ asset('assets/js/core/fr-FR.json') }}"
        },
        lengthChange: true,
        dom: `<'row mb-3'<'col-md-6 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'lB>>
            <'row'<'col-12'tr>>
            <'row'<'col-md-5'i><'col-md-7'p>>`,
        buttons: [
            {
                extend: 'csvHtml5',
                text: 'CSV',
                className: 'btn-outline-primary btn-sm mr-1'
            },
            {
                text: '<i class="fal fa-list"></i>',
                className: 'btn-primary btn-sm dt-btn-demande',
                action: function () {
                    toggleView('#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 () {
                    toggleView('#cd-demande', '#dt-demande', '.cd-btn-demande', '.dt-btn-demande');
                }
            }
        ],
        initComplete: function () {
            $('#cd-demande').insertBefore('#dt-demande');
            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-demande">
                        ${data[5]}
                        <div class="ml-2">
                            <h5>Demande : ${data[2]}</h5>
                            <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}<br>Créateur : ${data[4]}
                        </div>
                    </div>
                </div>`);
            $('#cd-demande').append(item);
        },
        preDrawCallback: function () {
            $('#cd-demande').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="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 = $('#filterStatus').val();
        let status = $(table.row(dataIndex).node()).find('.status-value').text().trim();
        return selected === '' || selected === status;
    });

    $('#filterStatus').on('change', function () {
        table.draw();
    }).trigger('change');
});

</script>
@endpush

@push('script_02')
<script>

    let table;

    // Initialisation de la table au démarrage
    function initDataTable() {
        table = $('#dt-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 () {
                        toggleView('#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 () {
                        toggleView('#cd-demande', '#dt-demande', '.cd-btn-demande', '.dt-btn-demande');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-demande').insertBefore('#dt-demande');
                addColumnFilters(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[5]}
                        <div class="ml-2">
                            <h5>Demande : ${data[2]}</h5>
                            <small>${data[1]}</small><br>Date : ${data[0]["@data-order"]}
                        </div>
                    </div>
                </div>`);

                $('#cd-demande').append(item);
            },
            preDrawCallback: function () {
                $('#cd-demande').empty();
            }
        });

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

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

            if (lat && lon && typeof map !== "undefined") {
                map.flyTo([lat, lon], 18); // Ajuster le zoom
            } else {
                alert("Carte non définie ou coordonnées invalides.");
            }
        });
    }

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

    // 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 = `/demande/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_demande_stat_encours').innerText = data.statEnCours ?? 0;
                document.getElementById('t_demande_stat_traite').innerText = data.statTraite ?? 0;
                updateDemandeTable(data.demandes ?? []);

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

                // Masquer le loader après avoir mis à jour les données
                hideLoader();

            })
            .catch(error => {
                console.error('Erreur de mise à jour des données :', error);

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

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

        $('#cd-demande').empty(); // On vide aussi la vue "card"

        // Si 'demandes' est vide ou non défini, on affiche un message d'erreur
        if (!demandes || demandes.length === 0) {
            $("#dt-demande tbody").html("<tr><td colspan='6' class='text-center'>Aucune demande trouvée pour cette année.</td></tr>");
        } else {
            // Ajouter les nouvelles lignes de demandes à la table
            demandes.forEach(demande => {
                // Vérification de l'existence de t_location
                const tLocation = demande.t_location || {};
                const locationLibelle = tLocation.libelle || 'Inconnu';
                const locationAdresse = tLocation.adresse || 'Adresse non fournie';
                const locationCpVille = `${tLocation.cp || 'Code postal non fourni'} - ${tLocation.ville || 'Ville non fournie'}`;
                const locationLatitude = tLocation.latitude || 'Latitude non fournie';
                const locationLongitude = tLocation.longitude || 'Longitude non fournie';

                let locationHTML = '';
                locationHTML = `
                    <b>${locationLibelle}</b><br>
                    ${locationAdresse}<br>
                    ${locationCpVille}<br>`;

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

                const row = [
                    `<td data-order="${demande.date_create ?? ''}">${new Date(demande.date_create).toLocaleDateString('fr-FR')}</td>`,
                    `<td>${locationHTML}</td>`,
                    `<td>${demande.id}</td>`,
                    `<td>${demande.infos}</td>`,
                    `<td>${demande.createur.prenom} ${demande.createur.nom}</td>`,
                    `<td><span class="status ${demande.traite ? 'valide' : 'traite'}">
                        <i class="fal fa-comment-edit img-responsive rounded-circle ico-tab"></i>
                        <span class="status-value">${demande.traite ? '1' : '0'}</span>
                    </span></td>`
                ];

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

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

    setTimeout(() => {
        console.log("État final de #cd-demande :", $('#cd-demande').is(':visible'));
    }, 500);

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

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

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

        // 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 = `${statEnCours/10 ?? 0}/10`;
        }
        if (traiteElement) {
            traiteElement.innerText = `${statTraite/10 ?? 0}/10`;
        }

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

</script>
@endpush