@extends('frontend.inc.layout-front')
@section('title')
    Choix Categorie || {{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: 10rem; margin-bottom:5rem;">
        <div class="pagetitle text-center">
            <span style="margin-bottom: 1rem; font-weight:bold; font-size: 130%;;"><u>Liste des inscrits</u></span>
        </div>
                        <!-- 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">#</th>
                                                <th scope="col">Nom et Prénom(s)</th>
                                                <th scope="col">Pays</th>
                                                <th scope="col">Vile</th>
                                                <th scope="col">Catégorie</th>
                                                <th scope="col">Statut d'inscription</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $i = 1;
                                            @endphp
                                            @foreach ($details as $detail)
                                            <tr>
                                                <th scope="row"><a href="#">{{$i++}}</a></th>
                                                @php
                                                    $incription = App\Models\Inscriptions::where('id', $detail->inscription_id)->first();
                                                @endphp
                                                <td><span style="">{{$incription->nom}} &nbsp;{{$incription->prenoms}}</span></td>
                                                <td>{{$incription->pays_region}}</td>
                                                <td>{{$incription->ville}}</td>
                                                <td>{{$detail->getRubriquetarif->getCategorie->libelle}}</td>
                                                @if($detail->getStatutpaiement->libelle == "EN ATTENTE")
                                                <td><span >En attente</span></td>
                                                @elseif($detail->getStatutpaiement->libelle == "IMPAYE")
                                                <td><span>Rejetée</span></td>
                                                @elseif($detail->getStatutpaiement->libelle == "PAYE")
                                                <td><span >Validée</span></td>
                                                @endif
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                </div>

                            </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