@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-alert', ['width' => '24', 'height' => '24'])
            <div class="page-header--title">
                <h1>{{ __('إلغاء تفعيل المصادقة الثنائية') }}</h1>
                <p>إزالة الطبقة الإضافية من الحماية لحسابك</p>
            </div>
        </div>

        <!-- تحذير الأمان -->
        <div class="security-info">
            <h3>@svg('lucide-triangle-alert', ['class' => 'me-2 text-warning', 'width' => '20', 'height' => '20'])تحذير مهم!</h3>
            <p>سيؤدي إلغاء تفعيل المصادقة الثنائية إلى تقليل مستوى الأمان لحسابك. تأكد من أنك تريد المتابعة.</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-alert', ['width' => '24', 'height' => '24'])
                        </div>
                        <h4>مخاطر إلغاء التفعيل</h4>
                    </div>

                    <ul class="feature-list">
                        <li>
                            @svg('lucide-x-circle', ['class' => 'text-danger', 'width' => '16', 'height' => '16'])
                            تقليل مستوى الحماية
                        </li>
                        <li>
                            @svg('lucide-x-circle', ['class' => 'text-danger', 'width' => '16', 'height' => '16'])
                            زيادة خطر الاختراق
                        </li>
                        <li>
                            @svg('lucide-x-circle', ['class' => 'text-danger', 'width' => '16', 'height' => '16'])
                            الاعتماد على كلمة المرور فقط
                        </li>
                        <li>
                            @svg('lucide-x-circle', ['class' => 'text-danger', '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', ['class' => 'text-warning', 'width' => '16', 'height' => '16'])
                            أدخل كلمة المرور الحالية
                        </li>
                        <li>
                            @svg('lucide-circle-2', ['class' => 'text-warning', 'width' => '16', 'height' => '16'])
                            أدخل رمز التحقق من Google Authenticator
                        </li>
                        <li>
                            @svg('lucide-circle-3', ['class' => 'text-warning', 'width' => '16', 'height' => '16'])
                            اضغط على زر إلغاء التفعيل
                        </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-shield-x', ['width' => '24', 'height' => '24'])
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="mb-2">إلغاء تفعيل المصادقة الثنائية</h4>
                        <p class="security-muted-text">أدخل كلمة المرور ورمز التحقق لإلغاء تفعيل المصادقة الثنائية</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="alert alert-warning">
                    <strong>{{ __('تحذير!') }}</strong>
                    {{ __('سيؤدي هذا إلى إلغاء تفعيل المصادقة الثنائية لحسابك. سيصبح حسابك أقل أماناً.') }}
                </div>

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

                    <div class="form-group mb-4">
                        <label for="password" class="form-label">
                            @svg('lucide-lock', ['class' => 'me-2', 'width' => '16', 'height' => '16']){{ __('كلمة المرور الحالية') }}
                        </label>
                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
                            name="password" placeholder="أدخل كلمة المرور الحالية" required>

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

                    <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']){{ __('رمز التحقق من Google Authenticator') }}
                        </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
                            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-biometric btn-disable">
                            @svg('lucide-shield-x', ['width' => '16', 'height' => '16'])
                            {{ __('إلغاء تفعيل المصادقة الثنائية') }}
                        </button>
                        <a class="btn-biometric" href="{{ route('index') }}"
                            style="background: var(--color-gray-500); color: white;">
                            @svg('lucide-x-circle', ['width' => '16', 'height' => '16'])
                            {{ __('إلغاء') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('one_time_password');

            // Only allow numbers
            input.addEventListener('keypress', function(e) {
                if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'Tab', 'Enter'].includes(e.key)) {
                    e.preventDefault();
                }
            });
        });
    </script>
@endsection