<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Login — SINAGEM</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">

    <style>
        /* ============================================================
           SINAGEM — Login Page v3.0
           Bootstrap 5 + Bootstrap Icons
           ============================================================ */

        :root {
            --sin-red:          #e03030;
            --sin-red-dark:     #c02020;
            --sin-red-light:    #f05050;
            --sin-red-subtle:   rgba(224, 48, 48, 0.08);
            --sin-red-glow:     rgba(224, 48, 48, 0.18);
            --sin-dark:         #0f0f1a;
            --sin-dark-2:       #1a1a2e;
            --sin-dark-3:       #242438;
            --sin-border:       rgba(255,255,255,0.08);
            --sin-border-light: rgba(255,255,255,0.14);
            --sin-text:         #f1f5f9;
            --sin-text-sub:     rgba(241,245,249,0.65);
            --sin-text-muted:   rgba(241,245,249,0.4);
            --sin-font:         'DM Sans', system-ui, sans-serif;
            --sin-font-mono:    'DM Mono', monospace;
        }

        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        body {
            font-family: var(--sin-font);
            background-color: var(--sin-dark);
            color: var(--sin-text);
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* ── Background ──────────────────────────────────── */
        .login-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
        }

        /* Background image with overlay */
        .login-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('{{ asset("assets/images/bg-login.jpg") }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.12;
        }

        /* Radial vignette */
        .login-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse 80% 80% at 50% 50%,
                transparent 30%,
                rgba(15,15,26,0.7) 100%
            );
        }

        /* Animated mesh grid */
        .login-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        /* Red ambient blobs */
        .login-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.25;
            animation: blob-drift 12s ease-in-out infinite alternate;
        }

        .login-blob-1 {
            width: 420px;
            height: 420px;
            background: var(--sin-red);
            top: -10%;
            right: -5%;
            animation-delay: 0s;
        }

        .login-blob-2 {
            width: 300px;
            height: 300px;
            background: var(--sin-red-dark);
            bottom: -5%;
            left: -5%;
            animation-delay: -6s;
        }

        @keyframes blob-drift {
            from { transform: translate(0, 0) scale(1); }
            to   { transform: translate(20px, 20px) scale(1.08); }
        }

        /* ── Layout ──────────────────────────────────────── */
        .login-container {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }

        /* ── Card ────────────────────────────────────────── */
        .login-card {
            width: 100%;
            max-width: 440px;
            background: rgba(26, 26, 46, 0.75);
            border: 1px solid var(--sin-border-light);
            border-radius: 24px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow:
                0 0 0 1px rgba(255,255,255,0.04),
                0 32px 64px -16px rgba(0,0,0,0.6),
                0 0 80px -20px var(--sin-red-glow);
            animation: card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
            overflow: hidden;
        }

        @keyframes card-in {
            from { opacity: 0; transform: translateY(24px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ── Header ──────────────────────────────────────── */
        .login-header {
            padding: 2.25rem 2rem 1.75rem;
            text-align: center;
            border-bottom: 1px solid var(--sin-border);
            position: relative;
        }

        .login-header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: var(--sin-red);
            border-radius: 2px;
        }

        .login-logo-wrap {
            width: 68px;
            height: 68px;
            background: linear-gradient(135deg, var(--sin-red) 0%, var(--sin-red-dark) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.125rem;
            box-shadow: 0 8px 24px var(--sin-red-glow), 0 0 0 1px rgba(255,255,255,0.1);
            animation: logo-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        }

        @keyframes logo-in {
            from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
            to   { opacity: 1; transform: scale(1) rotate(0deg); }
        }

        .login-logo-wrap i {
            font-size: 2rem;
            color: #fff;
        }

        .login-brand {
            font-size: 1.625rem;
            font-weight: 800;
            color: var(--sin-text);
            letter-spacing: -0.5px;
            line-height: 1.1;
            margin-bottom: 0.3rem;
        }

        .login-tagline {
            font-size: 0.72rem;
            color: var(--sin-text-muted);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-weight: 500;
        }

        /* ── Body ────────────────────────────────────────── */
        .login-body {
            padding: 2rem 2rem 1.75rem;
        }

        /* Section label */
        .login-section-label {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            margin-bottom: 1.75rem;
        }

        .login-section-label::before,
        .login-section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--sin-border-light);
        }

        .login-section-label span {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--sin-text-muted);
            white-space: nowrap;
        }

        /* ── Error alert ─────────────────────────────────── */
        .sin-alert {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            font-size: 0.8125rem;
            border: 1px solid;
            animation: alert-in 0.3s ease both;
        }

        @keyframes alert-in {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .sin-alert-danger {
            background: rgba(224, 48, 48, 0.1);
            border-color: rgba(224, 48, 48, 0.3);
            color: #fca5a5;
        }

        .sin-alert-danger strong {
            color: #fca5a5;
            font-weight: 600;
        }

        .sin-alert i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .sin-alert ul {
            margin: 0.25rem 0 0;
            padding-left: 1.125rem;
            list-style: disc;
        }

        .sin-alert li {
            margin-top: 2px;
        }

        /* ── Form fields ─────────────────────────────────── */
        .sin-form-group {
            margin-bottom: 1.25rem;
        }

        .sin-label {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--sin-text-sub);
            margin-bottom: 0.5rem;
        }

        .sin-label i {
            color: var(--sin-red);
            font-size: 0.8rem;
        }

        .sin-input-wrap {
            position: relative;
        }

        .sin-input-wrap .sin-input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--sin-text-muted);
            font-size: 0.95rem;
            pointer-events: none;
            transition: color 0.2s;
            z-index: 2;
        }

        .sin-input-wrap .sin-input-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--sin-text-muted);
            font-size: 0.95rem;
            cursor: pointer;
            background: none;
            border: none;
            padding: 2px 4px;
            transition: color 0.2s;
            z-index: 2;
        }

        .sin-input-wrap .sin-input-toggle:hover {
            color: var(--sin-text);
        }

        .sin-input {
            width: 100%;
            padding: 0.8125rem 1rem 0.8125rem 2.75rem;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--sin-border-light);
            border-radius: 12px;
            color: var(--sin-text);
            font-size: 0.9rem;
            font-family: var(--sin-font);
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            outline: none;
        }

        .sin-input::placeholder {
            color: var(--sin-text-muted);
        }

        .sin-input:hover {
            border-color: var(--sin-border-light);
            background: rgba(255,255,255,0.07);
        }

        .sin-input:focus {
            border-color: var(--sin-red);
            box-shadow: 0 0 0 3px var(--sin-red-subtle);
            background: rgba(255,255,255,0.06);
        }

        /* Bootstrap is-invalid compat */
        .sin-input.is-invalid {
            border-color: var(--sin-red);
            background: rgba(224,48,48,0.06);
        }

        .sin-input-wrap:focus-within .sin-input-icon {
            color: var(--sin-red);
        }

        /* Password field has extra right padding for toggle */
        .sin-input.has-toggle {
            padding-right: 2.75rem;
        }

        /* ── Options row ─────────────────────────────────── */
        .sin-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.625rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .sin-check {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }

        .sin-check-input {
            width: 16px;
            height: 16px;
            accent-color: var(--sin-red);
            cursor: pointer;
            border-radius: 4px;
        }

        .sin-check-label {
            font-size: 0.8rem;
            color: var(--sin-text-sub);
            cursor: pointer;
            user-select: none;
        }

        .sin-forgot {
            font-size: 0.8rem;
            color: var(--sin-red-light);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .sin-forgot:hover {
            color: #fff;
            text-decoration: underline;
        }

        /* ── Submit button ───────────────────────────────── */
        .sin-btn-login {
            width: 100%;
            padding: 0.9375rem;
            background: linear-gradient(135deg, var(--sin-red) 0%, var(--sin-red-dark) 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 0.875rem;
            font-weight: 700;
            font-family: var(--sin-font);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
            box-shadow: 0 4px 16px var(--sin-red-glow);
            position: relative;
            overflow: hidden;
        }

        .sin-btn-login::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .sin-btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px var(--sin-red-glow);
            filter: brightness(1.06);
        }

        .sin-btn-login:hover::before {
            opacity: 1;
        }

        .sin-btn-login:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px var(--sin-red-glow);
        }

        /* Loading state */
        .sin-btn-login.loading .btn-text { display: none; }
        .sin-btn-login .btn-spinner { display: none; }
        .sin-btn-login.loading .btn-spinner { display: flex; align-items: center; gap: 8px; }

        /* ── Footer ──────────────────────────────────────── */
        .login-footer {
            padding: 1rem 2rem;
            border-top: 1px solid var(--sin-border);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.7rem;
            color: var(--sin-text-muted);
            letter-spacing: 0.3px;
        }

        .login-footer i {
            color: var(--sin-red);
            font-size: 0.75rem;
        }

        .login-footer strong {
            color: var(--sin-text-sub);
            font-weight: 600;
        }

        /* ── Version badge ───────────────────────────────── */
        .sin-version {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255,255,255,0.06);
            border: 1px solid var(--sin-border-light);
            border-radius: 20px;
            padding: 2px 8px;
            font-size: 0.65rem;
            font-family: var(--sin-font-mono);
            color: var(--sin-text-muted);
            letter-spacing: 0.5px;
        }

        /* ── Responsive ──────────────────────────────────── */
        @media (max-width: 480px) {
            .login-body    { padding: 1.5rem 1.25rem 1.375rem; }
            .login-header  { padding: 1.75rem 1.25rem 1.375rem; }
            .login-footer  { padding: 0.875rem 1.25rem; }
            .login-card    { border-radius: 18px; }
            .sin-options   { flex-direction: column; align-items: flex-start; }
        }
    </style>
