@extends('layouts.base')

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

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

                <div class="row mr-2 ml-2 mt-3">
                    <div class="col-md-12">
                        <!-- datatable start -->
                        <table id="dt-inter" class="table table-bordered table-hover table-striped ">
                            <thead class="bg-primary-100">
                                <tr>
                                    <th>Date</th>
                                    <th>Offre</th>
                                    <th>Site</th>
                                    <th>Titre</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($interventions as $row)
                                    <tr>
                                        <td data-order="{{ $row->date_start ? $row->date_start->format('Y-m-d') : '' }}">{{ $row->date_start ? $row->date_start->format('d/m/Y') : '-' }}</td>
                                        <td>{{ $row->t_devi?->id_libelle ?? '-' }}</td>
                                        <td>
                                            <b>{{ $row->t_location?->libelle ?? '-' }}</b>
                                            <br>
                                            {{ $row->t_location->adresse ?? '-' }}
                                            <br>
                                            {{ $row->t_location->cp ?? '-' }} -
                                            {{ $row->t_location->ville ?? '-' }}
                                            <br>
                                        </td>
                                        <td>{{ $row->t_devi?->libelle ?? '-' }}</td>
                                        <td>
                                            @php
                                                $statut = $row->statut();
                                            @endphp
                                            <span @class([
                                                'status d-inline-block',
                                                'traite' => $statut === 'planifié',
                                                'valide' => $statut === 'terminé',
                                                'en-cours' => $statut === 'en cours',
                                            ])>
                                                <i class="fal fa-digging img-responsive rounded-circle ico-tab "></i>
                                                <span class="status-value">{{ $statut }}</span>
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    {{-- Laisser vide car l'absence de donnée est géré par DataTable --}}
                                    <tr>
                                    <td colspan="5" class="text-center">Aucun enregistrement trouvé</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Date</th>
                                    <th>Offre</th>
                                    <th>Site</th>
                                    <th>Titre</th>
                                    <th id="filterStatus">Statut</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
<script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"
    integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"
    integrity="sha512-OFs3W4DIZ5ZkrDhBFtsCP6JXtMEDGmhl0QPlmWYBJay40TT1n3gt2Xuw8Pf/iezgW9CdabjkNChRqozl/YADmg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function () {
        let tableInter = $('#dt-inter').DataTable({
            responsive: true,
            order: [[0, 'desc']],
            columns: [
                { width: '5%' },
                { width: '10%' },
                { width: '30%' },
                { width: '40%' },
                { width: '15%' }
            ],
            language: {
                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-inter',
                    action: function () {
                        toggleView('#dt-inter', '#cd-inter', '.dt-btn-inter', '.cd-btn-inter');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-inter',
                    action: function () {
                        toggleView('#cd-inter', '#dt-inter', '.cd-btn-inter', '.dt-btn-inter');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-inter').insertBefore('#dt-inter');
                addColumnFilters(this.api());
            },
            rowCallback: function (row, data) {
                let item = $(`
                    <div class="col-sm-6 col-md-4 p-1 mb-2">
                        <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center border-inter">
                            ${data[4]}
                            <div class="ml-2">
                                <h5>Inter : ${data[1]}</h5>
                                <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-inter').append(item);
            },
            preDrawCallback: function () {
                $('#cd-inter').empty();
            }
        });

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

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

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

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

        $('#filterStatus').on('change', function () {
            tableInter.draw();
        }).trigger('change');
    });
</script>
@endpush

@push('script_02')
<script>

    let table;

    // Initialisation de la table au démarrage
    function initDataTable() {
        table = $('#dt-inter').DataTable({
            order: [[0, 'desc']],
            destroy: true,
            language: {

                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            dom: `<'row mb-3'<'col-md-6 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'lB>>
                <'row'<'col-12'tr>>
                <'row'<'col-md-5'i><'col-md-7'p>>`,
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    text: '<i class="fal fa-list"></i>',
                    className: 'btn-primary btn-sm dt-btn-inter',
                    action: function () {
                        toggleView('#dt-inter', '#cd-inter', '.dt-btn-inter', '.cd-btn-inter');
                    }
                },
                {
                    text: '<i class="fal fa-th-large"></i>',
                    className: 'btn-primary btn-sm cd-btn-inter',
                    action: function () {
                        toggleView('#cd-inter', '#dt-inter', '.cd-btn-inter', '.dt-btn-inter');
                    }
                }
            ],
            initComplete: function () {
                $('#cd-inter').insertBefore('#dt-inter');
                addColumnFilters(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-inter').length === 0) {
                    $('body').append('<div class="row" id="cd-inter" style="display: none; margin-bottom: 5px;">');
                }
                let item = $(`
                    <div class="col-sm-6 col-md-4 p-1 mb-2">
                        <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center border-inter">
                            ${data[4]}
                            <div class="ml-2">
                                <h5>Inter : ${data[1]}</h5>
                                <small>${data[2]}</small><br>Date : ${data[0]["@data-order"]}<br>
                            </div>
                        </div>
                    </div>`
                );
                $('#cd-inter').append(item);
            },
            preDrawCallback: function () {
                $('#cd-inter').empty();
            }
        });
    }

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

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

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

    // 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 = `/intervention/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_inter_stat_plannifie').innerText = data.statPlannifie ?? 0;
                document.getElementById('t_inter_stat_encours').innerText = data.statEnCours ?? 0;
                document.getElementById('t_inter_stat_termine').innerText = data.statTermine ?? 0;
                updateInterventionTable(data.interventions ?? []);

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

                // 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 updateInterventionTable(interventions) {
        // Détruire la table existante avant de la réinitialiser
        if ($.fn.DataTable.isDataTable('#dt-inter')) {
            $('#dt-inter').DataTable().clear().destroy();
        }

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

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

        // Si 'demandes' est vide ou non défini, on affiche un message d'erreur
        if (!interventions || interventions.length === 0) {
            $("#dt-inter 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
            interventions.forEach(intervention => {

                if (!intervention.statut) {
                    console.warn("Statut non défini pour l'intervention :", intervention);
                    statutClass = "non-defini";
                    statutText = "Non défini";
                } else {
                    switch (intervention.statut) {
                        case "planifié":
                            statutClass = "traite";
                            statutText = "Planifié";
                            break;
                        case "terminé":
                            statutClass = "valide";
                            statutText = "Terminé";
                            break;
                        case "en cours":
                            statutClass = "en-cours";
                            statutText = "En cours";
                            break;
                        default:
                            statutClass = "non-defini";
                            statutText = "Non défini";
                    }
                }

                const row = [
                    `<td data-order="${intervention.date_start}">${new Date(intervention.date_start).toLocaleDateString('fr-FR')}</td>`,
                    `<td>${intervention.t_devi.id_libelle}</td>`,
                    `<td><b>${intervention.t_location.libelle}</b><br>${intervention.t_location.adresse}<br>${intervention.t_location.cp} - ${intervention.t_location.ville}</td>`,
                    `<td>${intervention.t_devi.libelle}</td>`,
                    `<td>
                        <span class="status d-inline-block ${statutClass}">
                            <i class="fal fa-comment-edit img-responsive rounded-circle ico-tab"></i>
                            <span class="status-value">${statutText}</span>
                        </span>
                    </td>`
                ];

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

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

    // 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(statPlannifie, statEnCours, statTermine) {
        // Sélectionner les éléments de jauge par leur classe .peity-donut
        const planifieElement = document.querySelectorAll('.peity-donut')[0];
        const encoursElement = document.querySelectorAll('.peity-donut')[1];
        const termineElement = document.querySelectorAll('.peity-donut')[2];

        // Mettre à jour les données des jauges avec les nouvelles valeurs converties
        if (planifieElement) {
            planifieElement.innerText = `${statPlannifie/10 ?? 0}/10`;
        }
        if (encoursElement) {
            encoursElement.innerText = `${statEnCours/10 ?? 0}/10`;
        }
        if (termineElement) {
            termineElement.innerText = `${statTermine/10 ?? 0}/10`;
        }

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

</script>
@endpush