@extends('../partials.model')

@section('content')
<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center my-4 justify-content-between  page-header-breadcrumb">
        <div>

            <h1 class="text-3xl font-bold text-slate-900">
                Tableau de bord
            </h1>
            <p class="text-slate-600 mtw-1">
                Bonjour , bienvenue sur HEREDITAS
            </p>

        </div>

        <div>
            <div class="lib">Periode :</div>
            <input type="text" class="form-control" name="daterange" id="periodeFiltre" />
        </div>

    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    {{-- <div class="card card-border">
        <div class="card-body">


        </div>
    </div> --}}
    <!--End::row-1 -->



    <div class="row g-3">
        {{-- Cards statistiques --}}
        <div class="col-md-3">
            <div class="card  card-border">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted">Lots disponibles</h6>
                            <h3 class="fw-bold mb-0" id="TotalLot">0</h3>
                        </div>
                        <div class="ms-3">
                            <i class="bi bi-map text-primary fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            {{-- <div class="card border-0 shadow-sm"> --}}
            <div class="card card-border">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted">Lots vendus</h6>
                            <h3 class="fw-bold mb-0" id="lot_vendu">23</h3>
                        </div>
                        <div class="ms-3">
                            <i class="bi bi-cash-coin text-success fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card card-border">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted">Clients</h6>
                            <h3 class="fw-bold mb-0"id="TotalClient">0</h3>
                        </div>
                        <div class="ms-3">
                            <i class="bi bi-people text-warning fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card card-border">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="text-muted">En attente approbation</h6>
                            <h3 class="fw-bold mb-0" id="reservation">0</h3>
                        </div>
                        <div class="ms-3">
                            <i class="bi bi-clock-history text-danger fs-1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6">
            <div class="card card-border">
                <!-- <div class="card-header">Règlement sur l'année en cours </div> -->
                <div class="card-body">
                    <p>Règlement et vente sur l'année en cours (<span id="anneeEncours"></span>)</p>
                    <canvas id="chartjs-lines" class="chartjs-chart"></canvas>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card card-border">
                <div class="card-body">
                    <p>Règlement par mode </p>
                     <canvas id="chartjs-pies" class="chartjs-chart"></canvas>
                </div>
            </div>
        </div>

    </div>

    {{-- Tableau des lots --}}
    <div class="card mt-4 border-0 shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold">Suivi des dix (10) derniers lots</h6>
            {{-- <button class="btn btn-sm btn-primary">
                <i class="bi bi-plus-lg"></i> Nouveau lot
            </button> --}}
        </div>
        <div class="card-body">
          <div class="table-responsive">
                  <table class="table table-hover align-middle mb-0" id="lot_client_Table">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Numéro lot</th>
                        <th>Surface</th>
                        <th>Statut</th>
                        <th>Client</th>
                        <th>Téléphone</th>
                        <th>Dernière mise à jour</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
          </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="utilisateurModal" tabindex="-1" aria-labelledby="utilisateurModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="utilisateurModalLabel">Nouveau Utilisateur</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_utilisateur">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>


</div>


@endsection

@section('script')

<script>
    $(document).ready(function() {

            var date = dissocier_date($(this).val());
            var date_deb = date[0];
            var date_fin = date[1];
        recuperation_stat(date_deb,date_fin)

        $('#periodeFiltre').on('change',function(){

            var date = dissocier_date($(this).val());
            var date_deb = date[0];
            var date_fin = date[1];
            recuperation_stat(date_deb,date_fin)
        })
        
    })

    function recuperation_stat($date_deb,$date_fin){

        $.ajax({
            type: "GET",
            url: "{{ route('stat_accueil.get') }}",
            data:{
                date_deb : $date_deb,
                date_fin : $date_fin,

            },
            dataType: "json",
            success: function (resp) {

                $('#anneeEncours').text(resp.annee)
                $('#TotalLot').text(resp.total_lot)
                $('#TotalClient').text(resp.total_client)
                $('#reservation').text(resp.reservation)
              var table = $('#lot_client_Table tbody');
                table.empty();
                var $lot_vendu = 0;
                $.each(resp.lot_client,function(key,value){

                     var statut = '';
                        if(value.statut_vente == 1){
                            statut = '<span class="badge bg-warning text-dark" style="width:120px">ATTENTE</span>'
                        }else{
                            statut = '<span class="badge bg-success" style="width:120px">VALIDE</span>'
                            $lot_vendu++
                        }
                    var row = '<tr>'+
                                '<td>'+(key+1)+'</td>'+
                                '<td>'+value.numero_lot+'</td>'+
                                '<td class="text-center">'+value.superficie+' m²</td>'+
                                '<td class="text-center">'+statut+'</td>'+
                                '<td>'+value.nom_client+' '+value.prenom_client+'</td>'+
                                '<td class="text-center">'+value.telephone_client+'</td>'+
                                // value.updated_at au format  jj/mm/aaaa hh:mm
                                '<td class="text-center">'+new Date(value.updated_at).toLocaleDateString("fr-FR", { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })+'</td>'+
                              '</tr>';
                    table.append(row);

                })

                $('#lot_vendu').text($lot_vendu)

                piechart(resp.statsModeReglement) 
                linechart(resp.reglements_par_mois,resp.venteLot_par_mois)
            },
            error:handleAjaxError
        });
    }


let pieChartInstance = null; // global

function piechart(statsModeReglement) {

    // Détruire l'ancien graphe si il existe
    const oldChart = Chart.getChart("chartjs-pies");
    if (oldChart) oldChart.destroy();

    // Extraire les labels et les montants
    const labels = statsModeReglement.map(item => item.libelle_mode_paiement);
    const dataValues = statsModeReglement.map(item => Number(item.MontantReglement));

    const colors = [
        'rgb(132, 90, 223)',
        'rgb(35, 183, 229)',
        'rgb(245, 184, 73)',
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 206, 86)',
        'rgb(75, 192, 192)'
    ];

    const data2 = {
        labels: labels,
        datasets: [{
            label: 'Règlements par mode de paiement',
            data: dataValues,
            backgroundColor: colors.slice(0, labels.length),
            hoverOffset: 4
        }]
    };

    const config3 = {
        type: 'pie',
        data: data2
    };

    pieChartInstance = new Chart(
        document.getElementById('chartjs-pies'),
        config3
    );
}



let lineChartInstance = null;

function linechart(dataMois, dataMoisVente) {

    // 🔥 Supprime l’ancien graphique avant d’en créer un nouveau
    const oldChart = Chart.getChart("chartjs-lines");
    if (oldChart) oldChart.destroy();

    const labels = [
        'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui',
        'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'
    ];

    const data = {
        labels: labels,
        datasets: [
            {
                label: 'Règlement',
                backgroundColor: 'rgba(132, 90, 223, 0.29)',
                borderColor: 'rgb(132, 90, 223)',
                data: dataMois,
                borderWidth: 1,
                fill: false,
                tension: 0.3
            },
            {
                label: 'Ventes',
                backgroundColor: 'rgba(155, 245, 226, 0.89)',
                borderColor: 'rgba(155, 245, 226, 1)',
                data: dataMoisVente,
                fill: false,
                tension: 0.3
            }
        ],
    };

    const config = {
        type: 'line',
        data: data,
       options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    min: 0
                }
            }
        }
    };

    lineChartInstance = new Chart(
        document.getElementById('chartjs-lines'),
        config
    );
}


</script>
@endsection