@extends('layouts.app')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    .ff-2fa-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("{{ asset('assets/background.png') }}");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        font-family: 'Inter', sans-serif;
    }

    .ff-2fa-card {
        width: 100%;
        max-width: 480px;
        border-radius: 20px;
        padding: 40px 35px 35px 35px;
        background: rgba(30, 30, 30, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: #fff;
        text-align: center;
    }

    .ff-2fa-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .ff-2fa-subtitle {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        margin-bottom: 25px;
        line-height: 1.5;
    }

    .ff-shield-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px;
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
        border: 2px solid rgba(255, 193, 7, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse2fa 2s ease-in-out infinite;
    }

    @keyframes pulse2fa {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.3); }
        50% { box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.1); }
    }

    .ff-shield-icon i {
        font-size: 28px;
        color: #FFC107;
    }

    .ff-otp-input {
        width: 100%;
        height: 56px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        letter-spacing: 12px;
        transition: all 0.3s ease;
    }

    .ff-otp-input:focus {
        outline: none;
        border-color: #FFC107;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
    }

    .ff-otp-input::placeholder {
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 4px;
        font-size: 16px;
    }

    .ff-otp-input:-webkit-autofill,
    .ff-otp-input:-webkit-autofill:hover,
    .ff-otp-input:-webkit-autofill:focus,
    .ff-otp-input:-webkit-autofill:active {
        -webkit-text-fill-color: white !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .ff-2fa-submit {
        width: 100%;
        height: 52px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(to right, #FFC107, #F57F17);
        color: #000;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 20px;
    }

    .ff-2fa-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient(to right, #FFCA28, #FF8F00);
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    }

    .ff-alert-error {
        background: rgba(220, 53, 69, 0.2);
        border: 1px solid rgba(220, 53, 69, 0.4);
        color: #ff8c8c;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 20px;
        text-align: left;
    }

    .ff-alert-success {
        background: rgba(40, 167, 69, 0.2);
        border: 1px solid rgba(40, 167, 69, 0.4);
        color: #67e6ab;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 20px;
        text-align: left;
    }

    .ff-2fa-logout {
        display: inline-block;
        margin-top: 20px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        font-size: 13px;
        transition: color 0.3s;
    }

    .ff-2fa-logout:hover {
        color: #FFB300;
    }

    @media (max-width: 500px) {
        .ff-2fa-card { padding: 30px 20px; }
        .ff-2fa-title { font-size: 20px; }
        .ff-otp-input { letter-spacing: 8px; }
    }
</style>

<div class="ff-2fa-page">
    <div class="ff-2fa-card">
        <div class="ff-shield-icon">
            <i class="fa-solid fa-shield-halved"></i>
        </div>

        <h1 class="ff-2fa-title">Two-Factor Verification</h1>
        <p class="ff-2fa-subtitle">
            Open your Google Authenticator app and enter the 6-digit verification code to continue.
        </p>

        @if(session('error'))
            <div class="ff-alert-error">
                <i class="fa-solid fa-circle-exclamation me-1"></i> {{ session('error') }}
            </div>
        @endif

        @if(session('success'))
            <div class="ff-alert-success">
                <i class="fa-solid fa-circle-check me-1"></i> {{ session('success') }}
            </div>
        @endif

        <form method="POST" action="{{ route('2fa.verify.submit') }}">
            @csrf

            <div class="mb-3">
                <input id="otp" type="text" class="ff-otp-input" name="otp"
                    maxlength="6" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"
                    placeholder="• • • • • •" autofocus required>
                @error('otp')
                    <div class="text-danger mt-2" style="font-size: 13px;">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="ff-2fa-submit">
                <i class="fa-solid fa-check-circle me-2"></i> Verify & Continue
            </button>
        </form>

        <a class="ff-2fa-logout" href="{{ route('logout') }}"
           onclick="event.preventDefault(); document.getElementById('logout-form-2fa').submit();">
            <i class="fa-solid fa-arrow-right-from-bracket me-1"></i> Sign in with a different account
        </a>
        <form id="logout-form-2fa" action="{{ route('logout') }}" method="POST" class="d-none">
            @csrf
        </form>
    </div>
</div>
@endsection