@extends('layouts.auth')

@section('title', 'التحقق من المصادقة الثنائية')

@section('styles')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/security-pages.css') }}">
    <style>
        .content-wrapper {
            padding: 24px;
        }

        .page-header {
            display: flex;
            align-items: center;
            gap: 12px;

            /* Shared accent for this page */
            .verify-2fa {
                --accent-bg: #eef5ff;
                --accent-border: #b6d4fe;
                --accent-fg: #0d6efd;
            }

            margin-bottom: 18px;
        }

        .page-header svg {
            width: 28px;
            height: 28px;
            color: var(--primary, #0d6efd);
        }

        .page-header--title h1 {
            font-size: 20px;
            margin: 0;
        }

        .page-header--title p {
            margin: 2px 0 0;
            color: #6c757d;
            font-size: 14px;
        }

        .security-card {
            background: #fff;
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        .security-header {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
        }

        .security-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: #eef5ff;
            color: #0d6efd;
            font-size: 20px;
        }

        .security-muted-text {
            color: #6c757d;
            margin: 0;
        }

        .otp-input {
            font-size: 24px;
            letter-spacing: 8px;
            font-weight: 700;
            text-align: center;
            padding: 10px 12px;
            height: 56px;
        }

        .otp-input::placeholder {
            letter-spacing: normal;
            font-weight: 400;
        }

        .action-buttons .btn-custom-primary {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        /* Scoped tweaks for this page */
        .verify-2fa .otp-input {
            border: 1px solid #b6d4fe;
            border-radius: 10px;
        }

        .verify-2fa .btn-custom-primary {
            background-color: var(--accent-bg);
            border: 1px solid var(--accent-border);
            color: var(--accent-fg);
            border-radius: 10px;
            padding: 12px 16px;
            font-weight: 600;
            transition: box-shadow .2s, transform .05s ease-in-out, background-color .15s, border-color .15s;
        }

        .verify-2fa .btn-custom-primary:hover {
            background-color: #e1efff;
            border-color: #a7c9fd;
            box-shadow: 0 6px 14px rgba(13, 110, 253, .12);
        }

        /* border-color: #86b7fe;
            box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
            } */

        .verify-2fa .action-buttons {
            margin-top: 12px;
        }

        .verify-2fa .btn-custom-primary {
            background-color: #66b2ff;
            border: 1px solid #66b2ff;
            color: #fff;
            border-radius: 10px;
            padding: 12px 16px;
            font-weight: 600;
            transition: box-shadow .2s, transform .05s ease-in-out;
        }

        .verify-2fa .btn-custom-primary:hover {
            background-color: #4da3ff;
            border-color: #4da3ff;
            box-shadow: 0 6px 14px rgba(77, 163, 255, .25);
        }

        .verify-2fa .btn-custom-primary:active {
            transform: translateY(1px);
        }

        @media (min-width: 768px) {
            .content-wrapper {
                padding: 32px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper verify-2fa" style="max-width:760px;margin:0 auto;">
        <div class="page-header">
            <x-lucide-shield width="28" height="28" />
            <div class="page-header--title">
                <h1>{{ __('التحقق من المصادقة الثنائية') }}</h1>
                <p>أدخل رمز التحقق من تطبيق Google Authenticator للمتابعة</p>
            </div>
        </div>

        <!-- معلومات الأمان -->
        <div class="security-info">
            <h3><x-lucide-info width="18" height="18" class="me-2" />رمز التحقق المطلوب</h3>
            <p>أدخل الرمز المكون من 6 أرقام الظاهر في تطبيق Google Authenticator للمتابعة بأمان إلى حسابك.</p>
        </div>

        <!-- التحقق من المصادقة الثنائية -->
        <div class="row gy-3">
            <div class="security-card col-12 mx-auto">
                <div class="security-header">
                    <div class="security-icon">
                        <x-lucide-shield-check width="24" height="24" />
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="mb-2">التحقق من المصادقة الثنائية</h4>
                        <p class="security-muted-text">أدخل رمز التحقق من تطبيق Google Authenticator</p>
                    </div>
                </div>

                @if (session('error'))
                    <div class="alert alert-danger" role="alert">
                        {{ session('error') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('security.google2fa.verify') }}" class="mt-2">
                    @csrf

                    <div class="form-group mb-4">
                        <label for="one_time_password" class="form-label fw-semibold">
                            <x-lucide-key width="14" height="14" class="me-1" />{{ __('رمز التحقق (6 أرقام)') }}
                        </label>
                        <input id="one_time_password" type="tel" inputmode="numeric"
                            class="form-control otp-input @error('one_time_password') is-invalid @enderror"
                            name="one_time_password" maxlength="6"  required autofocus>

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

                    <div class="action-buttons  mt-2" style="  margin-top: 20px;">
                        <button type="submit" class="btn-custom-primary security-info">
                            <x-lucide-shield-check width="16" height="16" />
                            {{ __('تحقق') }}
                        </button>
                    </div>
                </form>

                <form method="POST" action="{{ route('logout') }}" class="mt-1">
                    @csrf
                    <button type="submit" class="btn-custom-primary w-100 security-info"
                        style="    width: 100%;
    text-align: center">
                        <x-lucide-log-out width="16" height="16" class="me-1" />
                        {{ __('تسجيل خروج') }}
                    </button>
                </form>

                <div class="text-center mt-4 p-3" style="background: #f8f9fa; border-radius: 8px;">
                    <small class="text-muted">
                        <x-lucide-info width="12" height="12" class="me-1" />
                        {{ __('لم تتلق الرمز؟ تأكد من أن الوقت على هاتفك صحيح') }}
                    </small>
                </div>
            </div>
        </div>
    </div>

  
@endsection