@extends('modelCustomer')

@section('content')

    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">
                            Accueil
                        </a>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-text bg-white border"> <i class="ri-calendar-line"></i> </div>
                    <input type="text" class="form-control breadcrumb-input flatpickr-input" name="filtrePeriode"
                        id="filtrePeriode" placeholder="Rechercher par plage de dates">
                </div>
                <!-- filtrePeriode -->
            </div>
            <div class="btn-list">
                <button class="btn btn-white btn-wave text-primary" id="btnFiltreAccueil">
                    <i class="ri-filter-3-line align-middle me-1 lh-1"></i> Filter
                </button>
            </div>
        </div>
    </div>

    <div class="row">


     
        <div class="col-xl-3">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Commandes totales</div>
                            <div class="fs-23 fw-medium mb-0" id="nbreCommande">0</div>
                          
                        </div>
                        <div class="avatar avatar-md bg-primary1 svg-white">
                            <i class="bx bx-package fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>

        
           <div class="col-xl-3">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Commande en cours</div>
                            <div class="fs-23 fw-medium mb-0" id="nbreCommandeEncoues">0</div>
                            
                        </div>
                        <div class="avatar avatar-md bg-success svg-white">
                            <i class="bx bx-check-circle fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-xl-3">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Solde Cantine pay</div>
                            <div class="fs-23 fw-medium mb-0" id="SoldeCantinePay">0</div>
                           
                        </div>
                        <div class="avatar avatar-md bg-primary1 svg-white">
                            <i class="bx bx-package fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>

        <div class="col-xl-3">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Solde bouchées</div>
                            <div class="fs-23 fw-medium mb-0" id="solde_bouche">0</div>
                            
                        </div>
                        <div class="avatar avatar-md bg-success svg-white">
                            <i class="bx bx-check-circle fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="col-xl-12">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">

            <div class="card-header">
                  <h6>Historiques des transactions</h6>
            </div>
                <div class="card-body">

              
                <div class="row">
                        <div class="col-xl-4">
                                <div class="mb-2"
                                 style="border:1px solid rgb(195, 195, 195);border-radius:12px;padding:4px;padding-bottom:12px; height:200px;overflow:scroll"  >
                                    <div>
                                        <div class="flex-fill fs-13 text-muted">Cantine pay</div>
                                      <div class="table-responsive"> 
                                     <table id="tableHistoriqeCmdeCantinePay" class="table table-hover text-nowrap ">
                                            <thead>
                                            <th style="font-size: 9px">Date</th>
                                            <th style="font-size: 9px">Numero Commande</th>
                                            <th style="font-size: 9px">Bouche gagné</th>
                                            <th style="font-size: 9px">Montant</th>
                                            </thead>

                                     </table>
                                       
                                    </div>

                                    </div>
                                    {{-- <div class="avatar avatar-md bg-success svg-white">
                                        <i class="bx bx-check-circle fs-18"></i>
                                    </div> --}}
                                </div>
                        </div>


                         <div class="col-xl-4 ">
                                <div class="mb-2"
                                style="border:1px solid rgb(195, 195, 195);border-radius:12px;padding:4px;padding-bottom:12px; height:200px;overflow:scroll" >
                                    <div>
                                        <div class="flex-fill fs-13 text-muted">bouchées</div>
                                       <div class="table-responsive"> 
                                            <table id="tableHistoriqeCmdeBouche" class="table table-hover text-nowrap">
                                                <thead>
                                                <th style="font-size: 9px">Date</th>
                                                <th style="font-size: 9px">NumeroCommande</th>
                                                <th style="font-size: 9px">Bouche gagné</th>
                                                <th style="font-size: 9px">Montant</th>
                                                </thead>
                                            </table>
                                       </div>
                                       
                                       
                                    </div>
                                    {{-- <div class="avatar avatar-md bg-success svg-white">
                                        <i class="bx bx-check-circle fs-18"></i>
                                    </div> --}}
                                </div>
                        </div>



                         <div class="col-xl-4 flex-fill">
                                <div class="d-flex justify-content-center align-items-center mb-2"  style="border:1px solid rgb(195, 195, 195);border-radius:12px;padding:4px;padding-bottom:12px; height:200px">
                                    <div>
                                        <div class="flex-fill fs-13 text-muted">Niveau</div>
                                        <div class="fs-10 fw-medium mb-0" id="niveauUser">0</div>
                                       
                                    </div>
                                
                                </div>
                        </div>
                </div>
                </div>
            </div>

        </div>





            {{-- ESPACE CLIENT ENTREPRISE --}}
