<div class="auth-card">

    <!-- Brand -->
    <div class="auth-brand">
        <?php
        $__logo = \Core\Database::getInstance()->fetchValue("SELECT value FROM settings WHERE key_name='restaurant_logo'");
        ?>
        <?php if ($__logo): ?>
        <img src="<?= e(upload_url($__logo)) ?>" alt="Logo"
             style="width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;">
        <?php else: ?>
        <div class="icon">🍕</div>
        <?php endif; ?>
        <div>
            <div class="name"><?= e(APP_NAME) ?></div>
            <div class="sub">Restaurant Management Panel</div>
        </div>
    </div>

    <h4 class="fw-700 mb-1">Welcome back</h4>
    <p class="text-secondary mb-4" style="font-size:.85rem;">Sign in to your admin account</p>

    <!-- Flash -->
    <?= flash_alert() ?>

    <!-- Form -->
    <form action="<?= url('auth/login') ?>" method="POST" class="fd-form" novalidate>
        <?= csrf_field() ?>

        <div class="mb-3">
            <label class="form-label" for="email">Email Address</label>
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0" style="border-radius:8px 0 0 8px;">
                    <i class="bi bi-envelope text-secondary"></i>
                </span>
                <input
                    type="email"
                    id="email"
                    name="email"
                    class="form-control border-start-0 ps-0"
                    placeholder="admin@restaurant.com"
                    value="<?= e(\Core\Request::post('email', '')) ?>"
                    autocomplete="email"
                    required
                    style="border-radius:0 8px 8px 0;"
                >
            </div>
        </div>

        <div class="mb-3">
            <div class="d-flex justify-content-between align-items-center">
                <label class="form-label mb-0" for="password">Password</label>
            </div>
            <div class="input-group mt-1">
                <span class="input-group-text bg-white border-end-0" style="border-radius:8px 0 0 8px;">
                    <i class="bi bi-lock text-secondary"></i>
                </span>
                <input
                    type="password"
                    id="password"
                    name="password"
                    class="form-control border-start-0 border-end-0 ps-0"
                    placeholder="••••••••"
                    autocomplete="current-password"
                    required
                    style="border-radius:0;"
                >
                <button type="button" class="input-group-text bg-white" id="togglePwd" style="border-radius:0 8px 8px 0; cursor:pointer;">
                    <i class="bi bi-eye text-secondary" id="togglePwdIcon"></i>
                </button>
            </div>
        </div>

        <div class="mb-4 d-flex align-items-center justify-content-between">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="remember" id="remember" value="1">
                <label class="form-check-label text-secondary" for="remember" style="font-size:.83rem;">
                    Remember me for 30 days
                </label>
            </div>
        </div>

        <button type="submit" class="btn btn-accent w-100 py-2 fs-6">
            <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
        </button>
    </form>

    <div style="display:flex;flex-direction:column;gap:10px;margin-top:20px;">
        <div style="display:flex;align-items:center;gap:10px;color:#adb5bd;font-size:.75rem;">
            <span style="flex:1;height:1px;background:#e9ecef;"></span>
            <span>or</span>
            <span style="flex:1;height:1px;background:#e9ecef;"></span>
        </div>
        <a href="<?= url('shop/register') ?>"
           style="display:flex;align-items:center;justify-content:center;gap:8px;
                  padding:11px;border:1.5px solid var(--accent);border-radius:10px;
                  color:var(--accent);font-weight:700;font-size:.88rem;text-decoration:none;
                  transition:all .15s;"
           onmouseover="this.style.background='#fff7ed'" onmouseout="this.style.background='transparent'">
            <i class="bi bi-person-plus-fill"></i> Create Account
        </a>
        <a href="<?= url('shop/menu') ?>"
           style="display:flex;align-items:center;justify-content:center;gap:8px;
                  padding:11px;border:1.5px solid #dee2e6;border-radius:10px;
                  color:#6c757d;font-weight:600;font-size:.88rem;text-decoration:none;
                  transition:all .15s;"
           onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
            <i class="bi bi-bag"></i> Order as a Guest
        </a>
    </div>

    <p class="text-center text-secondary mt-4 mb-0" style="font-size:.78rem;">
        &copy; <?= date('Y') ?> <?= e(APP_NAME) ?>. All rights reserved.
    </p>
</div>

<script>
document.getElementById('togglePwd').addEventListener('click', function () {
    const input = document.getElementById('password');
    const icon  = document.getElementById('togglePwdIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'bi bi-eye-slash text-secondary';
    } else {
        input.type = 'password';
        icon.className = 'bi bi-eye text-secondary';
    }
});
</script>
