@extends('app')
@section('title-page', 'Statistique des activités')
@section('content')

    <section class="background-custom">

        <section>
            <div class="lgx-banner lgx-banner-inner">
                <div class="lgx-page-inner">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="lgx-heading-area">
                                    <div class="lgx-heading lgx-heading-white">

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="akwaba-overPage"> Akwaba</div>
        </section> <!--//.Banner Inner-->

        <link rel="stylesheet" href="{{ asset('assets/css/dataTable.css') }}" />
       
        	
        {{-- <link rel="stylesheet" href="{{ asset('assets/css/font-awesome.css') }}" /> --}}
  
        <section>
            <div id="lgx-about" class="lgx-about">
                <div class="lgx-inner">
                    <div class="container">

                        <div class="lgx-heading lgx-heading-white title">
                            <div
                                style="display:flex;justify-content:center; flex-direction:column;width:100%;margin-top:25px">
                                <h1 class="text-black title-text">ESPACE D'ADMINISTRATION</h1>
                                <h2 style="margin-top: -45px">Statistique des activités</h2>
                            </div>
                        </div>

                        {{-- :::::::::::::::::::::::::::::::::::::::::::: SECOND ::::::::::::::::::::::::::::::::::::::::::::::: --}}
                        <style>
                            .header {
                                background: #de881d;
                                color: #fff;
                                font-size: 14px
                            }

                            .header th {
                                text-align: center
                            }

                            td {
                                /* text-align: center; */
                                font-size: 13px;
                            }

                            
                            .custom-card {
                                background-color: #fff;
                                border-radius: 12px;
                                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                                padding: 20px;
                                margin-bottom: 15px;
                                width: 100%;
                                transition: transform 0.2s ease, box-shadow 0.2s ease;
                            }

                            .card-title {

                                width: 100%;
                                display: flex;
                                justify-content: space-between
                            }


                            
                        </style>

     
                            <div class="row">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="table-responsive">
                                                <table class="table" style="color:black;width:100%"
                                                    id="tableListeActivite">
                                                    <thead class="header">
                                                        <tr>
                                                            <th style="">Date</th>
                                                            <th style="">Activité</th>
                                                            <th style="text-align:center">Capacité salle </th>
                                                            <th style="text-align:center">Place occupée</th>
                                                            <th style="text-align:center">Place restante</th>
                                                            <th style="text-align:center" style="width: 10%">Actions</th>
                                                            {{-- <th style="text-align:center">#E</th> --}}
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($listeActivite as $item)
                                                            <tr>
                                                                <td style="vertical-align:middle">
                                                                    {{ date('d/m/Y',strtotime($item->date))}} </td>
                                                                <td style="text-align: left;vertical-align:middle;">
                                                                    {{ $item->intitule}}
                                                                </td>

                                                                <td style="vertical-align:middle;text-align:center;">
                                                                    {{ $item->capacite_salle }}
                                                                </td>
                                                                <td style="text-align:center;vertical-align:middle">
                                                                    {{ $item->placeOcupe }}
                                                                </td>

                                                                 <td style="text-align:center;vertical-align:middle">
                                                                    {{ $item->capacite_salle - $item->placeOcupe }}
                                                                </td>
                                                    
                                                                {{-- <td>1</td> --}}
                                                                <td style="width: 10%;vertical-align:middle;text-align:center;">
                                                                    <div style="display: flex; justify-content:center ">
      
                                                                                <button class="btn" id="VoirDetailBtn" title="Détails" data-id="{{$item->idactivite}}" data-libelle="{{$item->intitule}}" data-theme="{{$item->theme}}"
                                                                                    style="background: #fec211">
                                                                                    <i class="fa fa-eye"></i>
                                                                                </button>
                                                                     
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                 
                    </div>
                </div>
            </div>

        </section>

    </section>

                        
                                <!-- Modal -->
                                <div class="modal fade" id="modalParticipant" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                        <h6 class="modal-title" id="ActiviteLibelle"></h6>

                                    </div>
                                    <div class="modal-body">
                                            <div class="tc" style="font-weight:bold;padding:3px;border-radius:20px; background:#019E5F;color:#fff;width:100px;margin:0 auto; display:block;margin-bottom:10px">
                                                     Thème
                                            </div>
                                            <div class="custom-card tc" id="themeCard"> </div>
                                        <div class="table-responsive">
                                                <table class="table" style="color:black;width:100%"
                                                    id="tableListearticipartActivite">
                                                    <thead class="header">
                                                        <tr>
                                                            <th style="">Nom</th>
                                                            <th style="">Prénoms</th>
                                                            <th style="text-align:center">Fonction </th>
                                                            <th style="text-align:center">Pays</th>
                                                            <th style="text-align:center">Total à payer</th>
                                                            <th style="text-align:center" style="width: 10%">Soldé</th>
                                                        </tr>
                                                    </thead>
                                                   
                                                </table>

                                            </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                  
                                    </div>
                                    </div>
                                </div>
                                </div>

@endsection

@section('script')
    <script src="{{ asset('assets/js/dataTable.js') }}"></script>
   

    
    <script>
        var table = new DataTable('#tableListeActivite', {
            perPage: 10,
            perPageSelect: [10, 25, 50, 100],
            sortable: true,
            //searchable: true,
            bFilter: true,
            paging: false,
            scrollY: "356px",
            // scrollX: true,

            language: {
                lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
                info: "Ligne _START_ à _END_ sur _TOTAL_",
                infoEmpty: "Ligne 0 &agrave; 0 sur 0",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                search: "Rechercher&nbsp;:",
                emptyTable: "Aucune donnée",
                zeroRecords: "Aucune donnée"

                // placeholder: 'Rechercher...',
                // perPage: '{select} lignes par page',
                // noRows: 'Aucun résultat trouvé',
                // info: 'Affichage de {start} à {end} sur {rows} lignes',
            },
            columnDefs: [{
                    targets: [1],
                    className: 'w-1 tc'
                },
                {
                    targets: [2,3],
                    className: 'w-3 tc'
                },
                {
                    targets: [0],
                    className: 'w-4'
                },
              
                {
                    targets: [5, 4],
                    className: 'w-4 tc'
                }
            ],
            order: []
        });

         var tables = new DataTable('#tableListearticipartActivite', {
            perPage: 10,
            perPageSelect: [10, 25, 50, 100],
            sortable: true,
            //searchable: true,
            bFilter: true,
            paging: false,
          
            // scrollX: true,

            language: {
                lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
                info: "Ligne _START_ à _END_ sur _TOTAL_",
                infoEmpty: "Ligne 0 &agrave; 0 sur 0",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                search: "Rechercher&nbsp;:",
                emptyTable: "Aucune donnée",
                zeroRecords: "Aucune donnée"
                // placeholder: 'Rechercher...',
                // perPage: '{select} lignes par page',
                // noRows: 'Aucun résultat trouvé',
                // info: 'Affichage de {start} à {end} sur {rows} lignes',
            },
            columnDefs: [{
                    targets: [1],
                    className: 'w-1 mddle'
                },
                {
                    targets: [2],
                    className: 'w-3 tc mddle'
                },
                {
                    targets: [0],
                    className: 'w-4 mddle'
                },
              
                {
                    targets: [4,3],
                    className: 'w-4 tc mddle'
                },
                {
                    targets: [5],
                    className: 'w-4 mddle'
                }
            ], 
            order: []
        });



    </script>

    <script>

    $(document).ready(function(){

        $(document).on('click','#VoirDetailBtn',function(){

            tables.clear().draw();

             var idactivite = $(this).data('id')
             var Libelleactivite = $(this).data('libelle')

             var Themeeactivite = $(this).data('theme')

             $('#ActiviteLibelle').text(Libelleactivite)
            $.ajax({
                type: "get",
                url: "{{route('list_participant_activite_detail')}}",
                data:{id_activite :idactivite},
                dataType: "JSON",
                success: function (resp) {
                    
                   $.each(resp.data,function(key,value){

                    var solde = '<div style="display:flex;justify-content:center;align-items:center;width:100%"><img src="../assets/img/check-none.png" style="width:20px;" /></div>'
                    if (value.inscription_payee == 1){
                        solde = '<div style="display:flex;justify-content:center;align-items:center;width:100%"><img src="../assets/img/check-ok.png" style="width:20px;" /></div>'
                    }

                     tables.row.add([
                        value.nom,
                        value.prenom,
                        value.fonction,
                        value.pays,
                        value.montant_individuel.toLocaleString('fr-FR'),
                        solde
                     ])

                   })
                   
                   tables.draw()
                }
            });

             $('#themeCard').html('')

            $('#themeCard').append(
                `${Themeeactivite}`
            )

            $('#modalParticipant').modal('show')
        })
    })
    
    </script>



@endsection