@extends('layouts.login')
@section('titlePage')
    Changer votre mot de passe  
@endsection
@section('contenu')
    <div class="row">
        <div class="col-sm-4 offset-4">
            <div class="position-relative">
                <div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
                    <div class="authentication-inner py-6">
                        <!-- Login -->
                        <div class="card p-md-7 p-1">

                            <div class="card-body mt-1">
                                <h4 class="mb-1">@yield('titlePage') 👋</h4>
                                <p class="mb-5">Vous pouvez changer votre mot de passe pour vous connecter.</p>
                                @include('layouts.flash')

                                <form id="formAuthentication" class="mb-5" action="{{ route('valider.changer.motdepasse') }}" method="POST">
                                    @csrf
                                    <!-- Nouveau mot de passe -->
                                    <div class="mb-5">
                                        <div class="form-password-toggle">
                                            <div class="input-group input-group-merge">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="password" id="password" class="form-control" name="password" required autocomplete="new-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
                                                    <label for="password">Nouveau Mot de passe</label>
                                                </div>
                                                <span class="input-group-text cursor-pointer">
                                                    <i class="ri-eye-off-line"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    @error('password')
                                        <span class="alert alert-danger text-center">{{ $message }}</span>
                                    @enderror

                                    <!-- Confirmation du nouveau mot de passe -->
                                    <div class="mb-5">
                                        <div class="form-password-toggle">
                                            <div class="input-group input-group-merge">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="password" id="password_confirmation" class="form-control" name="password_confirmation" required autocomplete="new-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password_confirmation" />
                                                    <label for="password_confirmation">Confirmation du nouveau mot de passe</label>
                                                </div>
                                                <span class="input-group-text cursor-pointer">
                                                    <i class="ri-eye-off-line"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    @error('password_confirmation')
                                        <span class="alert alert-danger text-center">{{ $message }}</span>
                                    @enderror

                                    <div class="mb-5">
                                        <button class="btn btn-dark d-grid w-100" type="submit">Soumettre</button>
                                    </div>
                                </form>
                            </div>

                        </div>
                        <!-- /Login -->
                        <img alt="mask" src="{{ asset('assets/img/illustrations/auth-basic-login-mask-light.png') }}"
                            class="authentication-image d-none d-lg-block"
                            data-app-light-img="illustrations/auth-basic-login-mask-light.png"
                            data-app-dark-img="illustrations/auth-basic-login-mask-dark.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@push('scripts')
    <script>
        $(document).ready(function(){
            //GESTION DES ERREURS
            $(function() {
                var Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000
                });

                $('.swalDefaultWarning').ready(function() {
                    @if (session('warning'))
                        Toast.fire({
                            icon: 'warning',
                            title: '{{ session('warning') }}'
                        })
                    @endif
                });

                $('.swalDefaultSuccess').ready(function() {
                    @if (session('status'))
                        Toast.fire({
                            icon: 'success',
                            title: '{{ session('status') }}'
                        })
                    @endif
                });

                $('.swalDefaultSuccess').ready(function() {
                    @if (session('danger'))
                        Toast.fire({
                            icon: 'danger',
                            title: '{{ session('status') }}'
                        })
                    @endif
                });

                $('.swalDefaultSuccess').ready(function() {
                    @if (session('info'))
                        Toast.fire({
                            icon: 'info',
                            title: '{{ session('status') }}'
                        })
                    @endif
                });
            });

        });
        
    
    document.addEventListener('DOMContentLoaded', function () {
        const togglePasswordVisibility = (inputId, iconElement) => {
            const inputField = document.getElementById(inputId);
            if (inputField.type === 'password') {
                inputField.type = 'text';
                iconElement.classList.remove('ri-eye-off-line');
                iconElement.classList.add('ri-eye-line');
            } else {
                inputField.type = 'password';
                iconElement.classList.remove('ri-eye-line');
                iconElement.classList.add('ri-eye-off-line');
            }
        };

        document.querySelectorAll('.input-group-text').forEach((toggleButton, index) => {
            const inputId = toggleButton.previousElementSibling.querySelector('input').id;
            toggleButton.addEventListener('click', function () {
                const iconElement = this.querySelector('i');
                togglePasswordVisibility(inputId, iconElement);
            });
        });
    });
    </script>
@endpush