@extends('frontend::layouts.master')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-md-9 col-sm-12 ">
                <div class="login-form mt-5 mb-5">
                    <div class="text-center">
                        <h2>
                            {{ __('user::messages.Confirm Password') }}
                        </h2>
                        <p> {{ __('user::messages.Back to register?') }} <a href="{{ route('register') }}">
                                {{ __('user::messages.Register Now') }}</a></p>
                    </div>

                    <div class="mb-4 text-sm text-gray-600">
                        {{ __('user::messages.This is a secure area of the application. Please confirm your password before continuing.') }}
                    </div>


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

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

                        <!-- Password -->
                        <div class="form-grp password-input-wrapper mb-3">
                            <input type="password" name="password" id="password" placeholder="Type your password *">
                            <button type="button" class="password-toggle-btn" onclick="togglePassword('password')">
                                <svg class="eye-icon" id="eyeIcon-password" width="20" height="20"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor"
                                        stroke-width="2" fill="none" />
                                    <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"
                                        fill="none" />
                                </svg>
                                <svg class="eye-off-icon" id="eyeOffIcon-password" width="20" height="20"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    style="display: none;">
                                    <path d="m1 1 22 22" stroke="currentColor" stroke-width="2" />
                                    <path d="m6.71 6.71c-1.82 1.31-3.71 3.64-3.71 5.29s4 8 11 8c1.75 0 3.35-.39 4.71-1.07"
                                        stroke="currentColor" stroke-width="2" fill="none" />
                                    <path d="m14 14.12c-.55.39-1.25.62-2 .62-1.66 0-3-1.34-3-3 0-.75.23-1.45.62-2"
                                        stroke="currentColor" stroke-width="2" fill="none" />
                                    <path d="m12.01 3c3.97 0 7.99 3.36 7.99 8.02 0 1.65-1.89 3.98-3.71 5.29"
                                        stroke="currentColor" stroke-width="2" fill="none" />
                                </svg>
                            </button>
                        </div>

                        <button type="submit"
                            class="btn btn-two w-100 d-block mb-3">{{ __('user::messages.Confirm') }}</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        .password-input-wrapper {
            position: relative;
        }

        .password-toggle-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #6c757d;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .password-toggle-btn:hover {
            color: #495057;
            background-color: rgba(0, 0, 0, 0.05);
        }

        .password-toggle-btn:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        .form-grp input[type="password"],
        .form-grp input[type="text"] {
            padding-right: 45px;
        }
    </style>
@endpush

@push('script')
    <script>
        function togglePassword(id) {
            const input = document.getElementById(id);
            const eyeIcon = document.getElementById(`eyeIcon-${id}`);
            const eyeOffIcon = document.getElementById(`eyeOffIcon-${id}`);

            const isPassword = input.type === 'password';
            input.type = isPassword ? 'text' : 'password';
            eyeIcon.style.display = isPassword ? 'none' : 'block';
            eyeOffIcon.style.display = isPassword ? 'block' : 'none';
        }
    </script>
@endpush