@extends('frontend.inc.layout-front')
@section('title')
    Choix Rubrique LIONS || {{ env('APP_NAME') }}
@endsection
<!-- Insertion CDN Country phone code & flag   -->
{{--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
--}}

<style>
    .hidden{
        display:none;
    }
</style>
@section('container')
    <!-- home 4grids block -->
    <section class="services-w3l-block py-5 mt-5" id="features" style="background-color: #f4f4f4; margin-bottom=-2rem;">

        <div class="container py-md-5 py-4">
            <div class="row">
                <div class="col-12 mx-auto card">
                    @if ($errors->any())
                            <div class="alert alert-danger">
                                <strong>Error!</strong>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                    <form action="{{route('lions.choix-package-store')}}" method="post">
                        @csrf
                        <input type="hidden" name="email_lions" id="email_lions" value="{{Crypt::encrypt($email)}}">
                    <div class="card-body">
                        @mobile()
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-size:90%; font-weight: bold;">Etape 2 : Choix des rubriques de paiement</h3>
                            <div class="row mb-4">
                                <div class="col-md-12 mx-auto d-flex align-items-stretch" style="width: ;100%">
                                    <!-- liste des packages -->
                                    <div class="card border-dark mb-3 mx-auto" style="max-width: auto; min-height: 17em;">
                                        <div class="card-header bg-theme">
                                            <span class="color-theme-white">
                                                <i class="bi bi-calendar-range"></i>
                                                <b></b>
                                            </span> &nbsp;&nbsp;


                                            <span class="color-theme-yellow" style="float: right;">
                                                <b><i class="bi bi-hourglass-bottom"></i> Inscription LIONS</b>
                                            </span>&nbsp;
                                        </div>
                                        <div class="card-body text-dark text-center align-middle" style="padding:auto;">

                                            <p class="card-text" style="color: black;float: left; text-align:left; margin: 10px 0;">
                                                    
                                                       @foreach (getTarification($rubrique->id, $categorie_lions->id) as $tarification)
                                                        &nbsp; &nbsp;
                                                        <!-- vérifier si le paiement est déjà -->
                                                        @if (checkData($inscrit->id,$tarification->getTyperubrique->id,$tarification->grilletarifaire_id))
                                                            <input style="border: 3px solid #f73109;"
                                                            class="form-check-input limited {{ $rubrique->code }}"
                                                            data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                            type="checkbox"
                                                            @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                            value="{{ $tarification->id }}"
                                                            name="package[]" checked disabled />
                                                        @else
                                                            @if ($tarification->getTyperubrique->code == "INSC")
                                                            <input style="border: 3px solid #7a1f0d;"
                                                                class="form-check-input limited {{ $rubrique->code }}"
                                                                data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                                type="checkbox"
                                                                @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                                value="{{ $tarification->id }}"
                                                                name="package[]" checked="checked" readonly="readonly" />

                                                            @else
                                                            <input style="border: 3px solid #7a1f0d;"
                                                                class="form-check-input limited {{ $rubrique->code }}"
                                                                data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                                type="checkbox"
                                                                @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                                value="{{ $tarification->id }}"
                                                                name="package[]" />
                                                            @endif
                                                        @endif
                                                        &nbsp;&nbsp;{{ $tarification->getTyperubrique->libelle }}
                                                        :&nbsp;{{ number_format($tarification->getGrilletarifaire->montant, 0, ',', '.') }}
                                                        F CFA <br>
                                                    @endforeach 
                                                        
                                                         
                                            </p>


                                        </div>
                                        <div class="card-footer text-muted text-center bg-theme-yellow">
                                            <span class="color-theme" style="text-align:center;">
                                                <i class="fas fa-exclamation color-theme"></i><i class="fas fa-exclamation color-theme"></i><i class="fas fa-exclamation color-theme"></i>&nbsp;&nbsp; Tarifs valables jusqu'au : <br>
                                                <b class="">{{ $rubrique->date_fin ? \Carbon\Carbon::parse($rubrique->date_fin)->format('d-m-Y H:i:s') : '' }}</b>
                                            </span>
                                        </div>
                                    </div>
                                    <!-- end liste packages -->
                                </div>

                                <div class="col-md-12 mx-auto align-items-stretch" style="width: ;100%">
                                  <!-- liste des packages -->
                                  <div class="card border-primary mb-3 mx-auto" style="max-width: auto; min-height: 17em;">
                                    <div class="card-header bg-theme">
                                        <span class="color-theme-yellow">
                                            <b><i class="bi bi-hourglass-bottom"></i> Informations sur le LIONS</b>
                                        </span>&nbsp;
                                    </div>
                                    <div class="card-body text-dark align-middle" style="padding:auto;">
                                         <!-- formulaire d'ajout des informations complémentaires -->
                                         <div class="row mt-0">
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Prénoms <i class="text-danger">*</i></b></label>
                                                <input type="text" class="form-control" maxlength="150" minlength="2" name="prenoms"
                                                    id="prenoms" readonly value="{{$inscrit->prenoms}}" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Nom <i class="text-danger">*</i></b></label>
                                                <input type="text" class="form-control" maxlength="150" minlength="2" name="nom"
                                                    id="nom" readonly value="{{$inscrit->nom}}" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>E-mail <i class="text-danger">*</i></b></label>
                                                <input type="email" class="form-control" maxlength="150" minlength="2" name="email"
                                                    id="email" readonly value="{{$inscrit->email}}" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Téléphone <i class="text-danger">*</i></b></label><br>
                                                <input type="tel"  name="telephone" class="form-control"
                                                    id="telephone" style="display: block; width:100%;" autocomplete="telephones"
                                                    autofocus value="{{$inscrit->telephone}}" required> 
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Ville <i class="text-danger">*</i></b></label>
                                                <input type="text" class="form-control" maxlength="150" minlength="2" name="ville"
                                                    id="ville" value="{{$inscrit->ville}}" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3 hidden">
                                                <label for="name"><b>Pays/région <i class="text-danger">*</i></b></label>
                                                <select class="form-select js-select" name="code_iso" id="code_iso" required>
                                                   @if ($inscrit->code_iso)
                                                   <optgroup label="Valeur par défaut">
                                                    <option selected value="{{$inscrit->code_iso ? $inscrit->code_iso : ''}}">{{$inscrit->code_iso ? $inscrit->getPays->nom_pays : ''}}</option>
                                                   </optgroup> 
                                                   @else 
                                                       <option selected value="{{ $pays->code_iso }}">{{ $pays->nom_pays }}</option> 
                                                   @endif
                                                </select>
                                            </div> 
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Type pièce <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="typepiece_id" id="typepiece_id" required>
                                                    @if ($inscrit->typepiece_id)
                                                    <optgroup label="Valeur par défaut">
                                                     <option value="{{$inscrit->typepiece_id}}">{{$inscrit->getTypepiece->libelle}}</option>
                                                    </optgroup>
                                                    <optgroup label="Liste disponible">
                                                        @foreach ($typepieces as $item)
                                                        <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                                    @endforeach
                                                    </optgroup>
                                                    @else
                                                    <option value="" selected>---Choisissez---</option>
                                                    @foreach ($typepieces as $item)
                                                        <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Numéro pièce <i class="text-danger">*</i></b></label>
                                                <input type="text" class="form-control" maxlength="150" minlength="2"
                                                    name="numero_piece" value="{{$inscrit->numero_piece}}" id="numero_piece" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Titre <i class="text-danger">*</i></b></label>
                                                    <select class="form-control js-select" name="titre" id="titre" required>
                                                    @if ($inscrit->titre)
                                                       <optgroup label="Valeur par défaut">
                                                        <option value="{{$inscrit->titre}}">{{$inscrit->titre}}</option>
                                                       </optgroup>
                                                       <optgroup label="Liste disponible">
                                                        <option value="PCG">PCG</option>
                                                        <option value="Gvr">Gvr</option>
                                                        <option value="PVG">PVG</option>
                                                        <option value="DVG">DVG</option>
                                                        <option value="PDG">PDG</option>
                                                        <option value="SD">SD</option>
                                                        <option value="TD">TD</option>
                                                        <option value="C/SMA">C/SMA</option>
                                                        <option value="PR">PR</option>
                                                        <option value="PZ">PZ</option>
                                                        <option value="PPR">PPR</option>
                                                        <option value="PPZ">PPZ</option>
                                                        <option value="Président">Président</option>
                                                        <option value="Past-Président">Past-Président</option>
                                                        <option value="Lions">Lions</option>
                                                       </optgroup>
                                                       @else
                                                       <option value="" selected>---Choisissez---</option>
                                                       <option value="PCG">PCG</option>
                                                        <option value="Gvr">Gvr</option>
                                                        <option value="PVG">PVG</option>
                                                        <option value="DVG">DVG</option>
                                                        <option value="PDG">PDG</option>
                                                        <option value="SD">SD</option>
                                                        <option value="TD">TD</option>
                                                        <option value="C/SMA">C/SMA</option>
                                                        <option value="PR">PR</option>
                                                        <option value="PZ">PZ</option>
                                                        <option value="PPR">PPR</option>
                                                        <option value="PPZ">PPZ</option>
                                                        <option value="Président">Président</option>
                                                        <option value="Past-Président">Past-Président</option>
                                                        <option value="Lions">Lions</option>
                                                        @endif
                                                    </select>
                                            </div> 
                                            <div class="form-group col-sm-12 col-md-6 mb-3 hidden">
                                                <label for="name"><b>District <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="district" id="district" required>
                                                    @if ($inscrit->district)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->district}}">{{$inscrit->district}}</option>
                                                       </optgroup> 
                                                       @else 
                                                       <option selected value="District 403 A4">District 403 A4</option>
                                                        @endif
                                                    </select>
                                            </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Régions <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="region" id="region" required>
                                                        @if ($inscrit->club_id)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->getClub->getZone->regions_id}}">{{$inscrit->getClub->getZone->getRegion->libelle}}</option>
                                                       </optgroup> 
                                                       <optgroup label="Liste disponible">
                                                            @foreach ($regions as $item)
                                                            <option value="{{$item->id}}">{{$item->libelle}}</option>
                                                            @endforeach
                                                       </optgroup>
                                                       @else 
                                                        <option value=""></option>
                                                        @foreach ($regions as $item)
                                                                <option  value="{{$item->id}}">{{$item->libelle}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Zone <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="zone" id="zone" required>
                                                      @if ($inscrit->club_id)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->getClub->getZone->id}}">{{$inscrit->getClub->getZone->libelle}}</option>
                                                       </optgroup> 
                                                       <optgroup label="Liste disponible">
                                                        @foreach ($zones as $item)
                                                            <option value="{{$item->id}}">{{ $item->libelle }}</option>
                                                        @endforeach
                                                       </optgroup>
                                                       @else 
                                                       <option selected value=""></option>
                                                        @endif
                                                    </select>
                                            </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Club <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="club" id="club" required>
                                                      @if ($inscrit->club_id)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->getClub->id}}">{{$inscrit->getClub->libelle}}</option>
                                                       </optgroup> 
                                                       <optgroup label="Liste disponible">
                                                        @foreach ($clubs as $item)
                                                            <option value="{{$item->id}}">{{ $item->libelle }}</option>
                                                        @endforeach
                                                       </optgroup>
                                                       @else 
                                                       <option selected value=""></option>
                                                        @endif
                                                    </select>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Numéro club <i class="text-danger">*</i></b></label>
                                                <input type="text" class="form-control" maxlength="150" minlength="2"
                                                    name="numero_club" id="numero_club" value="{{$inscrit->numero_club}}" required>
                                            </div>
                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Numéro affiliation <i class="text-danger">*</i></b></label>
                                                <input type="text" class="form-control" maxlength="150" minlength="2"
                                                    name="numero_affiliation" id="numero_affiliation" value="{{$inscrit->numero_affiliation}}" required>
                                            </div>
                                        </div> 
                                         <!-- end formulaire d'ajout des informations complémentaires -->
                                    </div>
                                </div>
                                <!-- end liste packages -->
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6 text-center mt-3 mx-auto">
                                        <a href="{{ url()->previous() }}"><button type="button" id="valider" class="btn btn-primary btn-lg" style="border-radius: 25px;">Précédent</button></a> &nbsp;&nbsp; <button type="submit" class="btn btn-warning btn-lg" id="suivant" style="border-radius: 25px;">Suivant<i class="bi bi-chevron-right"></i></button>
                                    </div>
                                  </div>
                            </div>
                        @endmobile

                        @desktop
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">Etape 2 : Choix des rubriques de paiement
                            </h3>
                            <div class="row mb-4">
                                <div class="col-md-4 mx-auto align-items-stretch" style="width: ;100%">
                                   <div>
                                     <!-- liste des packages -->
                                     <div class="card border-dark mb-3 mx-auto" style="max-width: auto; min-height: 17em;">
                                        <div class="card-header bg-theme">
                                            <span class="color-theme-yellow" style="">
                                                <b><i class="bi bi-hourglass-bottom"></i> Inscription LIONS</b>
                                            </span>&nbsp;
                                        </div>
                                        <div class="card-body text-dark text-center align-middle" style="padding:auto;">
                                            <p class="card-text" style="color: rgb(0, 0, 0);float: left; text-align:left; margin: 10px 0;">
                                                    
                                                        @foreach (getTarification($rubrique->id, $categorie_lions->id) as $tarification)
                                                        &nbsp; &nbsp;
                                                        @if (checkData($inscrit->id,$tarification->getTyperubrique->id,$tarification->grilletarifaire_id))
                                                            <input style="border: 3px solid #f73109;"
                                                            class="form-check-input limited {{ $rubrique->code }}"
                                                            data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                            type="checkbox"
                                                            @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                            value="{{ $tarification->id }}"
                                                            name="package[]" checked disabled />
                                                        @else
                                                            @if ($tarification->getTyperubrique->code == "INSC")
                                                            <input style="border: 3px solid #7a1f0d;"
                                                                class="form-check-input limited {{ $rubrique->code }}"
                                                                data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                                type="checkbox"
                                                                @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                                value="{{ $tarification->id }}"
                                                                name="package[]" checked="checked" readonly="readonly" />

                                                            @else
                                                            <input style="border: 3px solid #7a1f0d;"
                                                                class="form-check-input limited {{ $rubrique->code }}"
                                                                data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                                type="checkbox"
                                                                @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                                value="{{ $tarification->id }}"
                                                                name="package[]" />
                                                            @endif
                                                        @endif

                                                            &nbsp;&nbsp;{{ $tarification->getTyperubrique->libelle }}
                                                        :&nbsp;{{ number_format($tarification->getGrilletarifaire->montant, 0, ',', '.') }}
                                                        F CFA <br>
                                                    @endforeach                                                     
                                                        
                                                         
                                            </p>


                                        </div>
                                        <div class="card-footer text-muted text-center bg-theme-yellow">
                                            <span class="color-theme" style="text-align:center;">
                                                <i class="fas fa-exclamation color-theme"></i><i class="fas fa-exclamation color-theme"></i><i class="fas fa-exclamation color-theme"></i>&nbsp;&nbsp; Tarifs valables jusqu'au : <br>
                                                <b class="">{{ $rubrique->date_fin ? \Carbon\Carbon::parse($rubrique->date_fin)->format('d-m-Y H:i:s') : '' }}</b>
                                            </span>
                                        </div>
                                    </div>
                                    <!-- end liste packages -->
                                   </div>
                                </div>

                                <div class="col-md-8 mx-auto align-items-stretch" style="width: ;100%">
                                    <!-- liste des packages -->
                                    <div class="card border-primary mb-3 mx-auto" style="max-width: auto; min-height: 17em;">
                                        <div class="card-header bg-theme">
                                            <span class="color-theme-yellow">
                                                <b><i class="bi bi-hourglass-bottom"></i> Informations sur le LIONS</b>
                                            </span>&nbsp;
                                        </div>
                                        <div class="card-body text-dark align-middle" style="padding:auto;">
                                             <!-- formulaire d'ajout des informations complémentaires -->
                                             <div class="row mt-0">
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Prénoms <i class="text-danger">*</i></b></label>
                                                    <input type="text" class="form-control" maxlength="150" minlength="2" name="prenoms"
                                                        id="prenoms" readonly value="{{$inscrit->prenoms}}" required>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Nom <i class="text-danger">*</i></b></label>
                                                    <input type="text" class="form-control" maxlength="150" minlength="2" name="nom"
                                                        id="nom" readonly value="{{$inscrit->nom}}" required>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>E-mail <i class="text-danger">*</i></b></label>
                                                    <input type="email" class="form-control" maxlength="150" minlength="2" name="email"
                                                        id="email" readonly value="{{$inscrit->email}}" required>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Téléphone <i class="text-danger">*</i></b></label><br>
                                                    <input type="tel" name="telephone" class="form-control"
                                                        id="telephone" style="display: block; width:100%;" autocomplete="telephone"
                                                        autofocus value="{{$inscrit->telephone}}" required> 
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Ville <i class="text-danger">*</i></b></label>
                                                    <input type="text" class="form-control" maxlength="150" minlength="2" name="ville"
                                                        id="ville" value="{{$inscrit->ville}}" required>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3 hidden">
                                                    <label for="name"><b>Pays/région <i class="text-danger">*</i></b></label>
                                                    <select class="form-select js-select" name="code_iso" id="code_iso" required>
                                                       @if ($inscrit->code_iso)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->code_iso ? $inscrit->code_iso : ''}}">{{$inscrit->code_iso ? $inscrit->getPays->nom_pays : ''}}</option>
                                                       </optgroup> 
                                                       @else
                                                       <option selected value="{{ $pays->code_iso }}">{{ $pays->nom_pays }}</option>
                                                       @endif
                                                    </select>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Type pièce <i class="text-danger">*</i></b></label>
                                                    <select class="form-control js-select" name="typepiece_id" id="typepiece_id" required>
                                                        @if ($inscrit->typepiece_id)
                                                        <optgroup label="Valeur par défaut">
                                                         <option value="{{$inscrit->typepiece_id}}">{{$inscrit->getTypepiece->libelle}}</option>
                                                        </optgroup>
                                                        <optgroup label="Liste disponible">
                                                            @foreach ($typepieces as $item)
                                                            <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                                        @endforeach
                                                        </optgroup>
                                                        @else
                                                        <option value="" selected>---Choisissez---</option>
                                                        @foreach ($typepieces as $item)
                                                            <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Numéro pièce <i class="text-danger">*</i></b></label>
                                                    <input type="text" class="form-control" maxlength="150" minlength="2"
                                                        name="numero_piece" value="{{$inscrit->numero_piece}}" id="numero_piece" required>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Titre <i class="text-danger">*</i></b></label>
                                                    <select class="form-control js-select" name="titre" id="titre" required>
                                                        @if ($inscrit->titre)
                                                           <optgroup label="Valeur par défaut">
                                                            <option value="{{$inscrit->titre}}">{{$inscrit->titre}}</option>
                                                           </optgroup>
                                                           <option value="PCG">PCG</option>
                                                            <option value="Gvr">Gvr</option>
                                                            <option value="PVG">PVG</option>
                                                            <option value="DVG">DVG</option>
                                                            <option value="PDG">PDG</option>
                                                            <option value="SD">SD</option>
                                                            <option value="TD">TD</option>
                                                            <option value="C/SMA">C/SMA</option>
                                                            <option value="PR">PR</option>
                                                            <option value="PZ">PZ</option>
                                                            <option value="PPR">PPR</option>
                                                            <option value="PPZ">PPZ</option>
                                                            <option value="Président">Président</option>
                                                            <option value="Past-Président">Past-Président</option>
                                                            <option value="Lions">Lions</option>
                                                           </optgroup>
                                                           @else
                                                           <option value="" selected>---Choisissez---</option>
                                                           <option value="PCG">PCG</option>
                                                            <option value="Gvr">Gvr</option>
                                                            <option value="PVG">PVG</option>
                                                            <option value="DVG">DVG</option>
                                                            <option value="PDG">PDG</option>
                                                            <option value="SD">SD</option>
                                                            <option value="TD">TD</option>
                                                            <option value="C/SMA">C/SMA</option>
                                                            <option value="PR">PR</option>
                                                            <option value="PZ">PZ</option>
                                                            <option value="PPR">PPR</option>
                                                            <option value="PPZ">PPZ</option>
                                                            <option value="Président">Président</option>
                                                            <option value="Past-Président">Past-Président</option>
                                                            <option value="Lions">Lions</option>
                                                            @endif
                                                        </select>
                                                </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3 hidden">
                                                <label for="name"><b>District <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="district" id="district" required>
                                                    @if ($inscrit->district)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->district}}">{{$inscrit->district}}</option>
                                                       </optgroup> 
                                                       @else 
                                                       <option selected value="District 403 A4">District 403 A4</option>
                                                        @endif
                                                    </select>
                                            </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Régions <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="region" id="region" required>
                                                        @if ($inscrit->club_id)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->getClub->getZone->regions_id}}">{{$inscrit->getClub->getZone->getRegion->libelle}}</option>
                                                       </optgroup> 
                                                       <optgroup label="Valeur par défaut">
                                                            @foreach ($regions as $item)
                                                            <option  value="{{$item->id}}">{{$item->libelle}}</option>
                                                            @endforeach
                                                       </optgroup>
                                                       @else 
                                                        <option value=""></option>
                                                        @foreach ($regions as $item)
                                                                <option  value="{{$item->id}}">{{$item->libelle}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Zone <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="zone" id="zone" required>
                                                      @if ($inscrit->club_id)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->getClub->getZone->id}}">{{$inscrit->getClub->getZone->libelle}}</option>
                                                       </optgroup> 
                                                       <optgroup label="Liste disponible">
                                                        @foreach ($zones as $item)
                                                            <option value="{{$item->id}}">{{ $item->libelle }}</option>
                                                        @endforeach
                                                       </optgroup>
                                                       @else 
                                                       <option selected value="">---Choisissez---</option>
                                                        @endif
                                                    </select>
                                            </div>

                                            <div class="form-group col-sm-12 col-md-6 mb-3">
                                                <label for="name"><b>Club <i class="text-danger">*</i></b></label>
                                                <select class="form-control js-select" name="club" id="club" required>
                                                      @if ($inscrit->club_id)
                                                       <optgroup label="Valeur par défaut">
                                                        <option selected value="{{$inscrit->getClub->id}}">{{$inscrit->getClub->libelle}}</option>
                                                       </optgroup> 
                                                       <optgroup label="Liste disponible">
                                                        @foreach ($clubs as $item)
                                                            <option value="{{$item->id}}">{{ $item->libelle }}</option>
                                                        @endforeach
                                                       </optgroup>
                                                       @else 
                                                       <option selected value=""></option>
                                                        @endif
                                                    </select>
                                            </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Numéro club <i class="text-danger">*</i></b></label>
                                                    <input type="text" class="form-control" maxlength="150" minlength="2"
                                                        name="numero_club" id="numero_club" value="{{$inscrit->numero_club}}" required>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                                    <label for="name"><b>Numéro affiliation <i class="text-danger">*</i></b></label>
                                                    <input type="text" class="form-control" maxlength="150" minlength="2"
                                                        name="numero_affiliation" id="numero_affiliation" value="{{$inscrit->numero_affiliation}}" required>
                                                </div> 
                                            </div> 
                                             <!-- end formulaire d'ajout des informations complémentaires -->
                                        </div>
                                    </div>
                                    <!-- end liste packages -->
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6 mt-3 text-center mx-auto">
                                        <a href="{{ url()->previous() }}"><button type="button" id="valider" class="btn btn-primary btn-lg" style="border-radius: 25px; padding:6px 25px;">Précédent</button></a> &nbsp;&nbsp; <button type="submit" class="btn btn-warning btn-lg" id="suivant" style="border-radius: 25px; padding:6px 25px;">Suivant<i class="bi bi-chevron-right"></i></button>
                                    </div>
                                  </div>
                            </div>
                        @enddesktop
                    </div>
                </form>
                </div>
            </div>
        </div>
    </section>
    <!-- home 4grids block -->
