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

@section('container')
    <style>
        label {
            font-weight: bold;
        }
    </style>
    <!-- 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-lg-8 col-sm-12 mx-auto card">
                    <div class="card-body">
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">Etape 1 : Identification
                            </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 id="form-data" action="{{ route('lions.store-identification') }}" method="post">
                                @csrf
                                <input type="hidden" name="invite" id="invite" value="{{Crypt::encrypt($get_invite)}}" required>
                                <div class="row mt-0">
                                    <div class="form-group col-md-6 mb-3">
                                        <label for="" class="form-label">Prénoms <i class="text-danger">*</i></label>
                                    <input type="text" name="prenoms" id="prenoms" class="form-control" required
                                        placeholder="Saisissez votre prénoms" aria-describedby="helpId">
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <label for="label" class="form-label">Nom <i class="text-danger">*</i></label>
                                    <input type="text" style="text-transform: uppercase;" name="nom" id="nom" class="form-control" placeholder="Saisissez votre nom"
                                        required aria-describedby="helpId"> 
                                    </div> 
                                </div>
                                <div class="row mt-0">
                                    <div class="form-group col-md-6 mb-3">
                                        <label for="label" class="form-label">Genre <i class="text-danger">*</i></label>
                                        <select class="form-select js-select" name="genre_id" id="genre_id" required>                                           
                                            <option value="" selected>---Choisissez---</option>
                                            @foreach ($genres as $item)
                                                <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                            @endforeach 
                                         </select>
                                    </div> 
                                    <div class="form-group col-md-6 mb-3">
                                        <label for="" class="form-label">E-mail <i class="text-danger">*</i></label>
                                    <input type="email" name="email" id="email" class="form-control" placeholder="Saisissez votre adresse e-mail"
                                        required aria-describedby="helpId">
                                    </div>
                                </div> 
                                <button type="submit" class="btn btn-warning btn-lg text-center" id="valider" style="border-radius: 25px;">Suivant<i class="bi bi-chevron-right"></i></button>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- home 4grids block -->



@endsection
@section('jsScript')
    <script>
        $(document).ready(function() {
            // ############### script de gestion des mails ####################
            $('#valider').prop('disabled', true);
            // vérification adresse mail
            var startTimer;
            $('#email').blur(function() {
                let email = $(this).val();
                checkEmail(email);
            });


            function checkEmail(email) {
                $('#email-error').remove();
                if (email.length > 1) {
                    $.ajax({
                        type: 'post',
                        url: "{{ route('ajax-check-email-inscription') }}",
                        data: {
                            email: email,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(data) {
                            if (data.success == false) {
                                $('#email').after('<div id="email-error" class="text-danger" <strong>' +
                                    data.message + '<strong></div>');
                                $('#valider').prop('disabled', true);
                                // confirmation pour l'utilisation de l'adresse mail existante
                                //let form = $("#form-data").parents('form');
                                $('#genre_id').prop('required', false);
                                swal({
                                    title: 'Avertissement !',
                                    text: 'Cette adresse e-mail existe déjà dans la base, veuillez cliquer sur le bouton "Continuer" pour procéder à l\'inscription. Si vous souhaitez inscrire un autre Lions ou Leo, veuillez cliquer sur Fermer et changer l\'adresse e-mail.',
                                    icon: 'warning',
                                    buttons: ["Fermer", "Continuer"],
                                }).then(function(value) {
                                    if (value) {
                                        $("#form-data").submit();
                                    }
                                });

                            } else {
                                $('#genre_id').prop('required', true);
                                $('#email').after(
                                    '<div id="email-error" class="text-success" <strong>' + data
                                    .message + '<strong></div>');
                                $('#valider').prop('disabled', false);
                            }

                        }
                    });
                } else {
                    $('#email').after(
                        '<div id="email-error" class="text-danger" <strong>Ce champ est obligatoire.<strong></div>'
                        );
                    $('#valider').prop('disabled', true);
                }
            }
            // ############## end script de gestion des mails #########
        });
    </script>
@endsection