@extends('frontend.inc.layout-front')
@section('title')
    Mise à jour || {{ 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> 
    .iti {
       width: 100%;
    }
    .iti__arrow {
       border: none;
    } 
/* cacher le champ la preuve de paiement lors du chargement de la page */
.hidden {  display: none}

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us {
padding-top: 10px;
margin-top: 40px;
}
.why-us .box {
padding: 50px 30px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
transition: all ease-in-out 0.3s;
}
.why-us .box span {
display: block;
font-size: 28px;
font-weight: 700;
color: #ed5b5b;
}
.why-us .box h4 {
font-size: 24px;
font-weight: 600;
padding: 0;
margin: 20px 0;
color: #191919;
}
.why-us .box p {
color: #aaaaaa;
font-size: 15px;
margin: 0;
padding: 0;
}
.why-us .box:hover {
background: #7a1f0d;#cc1616cc;
padding: 30px 30px 70px 30px;
box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.18);
color:#fff;
}
.why-us .box:hover span, .why-us .box:hover h4, .why-us .box:hover p {
color: #fff;
}
label{
    font-weight: bold;
}
</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">
                    <div class="card-body">
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">Etape 3 :
                                Renseignements personnels
                            </h3>
                        <div class="row mb-4">
                            @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.update-profil-store')}}" method="post">
                                @csrf 
                            <div class="align-items-stretch">
                                <div class="py-2 px-4 bg-theme text-white mb-3" style="border-top:#2c3347 dashed 1px; border-bottom:#2c3347 dashed 1px; "> 
                                Information sur le LIONS
                                </div>
                            <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" 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-control js-select" name="pays_region" id="pays_region" required>
                                       @if ($inscrit->pays_region)
                                       <optgroup label="Valeur par défaut">
                                        <option selected value="{{$inscrit->pays_region}}">{{$inscrit->pays_region}}</option>
                                       </optgroup> 
                                       @else
                                       <option value="{{ $pays->nom_pays }}">{{ $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>
                                    <input type="text" class="form-control" maxlength="150" minlength="2"
                                        name="titre" id="titre" value="{{$inscrit->titre}}" required>
                                </div>
                            </div>
                            <div class="row mt-0"> 
                                <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 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 value="{{$inscrit->district}}">{{$inscrit->district}}</option>
                                       </optgroup> 
                                       @else 
                                       <option selected value="District 403 A4">District 403 A4</option> 
                                        @endif 
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-0"> 
                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                    <label for="name"><b>Date arrivée <i class="text-danger"></i></b></label>
                                    <input type="date" value="{{$inscrit->date_arrivee}}" class="form-control" name="date_arrivee" id="date_arrivee">
                                </div>
                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                    <label for="name"><b>Date départ <i class="text-danger">*</i></b></label>
                                    <input type="date" value="{{$inscrit->date_depart}}" class="form-control" name="date_depart" id="date_depart" required>
                                </div>
                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                    <label for="name"><b>Hébergement ? <i class="text-danger"></i></b></label>
                                    <select class="form-control js-select" name="hebergement_id" id="hebergement_id">
                                        @if ($inscrit->hebergement_id)
                                        <optgroup label="Valeur par défaut">
                                         <option value="{{$inscrit->hebergement_id}}">{{$inscrit->getHebergement->libelle}}</option>
                                        </optgroup>
                                        <optgroup label="Liste disponible">
                                            @foreach ($hebergements as $item)
                                            <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                            @endforeach
                                        </optgroup> 
                                        @else
                                        <option value="" selected>---Choisissez---</option>
                                        @foreach ($hebergements as $item)
                                            <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>   

                        </div>

                        <div class="row">
                            <div class="form-group mx-auto text-center"> 
                                <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="valider" style="border-radius: 25px;">Suivant<i class="bi bi-chevron-right"></i></button>
                             </div>
                        </div>
                    </div>
                </div>
            </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() {

      //select2
      $('.js-select').select2();

      // ############### script de gestion des mails ####################
      $('#valider').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 ) {
        $('#valider').prop('disabled', false);
      } else {
        $('#valider').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;
       }
    });

    // telephone conjointe


  const phoneInputFieldConjointe = document.querySelector("#telephones_conjointe");

const phoneInputConjointe = window.intlTelInput(phoneInputFieldConjointe, {
  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_conjointe").blur(function(){
    var full_number = phoneInputConjointe.getNumber(intlTelInputUtils.numberFormat.E164);
    $("input[name='telephone_conjointe'").val(full_number); 
    // vérifier si l'indicatif est sélectionné
    if ($("#telephone_conjointe").val().indexOf("+") > -1 ) {
      $('#valider').prop('disabled', false);
    } else {
      $('#valider').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_conjointe").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;
     }
  });

 */
</script>
@endsection