<?php
require_once 'auth.php';

restore_login_from_cookie();

if (!isset($_SESSION['user_id']) || ($_SESSION['role'] ?? '') !== 'officer') {
    header("Location: index.php");
    exit();
}


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

$officer_id = (int) $_SESSION['user_id'];
$full_name = $_SESSION['full_name'] ?? 'Officer';

$total_cards = 0;
$all_cards = [];

$stmt = $conn->prepare("SELECT COUNT(*) AS total FROM agh_patients WHERE marketing_officer_id = ?");
$stmt->bind_param("i", $officer_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result && $row = $result->fetch_assoc()) {
    $total_cards = (int) $row['total'];
}
$stmt->close();

$stmt = $conn->prepare("
    SELECT 
        p.id,
        p.card_number,
        p.mobile,
        p.address,
        p.reg_date,
        COUNT(m.id) AS total_members,
        GROUP_CONCAT(m.member_name ORDER BY m.id ASC SEPARATOR ', ') AS member_names
    FROM agh_patients p
    LEFT JOIN agh_family_members m ON m.patient_id = p.id
    WHERE p.marketing_officer_id = ?
    GROUP BY p.id, p.card_number, p.mobile, p.address, p.reg_date
    ORDER BY p.id DESC
");
$stmt->bind_param("i", $officer_id);
$stmt->execute();
$cards_result = $stmt->get_result();

if ($cards_result) {
    while ($row = $cards_result->fetch_assoc()) {
        $all_cards[] = $row;
    }
}
$stmt->close();

$recent_count = min(5, count($all_cards));
?>

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Officer Dashboard - AGH</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;
        }

        .page-bg {
            background:
                radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 32%),
                radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.18), transparent 34%),
                linear-gradient(135deg, #f8fafc 0%, #eef7ff 48%, #ecfdf5 100%);
        }

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

        .panel {
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
        }
    </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>

<meta name="theme-color" content="#0284c7">
<meta name="msapplication-navbutton-color" content="#0284d7">
<meta name="apple-mobile-web-app-status-bar-style" content="default">


    
</head>