@endsection
@section('jsScript')
   <!-- include sweet alert -->
   {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>--}}
   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
   <!-- end include sweet alert -->

    <!-- select2 -->
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <!-- end select2 -->

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

        // change regions 
$('#region').on('change', function(){
     
   // console.log($(this).val());
    if ($(this).val() != "") {
        var region = $(this).val();
                    $('#zone').empty();
                    $('#club').empty();
                    $('#zone').append('<option value="" selected="selected">---Choisissez---</option>');
                    $('#club').append('<option value="" selected="selected">---Choisissez---</option>');
                  $.ajax({
                      url: "{{ route('ajax_requete') }}",
                      data: { 
                          change_region: region, 
                          _token: '{{csrf_token()}}'
                      },
                      type: 'POST',
                      dataType: 'json', 
                      success: function(data, status) {  
                          console.log(data);
                          jQuery.each(data, function(key, value) {   
                              $('#zone').append('<option value="' + value.id + '">' + value.libelle + '</option>');
                          }); 
                      },
                      error: function(xhr, textStatus, errorThrown) {
                          //  alert('Veuillez renseigner tous les champs');
                      console.log(xhr);
                      }
                  });
    }  
});

// change zone

$('#zone').on('change', function(){
    var region = $("#region").val();
    var zone = $(this).val();
    if ($(this).val() != "" && region != "") {  
                    $('#club').empty();
                    $('#club').append('<option value="" selected="selected">---Choisissez---</option>');
                  $.ajax({
                      url: "{{ route('ajax_requete') }}",
                      data: { 
                          change_zone: zone, 
                          region: region, 
                          _token: '{{csrf_token()}}'
                      },
                      type: 'POST',
                      dataType: 'json', 
                      success: function(data, status) {  
                          console.log(data);
                          jQuery.each(data, function(key, value) {   
                              $('#club').append('<option value="' + value.id + '">' + value.libelle + '</option>');
                          }); 
                      },
                      error: function(xhr, textStatus, errorThrown) {
                          //  alert('Veuillez renseigner tous les champs');
                      console.log(xhr);
                      }
                  });
    }  
});

 
// afficher hébergement selon le choix de pays
$('#code_iso').on('change', function(){
    //console.log($(this).val());
    if ($(this).val() != "BJ") {
        // show hébergement
        if ($("#show_hebergement").hasClass("d-none")) {
            $("#show_hebergement").removeClass("d-none")
            // make required date depart and hotel
            $('#date_depart').prop('required', true)
            $('#date_arrivee').prop('required', true)
            $('#hebergement_id').prop('required', true)
            $('#required_date_depart').text("*")
            $('.required_option').text("*")
          }
    } else {
        if ($("#show_hebergement").hasClass("d-none")) {
            // make required date depart and hotel
            $('#date_arrivee').prop('required', false)
            $('#date_depart').prop('required', false)
            $('#hebergement_id').prop('required', false)
            $('.required_option').text("")

          }else{
            $("#show_hebergement").addClass("d-none")
            // make required date depart and hotel
            $('#date_arrivee').prop('required', false)
            $('#date_depart').prop('required', false)
            $('#hebergement_id').prop('required', false)
            $('.required_option').text("")
          }
    }
}); 

