@extends('layouts.base')

@section('title', 'Liste de sites - ' . (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-2">Date:</label>
        <input type="date" id="startDate" class="form-control ml-2" placeholder="Date de début">

        <label for="endDate" class="text-white mr-2 ml-4">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">
        <!-- 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="row">
            <div class="card border-0 mb-3 col-xl-8 col-md-8">
                <div class="card-body">
                    <div class="row pl-3 pr-3 pb-3">
                        <h3 class="d-flex flex-row mr-auto align-items-center"><i
                                class="fal fa-map-marker-alt lieu t-ico"></i>&nbsp; Liste <span class="fw-300"><i>&nbsp;de
                                    vos sites</i></span></h3>
                    </div>
                    <div class="row mr-2 ml-2 mt-3">
                        <div class="col-md-12">
                            <!-- datatable start -->
                            <table id="dt-lieux" class="table table-bordered table-hover table-striped w-100">
                                <thead class="bg-primary-100">
                                    <tr>
                                        <th>Libelle</th>
                                        <th>Adresse</th>
                                        <th>Code Postal</th>
                                        <th>Ville</th>
                                        <th>Référent client</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @inject('format', 'App\Services\CoordinateService')
                                    @forelse ($sites as $site)
                                    <tr>
                                        <td>{{ ($site->libelle) ? $site->libelle : '-' }} </br>
                                            @if($site && $site->latitude != 0 && $site->longitude != 0)
                                                <a href="#" class="btn btn-primary btn-sm fly-to"
                                                data-lat="{{ $site->latitude }}"
                                                data-lon="{{ $site->longitude }}">
                                                <i class="fal fa-map-marked-alt"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">coordonnée non trouvé</span>
                                            @endif
                                        </td>
                                        <td>{{ $format->escapeCaracter($site->adresse) }}</td>
                                        <td>{{ $site->cp }}</td>
                                        <td>{{ $site->ville }}</td>
                                        <td>{{ $site->t_user->nom }} {{ $site->t_user->prenom }}</td>
                                        <td class="text-center"><a type="button"
                                                href="{{ route('sites.details', ['site' => $site->id]) }}"
                                                class="btn btn-primary waves-effect waves-themed" target="_blank">Consulter</a></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>Libelle</th>
                                        <th>Adresse</th>
                                        <th>Code Postal</th>
                                        <th>Ville</th>
                                        <th>Référent client</th>
                                        <th>Action</th>
                                    </tr>
                                </tfoot>
                            </table>
                            <!-- datatable end -->
                        </div>
                    </div>
                    <div class="row" id="cd-lieux" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-4">
                <div class="card border-0 d-flex flex-fill">
                    <div class="card-body">
                        <div class="card-title text-dark fs-5 font-weight-bold"><i class="fal fa-map-marked-alt fa-lg mr-2"></i>Géolocalisation</div>
                        <div id="map" style="height: 600px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
<script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist-plugin-legend/0.6.2/chartist-plugin-legend.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();

    // S'il y a des doublons
    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);
                uniqueMarkers.push(marker);
            }
        }
    });

    // Ajouter les marqueurs uniques à la carte
    uniqueMarkers.forEach(function(marker) {

        var siteDetailsUrl = `{{ url('sites/details') }}/${marker.id}`;
        // Construire le contenu de la popup
        var popupContent = `<strong>${marker.title}</strong><br>
                            ${marker.adresse}<br>
                            ${marker.cp} <br>
                            ${marker.ville} <br>`;

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

        map.addLayer(leafletMarker);
    });

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

        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>
    //Lieux
    $(document).ready(function()
        {
            // Lieux
            $('#dt-lieux').dataTable(
            {
                responsive: 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-lieux'
                    },
                    {
                        extend: '',
                        text: '<i class="fal fa-th-large"></i>',
                        titleAttr: 'Vue Carte',
                        className: 'btn-primary btn-sm cd-btn-lieux'
                    },
                ],
                //Cabler le datatable avec la vue carte,
                //dt-view / cd-view begin
                "initComplete": function (settings, json) { // show new container for data
                    $('#cd-lieux').insertBefore('#dt-lieux');

                    // Ajouter des filtres de recherche par colonne
                    this.api().columns().every(function () {
                        var column = this;
                        var header = $(column.header());
                        var input = document.createElement("input");

                        // Ajouter le champ de recherche avec le placeholder
                        $(input).appendTo(header)
                            .attr("placeholder", "Rechercher ")
                            .css('width', '100%') // Ajouter cette ligne pour ajuster la largeur du champ de recherche
                            .addClass('form-control')
                            .on('keyup', function () {
                                column.search($(this).val()).draw();
                            });
                    });
                },
                "rowCallback": function (row, data) {
                    // on each row callback
                    // card styling
                    let itemParent = $('<div class="col-sm-6 col-md-4 p-1 mb-2"></div>').appendTo('#cd-lieux');

                    let item = $(`
                        <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center  flex-shrink-0 border-lieux">
                        <span class="status valide d-inline-block "><i class="fal fa-comment-edit img-responsive rounded-circle ico-carte "></i></span>
                            <div class="ml-2 mr-3">
                                <h5 class="m-0">
                                    lieux : ${data[2]}
                                    <small class="m-0 fw-300">
                                        ${data[1]}
                                    </small>
                                </h5>
                                Date : ${data[0]}
                                <br>
                                Créateur :${data[4]}
                            </div>
                        </div>
                    `).appendTo(itemParent);
                },
                "preDrawCallback": function (settings) { // clear list before draw
                    $('#cd-lieux').empty();
                }
            });

            $(".dt-btn-lieux").click(function () {
                $("#dt-lieux").show();
                $("#cd-lieux").hide();
                $(".dt-btn-lieux").addClass('active');
                $(".cd-btn-lieux").removeClass('active');
            });

            $(".cd-btn-lieux").click(function () {
                $("#dt-lieux").hide();
                $("#cd-lieux").show();
                $(".cd-btn-lieux").addClass('active');
                $(".dt-btn-lieux").removeClass('active');
            });
        });
</script>
<script>
    document.getElementById('startDate').addEventListener('change', updateData);
    document.getElementById('endDate').addEventListener('change', updateData);
    document.getElementById('yearFilter').addEventListener('change', updateData);

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

    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 = '/sites/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_intervention').innerText = data.nbrIntervention ?? 0;
                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_rapport').innerText = data.nbrRapport ?? 0;

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