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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?php echo e(asset('backend/assets/img/kyamclogo.png')); ?>">

    <!-- For Apple/iOS Devices (Optional) -->
    <link rel="apple-touch-icon" href="<?php echo e(asset('backend/assets/img/kyamclogo.png')); ?>">
    <!-- SEO Optimization -->
    <title>Login | Khwaja Yunus Ali Medical College Journal</title>
    <meta name="description" content="Official login portal for the Khwaja Yunus Ali Medical College (KYAMC) Journal.">

    <!-- Fonts -->
    <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 & Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <style>
        :root {
            --primary-color: #0f172a;
            --accent-color: #2563eb;
            --accent-hover: #1d4ed8;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --border-color: rgba(226, 232, 240, 0.8);
            --input-bg: rgba(248, 250, 252, 0.6);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f1f5f9;
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
        }

        /* Animated Background Elements */
        .bg-shapes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            background: #f8fafc;
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.6;
            animation: float 15s infinite alternate ease-in-out;
        }

        .shape-1 {
            background: #38bdf8;
            width: 400px;
            height: 400px;
            top: -10%;
            left: -10%;
        }

        .shape-2 {
            background: #818cf8;
            width: 500px;
            height: 500px;
            bottom: -20%;
            right: -10%;
            animation-delay: -5s;
        }

        .shape-3 {
            background: #2563eb;
            width: 300px;
            height: 300px;
            top: 40%;
            left: 60%;
            opacity: 0.4;
            animation-delay: -10s;
        }

        @keyframes float {
            0% {
                transform: translate(0, 0) scale(1);
            }

            100% {
                transform: translate(40px, -40px) scale(1.1);
            }
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .login-wrapper {
            width: 100%;
            max-width: 440px;
            z-index: 10;
            position: relative;
            margin-top: 80px;
        }

        /* --------------------------------------
           DETECTIVE MASCOT STYLES & ANIMATIONS
           -------------------------------------- */
        .mascot-container {
            position: absolute;
            top: -125px;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 140px;
            z-index: 20;
            pointer-events: none;
        }

        .detective-svg {
            width: 100%;
            height: 100%;
            transition: all 0.4s ease;
        }

        /* Base Parts Transitions */
        .det-hat,
        .det-head,
        .det-magnifier,
        .det-hand,
        .det-body-wrap {
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
        }

        .det-magnifier {
            opacity: 0;
            transform: translateY(40px) scale(0.5);
        }

        .det-hand-left {
            opacity: 0;
            transform: translate(-20px, 20px);
        }

        /* STATE 1: Investigating (Username/Email Focus) */
        .mascot-container.investigate .det-magnifier {
            opacity: 1;
            /* Y-axis set to 0, X-axis controlled by JS based on typing length */
            transform: translate(0px, 0px) scale(1);
        }

        .mascot-container.investigate .det-head {
            transform: translate(-10px, 5px) rotate(-5deg);
            /* Leans in slightly */
        }

        .mascot-container.investigate .det-hat {
            transform: translate(-10px, 5px) rotate(-5deg);
        }

        /* STATE 2: Hiding Eyes (Password Focus) */
        .mascot-container.hide-eyes .det-hat {
            transform: translateY(22px) rotate(5deg);
            /* Hat pulls way down */
        }

        .mascot-container.hide-eyes .det-hand-left {
            opacity: 1;
            transform: translate(25px, -35px);
            /* Hand goes up to the hat */
        }

        .mascot-container.hide-eyes .det-body-wrap {
            transform: translateX(10px);
            /* Body turns away slightly */
        }

        /* STATE 3: Peeking (Show Password) */
        .mascot-container.peek-eyes .det-hat {
            transform: translate(-5px, 8px) rotate(-15deg);
            /* Lifts hat on one side */
        }

        .mascot-container.peek-eyes .det-hand-left {
            opacity: 1;
            transform: translate(20px, -20px);
        }

        /* Glassmorphism Card */
        .login-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
            position: relative;
            animation: fadeUp 0.7s ease-out forwards;
            z-index: 15;
        }

        .login-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8);
            background-size: 200% 200%;
            animation: gradientMove 4s ease infinite;
        }

        @keyframes gradientMove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .login-body {
            padding: 40px 40px 32px;
        }

        .animate-item {
            opacity: 0;
            animation: fadeUp 0.6s ease-out forwards;
        }

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.2s;
        }

        .delay-3 {
            animation-delay: 0.3s;
        }

        .delay-4 {
            animation-delay: 0.4s;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
        }

        .brand-logo img {
            height: 40px;
            margin-right: 12px;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
        }

        .login-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 6px;
            text-align: center;
        }

        .login-subtitle {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 32px;
            text-align: center;
        }

        /* Form Inputs */
        .form-floating>.form-control {
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            background-color: var(--input-bg);
            transition: all 0.3s ease;
        }

        .form-floating>.form-control:focus {
            background-color: #ffffff;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
        }

        .form-floating>label {
            color: var(--text-muted);
            padding-left: 16px;
        }

        .password-wrapper {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #94a3b8;
            border: none;
            background: none;
            padding: 0;
            z-index: 5;
            transition: color 0.2s ease;
        }

        .toggle-password:hover {
            color: var(--accent-color);
        }

        /* Buttons & Footer */
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-color) 0%, #1e40af 100%);
            border: none;
            padding: 14px 16px;
            font-size: 1.05rem;
            font-weight: 600;
            border-radius: 12px;
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 8px 16px -4px rgba(37, 99, 235, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -4px rgba(37, 99, 235, 0.4);
        }

        .form-check-input {
            cursor: pointer;
            border-radius: 6px;
            border: 2px solid #cbd5e1;
            transition: all 0.2s ease;
        }

        .form-check-input:checked {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
        }

        .forgot-link {
            font-size: 0.875rem;
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 600;
        }

        .login-footer {
            padding: 24px 40px;
            background-color: rgba(248, 250, 252, 0.7);
            border-top: 1px solid rgba(226, 232, 240, 0.8);
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-muted);
            backdrop-filter: blur(10px);
        }

        .login-footer a {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 600;
        }
    </style>