if ($("telephone").val() == "") {
  // $('#suivant').prop('disabled', true);
} else {
//$('#suivant').prop('disabled', false);
}
 var number_limited = 1;
  $('.limited').on('change', function(){
    var noChecked = 0;
// ###### script permettant de vérifier le nbre de package par mode #####
  //1- récupérer la valeur de data-number
  var code_package_tarif = $(this).attr("data-number");
  // 2- substrat code formation inside the data-number
  var tab_code_package = code_package_tarif.split('_');
  var code_package = tab_code_package[0];
  // 3- check if the element is checked or no
      // 3-1 : if true we goin to unchecked the rest of training code
        if($(this).is(':checked')){
          $.each($('.'+code_package), function(){
            if($(this).not(':checked').length == 1){
                $(this).attr('disabled',false); // default true
            }
          });
        }
      // 3-2 : if false we goin to unchecked all of training code
      if(!$(this).is(':checked')){
          $.each($('.'+code_package), function(){
                $(this).attr('disabled',false);
          });
        }
//#### end script permettant de vérifier le nbre de formation par mode ####


// count number checked
    $.each($('.limited'), function(){
        if($(this).is(':checked')){
            noChecked++;
          $('#suivant').prop('disabled', false);
        }
    });
    // if number checked equalto number limited disable all checkbox not checked else don't disable
    if(noChecked >= number_limited){
      $('#suivant').prop('disabled', false);
      }else{
        noChecked--;
        $('#suivant').prop('disabled', true);
    };
});
/*

const phoneInputField = document.querySelector("#telephones");

const phoneInput = window.intlTelInput(phoneInputField, {
  preferredCountries: ["bj", "bf", "cm", "cf", "km", "cg", "ci", "ga", "gn", "gw", "gq", "ml", "ne", "cd", "sn", "td", "tg"],
  utilsScript:
    "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",

});

$("#telephones").blur(function(){
    var full_number = phoneInput.getNumber(intlTelInputUtils.numberFormat.E164);
    $("input[name='telephone'").val(full_number);
    // vérifier si l'indicatif est sélectionné
    if ($("#telephone").val().indexOf("+") > -1 ) {
      $('#suivant').prop('disabled', false);
    } else {
      $('#suivant').prop('disabled', true);
      swal({
          title: 'Attention !',
          text: "Vous devez préciser l'indicatif en cliquant sur le drapeau et respecter le format de numéro de téléphone.",
          icon: 'error',
          buttons: ["Fermer","Okay"],
      });
    }
 });*/
 
/*
 $("#telephones").keypress(function (e) {
      if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       $("#errmsg").html("Number Only").stop().show().fadeOut("slow");
       return false;
     }
  });*/


    });

    $(document.body).delegate('[type="checkbox"][readonly="readonly"]', 'click', function(e) {
        e.preventDefault();
    });
    $('.js-select').select2();
</script>

@endsection