@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); } }

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

        .glass-form-card {
            background: rgba(16, 18, 27, 0.7); /* Um pouco mais escuro para leitura */
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 3rem;
            width: 100%; max-width: 450px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
            animation: slideIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative; overflow: hidden;
        }
        @keyframes slideIn { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

        /* Inputs */
        .input-group-modern { position: relative; margin-bottom: 1.5rem; }
        .form-control-modern {
            width: 100%; padding: 15px 15px 15px 45px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
            color: #fff; font-size: 1rem; transition: all 0.3s;
        }
        .form-control-modern:focus {
            background: rgba(255, 255, 255, 0.1); border-color: #00d2ff;
            box-shadow: 0 0 15px rgba(0, 210, 255, 0.3); outline: none;
        }
        .input-icon {
            position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5); font-size: 1.1rem;
        }
        .form-control-modern:focus + .input-icon { color: #00d2ff; }

        /* Botão */
        .btn-neon {
            width: 100%; padding: 15px; border: none; border-radius: 12px;
            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
            color: #fff; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;
            cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
        }
        .btn-neon:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 210, 255, 0.6); }

        /* Mobile Tweaks */
        @media (max-width: 480px) {
            .glass-form-card {
                padding: 2rem 1.5rem; /* Mais espaço lateral no mobile */
            }
            .login-title { font-size: 1.5rem; }
        }

        .invalid-feedback-custom { color: #ff6b6b; font-size: 0.8rem; margin-top: 5px; display: block; }
    </style>

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

    <div class="login-wrapper">
        <div class="glass-form-card">

            <div class="text-center mb-4">
                <img src="/img/logo_quadrada.png" alt="TFuel" style="height: 60px; margin-bottom: 15px;">
                <h2 class="text-white font-weight-bold" style="font-size: 1.8rem; margin-bottom: 0.5rem;">Acesso Seguro</h2>
                <p style="color: rgba(255,255,255,0.6); font-size: 0.9rem;">Área de Colaboradores</p>
            </div>

            <form method="POST" action="{{ route('login') }}" onsubmit="func_avisoLogin()">
                @csrf

                <div class="input-group-modern">
                    <input id="email" type="email" class="form-control-modern" name="email" placeholder="Email Corporativo" required autofocus>
                    <i class="fas fa-envelope input-icon"></i>
                    @error('email') <span class="invalid-feedback-custom"><strong>{{ $message }}</strong></span> @enderror
                </div>

                <div class="input-group-modern">
                    <input id="password" type="password" class="form-control-modern" name="password" placeholder="Palavra-passe" required>
                    <i class="fas fa-lock input-icon"></i>
                    @error('password') <span class="invalid-feedback-custom"><strong>{{ $message }}</strong></span> @enderror
                </div>

                <button id="btn_login" type="submit" class="btn-neon">
                    Entrar
                </button>

                <a href="/" style="display: block; text-align: center; margin-top: 1.5rem; color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.85rem;">
                    <i class="fas fa-arrow-left mr-1"></i> Voltar
                </a>
            </form>
        </div>
    </div>

    <script>
        function func_avisoLogin(){
            const btn = document.getElementById('btn_login');
            btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Validando...';
            btn.style.opacity = '0.8';
            btn.disabled = true;
        }
    </script>

@endsection