</head>

<body>

    <div class="bg-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
    </div>

    <div class="login-wrapper">

        <!-- Suspicious Detective Mascot -->
        <div class="mascot-container" id="detectiveContainer">
            <svg class="detective-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <!-- Body Wrap (Rotates when hiding) -->
                <g class="det-body-wrap">
                    <!-- Trench Coat Collar & Shoulders -->
                    <path d="M 40,200 L 60,130 C 60,110 140,110 140,130 L 160,200 Z" fill="#d4a373" stroke="#b07d47"
                        stroke-width="3" />
                    <path d="M 80,125 L 100,160 L 120,125" fill="#fef08a" stroke="#b07d47" stroke-width="2" />
                    <!-- Shirt/Tie area -->
                    <path d="M 100,160 L 100,200" stroke="#b07d47" stroke-width="2" />
                </g>

                <!-- Head -->
                <g class="det-head">
                    <circle cx="100" cy="95" r="35" fill="#ffedd5" />
                    <!-- Suspicious Eyes -->
                    <line x1="75" y1="90" x2="90" y2="95" stroke="#333" stroke-width="3" stroke-linecap="round" />
                    <circle cx="85" cy="98" r="3" fill="#333" />

                    <line x1="125" y1="90" x2="110" y2="95" stroke="#333" stroke-width="3" stroke-linecap="round" />
                    <circle cx="115" cy="98" r="3" fill="#333" />

                    <!-- Mustache -->
                    <path d="M 85,115 Q 100,110 115,115 Q 100,122 85,115 Z" fill="#475569" />
                </g>

                <!-- Fedora Hat -->
                <g class="det-hat">
                    <!-- Back of Brim -->
                    <ellipse cx="100" cy="75" rx="55" ry="12" fill="#334155" />
                    <!-- Crown -->
                    <path d="M 65,75 C 65,30 135,30 135,75 Z" fill="#475569" />
                    <!-- Hat Band -->
                    <path d="M 65,70 C 65,85 135,85 135,70 L 135,75 C 135,90 65,90 65,75 Z" fill="#0f172a" />
                    <!-- Front Brim -->
                    <path d="M 45,75 C 45,90 155,90 155,75 C 155,80 100,95 45,75 Z" fill="#1e293b" />
                </g>

                <!-- Magnifying Glass (Starts hidden/down) -->
                <g class="det-magnifier" id="magnifierGroup">
                    <line x1="100" y1="125" x2="120" y2="155" stroke="#78350f" stroke-width="8"
                        stroke-linecap="round" />
                    <circle cx="90" cy="110" r="22" fill="rgba(255, 255, 255, 0.4)" stroke="#94a3b8" stroke-width="6" />
                    <circle cx="90" cy="110" r="18" fill="rgba(186, 230, 253, 0.3)" />
                    <line x1="80" y1="100" x2="95" y2="105" stroke="rgba(255,255,255,0.8)" stroke-width="3"
                        stroke-linecap="round" />
                </g>

                <!-- Left Hand (Used to pull hat down) -->
                <g class="det-hand det-hand-left">
                    <ellipse cx="65" cy="120" rx="12" ry="16" fill="#d4a373" stroke="#b07d47" stroke-width="2" />
                    <circle cx="65" cy="110" r="10" fill="#ffedd5" />
                </g>
            </svg>
        </div>

        <div class="login-card">
            <div class="login-body">
                <!-- Branding -->
                <div class="animate-item delay-1">
                    <a href="<?php echo e(url('/')); ?>" class="brand-logo">
                        <img src="<?php echo e(asset('backend/assets/img/kyamclogo.png')); ?>" alt="Logo">
                        KYAMC Journal
                    </a>
                    <h1 class="login-title">Welcome Back</h1>
                    <p class="login-subtitle">Sign in to your scholarly dashboard</p>
                </div>

                <!-- Form -->
                <form method="POST" action="<?php echo e(route('login')); ?>" id="loginForm" class="animate-item delay-2">
                    <?php echo csrf_field(); ?>

                    <!-- Email/Username -->
                    <div class="form-floating mb-4">
                        <input type="text" id="email" name="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); ?>" value="<?php echo e(old('email')); ?>"
                            required autofocus placeholder="Email or Username" autocomplete="off">
                        <label for="email"><i class="fa-regular fa-user me-2 text-muted"></i>Email or Username</label>
                    </div>

                    <!-- Password -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-end mb-2 px-1">
                            <?php if(Route::has('password.request')): ?>
                                <a href="<?php echo e(route('password.request')); ?>" class="forgot-link" tabindex="-1">Forgot
                                    password?</a>
                            <?php endif; ?>
                        </div>
                        <div class="password-wrapper form-floating">
                            <input type="password" id="password" name="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); ?>" required
                                placeholder="Password">
                            <label for="password"><i class="fa-solid fa-lock me-2 text-muted"></i>Password</label>

                            <button type="button" class="toggle-password" id="togglePassword" tabindex="-1">
                                <i class="fa-regular fa-eye" id="eyeIcon"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-4 form-check d-flex align-items-center animate-item delay-3 px-1">
                        <input type="checkbox" class="form-check-input mt-0" name="remember" id="remember">
                        <label class="form-check-label ms-2" for="remember">Keep me signed in</label>
                    </div>

                    <div class="d-grid mt-2 animate-item delay-4">
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <span id="btnText">Sign In</span>
                            <i class="fa-solid fa-arrow-right-to-bracket ms-1" id="btnIcon"></i>
                        </button>
                    </div>
                </form>
            </div>

            <div class="login-footer">
                <?php if(Route::has('register')): ?>
                    Don't have an account? <a href="<?php echo e(route('register')); ?>">Register as Author</a>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        const emailInput = document.getElementById('email');
        const passwordInput = document.getElementById('password');
        const togglePassword = document.getElementById('togglePassword');
        const eyeIcon = document.getElementById('eyeIcon');
        const detective = document.getElementById('detectiveContainer');
        const magnifierGroup = document.getElementById('magnifierGroup');

        // 1. Username Focus -> Investigate Mode
        emailInput.addEventListener('focus', () => {
            detective.className = 'mascot-container investigate';
            updateMagnifierPosition(); // Set initial position
        });

        emailInput.addEventListener('blur', () => {
            detective.className = 'mascot-container';
            magnifierGroup.style.transform = `translate(0px, 40px) scale(0.5)`; // reset
        });

        // Track typing to move the magnifying glass
        emailInput.addEventListener('input', updateMagnifierPosition);

        function updateMagnifierPosition() {
            if (detective.classList.contains('investigate')) {
                const len = emailInput.value.length;
                // Move glass right based on text length (max 50px)
                const moveX = Math.min(len * 2.5, 50);
                // Also slight Y movement to look natural
                const moveY = Math.sin(len * 0.5) * 5;
                magnifierGroup.style.transform = `translate(${moveX}px, ${moveY}px) scale(1)`;
            }
        }

        // 2. Password Focus -> Hide Eyes
        passwordInput.addEventListener('focus', () => {
            if (passwordInput.type === 'password') {
                detective.className = 'mascot-container hide-eyes';
            } else {
                detective.className = 'mascot-container peek-eyes';
            }
        });

        passwordInput.addEventListener('blur', () => {
            detective.className = 'mascot-container';
        });

        // 3. Toggle Password -> Peeking
        togglePassword.addEventListener('click', function (e) {
            e.preventDefault();
            passwordInput.focus();

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
                detective.className = 'mascot-container peek-eyes';
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
                detective.className = 'mascot-container hide-eyes';
            }
        });

        // Button Loading State
        document.getElementById('loginForm').addEventListener('submit', function () {
            const btn = document.getElementById('submitBtn');
            btn.disabled = true;
            document.getElementById('btnText').textContent = 'Authenticating...';
            document.getElementById('btnIcon').className = 'fa-solid fa-circle-notch fa-spin ms-1';
        });
    </script>
</body>

</html><?php /**PATH I:\laragon\www\kyamchjournal\resources\views/auth/login.blade.php ENDPATH**/ ?>