@extends('layouts.base')

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

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/chartist/chartist.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/c3/c3.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist-plugin-tooltips@0.0.17/dist/chartist-plugin-tooltip.min.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-3">
                <div
                    class="rotate-facture p-3 bg-primary-600-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_facture">{{ $nbrFacture }}</span>
                            <small class="card-number m-0 l-h-n">Factures</small>
                            <br>
                            <small class="card-infos m-0 l-h-n">Montant total :
                                <b><span id="t_facture_total">{{ number_format($totalFacture, thousands_separator: ' ', decimal_separator: ',', decimals: 2) }}€</span></b></small>
                        </h3>
                    </div>
                    <i class="fal fa-file-pdf position-absolute pos-right pos-top opacity-25 mt-n3 mr-n4"
                        style="font-size: 8rem;"></i>
                </div>
            </div>
            <div class="col-sm-6 col-xl-9">
                <center>
                    <h3>Nombre de facture par mois</h3>
                </center>
                <div id="chartBarFacture"></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-pdf facture t-ico color-primary-600 fa-2x"></i>&nbsp; Factures</h3>
                    <div class="d-flex mr-0">
                        <div class="mr-2">
                            <span class="peity-donut"
                                data-peity="{ &quot;fill&quot;: [&quot;#d6dd39&quot;, &quot;#d6dd3999&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">10/10</span>
                        </div>
                        <div>
                            <label class="fs-sm mb-0 mt-2 mt-md-0">Facturés</label>
                            <h4 class="font-weight-bold mb-0"><span id="t_facture_donut">{{ $nbrFacture }}</span></h4>
                        </div>
                    </div>
                </div>

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

                <div class="row d-flex d-flex-row mr-2 ml-2 mt-3">
                    <div class="col-md-12">
                        <!-- datatable start -->
                        <table id="dt-facture" class="table table-bordered table-hover table-striped w-100">
                            <thead class="bg-primary-100">
                                <tr>
                                    <th>Date d'émission</th>
                                    <th>Date d'échéance</th>
                                    <th>Agence de facturation</th>
                                    <th>Site</th>
                                    <th>Numéro de facture</th>
                                    <th>Offre</th>
                                    <th>Montant HT</th>
                                    <th>Fichier(s)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($factures as $row)
                                    <tr>
                                        <td data-order="{{ $row->date_facture ? $row->date_facture->format('Y-m-d') : '' }}">{{ $row->date_facture ? $row->date_facture->format('d/m/Y') : '-' }}</td>
                                        <td data-order="{{ $row->date_echeance ? $row->date_echeance->format('Y-m-d') : '' }}">{{ $row->date_echeance ? $row->date_echeance->format('d/m/Y') : '-' }}</td>
                                        <td>
                                            @if ($row->agenceFacturation)
                                                <b>{{ $row->agenceFacturation->libelle ?? '-' }}</b>
                                                <br>
                                                {{ $row->agenceFacturation->adresse ?: '-' }}
                                                <br>
                                                {{ $row->agenceFacturation->cp ?? '-' }} -
                                                {{ $row->agenceFacturation->ville ?? '-' }}
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $location = null;

                                                if ($row->t_devi->id_contrat_entretien) {
                                                    // Si c'est un contrat d'entretien, récupérer le lieu depuis t_facture_location
                                                    $factureLocation = $row->t_facture_location->first();
                                                    $location = $factureLocation?->t_location;
                                                } else {
                                                    // Sinon, récupérer le lieu depuis t_devis_locations
                                                    $firstLocation = $row->t_devi->t_devis_locations->first();
                                                    $location = $firstLocation?->t_location;
                                                }
                                            @endphp

                                            @if ($location)
                                                <b>{{ $location->libelle }}</b><br>
                                                {{ $location->adresse }}<br>
                                                {{ $location->cp }} - {{ $location->ville }}
                                            @else
                                                <i>Lieu introuvable</i>
                                            @endif
                                        </td>
                                        <td>{{ $row->id_libelle }}</td>
                                        <td>{{ $row->t_devi?->id_libelle ?? '-' }}</td>
                                        <td data-order="{{ $row->total_ht }}">{{ number_format($row->total_ht, thousands_separator: ' ', decimal_separator: ',', decimals: 2) }}€
                                        </td>
                                        <td><a class="btn btn-primary waves-effect waves-themed"
                                                href="{{ $row->fichier() }}?t={{ $tokenFile }}" target="_blank"
                                                title="Consulter la facture en PDF" class="text-danger"><i
                                                    class="fal fa-file-invoice-dollar"></i></a></td>
                                    </tr>
                                @empty
                                    {{-- Laisser vide car l'absence de donnée est géré par DataTable --}}
                                    {{-- <tr>
                                        <td colspan="8" class="text-center">Aucun enregistrement trouvé</td>
                                    </tr> --}}
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Date d'émission</th>
                                    <th>Date d'échéance</th>
                                    <th>Agence de facturation</th>
                                    <th>Site</th>
                                    <th>Numéro de facture</th>
                                    <th>Offre</th>
                                    <th>Montant HT</th>
                                    <th>Fichier(s)</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
<script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
<script src="{{ asset('assets/js/core/chartist.min.js') }}"></script>
<script>
    $(document).ready(function() {

    var moisLabels = @json($moisLabels);
    var valeurFactures = @json($valeurFactures);

    // Chartist Bar Chart
    new Chartist.Bar('#chartBarFacture', {
        labels: moisLabels,
        series: valeurFactures
    }, {
        distributeSeries: true,
        axisX: {
            showGrid: false
        },
        axisY: {
            onlyInteger: true
        },
    });
});
</script>
<script>
    //Facture
    $(document).ready(function()
    {
            // Facture
        $('#dt-facture').dataTable(
        {
            responsive: true,
            order: [[0, 'desc'],[1, 'desc']],
            columns: [
                        { "width": "5%" },
                        { "width": "5%" },
                        { "width": "20%" },
                        { "width": "30%" },
                        { "width": "10%" },
                        { "width": "15%" },
                        { "width": "10%" },
                        { "width": "5%" },
                        ],
            language: {
                searchPlaceholder: "Rechercher",
                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-facture',
                    action: function () {
                        toggleView('#dt-facture', '#cd-facture', '.dt-btn-facture', '.cd-btn-facture');
                    }
                },
                {
                    extend: '',
                    text: '<i class="fal fa-th-large"></i>',
                    titleAttr: 'Vue Carte',
                    className: 'btn-primary btn-sm cd-btn-facture',
                    action: function () {
                        toggleView('#cd-facture', '#dt-facture', '.cd-btn-facture', '.dt-btn-facture');
                    }
                },
            ],
            initComplete: function () {
                $('#cd-facture').insertBefore('#dt-facture');
                addColumnFilters(this.api());
            },
            rowCallback: function (row, data) {
                let item = $(`
                    <div class="col-sm-6 col-md-4 p-1 mb-2">
                        <a href="#">
                            <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center border-inter">
                                <span class="d-inline-block ">
                                    <i class="fal fa-file-pdf img-responsive rounded-circle ico-carte border-facture-ico"></i>
                                </span>
                                <div class="ml-2">
                                    <h5>Facture : ${data[1]["@data-order"]}</h5>
                                    <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                                </div>
                            </div>
                        </a>
                    </div>`);
                $('#cd-facture').append(item);
            },
            preDrawCallback: function () {
                $('#cd-facture').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());

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

    });
</script>
@endpush

@push('script_02')
<script>

    let table;

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

                url: "{{ asset('assets/js/core/fr-FR.json') }}",
            },
            lengthChange: true,
            dom:
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'lB>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    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-facture',
                    action: function () {
                        toggleView('#dt-facture', '#cd-facture', '.dt-btn-facture', '.cd-btn-facture');
                    }
                },
                {
                    extend: '',
                    text: '<i class="fal fa-th-large"></i>',
                    titleAttr: 'Vue Carte',
                    className: 'btn-primary btn-sm cd-btn-facture',
                    action: function () {
                        toggleView('#cd-facture', '#dt-facture', '.cd-btn-facture', '.dt-btn-facture');
                    }
                },
            ],
            initComplete: function () {
                $('#cd-facture').insertBefore('#dt-facture');
                addColumnFilters(this.api());
            },
            rowCallback: function (row, data) {
                if ($('#cd-facture').length === 0) {
                    $('body').append('<div class="row" id="cd-facture" style="display: none; margin-bottom: 5px;">');
                }
                let item = $(`
                    <div class="col-sm-6 col-md-4 p-1 mb-2">
                        <a href="#">
                            <div class="rounded-pill bg-white shadow-sm p-2 border-faded d-flex flex-row align-items-center border-inter">
                                <span class="d-inline-block ">
                                    <i class="fal fa-file-pdf img-responsive rounded-circle ico-carte border-facture-ico"></i>
                                </span>
                                <div class="ml-2">
                                    <h5>Facture : ${data[1]["@data-order"]}</h5>
                                    <span>${data[2]}</span><br>Date : ${data[0]["@data-order"]}<br>
                                </div>
                            </div>
                        </a>
                    </div>`);
                $('#cd-facture').append(item);
            },
            preDrawCallback: function () {
                $('#cd-facture').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());

            let input = $('<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 = `/facture/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_facture').innerText = data.nbrFacture ?? 0;
                document.getElementById('t_facture_donut').innerText = data.nbrFacture ?? 0;
                document.getElementById('t_facture_total').innerText = new Intl.NumberFormat('fr-FR', {
                        style: 'currency', currency: 'EUR'
                    }).format(data.totalFacture ?? 0);

                updateFacturesTable(data.factures ?? [], 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 updateFacturesTable(factures, tokenFile) {
        // Vérifie si la table existe déjà, et la détruit si nécessaire
        if ($.fn.DataTable.isDataTable('#dt-facture')) {
            $('#dt-facture').DataTable().destroy(); // Détruit l'ancienne instance
        }

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

        const tbody = $("#dt-facture tbody");
        tbody.empty(); // Vide les anciennes lignes

        factures.forEach(facture => {
            // Format des dates
            let dateFacture = facture.date_facture ? new Date(facture.date_facture).toLocaleDateString('fr-FR') : '-';
            let dateEcheance = facture.date_echeance ? new Date(facture.date_echeance).toLocaleDateString('fr-FR') : '-';

            // Informations de l'agence de facturation
            let agenceHTML = '-';
            if (facture.agenceFacturation) {
                agenceHTML = `
                    <b>${facture.agenceFacturation.libelle ?? '-'}</b><br>
                    ${facture.agenceFacturation.adresse ?? '-'}<br>
                    ${facture.agenceFacturation.cp ?? '-'} - ${facture.agenceFacturation.ville ?? '-'}`;
            }

            // Gestion des lieux (t_devis_locations)
            let locationHTML = '-';

            // Vérifie si la facture a des lieux associés
            if (facture.t_facture_location && facture.t_facture_location.length > 0) {
                // Récupère le premier lieu
                let firstLocation = facture.t_facture_location[0];
                let location = firstLocation.t_location;

                // Construit le HTML pour afficher le premier lieu
                if (location) {
                    locationHTML = `
                        <b>${location.libelle ?? '-'}</b><br>
                        ${location.adresse ?? '-'}<br>
                        ${location.cp ?? '-'} - ${location.ville ?? '-'}`;
                } else {
                    locationHTML = '<i>Lieu introuvable</i>';
                }
            }

            // ID et libellé du devis
            let idLibelle = facture.id_libelle ?? '-';
            let idLibelleDevi = facture.t_devi ? facture.t_devi.id_libelle : '-';

            // Format du total HT
            let totalHT = facture.total_ht ? Number(facture.total_ht).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + "€" : "-";

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

            // Création de la ligne du tableau
            const rowHTML = `
                <tr>
                    <td data-order="${facture.date_facture ?? ''}">${dateFacture}</td>
                    <td data-order="${facture.date_echeance ?? ''}">${dateEcheance}</td>
                    <td>${agenceHTML}</td>
                    <td>${locationHTML}</td>
                    <td>${idLibelle}</td>
                    <td>${idLibelleDevi}</td>
                    <td data-order="${facture.total_ht}">${totalHT}</td>
                    <td class="text-center">${fichierHTML}</td>
                </tr>`;

            tbody.append(rowHTML);
        });

        initDataTable();
    }

    // Initialisation initiale du DataTable
    $(document).ready(function() {
        initDataTable();
    });

</script>
@endpush