@include('layouts.auth-layout.auth-header')

<!-- Rest of your code -->

@if (session('status'))
<div class="toastrDefaultSuccess" role="alert" style="display: none;">
    {{ session('status') }}
</div>
@endif

@if (!session('status'))
<div class="toastrDefaultError" role="alert" style="display: none;">
    Connection problem
</div>
@endif


    <div class="container-xxl mt-lg-5">
        <div class="authentication-wrapper authentication-basic container-p-y">
            <div class="">
                <!-- Register -->
                <div class="card">
                    <div class="card-body">
                        <!-- Logo -->
                        <div class="app-brand justify-content-center">
                            <a href="index.html" class="app-brand-link gap-2">
                                <span class="app-brand-logo fw-bolder fs-3" >
                                    <img src="{{ asset('assets/dist/img/logo_01.png') }}" width="150px" height="80px" alt="">
                                </span>
                                <span class="app-brand-text demo text-body "></span>
                            </a>
                        </div>
                        <!-- /Logo -->
                        <div class="app-brand justify-content-center mt-3">
                            <a href="index.html" class="app-brand-link gap-2">
                                <span class="app-brand-logo fw-bolder fs-3" >
                                    Creer votre compte !
                                </span>
                            </a>
                        </div>

                        <form id="formAuthentication" class="mt-5" method="POST" action="{{ route('register') }}">
                            @csrf
                         <div class="row mb-3">
                            <div class="col-6">
                                <label for="name" class="form-label">Nom <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name"
                                    placeholder="Entrez votre nom " autofocus />
                                    @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <label for="first_name" class="form-label">Prenom <span class="text-danger">*</span> </label>
                                <input type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" required autocomplete="first_name"
                                    placeholder="Entrez vos prenoms " autofocus />
                                    @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                         <div class="row mb-3">
                            <div class=" col-6">
                                <label for="email" class="form-label">E-mail <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email"
                                    placeholder="Entrez votre e-mail " autofocus />
                                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class=" col-6">
                                <label for="pays" class="form-label">Pays <span class="text-danger">*</span></label>
                                <select id='pays' class="form-control @error('pays') is-invalid @enderror" name="pays" required autocomplete="pays">
                                    <option selected>Choisissez un pays</option>
                                </select>
                                @error('pays')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                          </div>

                          <div class="row mb-3">
                            <div class="col-6">
                                <label for="adresse" class="form-label">Adresse <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('adresse') is-invalid @enderror" name="adresse" value="{{ old('adresse') }}" required autocomplete="adresse"
                                    placeholder="Entrez votre adresse " autofocus />
                                    @error('adresse')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                               <div class="col-6">
                                <label for="telephone" class="form-label">Telephone</label>
                                <input type="text" class="form-control @error('telephone') is-invalid @enderror" name="telephone" value="{{ old('telephone') }}"  autocomplete="telephone"
                                    placeholder="Entrez votre numéro" autofocus />
                                    @error('telephone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                         <div class="row mb-3">
                            <div class="col-6 form-password-toggle">

                                <label for="adresse" class="form-label">Mot de passe <span class="text-danger">*</span></label>
                                <div class="input-group input-group-merge">
                                    <input type="password" id="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password"
                                        placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                        aria-describedby="password" />

                                    <span class="input-group-text cursor-pointer">
                                        <i class="bx bx-hide"></i>
                                    </span>
                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                </div>
                            </div>
                            <div class="col-6 form-password-toggle">

                                <label for="adresse" class="form-label">Confirmation <span class="text-danger">*</span></label>
                                <div class="input-group input-group-merge">
                                    <input type="password" id="password-confirm" class="form-control @error('password-confirm') is-invalid @enderror" name="password_confirmation" required autocomplete="current-password"
                                        placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                        aria-describedby="password-confirm" />

                                    <span class="input-group-text cursor-pointer">
                                        <i class="bx bx-hide"></i>
                                    </span>
                                    @error('password-confirm')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                </div>
                            </div>
                            </div>
                            <div class="mb-3">
                                <label for="adresse" class="form-label">GOOGLE CAPTCHA</label>
                            {!! htmlFormSnippet() !!}
                             </div>
                            <div class="mb-3">
                                <button class="btn btn-primary d-grid w-100"  type="submit" style=" background:#566a7f;color:#fff; border-color:#566a7f;">
                                    S'inscrire
                                </button>
                            </div>
                        </form>
                        <p class="text-center">
                            <a href="{{ route('login') }}" class="d-flex align-items-center justify-content-center">
                                <i class="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
                                Page de connexion
                            </a>
                        </p>
                    </div>
                </div>
                <!-- /Register -->
            </div>
        </div>
    </div>


    @include('layouts.auth-layout.auth-footer')

 <script>
    $(function() {
        $('.toastrDefaultSuccess').each(function() {
            toastr.success($(this).text());
        });
    });


</script>
<script>
    window.addEventListener('online', function() {
        toastr.success('Internet connection restored.');
    });

    window.addEventListener('offline', function() {
        toastr.error('Internet connection lost.');
    });
</script>


<script>
    // Fonction pour charger les pays via AJAX
    function chargerPays() {
        $.ajax({
            url: 'https://takaback.com/api/GetPays', // L'URL où se trouve la fonction pour récupérer les pays
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // Parcourir les données et ajouter chaque pays à la liste déroulante
                $.each(data, function(key, value) {
                    $('#pays').append('<option value="' + value.nomPays + '">' + value.nomPays + '</option>');
                });
            }
        });
    }

    // Appeler la fonction pour charger les pays lorsque le document est prêt
    $(document).ready(function() {
        chargerPays();
    });
</script>

