<?php
require_once 'auth.php';
restore_login_from_cookie();


if (!function_exists('e')) {
    function e($value) {
        return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
    }
}

if (isset($_SESSION['user_id'])) {
    if (($_SESSION['role'] ?? '') === 'admin') {
        header("Location: admin/index.php");
    } else {
        header("Location: officer_dashboard.php");
    }
    exit();
}

$error = $_SESSION['error'] ?? '';
unset($_SESSION['error']);
?>

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - AGH Health Card System</title>
    <link rel="icon" type="image/png" href="favicon.png">

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Noto Sans Bengali', 'Poppins', sans-serif;
        }

        .login-bg {
            background:
                radial-gradient(circle at 12% 15%, rgba(14, 165, 233, 0.28), transparent 32%),
                radial-gradient(circle at 88% 85%, rgba(16, 185, 129, 0.24), transparent 34%),
                linear-gradient(135deg, #f8fafc 0%, #e0f2fe 48%, #ecfdf5 100%);
        }

        .glass {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
        }

        .field {
            width: 100%;
            border-radius: 1rem;
            border: 1px solid #e2e8f0;
            background: rgba(248, 250, 252, 0.9);
            padding: 1rem 1rem 1rem 3rem;
            color: #0f172a;
            outline: none;
            transition: 0.2s ease;
        }

        .field:focus {
            border-color: #0ea5e9;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
        }
    </style>
    
    
    <link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#0284c7">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="assets/icons/icon-192.png">
<script src="pwa.js" defer></script>

    
    
</head>

<body class="login-bg min-h-screen flex items-center justify-center p-4">

    <main class="w-full max-w-5xl">
        <div class="grid lg:grid-cols-2 overflow-hidden rounded-[2rem] border border-white/70 glass shadow-2xl shadow-sky-200/70">

            <section class="relative hidden lg:flex min-h-[620px] flex-col justify-between overflow-hidden bg-gradient-to-br from-sky-700 via-blue-700 to-emerald-600 p-10 text-white">
                <div class="absolute inset-0 opacity-15 bg-[linear-gradient(135deg,white_1px,transparent_1px)] bg-[length:24px_24px]"></div>

                <div class="relative z-10">
                    <div class="flex items-center gap-3">
                        <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-2xl font-extrabold text-sky-700 shadow-lg">
                            AGH
                        </div>
                        <div>
                            <h1 class="text-2xl font-extrabold">AGH Portal</h1>
                            <p class="text-sm text-sky-100">Health Card Management System</p>
                        </div>
                    </div>

                    <div class="mt-24">
                        <p class="text-sm font-semibold uppercase tracking-[0.3em] text-sky-100">Secure Login</p>
                        <h2 class="mt-4 text-5xl font-extrabold leading-tight">
                            আড়াইহাজার জেনারেল হাসপাতাল
                        </h2>
                        <p class="mt-5 max-w-lg text-lg leading-8 text-sky-50">
                            হেলথ কার্ড, রোগীর তথ্য ও অফিসার ড্যাশবোর্ড ব্যবস্থাপনার নিরাপদ প্রবেশদ্বার।
                        </p>
                    </div>
                </div>

                <div class="relative z-10 grid grid-cols-3 gap-4">
                    <div class="rounded-2xl border border-white/20 bg-white/15 p-4">
                        <p class="text-2xl font-extrabold">24/7</p>
                        <p class="mt-1 text-xs text-sky-100">Access</p>
                    </div>
                    <div class="rounded-2xl border border-white/20 bg-white/15 p-4">
                        <p class="text-2xl font-extrabold">Safe</p>
                        <p class="mt-1 text-xs text-sky-100">Records</p>
                    </div>
                    <div class="rounded-2xl border border-white/20 bg-white/15 p-4">
                        <p class="text-2xl font-extrabold">Fast</p>
                        <p class="mt-1 text-xs text-sky-100">Service</p>
                    </div>
                </div>
            </section>

            <section class="bg-white/92 p-6 sm:p-10 lg:p-12">
                <div class="mb-8 text-center lg:hidden">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-600 to-emerald-500 text-2xl font-extrabold text-white shadow-lg shadow-sky-200">
                        AGH
                    </div>
                    <h1 class="mt-4 text-2xl font-extrabold text-slate-900">AGH Portal</h1>
                    <p class="mt-1 text-sm text-slate-500">হেলথ কার্ড ম্যানেজমেন্ট সিস্টেম</p>
                </div>

                <div class="mb-8">
                    <p class="text-sm font-bold text-sky-600">স্বাগতম</p>
                    <h2 class="mt-2 text-3xl font-extrabold text-slate-900 sm:text-4xl">লগইন করুন</h2>
                    <p class="mt-3 leading-7 text-slate-500">
                        আপনার অ্যাকাউন্টে প্রবেশ করতে ইউজারনেম ও পাসওয়ার্ড দিন।
                    </p>
                </div>

                <?php if (!empty($error)): ?>
                    <div class="mb-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
                        <?php echo e($error); ?>
                    </div>
                <?php endif; ?>

                <form action="login_process.php" method="POST" class="space-y-5">
                    <div>
                        <label for="username" class="mb-2 block text-sm font-bold text-slate-700">ইউজারনেম</label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M20 21a8 8 0 0 0-16 0"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </span>
                            <input id="username" type="text" name="username" required autocomplete="username" class="field" placeholder="আপনার ইউজারনেম দিন">
                        </div>
                    </div>

                    <div>
                        <label for="password" class="mb-2 block text-sm font-bold text-slate-700">পাসওয়ার্ড</label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <rect x="3" y="11" width="18" height="11" rx="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </span>

                            <input id="password" type="password" name="password" required autocomplete="current-password" class="field pr-14" placeholder="••••••••">

                            <button type="button" onclick="togglePassword(this)" class="absolute right-3 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-xl text-slate-400 transition hover:bg-sky-50 hover:text-sky-600" aria-label="Show password">
                                <svg id="eyeIcon" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <button type="submit" name="login" class="group w-full rounded-2xl bg-gradient-to-r from-sky-600 to-emerald-500 py-4 font-extrabold text-white shadow-xl shadow-sky-200 transition hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-sky-300 active:translate-y-0">
                        <span class="flex items-center justify-center gap-2">
                            লগইন করুন
                            <svg class="transition group-hover:translate-x-1" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M5 12h14"></path>
                                <path d="m12 5 7 7-7 7"></path>
                            </svg>
                        </span>
                    </button>
                </form>

                <div class="mt-8 rounded-2xl border border-slate-100 bg-slate-50 px-5 py-4 text-center">
                    <p class="text-xs text-slate-500">
                        © <?php echo date("Y"); ?> আড়াইহাজার জেনারেল হাসপাতাল (AGH)
                    </p>
                </div>
            </section>

        </div>
    </main>

    <script>
        function togglePassword(button) {
            const password = document.getElementById('password');

            if (password.type === 'password') {
                password.type = 'text';
                button.setAttribute('aria-label', 'Hide password');
            } else {
                password.type = 'password';
                button.setAttribute('aria-label', 'Show password');
            }
        }
    </script>

</body>
</html>
