<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Sign In · <?php echo e(setting('site_name', '360Monica')); ?></title>
    <?php if(setting('favicon')): ?>
        <link rel="icon" href="<?php echo e(public_asset_url(setting('favicon'))); ?>">
    <?php endif; ?>
    <script>
        if (localStorage.getItem('darkMode') === 'true' || (!localStorage.getItem('darkMode') && matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50: '#eaf6f4',
                            100: '#d5efeb',
                            500: '#2ca58d',
                            600: '#21937a',
                            700: '#1d826c',
                        }
                    },
                    boxShadow: {
                        soft: '0 1px 2px rgba(15,23,42,.04), 0 8px 30px rgba(15,23,42,.05)'
                    }
                }
            }
        };
    </script>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white min-h-full flex items-center justify-center transition-colors duration-150 p-4">
    <!-- Background Decorator -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none z-0">
        <div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-brand-500/10 blur-[120px]"></div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-brand-600/10 blur-[120px]"></div>
    </div>

    <!-- Main Container -->
    <div class="w-full max-w-[440px] z-10">
        <!-- Logo & Branding -->
        <div class="flex flex-col items-center mb-8">
            <?php
                $siteLogo = setting('site_logo');
                $siteName = setting('site_name', '360Monica');
            ?>
            <?php if($siteLogo): ?>
                <img class="h-12 w-auto mb-3 object-contain dark:invert transition duration-150" src="<?php echo e(public_asset_url($siteLogo)); ?>" alt="<?php echo e($siteName); ?>">
            <?php else: ?>
                <div class="h-12 w-12 rounded-2xl bg-[#2ca58d] flex items-center justify-center mb-3 shadow-md">
                    <i class="bi bi-shield-lock text-white text-2xl"></i>
                </div>
            <?php endif; ?>
            <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
                <?php echo e($siteName); ?> Admin
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                Please sign in to your dashboard account
            </p>
        </div>

        <!-- Alert Notification -->
        <?php if($errors->any()): ?>
            <div class="bg-rose-50 text-rose-700 border border-rose-200 dark:bg-rose-950/20 dark:text-rose-400 dark:border-rose-900/30 rounded-2xl p-4 mb-6 shadow-sm flex items-start gap-3">
                <i class="bi bi-exclamation-triangle-fill text-lg mt-0.5 flex-shrink-0"></i>
                <div class="text-sm font-medium">
                    <ul class="list-disc pl-4 space-y-1">
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li><?php echo e($error); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            </div>
        <?php endif; ?>

        <?php if(session('error')): ?>
            <div class="bg-rose-50 text-rose-700 border border-rose-200 dark:bg-rose-950/20 dark:text-rose-400 dark:border-rose-900/30 rounded-2xl p-4 mb-6 shadow-sm flex items-start gap-3">
                <i class="bi bi-exclamation-circle text-lg mt-0.5 flex-shrink-0"></i>
                <div class="text-sm font-medium"><?php echo e(session('error')); ?></div>
            </div>
        <?php endif; ?>

        <?php if(session('status')): ?>
            <div class="bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/20 dark:text-emerald-400 dark:border-emerald-900/30 rounded-2xl p-4 mb-6 shadow-sm flex items-start gap-3">
                <i class="bi bi-check-circle-fill text-lg mt-0.5 flex-shrink-0"></i>
                <div class="text-sm font-medium"><?php echo e(session('status')); ?></div>
            </div>
        <?php endif; ?>

        <!-- Card Container -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 rounded-2xl shadow-soft p-8">
            <form method="POST" action="<?php echo e(route('admin.login')); ?>" class="space-y-6">
                <?php echo csrf_field(); ?>

                <!-- Email Input -->
                <div class="space-y-2">
                    <label for="email" class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 block">
                        Email Address
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400 dark:text-slate-500 pointer-events-none">
                            <i class="bi bi-envelope"></i>
                        </span>
                        <input id="email" type="email" name="email" value="<?php echo e(old('email')); ?>" required autofocus
                            placeholder="admin@example.com"
                            class="w-full h-12 pl-10 pr-4 bg-slate-50/50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 rounded-xl text-sm font-medium transition duration-150 outline-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600">
                    </div>
                </div>

                <!-- Password Input -->
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <label for="password" class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 block">
                            Password
                        </label>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400 dark:text-slate-500 pointer-events-none">
                            <i class="bi bi-lock"></i>
                        </span>
                        <input id="password" type="password" name="password" required
                            placeholder="••••••••"
                            class="w-full h-12 pl-10 pr-10 bg-slate-50/50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 rounded-xl text-sm font-medium transition duration-150 outline-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600">
                        <button type="button" onclick="togglePasswordVisibility()" class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition duration-150">
                            <i id="toggle-icon" class="bi bi-eye"></i>
                        </button>
                    </div>
                </div>

                <!-- Remember Me -->
                <div class="flex items-center">
                    <input id="remember_me" type="checkbox" name="remember"
                        class="h-4 w-4 rounded border-slate-300 text-[#2ca58d] focus:ring-brand-500/30 transition duration-150">
                    <label for="remember_me" class="ml-2.5 text-sm font-medium text-slate-600 dark:text-slate-400 select-none">
                        Remember session
                    </label>
                </div>

                <!-- Submit Button -->
                <button type="submit"
                    class="w-full h-12 bg-[#2ca58d] hover:bg-[#21937a] text-white font-semibold text-sm rounded-xl shadow-sm hover:shadow transition duration-150 flex items-center justify-center gap-2 hover:-translate-y-px active:translate-y-0 outline-none focus:ring-2 focus:ring-brand-500/50">
                    <span>Sign In</span>
                    <i class="bi bi-arrow-right-short text-lg"></i>
                </button>
            </form>
        </div>

        <!-- Footer / Theme Toggle -->
        <div class="flex items-center justify-between mt-8 text-xs text-slate-400 dark:text-slate-600 font-medium px-2">
            <span>&copy; <?php echo e(date('Y')); ?> <?php echo e($siteName); ?>. All rights reserved.</span>
            <button onclick="toggleTheme()" class="flex items-center gap-1.5 hover:text-slate-600 dark:hover:text-slate-400 transition duration-150">
                <i id="theme-btn-icon" class="bi bi-sun"></i>
                <span id="theme-btn-text">Light Mode</span>
            </button>
        </div>
    </div>

    <!-- Password visibility & Theme toggle Scripts -->
    <script>
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.getElementById('toggle-icon');
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('bi-eye');
                toggleIcon.classList.add('bi-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('bi-eye-slash');
                toggleIcon.classList.add('bi-eye');
            }
        }

        function updateThemeButton() {
            const isDark = document.documentElement.classList.contains('dark');
            const icon = document.getElementById('theme-btn-icon');
            const text = document.getElementById('theme-btn-text');
            if (isDark) {
                icon.className = 'bi bi-sun';
                text.innerText = 'Light Mode';
            } else {
                icon.className = 'bi bi-moon-stars';
                text.innerText = 'Dark Mode';
            }
        }

        function toggleTheme() {
            const html = document.documentElement;
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('darkMode', 'false');
            } else {
                html.classList.add('dark');
                localStorage.setItem('darkMode', 'true');
            }
            updateThemeButton();
        }

        // Run once on load to sync button labels
        updateThemeButton();
    </script>
</body>
</html>
<?php /**PATH /Users/mac/Documents/e-com/resources/views/admin/auth/login.blade.php ENDPATH**/ ?>