@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-8 mx-auto card">
                    <div class="card-body">
                        @mobile()
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-size:90%; font-weight: bold;">Etape 3 :
                                Renseignements personnels</h3>
                        @endmobile

                        @desktop
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">Etape 3 :
                                Renseignements personnels
                            </h3>
                        @enddesktop
                        <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('leo.update-profil-store')}}" method="post">
                                @csrf
                            <div class="align-items-stretch">
                                <div class="py-2 px-4 bg-theme text-white mb-3 fw-bold" style="border-top:#2c3347 dashed 1px; border-bottom:#2c3347 dashed 1px;">
                                Information sur le LEO
                                </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" 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>Type pièce (Identité) <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>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>Titre <i class="text-danger">*</i></b></label>
                                    <select class="form-select 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="PPDL">PPDL</option>
                                            <option value="PDL">PDL</option>
                                            <option value="VPDL">VPDL</option>
                                            <option value="Président">Président</option>
                                            <option value="Past-Président">Past-Président</option>
                                            <option value="LEO">LEO</option>
                                           </optgroup>
                                           @else
                                           <option value="" selected>---Choisissez---</option>
                                           <option value="PPDL">PPDL</option>
                                           <option value="PDL">PDL</option>
                                           <option value="VPDL">VPDL</option>
                                           <option value="Président">Président</option>
                                           <option value="Past-Président">Past-Président</option>
                                           <option value="LEO">LEO</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 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>
                            <div class="row mt-3 pt-2 d-none" id="show_hebergement" style="border-top: 1px dashed black;">
                                <h4 style="display: block; margin-bottom:10px;" class="color-theme">Hébergement</h4>
                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                    <label for="name"><b>Date arrivée <i class="text-danger required_option"></i></b></label>
                                    <input type="date" min="{{date("Y-m-d")}}" 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 required_option"></i></b></label>
                                    <input type="date" min="2023-05-01" value="{{$inscrit->date_depart}}" class="form-control" name="date_depart" id="date_depart">
                                </div>
                                <div class="form-group col-sm-12 col-md-6 mb-3">
                                    <label for="name"><b>Votre hôtel ? <i class="text-danger required_option"></i></b></label>
                                    <select class="form-control js-selectx" 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 col-md-6"> <br>
                             <a href="{{ url()->previous() }}"><button type="button" id="precedent"  class="btn btn-primary btn-lg" style="border-radius: 25px;">Précédent</button></a> &nbsp;&nbsp; <button type="submit" id="valider" class="btn btn-warning btn-lg text-center"  style="border-radius: 25px; padding:6px 25px;">Suivant</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() {


        // 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_leo: 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("")
          }
    }
});


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

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