</head>
<body>

    {{-- Background layer --}}
    <div class="login-bg" aria-hidden="true">
        <div class="login-grid"></div>
        <div class="login-blob login-blob-1"></div>
        <div class="login-blob login-blob-2"></div>
    </div>

    <main class="login-container">
        <div class="login-card" role="main">

            {{-- Header --}}
            <div class="login-header">
                <div class="login-logo-wrap" aria-hidden="true">
                    <i class="bi bi-building-fill"></i>
                </div>
                <h1 class="login-brand">SINAGEM</h1>
                <p class="login-tagline">Sistema Nacional de Gestão de Mercados</p>
            </div>

            {{-- Body --}}
            <div class="login-body">

                <div class="login-section-label" aria-hidden="true">
                    <span>Acesso Restrito</span>
                </div>

                {{-- Error messages --}}
                @if($errors->any())
                    <div class="sin-alert sin-alert-danger" role="alert" aria-live="polite">
                        <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                        <div>
                            <strong>Erro ao autenticar</strong>
                            <ul class="mb-0 mt-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                {{-- Login form --}}
                <form method="POST" action="{{ route('login') }}" novalidate id="login-form">
                    @csrf

                    {{-- Email --}}
                    <div class="sin-form-group">
                        <label class="sin-label" for="email">
                            <i class="bi bi-envelope" aria-hidden="true"></i>
                            E-mail
                        </label>
                        <div class="sin-input-wrap">
                            <i class="bi bi-envelope sin-input-icon" aria-hidden="true"></i>
                            <input
                                type="email"
                                id="email"
                                name="email"
                                class="sin-input @error('email') is-invalid @enderror"
                                value="{{ old('email') }}"
                                placeholder="seu@email.com"
                                autocomplete="email"
                                autocapitalize="none"
                                spellcheck="false"
                                required
                                aria-required="true"
                                aria-describedby="@error('email') email-error @enderror"
                            >
                        </div>
                        @error('email')
                            <div id="email-error" class="sin-field-error mt-1" role="alert">
                                <i class="bi bi-exclamation-circle"></i> {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Password --}}
                    <div class="sin-form-group">
                        <label class="sin-label" for="password">
                            <i class="bi bi-lock" aria-hidden="true"></i>
                            Senha
                        </label>
                        <div class="sin-input-wrap">
                            <i class="bi bi-lock sin-input-icon" aria-hidden="true"></i>
                            <input
                                type="password"
                                id="password"
                                name="password"
                                class="sin-input has-toggle @error('password') is-invalid @enderror"
                                placeholder="••••••••"
                                autocomplete="current-password"
                                required
                                aria-required="true"
                            >
                            <button
                                type="button"
                                class="sin-input-toggle"
                                id="toggle-password"
                                aria-label="Mostrar/ocultar senha"
                                tabindex="-1"
                            >
                                <i class="bi bi-eye" id="toggle-icon"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Options --}}
                    <div class="sin-options">
                        <label class="sin-check">
                            <input
                                type="checkbox"
                                id="remember"
                                name="remember"
                                class="sin-check-input"
                                {{ old('remember') ? 'checked' : '' }}
                            >
                            <span class="sin-check-label">Lembrar-me</span>
                        </label>
                        <a href="{{ route('password.request') }}" class="sin-forgot">
                            Esqueceu a senha?
                        </a>
                    </div>

                    {{-- Submit --}}
                    <button type="submit" class="sin-btn-login" id="btn-login">
                        <span class="btn-text">
                            <i class="bi bi-box-arrow-in-right" aria-hidden="true"></i>
                            Entrar
                        </span>
                        <span class="btn-spinner" aria-hidden="true">
                            <span class="spinner-border spinner-border-sm" role="status"></span>
                            A autenticar…
                        </span>
                    </button>

                </form>
            </div>

            {{-- Footer --}}
            <footer class="login-footer">
                <i class="bi bi-shield-check" aria-hidden="true"></i>
                <span>Ambiente seguro</span>
                <span aria-hidden="true">•</span>
                <strong>SINAGEM</strong>
                <span class="sin-version">v2.0</span>
            </footer>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // ── Password visibility toggle ───────────────────────
        const toggleBtn  = document.getElementById('toggle-password');
        const passInput  = document.getElementById('password');
        const toggleIcon = document.getElementById('toggle-icon');

        if (toggleBtn && passInput) {
            toggleBtn.addEventListener('click', () => {
                const isHidden = passInput.type === 'password';
                passInput.type = isHidden ? 'text' : 'password';
                toggleIcon.className = isHidden ? 'bi bi-eye-slash' : 'bi bi-eye';
                passInput.focus();
            });
        }

        // ── Submit loading state ─────────────────────────────
        const loginForm = document.getElementById('login-form');
        const loginBtn  = document.getElementById('btn-login');

        if (loginForm && loginBtn) {
            loginForm.addEventListener('submit', (e) => {
                // Only activate loading if form is natively valid
                if (loginForm.checkValidity()) {
                    loginBtn.classList.add('loading');
                    loginBtn.disabled = true;
                }
            });
        }

        // ── Auto-focus email (skip if already has value) ─────
        const emailInput = document.getElementById('email');
        if (emailInput && !emailInput.value) {
            emailInput.focus();
        } else if (emailInput && emailInput.value) {
            document.getElementById('password')?.focus();
        }
    </script>
</body>
</html>