<body class="page-bg min-h-screen text-slate-800">

    <nav class="sticky top-0 z-50 border-b border-white/70 glass shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <div class="h-12 w-12 rounded-2xl bg-gradient-to-br from-sky-600 to-emerald-500 text-white flex items-center justify-center font-extrabold text-lg shadow-lg shadow-sky-200">
                        AGH
                    </div>
                    <div>
                        <h1 class="text-lg sm:text-xl font-extrabold text-slate-900">AGH Health Card</h1>
                        <p class="text-xs text-slate-500">Officer Dashboard</p>
                    </div>
                </div>

                <div class="flex items-center gap-2 sm:gap-3">
                    <div class="hidden sm:flex items-center gap-2 rounded-full bg-white border border-slate-100 px-4 py-2 shadow-sm">
                        <span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
                        <span class="text-sm font-semibold text-slate-700">
                            <?php echo e($full_name); ?>
                        </span>
                    </div>

                    <a href="logout.php" class="inline-flex items-center gap-2 rounded-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 text-sm font-bold transition shadow-lg shadow-red-100">
                        লগআউট
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <section class="relative overflow-hidden rounded-[2rem] bg-gradient-to-br from-sky-700 via-blue-700 to-emerald-600 text-white p-6 sm:p-8 lg:p-10 shadow-2xl shadow-sky-200">
            <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 flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8">
                <div>
                    <p class="text-sm font-semibold uppercase tracking-[0.28em] text-sky-100">Welcome Back</p>
                    <h2 class="mt-4 text-3xl sm:text-5xl font-extrabold leading-tight">
                        শুভেচ্ছা, <?php echo e($full_name); ?>
                    </h2>
                    <p class="mt-4 max-w-2xl text-sky-50 leading-8">
                        আপনার যোগ করা সব কার্ড, সদস্যের নাম এবং এডিট অপশন এক জায়গায় দেখুন।
                    </p>
                </div>

                <a href="add_patient.php" class="inline-flex items-center justify-center gap-2 rounded-2xl bg-white text-sky-700 hover:bg-sky-50 px-6 py-4 font-extrabold transition shadow-xl">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" viewBox="0 0 24 24">
                        <path d="M12 5v14"></path>
                        <path d="M5 12h14"></path>
                    </svg>
                    নতুন কার্ড এন্ট্রি
                </a>
            </div>
        </section>

        <section class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-8">
            <div class="panel rounded-3xl p-6">
                <p class="text-sm font-semibold text-slate-500">আপনার মোট ইস্যুকৃত কার্ড</p>
                <h3 class="mt-3 text-5xl font-extrabold text-sky-600">
                    <?php echo e($total_cards); ?>
                </h3>
            </div>

            <div class="panel rounded-3xl p-6">
                <p class="text-sm font-semibold text-slate-500">সর্বশেষ এন্ট্রি</p>
                <h3 class="mt-3 text-5xl font-extrabold text-emerald-600">
                    <?php echo e($recent_count); ?>
                </h3>
            </div>

        
        </section>

        <section class="mt-8 panel rounded-[2rem] overflow-hidden">
            <div class="p-6 sm:p-7 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-sky-600">All Records</p>
                    <h3 class="mt-1 text-2xl font-extrabold text-slate-900">আপনার যোগ করা সব কার্ড</h3>
                </div>

                <span class="inline-flex items-center justify-center rounded-full bg-slate-100 text-slate-700 px-4 py-2 text-sm font-extrabold">
                    <?php echo e($total_cards); ?>টি কার্ড
                </span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wider">
                            <th class="px-6 py-4 font-bold">কার্ড নম্বর</th>
                            <th class="px-6 py-4 font-bold">সদস্যের নাম</th>
                            <th class="px-6 py-4 font-bold">মোবাইল</th>
                            <th class="px-6 py-4 font-bold">তারিখ</th>
                            <th class="px-6 py-4 font-bold text-right">অ্যাকশন</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-slate-100">
                        <?php if (count($all_cards) > 0): ?>
                            <?php foreach ($all_cards as $card): ?>
                                <tr class="hover:bg-sky-50/60 transition">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-3">
                                            <div class="h-10 w-10 rounded-2xl bg-sky-100 text-sky-600 flex items-center justify-center font-extrabold">
                                                #
                                            </div>
                                            <div>
                                                <p class="font-extrabold text-sky-700">
                                                    <?php echo e($card['card_number']); ?>
                                                </p>
                                                <p class="text-xs text-slate-400 mt-1">
                                                    <?php echo e($card['total_members']); ?> জন সদস্য
                                                </p>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="px-6 py-5 text-slate-700 font-semibold min-w-[260px]">
                                        <?php echo e($card['member_names'] ?: 'সদস্যের নাম পাওয়া যায়নি'); ?>
                                    </td>

                                    <td class="px-6 py-5 text-slate-700 font-semibold">
                                        <?php echo e($card['mobile']); ?>
                                    </td>

                                    <td class="px-6 py-5 text-slate-500">
                                        <?php echo !empty($card['reg_date']) ? e(date('d M, Y', strtotime($card['reg_date']))) : 'N/A'; ?>
                                    </td>

                                    <td class="px-6 py-5 text-right">
                                        <a href="edit_patient.php?id=<?php echo e($card['id']); ?>" class="inline-flex items-center justify-center gap-2 rounded-2xl bg-amber-50 hover:bg-amber-100 text-amber-700 px-5 py-3 text-sm font-extrabold transition">
                                            <svg width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                                                <path d="M12 20h9"></path>
                                                <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
                                            </svg>
                                            এডিট
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="5" class="px-6 py-16 text-center">
                                    <div class="mx-auto h-16 w-16 rounded-3xl bg-slate-100 text-slate-400 flex items-center justify-center mb-4">
                                        <svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                            <path d="M14 2v6h6"></path>
                                            <path d="M9 15h6"></path>
                                        </svg>
                                    </div>
                                    <h4 class="text-lg font-extrabold text-slate-700">এখনো কোনো কার্ড এন্ট্রি করা হয়নি</h4>
                                    <p class="mt-2 text-sm text-slate-400">নতুন কার্ড এন্ট্রি করলে এখানে দেখা যাবে।</p>
                                    <a href="add_patient.php" class="mt-5 inline-flex items-center justify-center gap-2 rounded-2xl bg-sky-600 hover:bg-sky-700 text-white px-5 py-3 text-sm font-bold transition">
                                        নতুন কার্ড এন্ট্রি করুন
                                    </a>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </section>

    </main>

</body>
</html>
