@extends(template().'layout.master2')

@section('content2')
<div class="min-h-screen bg-zinc-50 dark:bg-zinc-950 p-4 md:p-8 transition-colors duration-300">

    <div class="max-w-2xl mx-auto mb-8 flex items-center justify-between bg-white dark:bg-zinc-900 p-4 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm md:hidden">
        <h5 class="text-xl font-black text-zinc-900 dark:text-white italic uppercase tracking-tighter">{{ __('Security') }}</h5>
        <a href="{{ route('user.dashboard') }}" class="flex items-center gap-2 text-zinc-500 dark:text-zinc-400 hover:text-blue-600 transition-colors font-black uppercase text-[10px] tracking-widest">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            <span>{{ __('Back') }}</span>
        </a>
    </div>

    <div class="flex justify-center">
        <div class="w-full max-w-2xl">
            <div class="bg-white dark:bg-zinc-900 rounded-[2.5rem] shadow-xl border border-zinc-200 dark:border-zinc-800 p-6 md:p-10 transition-all duration-300">
                
                <div class="border-b border-zinc-100 dark:border-zinc-800 pb-6 mb-6 flex items-center justify-between">
                    <div>
                        <h5 class="text-2xl font-black text-zinc-900 dark:text-white italic uppercase tracking-tighter">{{ __('2FA Authentication') }}</h5>
                        <p class="text-[10px] font-bold text-blue-600 dark:text-blue-400 uppercase tracking-[0.2em] mt-1">{{ __('Identity Protection') }}</p>
                    </div>
                    <div class="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600">
                        <i data-lucide="shield-check" class="w-6 h-6"></i>
                    </div>
                </div>

                <p class="text-zinc-500 dark:text-zinc-400 text-xs leading-relaxed font-medium">
                    {{ __('Two factor authentication (2FA) strengthens access security by requiring two methods to verify your identity. This protects against phishing, social engineering, and brute force attacks.') }}
                </p>

                @if (session('error'))
                    <div class="mt-6 p-4 bg-red-500/10 border border-red-500/20 text-red-600 dark:text-red-400 rounded-2xl text-xs font-bold flex items-center gap-3">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {{ session('error') }}
                    </div>
                @endif

                @if (session('success'))
                    <div class="mt-6 p-4 bg-green-600/10 border border-green-600/20 text-green-600 dark:text-green-400 rounded-2xl text-xs font-bold flex items-center gap-3">
                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                        {{ session('success') }}
                    </div>
                @endif

                @if ($data['user']->loginSecurity == null)
                    <form class="mt-8" method="POST" action="{{ route('user.generate2faSecret') }}">
                        @csrf
                        <button type="submit"
                            class="group relative w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-black rounded-2xl transition-all shadow-lg shadow-blue-600/20 uppercase text-xs tracking-widest flex items-center justify-center gap-3">
                            <i data-lucide="key-round" class="w-4 h-4 group-hover:rotate-12 transition-transform"></i>
                            {{ __('Generate Secret Key') }}
                        </button>
                    </form>

                @elseif(!$data['user']->loginSecurity->google2fa_enable)
                    <div class="mt-8 space-y-6">
                        <div class="flex items-start gap-4">
                            <div class="w-6 h-6 rounded-lg bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-black text-blue-600 shrink-0">1</div>
                            <p class="text-zinc-600 dark:text-zinc-300 text-xs font-bold">
                                {{ __('Scan this QR code with your Google Authenticator App.') }}
                            </p>
                        </div>

                        <div class="flex justify-center py-4">
                            <div class="p-3 bg-white rounded-[2rem] border-4 border-zinc-100 dark:border-zinc-800 shadow-inner">
                                <img src="<?= $data['google2fa_url'] ?>" class="rounded-xl">
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <div class="w-6 h-6 rounded-lg bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-black text-blue-600 shrink-0">2</div>
                            <p class="text-zinc-600 dark:text-zinc-300 text-xs font-bold">
                                {{ __('Enter the pin from your app below:') }}
                            </p>
                        </div>

                        <form class="mt-4 space-y-4" method="POST" action="{{ route('user.enable2fa') }}">
                            @csrf
                            <div>
                                <label for="secret" class="block text-[10px] font-black uppercase tracking-widest text-zinc-400 mb-2">{{ __('Authenticator Code') }}</label>
                                <input id="secret" type="password" name="secret" required
                                    class="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-4 text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all font-black text-center tracking-[0.5em]">
                                @if ($errors->has('verify-code'))
                                    <p class="text-red-500 text-[10px] font-bold mt-2 uppercase italic">{{ $errors->first('verify-code') }}</p>
                                @endif
                            </div>

                            <button type="submit"
                                class="w-full py-4 bg-green-600 hover:bg-green-700 text-white font-black rounded-2xl transition-all shadow-lg shadow-green-600/20 uppercase text-xs tracking-widest">
                                {{ __('Enable 2FA Protection') }}
                            </button>
                        </form>
                    </div>

                @elseif($data['user']->loginSecurity->google2fa_enable)
                    <div class="mt-8 p-4 bg-green-600/10 border border-green-600/20 text-green-600 dark:text-green-400 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-2">
                        <i data-lucide="check-check" class="w-4 h-4"></i>
                        {{ __('2FA is currently active') }}
                    </div>

                    <p class="mt-6 text-zinc-500 dark:text-zinc-400 text-xs font-medium text-center italic">
                        {{ __('To disable, please confirm your current password.') }}
                    </p>

                    <form class="mt-6 space-y-4" method="POST" action="{{ route('user.disable2fa') }}">
                        @csrf
                        <div>
                            <label for="current-password" class="block text-[10px] font-black uppercase tracking-widest text-zinc-400 mb-2">{{ __('Current Password') }}</label>
                            <input id="current-password" type="password" name="current-password" required
                                class="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-4 text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all">
                            @if ($errors->has('current-password'))
                                <p class="text-red-500 text-[10px] font-bold mt-2 uppercase italic italic">{{ $errors->first('current-password') }}</p>
                            @endif
                        </div>

                        <button type="submit"
                            class="w-full py-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-black rounded-2xl transition-all hover:opacity-90 uppercase text-xs tracking-widest">
                            {{ __('Disable 2FA') }}
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
