@extends('layouts.app')

@section('title', __('Confirm Password'))

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-4">
                        <div class="password-icon mx-auto mb-3">
                            <i class="fas fa-user-lock"></i>
                        </div>

                        <h1 class="h4 fw-bold mb-2">
                            {{ __('Confirm your password') }}
                        </h1>

                        <p class="text-muted mb-0">
                            {{ __('For your security, confirm your password before changing two-factor authentication settings.') }}
                        </p>
                    </div>

                    @if(session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0 ps-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <div class="mb-3">
                            <label for="password" class="form-label fw-semibold">
                                {{ __('Current password') }}
                            </label>

                            <div class="input-group">
                                <input
                                    id="password"
                                    type="password"
                                    name="password"
                                    class="form-control
                                        @error('password') is-invalid @enderror"
                                    autocomplete="current-password"
                                    required
                                    autofocus
                                >

                                <button
                                    type="button"
                                    id="togglePassword"
                                    class="btn btn-outline-secondary"
                                    aria-label="{{ __('Show or hide password') }}"
                                >
                                    <i class="fas fa-eye"></i>
                                </button>

                                @error('password')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-check-circle me-1"></i>
                            {{ __('Confirm password') }}
                        </button>
                    </form>

                    <div class="text-center mt-3">
                        <a
                            href="{{ route('account.profile') }}"
                            class="text-decoration-none"
                        >
                            <i class="fas fa-arrow-left me-1"></i>
                            {{ __('Return to profile') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .password-icon {
        align-items: center;
        background: rgba(13, 110, 253, .12);
        border-radius: 50%;
        color: #0d6efd;
        display: flex;
        font-size: 1.75rem;
        height: 64px;
        justify-content: center;
        width: 64px;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const button = document.getElementById('togglePassword');
        const password = document.getElementById('password');
        const icon = button?.querySelector('i');

        button?.addEventListener('click', function () {
            const hidden = password.type === 'password';

            password.type = hidden ? 'text' : 'password';
            icon?.classList.toggle('fa-eye', !hidden);
            icon?.classList.toggle('fa-eye-slash', hidden);
        });
    });
</script>
@endpush