@extends('layouts.admin')

@section('content')
<div class="dashboard-modern">
    <div class="page-header-modern">
        <div class="header-content">
            <h1 class="page-title-modern">{{ trans('common.two_factor_authentication') }}</h1>
            <p class="page-subtitle-modern">{{ trans('common.setup_two_factor_authentication') }}</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert-modern alert-success-modern">
            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if(session('recovery_codes'))
        <div class="data-card" style="margin-bottom: var(--spacing-lg);">
            <div class="data-card-header">
                <h3 class="data-card-title">{{ trans('common.recovery_codes') }}</h3>
                <p class="data-card-subtitle">{{ trans('common.save_recovery_codes') }}</p>
            </div>
            <div class="data-card-body">
                <div class="alert-modern alert-warning-modern" style="margin-bottom: var(--spacing-md);">
                    <strong>{{ trans('common.important') }}:</strong> {{ trans('common.recovery_codes_warning') }}
                </div>
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-sm); font-family: monospace; font-size: 14px;">
                    @foreach(session('recovery_codes') as $code)
                        <div style="padding: var(--spacing-sm); background: var(--bg-secondary); border-radius: var(--border-radius-sm); text-align: center;">
                            {{ $code }}
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    @if($user->two_factor_enabled)
        <!-- Disable 2FA -->
        <div class="data-card">
            <div class="data-card-header">
                <h3 class="data-card-title">{{ trans('common.two_factor_enabled') }}</h3>
                <p class="data-card-subtitle">{{ trans('common.two_factor_is_active') }}</p>
            </div>
            <div class="data-card-body">
                <div class="form-group-modern">
                    <p><strong>{{ trans('common.method') }}:</strong> {{ $user->two_factor_method === 'google_authenticator' ? trans('common.google_authenticator') : trans('common.email_otp') }}</p>
                </div>
                
                <form method="POST" action="{{ route('admin.2fa.disable') }}" onsubmit="return confirm('{{ trans('common.confirm_disable_2fa') }}');">
                    @csrf
                    <div class="form-group-modern">
                        <label for="password" class="form-label-modern">{{ trans('common.password') }} <span class="required">*</span></label>
                        <input type="password" id="password" name="password" class="form-input-modern" required>
                        <small class="form-hint-modern">{{ trans('common.enter_password_to_disable') }}</small>
                    </div>
                    
                    @if ($errors->any())
                        <div class="alert-modern alert-error-modern">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif
                    
                    <div class="form-actions-modern">
                        <button type="submit" class="btn-modern btn-danger-modern">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                            <span>{{ trans('common.disable_2fa') }}</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @else
        <!-- Enable 2FA -->
        <div class="data-card">
            <div class="data-card-header">
                <h3 class="data-card-title">{{ trans('common.setup_google_authenticator') }}</h3>
                <p class="data-card-subtitle">{{ trans('common.scan_qr_code_with_app') }}</p>
            </div>
            <div class="data-card-body">
                <div class="form-group-modern">
                    <p>{{ trans('common.setup_instructions') }}</p>
                    <ol style="margin-left: var(--spacing-lg); margin-top: var(--spacing-sm);">
                        <li>{{ trans('common.install_google_authenticator') }}</li>
                        <li>{{ trans('common.scan_qr_code_below') }}</li>
                        <li>{{ trans('common.enter_verification_code') }}</li>
                    </ol>
                </div>

                @if($qrCodeUrl)
                <div class="form-group-modern" style="text-align: center;">
                    <div style="display: inline-block; padding: var(--spacing-md); background: white; border-radius: var(--border-radius-md); margin: var(--spacing-md) 0;">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ urlencode($qrCodeUrl) }}" alt="QR Code" style="max-width: 200px;">
                    </div>
                    <p style="margin-top: var(--spacing-sm); font-size: 12px; color: var(--text-secondary);">
                        {{ trans('common.or_enter_manually') }}: <code style="font-family: monospace; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">{{ $manualEntryKey }}</code>
                    </p>
                </div>
                @endif

                <form method="POST" action="{{ route('admin.2fa.enable') }}">
                    @csrf
                    <input type="hidden" name="method" value="google_authenticator">
                    
                    <div class="form-group-modern">
                        <label for="code" class="form-label-modern">{{ trans('common.verification_code') }} <span class="required">*</span></label>
                        <input type="text" id="code" name="code" class="form-input-modern" placeholder="000000" maxlength="6" pattern="[0-9]{6}" required autofocus>
                        <small class="form-hint-modern">{{ trans('common.enter_6_digit_code_from_app') }}</small>
                    </div>
                    
                    @if ($errors->any())
                        <div class="alert-modern alert-error-modern">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif
                    
                    <div class="form-actions-modern">
                        <button type="submit" class="btn-modern btn-primary-modern">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>{{ trans('common.enable_2fa') }}</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Email OTP Option -->
        <div class="data-card" style="margin-top: var(--spacing-lg);">
            <div class="data-card-header">
                <h3 class="data-card-title">{{ trans('common.setup_email_otp') }}</h3>
                <p class="data-card-subtitle">{{ trans('common.use_email_for_2fa') }}</p>
            </div>
            <div class="data-card-body">
                <form method="POST" action="{{ route('admin.2fa.enable') }}">
                    @csrf
                    <input type="hidden" name="method" value="email_otp">
                    <input type="hidden" name="code" value="000000">
                    
                    <div class="form-group-modern">
                        <p>{{ trans('common.email_otp_description') }}</p>
                    </div>
                    
                    <div class="form-actions-modern">
                        <button type="submit" class="btn-modern btn-secondary-modern">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            <span>{{ trans('common.enable_email_otp') }}</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>
@endsection