@extends('frontend.inc.layout-front')
@section('title')
    Liste des inscrits || {{ env('APP_NAME') }}
@endsection

@section('container')
    <link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
    <div class="container" style="margin-top: 8rem; margin-bottom:5rem;">
        <div class="pagetitle text-center">
            <h3 style="margin-bottom: 1rem;"><u>LISTE DES INSCRITS</u></h3>
        </div>

        {{-- Suspension momentanée --}}
        {{--
    @mobile
    <div class="bg-danger  mb-2 py-3 px-3" style="font-size: 13pt; color: #ffffff;text-align : justify; line-height: 1.6">

        Chers amis Lions, <br>
        Merci de noter que les inscriptions sont momentanément arrêtées.
        <br>                    
    
    </div>
    @endmobile

    @desktop
    <div class="container mx-auto bg-danger my-4 py-4 px-5" style="max-width:800px; font-size: 14pt; color: #ffffff;text-align : justify; line-height: 1.7">

        Chers amis Lions, <br>        
        Merci de noter que les inscriptions sont momentanément arrêtées.<br>                    
    
    </div>
    @enddesktop

    --}}

        {{-- Message sur les modes de paiement --}}
        @php
            $date = date('Y-m-d H:i');
        @endphp

        {{--  
    @if ($date <= '2023-05-01 00:00')
   
        @mobile
        <div class="bg-success  mb-2 py-3 px-3" style="font-size: 13pt; color: #ffffff;text-align : justify; line-height: 1.6">

            Chers amis Lions, <br>
            Si vous êtes inscrit en attente et que vous voulez payer par <u>carte bancaire</u>, merci de <b>vérifier votre adresse mail et de cliquer sur le lien de paiement</b>.  <br>
            <u>En cas d'échec de paiement par carte</u>, vous avez la possibilité de : <br>
            - effectuer un virement par RapidTransfer dans les agences ECOBANK ;<br>
            - opter pour un virement bancaire. <br>
            
            Veillez à envoyer la preuve de paiement à <b>virement@coco-cotonou2023.org</b>.
            
        </div>
        @endmobile

        @desktop
        <div class="bg-success m-4 py-4 px-5" style="font-size: 14pt; color: #ffffff;text-align : justify; line-height: 1.7">

                Chers amis Lions, <br>
                Si vous êtes inscrit en attente et que vous voulez payer par <u>carte bancaire</u>, merci de <b>vérifier votre adresse mail et de cliquer sur le lien de paiement</b>.  <br>
                <u>En cas d'échec de paiement par carte</u>, vous avez la possibilité de : <br>
                - effectuer un virement par RapidTransfer dans les agences ECOBANK ;<br>
                - opter pour un virement bancaire. <br>
                
                Veillez à envoyer la preuve de paiement à <b>virement@coco-cotonou2023.org</b>.
            
        </div>
        @enddesktop
    @else
    
    @mobile
    <div class="bg-danger  mb-2 py-3 px-3" style="font-size: 13pt; color: #ffffff;text-align : justify; line-height: 1.6">

        Chers amis Lions, <br>
        Pour compter du 1er/05/2023, les paiements se font sur place. <br>                    
    
    </div>
    @endmobile

    @desktop
    <div class="bg-danger m-4 py-4 px-5" style="font-size: 14pt; color: #ffffff;text-align : justify; line-height: 1.7">

        Chers amis Lions, <br>
        Pour compter du 1er/05/2023, les paiements se font sur place. <br>                    
    
    </div>
    @enddesktop
    
    @endif
    
        @mobile
        <div class="bg-theme-yellow color-black mb-2 py-3 px-3" style="font-size: 13pt; text-align: justify; line-height: 1.6;">
            Chers amis Lions.
            <br>Pour tous ceux qui ont besoin d'une <b>Lettre d'invitation</b> en vue de la participation à la 42ème Convention de Cotonou, <a style="font-weight: bold; text-decoration:underline; color:#37e;" href="{{route("invitation")}}" title="Formulaire de demande de Lettre d'Invitation">merci de cliquer ici pour accéder au formulaire de demande</a>. Le lien est également accessible dans le menu <b>Inscription</b>.
            <br><b>Un mail vous sera envoyé à l'adresse mail renseignée lors de l'inscription.</b>
            <br>Merci pour votre compréhension.

        </div>
        @endmobile

        @desktop
        <div class="bg-theme-yellow color-black m-4 py-4 px-5" style="font-size: 14pt; text-align: justify; line-height: 1.7;">

            Chers amis Lions.
            <br>Pour tous ceux qui ont besoin d'une <b>Lettre d'invitation</b> en vue de la participation à la 42ème Convention de Cotonou, <a style="font-weight: bold; text-decoration:underline; color:#37e;" href="{{route("invitation")}}" title="Formulaire de demande de Lettre d'Invitation">merci de cliquer ici pour accéder au formulaire de demande</a>. Le lien est également accessible dans le menu <b>Inscription</b>.
            <br><b>Un mail vous sera envoyé à l'adresse mail renseignée lors de l'inscription.</b>
            <br>Merci pour votre compréhension.

        </div>
        @enddesktop
        --}}

        <!-- Recent Sales -->
        <div class="col-12">
            <div class="cardx recent-sales overflow-auto">

                <div class="card-body">
                    <table id="example" class="table table-borderless datatablex table-bordered display"
                        style="margin-top: 2rem;">
                        <thead>
                            <tr style="background: #d9edf7;">
                                <th scope="col" style="width:20px;">#</th>
                                <th scope="col" style="min-width:200px;">Nom et Prénom(s)</th>
                                <th scope="col">Catégorie</th>
                                <th scope="col">Région</th>
                                <th scope="col">Zone</th>
                                <th scope="col">Club</th>
                                <th scope="col" style="width:100px;">Statut</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $i = 1;
                            @endphp
                            @foreach ($paiements as $item)
                                <tr>
                                    <th scope="row"><a href="#">{{ $i++ }}</a></th>
                                    <th>{{ $item->paiement_de ? $item->getPaiementde->nom : '' }}
                                        &nbsp;{{ $item->paiement_de ? $item->getPaiementde->prenoms : '' }} </th>
                                    <td>{{ $item->getRubriquetarif->getCategorie->libelle }}</td>
                                    <td>
                                        {{ $item->getInscription->getClub->getZone->getRegion->libelle ?? "" }}
                                    </td>
                                    <td>
                                        {{ $item->getInscription->getClub->getZone->libelle ?? "" }}
                                    </td>
                                    <td>
                                        {{ $item->getInscription->getClub->libelle ?? "" }}
                                    </td>
                                    <td>{{ $item->getStatutpaiement ? $item->getStatutpaiement->libelle : '' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>

            </div>
            <div style="margin: 15px auto 10px; text-align: center; max-width:300px;">
                <a class="btn btn-warning text-black fs-4 px-5 fw-bold" href="{{ route('inscription') }}">S'inscrire</a>
            </div>
        </div><!-- End Recent Sales -->
    </div>
@endsection
@section('jsScript')
    <script>
        function myFunction() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
                },
                lengthMenu: [
                    [10, 50, 100, 200, -1],
                    ['10', '50', '100', '200', 'Tout afficher'],
                ],
            });
        });
    </script>
@endsection