@extends('mini-index')
@section('title', 'Confirmer le mot de passe')
@section('content')
    <section class="min-vh-100 d-flex align-items-center justify-content-center">
        <div class="container" data-aos="fade-up">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card shadow-lg rounded">
                        <div class="card-body p-4">
                            <img src="{{ asset('assets/images/logo.png') }}" class="d-block mx-auto mb-3" style="width: 6rem;"
                                alt="Logo">
                            <h4 class="mb-4 text-success text-center">Confirmer votre mot de passe</h4>
                            <p class="text-muted text-center mb-4">
                                Cette action est sensible. Merci de confirmer votre mot de passe avant de continuer.
                            </p>

                            <form method="POST" action="{{ route('password.confirm') }}">
                                @csrf

                                <div class="mb-3 position-relative">
                                    <label for="password" class="form-label">Mot de passe</label>
                                    <input type="password" name="password" id="password" class="form-control" required
                                        autocomplete="current-password">
                                    <button type="button"
                                        class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y me-2"
                                        onclick="togglePassword('password', this)">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>

                                @error('password')
                                    <div class="text-danger mb-3">{{ $message }}</div>
                                @enderror

                                <button type="submit" class="btn btn-success w-100">
                                    <i class="bi bi-shield-lock me-1"></i> Confirmer
                                </button>
                            </form>

                            @if (Route::has('password.request'))
                                <div class="text-center mt-3">
                                    <a href="{{ route('password.request') }}" class="text-decoration-none">
                                        Mot de passe oublié ?
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <script>
    function togglePassword(id, btn) {
        const input = document.getElementById(id);
        const icon = btn.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('bi-eye');
            icon.classList.add('bi-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('bi-eye-slash');
            icon.classList.add('bi-eye');
        }
    }
</script> --}}
@endsection