<?php

// Delete notification
if (
    isset($_POST['delete_notification_id']) &&
    is_numeric($_POST['delete_notification_id'])
) {
    $deleteNotification = $pdo->prepare("
        DELETE FROM order_notifications
        WHERE id = ?
    ");

    $deleteNotification->execute([
        (int)$_POST['delete_notification_id']
    ]);
}

// Get latest notifications
$notificationStmt = $pdo->query("
    SELECT *
    FROM order_notifications
    ORDER BY id DESC
    LIMIT 20
");

$orderNotifications = $notificationStmt->fetchAll(PDO::FETCH_ASSOC);

// Unread count
$unreadStmt = $pdo->query("
    SELECT COUNT(*)
    FROM order_notifications
    WHERE is_read = 0
");

$unreadNotifications = (int)$unreadStmt->fetchColumn();

?>
<header class="top-navbar">

    <div class="navbar-left">

        <button
            class="mobile-menu-btn"
            id="mobileMenuBtn"
            type="button"
        >
            ☰
        </button>

        <div class="page-heading">

            <h1>
                <?= htmlspecialchars($pageTitle) ?>
            </h1>

            <span>
                Shoaib Subscription Bot
            </span>

        </div>

    </div>


    <div class="navbar-right">

        <div class="api-status">
            <span class="api-dot"></span>
            <span class="api-text">
                WA Sender API
                <strong>Setup Pending</strong>
            </span>
        </div>

<div class="order-notification-wrap">

    <button
        type="button"
        class="notification-bell"
        onclick="toggleOrderNotifications()"
    >
        🔔

        <?php if ($unreadNotifications > 0): ?>
            <span class="notification-count">
                <?= $unreadNotifications ?>
            </span>
        <?php endif; ?>
    </button>

    <div
        class="notification-dropdown"
        id="orderNotificationDropdown"
    >

        <div class="notification-title">
            🔔 ORDER NOTIFICATIONS
        </div>

        <?php if (empty($orderNotifications)): ?>

            <div class="notification-empty">
                No new notifications
            </div>

        <?php else: ?>

            <?php foreach ($orderNotifications as $notification): ?>

                <div class="notification-item">

                    <div class="notification-message">
                        <strong>
                            <?= htmlspecialchars($notification['customer_name']) ?>
                        </strong>
                        ordered:<br>

                        <?= (int)$notification['quantity'] ?>x
                        <?= htmlspecialchars($notification['product_name']) ?>
                    </div>

                    <form method="POST">
                        <input
                            type="hidden"
                            name="delete_notification_id"
                            value="<?= (int)$notification['id'] ?>"
                        >

                        <button
                            type="submit"
                            class="notification-delete"
                        >
                            🗑 Delete
                        </button>
                    </form>

                </div>

            <?php endforeach; ?>

        <?php endif; ?>

    </div>

</div>

        <div class="admin-profile">

            <div class="admin-avatar">
                <?= strtoupper(
                    substr(
                        $_SESSION['admin_name'] ?? 'A',
                        0,
                        1
                    )
                ) ?>
            </div>

            <div class="admin-info">

                <strong>
                    <?= htmlspecialchars(
                        $_SESSION['admin_name'] ?? 'Admin'
                    ) ?>
                </strong>

                <span>
                    Administrator
                </span>

            </div>

        </div>


        <a
            href="<?= APP_URL ?>/logout.php"
            class="logout-btn"
        >
            Logout
        </a>

    </div>

</header>

<style>
.order-notification-wrap {
    position: relative;
}

.notification-bell {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,191,255,.35);
    border-radius: 10px;
    background: rgba(0,191,255,.06);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

.notification-bell:hover {
    border-color: #00bfff;
    box-shadow: 0 0 15px rgba(0,191,255,.20);
}

.notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 20px;
    background: #ff3b3b;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 52px;
    right: 0;
    width: 330px;
    max-height: 420px;
    overflow-y: auto;
    background: #06141d;
    border: 1px solid rgba(0,191,255,.30);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,.45);
    z-index: 9999;
}

.notification-dropdown.show {
    display: block;
}

.notification-title {
    padding: 14px;
    font-size: 11px;
    font-weight: bold;
    color: #00c8ff;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.notification-item {
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.notification-message {
    color: #d7e9f3;
    font-size: 12px;
    line-height: 1.7;
}

.notification-delete {
    margin-top: 8px;
    padding: 5px 9px;
    border: 1px solid rgba(255,70,70,.35);
    border-radius: 6px;
    background: rgba(255,0,0,.06);
    color: #ff8585;
    cursor: pointer;
    font-size: 10px;
}

.notification-empty {
    padding: 25px;
    text-align: center;
    color: #668493;
    font-size: 11px;
}
</style>

<script>
function toggleOrderNotifications() {
    document
        .getElementById('orderNotificationDropdown')
        .classList.toggle('show');
}
</script>