@extends('layouts.app')

@section('content')

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

        body, html {
            width: 100%; min-height: 100vh; margin: 0;
            font-family: 'Montserrat', sans-serif; overflow-x: hidden;
        }

        /* Fundo */
        .animated-background {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #00d2ff);
            background-size: 400% 400%; animation: gradientFlow 15s ease infinite; z-index: -2;
        }
        .particles {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 50px 50px; animation: particleMove 20s linear infinite; z-index: -1;
        }
        @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes particleMove { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } }

        .login-wrapper {
            min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
        }

        .security-card {
            background: rgba(16, 18, 27, 0.75);
            backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(0, 210, 255, 0.2);
            border-radius: 24px; padding: 3rem 2rem; width: 100%; max-width: 500px;
            box-shadow: 0 0 40px rgba(0, 210, 255, 0.15);
            text-align: center; position: relative; overflow: hidden;
        }

        .shield-icon-container {
            width: 80px; height: 80px; margin: 0 auto 1.5rem;
            background: rgba(0, 210, 255, 0.1); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        .shield-icon { font-size: 2.5rem; color: #00d2ff; }

        /* Override para inputs do componente Blade */
        .security-card input[type="text"], .security-card input[type="number"] {
            background: rgba(255,255,255,0.05) !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
            color: #fff !important; text-align: center;
            font-size: 1.5rem !important; /* Tamanho grande para evitar zoom em iOS */
            letter-spacing: 5px;
            border-radius: 12px !important; padding: 15px !important;
            width: 100% !important; max-width: 100% !important; /* Garante que cabe no mobile */
        }
        .security-card input:focus {
            border-color: #00d2ff !important; box-shadow: 0 0 15px rgba(0,210,255,0.3) !important; outline: none;
        }
        .security-card .btn-primary {
            background: linear-gradient(90deg, #00d2ff, #3a7bd5) !important;
            border: none !important; border-radius: 12px !important; padding: 12px 20px !important;
            font-weight: 700 !important; text-transform: uppercase; width: 100%; margin-top: 15px;
        }

        /* Mobile Tweaks */
        @media (max-width: 480px) {
            .security-card { padding: 2rem 1.5rem; }
            .shield-icon-container { width: 60px; height: 60px; }
            .shield-icon { font-size: 1.8rem; }
        }
    </style>

    <div class="animated-background"></div>
    <div class="particles"></div>

    <div class="login-wrapper">
        <div class="security-card">

            <div class="shield-icon-container">
                <i class="fas fa-shield-alt shield-icon"></i>
            </div>

            <h3 style="color: #fff; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem;">Verificação 2FA</h3>

            @if($aviso2fa == 0)
                <p style="color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-bottom: 2rem;">
                    Introduza o código enviado para o seu telemóvel.
                </p>
                <div class="custom-component-wrapper">
                    <x-login2fa.codigo2fa :userId="$userId" :permissao="$permissao" />
                </div>
            @else
                <p class="text-warning">
                    <i class="fas fa-exclamation-triangle mr-1"></i> Ação Necessária
                </p>
                <div class="custom-component-wrapper">
                    <x-login2fa.avisoautorizo2fa :userId="$userId" :aviso2fa="$aviso2fa" />
                </div>
            @endif

        </div>
    </div>

    <script>
        function func_avisoLogin(){
            const btn = document.querySelector('.security-card button[type="submit"]');
            if(btn) {
                btn.innerHTML = '<i class="fas fa-lock mr-2"></i> Validando...';
                btn.disabled = true;
                btn.style.opacity = '0.8';
            }
        }
    </script>

@endsection