@if(collect(listeDesDroitsUser(session('idusers'))['data'])->contains('libelle', 'Admin client'))
        <div class="col-xl-4">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Employés</div>
                            <div class="fs-23 fw-medium mb-0" id="nbresUtilisateur">0</div>
                           
                        </div>
                        <div class="avatar avatar-md bg-success svg-white">
                            <i class="bx bx-user fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="col-xl-4">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Employés subventionnés</div>
                            <div class="fs-23 fw-medium mb-0" id="EmployeSubventionne">0</div>
                          
                        </div>
                        <div class="avatar avatar-md bg-success svg-white">
                            <i class="bx bx-check-circle fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="col-xl-4">
            <div class="card custom-card overflow-hidden main-content-card" style="margin-top:-8px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="flex-fill fs-13 text-muted">Employés non subventionnés</div>
                            <div class="fs-23 fw-medium mb-0" id="employeNonSubventionne">0</div>
                           
                        </div>
                        <div class="avatar avatar-md bg-success svg-white">
                            <i class="bx bx-check-circle fs-18"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>



        @endif

        </div>
    @endsection

    @section('script')

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

             flatpickr("input[name='filtrePeriode']", {
                locale: "fr", // Mettre en français
                mode: "range",
                dateFormat: "d/m/Y",
                defaultDate: ["{{ date('01/m/Y', strtotime('1 year')) }}",
                    "{{ date('01/m/Y') }}"
                ] // Assurez-vous que ces valeurs sont dynamiques et correctes
            });
               $('#tableHistoriqeCmdeCantinePay').DataTable({
                    scrollY: '205px',
                    scrollCollapse: true,
                    paging: false,
                    scrollX: true,
                    searching:false,
                    pageLength:false,
                    lengthMenu:false,
                    info:false,
                    language: {
                      zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    }
        
                });


                 $('#tableHistoriqeCmdeBouche').DataTable({
                    scrollY: '205px',
                    scrollCollapse: true,
                    paging: false,
                    scrollX: true,
                    searching:false,
                    pageLength:false,
                    lengthMenu:false,
                    info:false,
                    language: {
                      zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    }
        
                });

             let notrePeriode = convertirFormatDate(_('#filtrePeriode').value)
             getData(notrePeriode[0],notrePeriode[1])

             $('#btnFiltreAccueil').click(function(){
                let notrePeriode = convertirFormatDate(_('#filtrePeriode').value)
                getData(notrePeriode[0],notrePeriode[1])
             })
        })

        function getData(periodeDebut,periodeFin){

            $.ajax({
                type: "GET",
                url: "{{route('Statistiquedashboard')}}",
                data: {
                    dateDebut:periodeDebut,
                    dateFin  :periodeFin
                },
                dataType: "JSON",
                success: function (resp) {
                    
                    var niveau = "Pas de niveau"
                    $('#nbreCommande').text(resp.Countcommande)
                    $('#nbreCommandeEncoues').text(resp.CountcommandeEnCours)
                    $('#SoldeCantinePay').text(resp.usersInfo[0].solde_cantine_pay)
                    $('#solde_bouche').text(resp.usersInfo[0].solde_bouche)
                    $('#niveau_users').text(resp.usersInfo[0].niveau_users)
                    $('#EmployeSubventionne').text(resp.utilisateurSubventionne)

                    $('#nbresUtilisateur').text(resp.nbreUtilisateur)

                    $('#employeNonSubventionne').text(resp.nbreUtilisateur - resp.utilisateurSubventionne)

                    
                    if(resp.usersInfo[0].libelle !=null){
                        $('#niveauUser').text(resp.usersInfo[0].libelle)
                    }else{
                         $('#niveauUser').text(niveau)
                    }
                    
                    var table = $('#tableHistoriqeCmdeCantinePay').DataTable();
                    var tables = $('#tableHistoriqeCmdeBouche').DataTable();
                   $.each(resp.commandeHistoriqueCantinePay,function(key,value){
                        table.row.add([
                            value.date,
                            value.numeroCommande,
                            value.nbre_bouche_gagne,
                            value.totalTtc
                        ])
                   })

                   table.draw();


                    $.each(resp.commandeHistoriqueBouchee,function(key,value){
                        tables.row.add([
                            value.date,
                            value.numeroCommande,
                            value.nbre_bouche_gagne,
                            value.totalTtc
                        ])
                   })

                    tables.draw();
                }
            });
        }
    </script>
    @endsection