@extends('user.layouts.app')

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

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/security-pages.css') }}">
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            @svg('lucide-shield-check', ['width' => '24', 'height' => '24'])
            <div class="page-header--title">
                <h1>{{ __('تفعيل المصادقة الثنائية') }}</h1>
                <p>حماية إضافية لحسابك باستخدام Google Authenticator</p>
            </div>
        </div>

        <!-- معلومات الأمان -->
        <div class="security-info">
            <h3>@svg('lucide-info', ['class' => 'me-2', 'width' => '20', 'height' => '20'])ما هي المصادقة الثنائية؟</h3>
            <p>المصادقة الثنائية تضيف طبقة حماية إضافية لحسابك من خلال طلب رمز تحقق من تطبيق Google Authenticator بالإضافة
                إلى كلمة المرور.</p>
        </div>

        <div class="row gy-3 equal-height-row">
            <!-- المميزات -->
            <div class="col-md-6 col-12">
                <div class="security-card">
                    <div class="security-header">
                        <div class="security-icon">
                            @svg('lucide-shield-check', ['width' => '24', 'height' => '24'])
                        </div>
                        <h4>مميزات المصادقة الثنائية</h4>
                    </div>

                    <ul class="feature-list">
                        <li>
                            @svg('lucide-circle-check', ['class' => 'text-success', 'width' => '16', 'height' => '16'])
                            حماية قوية ضد الاختراق
                        </li>
                        <li>
                            @svg('lucide-circle-check', ['class' => 'text-success', 'width' => '16', 'height' => '16'])
                            رموز تحقق متجددة كل 30 ثانية
                        </li>
                        <li>
                            @svg('lucide-circle-check', ['class' => 'text-success', 'width' => '16', 'height' => '16'])
                            لا تحتاج اتصال بالإنترنت
                        </li>
                        <li>
                            @svg('lucide-circle-check', ['class' => 'text-success', 'width' => '16', 'height' => '16'])
                            متوافقة مع معايير الأمان العالمية
                        </li>
                        <li>
                            @svg('lucide-circle-check', ['class' => 'text-success', 'width' => '16', 'height' => '16'])
                            سهولة الاستخدام
                        </li>
                    </ul>
                </div>
            </div>

            <!-- خطوات التفعيل -->
            <div class="col-md-6 col-12">
                <div class="security-card">
                    <div class="security-header">
                        <div class="security-icon">
                            @svg('lucide-list-ordered', ['width' => '24', 'height' => '24'])
                        </div>
                        <h4>خطوات التفعيل</h4>
                    </div>
                    <ul class="feature-list">
                        <li>
                            @svg('lucide-circle-1', ['width' => '16', 'height' => '16'])
                            قم بتحميل تطبيق Google Authenticator على هاتفك
                        </li>
                        <li>
                            @svg('lucide-circle-2', ['width' => '16', 'height' => '16'])
                            امسح رمز QR أدناه أو أدخل الرمز يدوياً
                        </li>
                        <li>
                            @svg('lucide-circle-3', ['width' => '16', 'height' => '16'])
                            أدخل الرمز المكون من 6 أرقام للتحقق
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- تفعيل المصادقة الثنائية -->
        <div class="row gy-3">
            <div class="security-card col-md-8 col-12 mx-auto">
                <div class="security-header">
                    <div class="security-icon">
                        @svg('lucide-qr-code', ['width' => '24', 'height' => '24'])
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="mb-2">تفعيل المصادقة الثنائية</h4>
                        <p class="security-muted-text">امسح رمز QR أو أدخل الرمز يدوياً في تطبيق Google Authenticator</p>
                    </div>
                </div>

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

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

                <div class="text-center mb-4">
                    <h5 class=" d-flex gap-2 justify-content-center mb-3">@svg('lucide-qr-code', ['width' => '20', 'height' => '20']){{ __('امسح رمز QR') }}</h5>
                    <div class="qr-code-container p-3 mb-4"
                        style="background: white; display: inline-block; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                        {!! $qrCode !!}
                    </div>

                    <div class="manual-code-section">
                        <p class="mb-2"><strong>{{ __('أو أدخل هذا الرمز يدوياً:') }}</strong></p>

                        <div class=" copyable-container secret-key-container" data-tooltip-position="center"
                            data-copy-value="{{ $secretKey }}" role="button">
                            @svg('lucide-clipboard', ['width' => '16', 'height' => '16'])

                            <code class="secret-key">{{ $secretKey }}</code>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('security.google2fa.enable') }}">
                    @csrf

                    <div class="form-group mb-4">
                        <label for="one_time_password" class="form-label">
                            @svg('lucide-key-round', ['class' => 'me-2', 'width' => '16', 'height' => '16']){{ __('رمز التحقق (6 أرقام)') }}
                        </label>
                        <input id="one_time_password" type="text"
                            class="form-control text-center @error('one_time_password') is-invalid @enderror"
                            name="one_time_password" maxlength="6" placeholder="123456" required autofocus
                            style="font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: bold;">

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

                    <div class="action-buttons">
                        <button type="submit" class="btn-custom-primary">
                            @svg('lucide-shield-check', ['width' => '16', 'height' => '16'])
                            {{ __('تفعيل المصادقة الثنائية') }}
                        </button>
                        <a class="btn-custom-secondary" href="{{ route('index') }}">
                            @svg('lucide-x-circle', ['width' => '16', 'height' => '16'])
                            {{ __('إلغاء') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>

@endsection