@extends('layouts.portal')

@section('title', 'Two-Factor Authentication Settings')
@section('page_title', '2FA Settings')
@section('page_subtitle', 'Secure your admin account with two-factor authentication')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => '2fa-settings'])
@endsection

@section('content')
<div class="max-w-2xl mx-auto p-6">
    <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
        
        <!-- Header -->
        <div class="bg-gradient-to-r from-red-600 to-red-700 p-6 text-white">
            <h1 class="text-2xl font-bold flex items-center">
                <i class="fas fa-shield-alt mr-3"></i>
                Two-Factor Authentication (2FA)
            </h1>
            <p class="text-red-100 mt-2">Secure your admin account with OTP verification</p>
        </div>

        <!-- Content -->
        <div class="p-6">
            
            @if ($errors->any())
                <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
                    <h3 class="font-semibold text-red-800 mb-2">
                        <i class="fas fa-exclamation-circle mr-2"></i>Error
                    </h3>
                    @foreach ($errors->all() as $error)
                        <p class="text-red-700 text-sm">{{ $error }}</p>
                    @endforeach
                </div>
            @endif

            @if (session('success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl">
                    <h3 class="font-semibold text-green-800 mb-2">
                        <i class="fas fa-check-circle mr-2"></i>Success
                    </h3>
                    <p class="text-green-700 text-sm">{{ session('success') }}</p>
                </div>
            @endif

            <!-- Current Status -->
            <div class="mb-8 p-6 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200">
                <h3 class="font-semibold text-gray-800 mb-3 flex items-center">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>Current Status
                </h3>
                <div class="flex items-center">
                    @if ($is_2fa_enabled)
                        <div class="w-4 h-4 bg-green-500 rounded-full mr-3"></div>
                        <span class="text-green-700 font-semibold">✅ Two-Factor Authentication is ENABLED</span>
                    @else
                        <div class="w-4 h-4 bg-red-500 rounded-full mr-3"></div>
                        <span class="text-red-700 font-semibold">❌ Two-Factor Authentication is DISABLED</span>
                    @endif
                </div>
            </div>

            <!-- Benefits -->
            <div class="mb-8">
                <h3 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>Why Enable 2FA?
                </h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700"><strong>Enhanced Security:</strong> Protects your admin account from unauthorized access</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700"><strong>OTP Verification:</strong> Email-based one-time password for extra protection</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700"><strong>Simple Process:</strong> Just enter email, password, and OTP</span>
                    </li>
                </ul>
            </div>

            <!-- Actions -->
            <div class="pt-6 border-t border-gray-200">
                @if (!$is_2fa_enabled)
                    <h3 class="font-semibold text-gray-800 mb-4">Enable Two-Factor Authentication</h3>
                    
                    <form action="{{ route('admin.2fa.enable.step1') }}" method="POST" class="space-y-4">
                        @csrf
                        
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-envelope mr-2"></i>Email Address
                            </label>
                            <input 
                                type="email" 
                                name="email" 
                                value="{{ Auth::user()->email }}"
                                readonly
                                class="w-full px-4 py-3 border border-gray-300 rounded-xl bg-gray-50 text-gray-700"
                            >
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-lock mr-2"></i>Confirm Your Password
                            </label>
                            <input 
                                type="password" 
                                name="password" 
                                required 
                                placeholder="Enter your password"
                                class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-400 focus:border-transparent outline-none"
                            >
                            <p class="text-xs text-gray-500 mt-1">We need your password to verify your identity</p>
                        </div>

                        <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                            <p class="text-sm text-blue-800">
                                <i class="fas fa-info-circle mr-2"></i>
                                After clicking "Send OTP", you'll receive a 6-digit code via email. You'll then enter this code to complete the setup.
                            </p>
                        </div>

                        <button 
                            type="submit" 
                            class="w-full py-3 px-4 bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold rounded-xl hover:from-red-700 hover:to-red-800 transition-all shadow-lg hover:shadow-xl"
                        >
                            <i class="fas fa-paper-plane mr-2"></i>Send OTP to Email
                        </button>
                    </form>
                @else
                    <h3 class="font-semibold text-gray-800 mb-4">Disable Two-Factor Authentication</h3>
                    
                    <form action="{{ route('admin.2fa.disable') }}" method="POST" class="space-y-4">
                        @csrf

                        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-4">
                            <p class="text-sm text-yellow-800">
                                <i class="fas fa-warning mr-2"></i>
                                Disabling 2FA will reduce your account security. Enter your password to confirm.
                            </p>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-lock mr-2"></i>Confirm Your Password
                            </label>
                            <input 
                                type="password" 
                                name="password" 
                                required 
                                placeholder="Enter your password"
                                class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-400 focus:border-transparent outline-none"
                            >
                        </div>

                        <button 
                            type="submit" 
                            class="w-full py-3 px-4 bg-red-600 text-white font-semibold rounded-xl hover:bg-red-700 transition-all"
                        >
                            <i class="fas fa-toggle-off mr-2"></i>Disable 2FA
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection