@extends($activeTemplate . 'layouts.master')

@section('content')
    <div class="flex flex-col md:flex-row justify-center gap-6">

        {{-- ================================ --}}
        {{-- LEFT — QR Code / Add Account     --}}
        {{-- (only shown when 2FA is OFF)     --}}
        {{-- ================================ --}}
        @if (!auth()->user()->ts)
            <div class="w-full md:max-w-md">
                <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden h-full">

                    {{-- Header --}}
                    <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                        <i data-lucide="scan-line" class="h-5 w-5 text-primary-600"></i>
                        <h3 class="text-base font-semibold text-primary-900">@lang('Add Your Account')</h3>
                    </div>

                    <div class="p-6 flex flex-col gap-5">

                        {{-- Instruction --}}
                        <p class="text-sm text-primary-600 leading-relaxed">
                            @lang('Use the QR code or setup key on your Google Authenticator app to add your account.')
                        </p>

                        {{-- QR Code --}}
                        <div class="flex justify-center">
                            <div class="p-3 bg-white border-2 border-primary-200 rounded-2xl shadow-inner inline-block">
                                <img src="{{ $qrCodeUrl }}" alt="QR Code" class="w-44 h-44 object-contain">
                            </div>
                        </div>

                        {{-- Setup Key --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Setup Key')</label>
                            <div class="flex items-center rounded-xl border border-primary-200 overflow-hidden focus-within:ring-2 focus-within:ring-primary-500 transition">
                                <input
                                    class="referralURL flex-1 px-4 py-2.5 bg-primary-50/60 text-primary-900 text-sm font-mono tracking-widest focus:outline-none"
                                    name="key"
                                    type="text"
                                    value="{{ $secret }}"
                                    readonly>
                                <button
                                    id="copyBoard"
                                    type="button"
                                    class="px-4 py-2.5 bg-primary-800 hover:bg-primary-700 text-white text-xs font-semibold transition-colors duration-150 flex items-center gap-1.5 shrink-0">
                                    <i data-lucide="copy" class="h-3.5 w-3.5"></i> @lang('Copy')
                                </button>
                            </div>
                        </div>

                        {{-- Help Section --}}
                        <div class="bg-primary-50 border border-primary-200 rounded-xl p-4 flex gap-3">
                            <i data-lucide="info" class="h-4 w-4 text-primary-500 shrink-0 mt-0.5"></i>
                            <div class="text-xs text-primary-600 leading-relaxed">
                                <span class="block font-semibold text-primary-800 mb-1">@lang('Help')</span>
                                @lang('Google Authenticator is a multifactor app for mobile devices. It generates timed codes used during the 2-step verification process. To use Google Authenticator, install the Google Authenticator application on your mobile device.')
                                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en"
                                   target="_blank"
                                   class="inline-flex items-center gap-1 mt-2 font-semibold text-primary-700 hover:text-primary-500 underline underline-offset-2 transition-colors">
                                    <i data-lucide="download" class="h-3 w-3"></i> @lang('Download')
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        @endif

        {{-- ================================ --}}
        {{-- RIGHT — Enable / Disable 2FA     --}}
        {{-- ================================ --}}
        <div class="w-full md:max-w-md">
            <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

                @if (auth()->user()->ts)
                    {{-- DISABLE 2FA --}}
                    <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-rose-50 to-white flex items-center gap-2">
                        <i data-lucide="shield-off" class="h-5 w-5 text-rose-500"></i>
                        <h3 class="text-base font-semibold text-primary-900">@lang('Disable 2FA Security')</h3>
                    </div>

                    <form action="{{ route('user.twofactor.disable') }}" method="POST" class="p-6 flex flex-col gap-5">
                        @csrf
                        <input name="key" type="hidden" value="{{ $secret }}">

                        {{-- Status Badge --}}
                        <div class="flex items-center gap-2 p-3 bg-emerald-50 border border-emerald-200 rounded-xl">
                            <i data-lucide="shield-check" class="h-4 w-4 text-emerald-600 shrink-0"></i>
                            <span class="text-xs font-semibold text-emerald-700">2FA is currently <span class="uppercase">enabled</span> on your account</span>
                        </div>

                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Google Authenticator OTP')</label>
                            <input
                                name="code"
                                type="text"
                                required
                                placeholder="Enter 6-digit OTP"
                                class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm font-mono tracking-widest focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        <button type="submit"
                                class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-rose-600 hover:bg-rose-500 active:bg-rose-700 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                            <i data-lucide="shield-off" class="h-4 w-4"></i>
                            @lang('Disable 2FA')
                        </button>
                    </form>

                @else
                    {{-- ENABLE 2FA --}}
                    <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                        <i data-lucide="shield-check" class="h-5 w-5 text-primary-600"></i>
                        <h3 class="text-base font-semibold text-primary-900">@lang('Enable 2FA Security')</h3>
                    </div>

                    <form action="{{ route('user.twofactor.enable') }}" method="POST" class="p-6 flex flex-col gap-5">
                        @csrf
                        <input name="key" type="hidden" value="{{ $secret }}">

                        {{-- Status Badge --}}
                        <div class="flex items-center gap-2 p-3 bg-amber-50 border border-amber-200 rounded-xl">
                            <i data-lucide="shield-alert" class="h-4 w-4 text-amber-500 shrink-0"></i>
                            <span class="text-xs font-semibold text-amber-700">2FA is currently <span class="uppercase">disabled</span> on your account</span>
                        </div>

                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Google Authenticator OTP')</label>
                            <input
                                name="code"
                                type="text"
                                required
                                placeholder="Enter 6-digit OTP"
                                class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm font-mono tracking-widest focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        <button type="submit"
                                class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                            <i data-lucide="shield-check" class="h-4 w-4"></i>
                            @lang('Enable 2FA')
                        </button>
                    </form>
                @endif

            </div>
        </div>

    </div>
@endsection

@push('script')
    <script>
        (function ($) {
            "use strict";
            $('#copyBoard').click(function () {
                var copyText = document.getElementsByClassName("referralURL")[0];
                copyText.select();
                copyText.setSelectionRange(0, 99999);
                document.execCommand("copy");
                copyText.blur();

                // Visual feedback
                const btn = $(this);
                btn.html('<i data-lucide="check" class="h-3.5 w-3.5"></i> Copied!');
                btn.addClass('bg-emerald-600').removeClass('bg-primary-800 hover:bg-primary-700');
                setTimeout(() => {
                    btn.html('<i data-lucide="copy" class="h-3.5 w-3.5"></i> Copy');
                    btn.removeClass('bg-emerald-600').addClass('bg-primary-800 hover:bg-primary-700');
                    lucide.createIcons();
                }, 2000);
                lucide.createIcons();
            });
        })(jQuery);
    </script>
@endpush

@push('bottom-menu')
    <div class="col-12 order-lg-3 order-4">
        <div class="flex flex-wrap items-center gap-2 md:gap-3">
            <a href="{{ route('user.profile.setting') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-primary-700 text-primary-800 text-sm font-semibold rounded-xl hover:bg-primary-50 transition-colors duration-150">
                <i data-lucide="user" class="h-4 w-4"></i> @lang('Profile Setting')
            </a>
            <a href="{{ route('user.change.password') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-primary-700 text-primary-800 text-sm font-semibold rounded-xl hover:bg-primary-50 transition-colors duration-150">
                <i data-lucide="lock" class="h-4 w-4"></i> @lang('Change Password')
            </a>
            <a href="{{ route('user.twofactor') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-primary-800 text-white text-sm font-semibold rounded-xl shadow-soft hover:bg-primary-700 transition-colors duration-150">
                <i data-lucide="shield-check" class="h-4 w-4"></i> @lang('2FA Security')
            </a>
        </div>
    </div>
@endpush