Problem with custom notification code

PHPMaker General Discussion (PHPMaker)
1

I would like to show you my problem with the code that I used.
This code is designed to add notifications from certain tables, such as appointments and other tables where I need notifications.
Of course, this code brings you notifications and places them in the navbar according to custom codes.
The code works perfectly, but I had to modify the CSS file because the code changed the footer, placing it in the middle of the page in some tables.

The code primarily affected is the code in the Page_Loading() path: void

// Page_Loading event
function Page_Loading(): void
{
    if (!IsLoggedIn()) {
        echo '<style>#myDropdownContainer { display: none !important; }</style>';
        return;
    }

    global $Conn;

    $today = date("Y-m-d");
    $after3days = date("Y-m-d", strtotime("+3 days"));
    $tomorrow = date("Y-m-d", strtotime("+1 days"));
    $userID = CurrentUserID();

    // ✅ 
    $sql1 = "SELECT Id, Title, Start FROM calendar 
             WHERE CAST(Start AS DATE) BETWEEN ? AND ? AND emplloyid = ?";
    $stmt1 = $Conn->executeQuery($sql1, [$today, $after3days, $userID]);
    $tasks = [];
    while ($row = $stmt1->fetchAssociative()) {
        $row["Url"] = "/calendarview/" . $row["Id"] . "?showdetail=";
        $row["Type"] = "Task";
        $tasks[] = $row;
    }

    // ✅ (EvntEmployye)، (emplloy)
    $sql2 = "SELECT 
                j.casesJalsatID, j.caseEvntDate, j.caseid, 
                e1.UserName AS MukallafName,
                e2.UserName AS MasoulName
             FROM casesJalsat j
             LEFT JOIN Emplloy e1 ON j.EvntEmployye = e1.UserID
             LEFT JOIN courts c ON j.caseid = c.CaseID
             LEFT JOIN Emplloy e2 ON c.emplloy = e2.UserID
             WHERE 
                (j.EvntEmployye = ? OR c.emplloy = ?) 
                AND CAST(j.caseEvntDate AS DATE) IN (?, ?)";

    $stmt2 = $Conn->executeQuery($sql2, [$userID, $userID, $today, $tomorrow]);
    $sessions = [];
    while ($row = $stmt2->fetchAssociative()) {
        $row["Title"] = "Case #" . $row["caseid"];
        $row["Start"] = $row["caseEvntDate"];
        $row["Url"] = "/casesjalsatview/" . $row["casesJalsatID"] . "?showdetail=";
        $row["Mukallaf"] = $row["MukallafName"] ?? "";
        $row["Masoul"] = $row["MasoulName"] ?? "";
        $row["Type"] = "Jalsah";
        $sessions[] = $row;
    }

    // ✅ P
    $sql3 = "SELECT c.Id, c.Title, c.Start, cl.firstName, cl.LastName 
             FROM ClientCalendar c
             LEFT JOIN Clint cl ON c.ClientID = cl.ClintID
             WHERE c.EmplloyID = ? AND CAST(c.Start AS DATE) BETWEEN ? AND ?";
    $stmt3 = $Conn->executeQuery($sql3, [$userID, $today, $after3days]);
    $appointments = [];
    while ($row = $stmt3->fetchAssociative()) {
        $row["Title"] = $row["Title"] . " - " . $row["firstName"] . " " . $row["LastName"];
        $row["Url"] = "/clientcalendarview/" . $row["Id"] . "?showdetail=";
        $row["Type"] = "appunt";
        $appointments[] = $row;
    }

    // ✅Java Script send to Startup Script
    echo "<script>";
    echo "var taskReminders = " . json_encode($tasks, JSON_UNESCAPED_UNICODE) . ";";
    echo "var sessionReminders = " . json_encode($sessions, JSON_UNESCAPED_UNICODE) . ";";
    echo "var eventReminders = " . json_encode($appointments, JSON_UNESCAPED_UNICODE) . ";";
    echo "</script>";
}

And this is my Startup Script

function renderItems(items) {
    if (!items || items.length === 0) return "<div class='p-2 text-muted'>Nothing</div>";
    let html = "";
    items.forEach(function(item) {
        const dt = new Date(item.Start);
        const dateStr = dt.toLocaleDateString('ar-EG');
        const timeStr = dt.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' });
        const hijriStr = new Intl.DateTimeFormat('ar-SA-u-ca-islamic', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(dt);

        let extraInfo = '';
        if (item.Type === "Jalsah") {
            if (item.Mukallaf)
                extraInfo += `<div class="text-muted small">Sighn: ${item.Mukallaf}</div>`;
            if (item.Masoul)
                extraInfo += `<div class="text-muted small">responspl: ${item.Masoul}</div>`;
        }

        html += `
            <div class="dropdown-divider"></div>
            <a href="${item.Url}" class="dropdown-item">
                <i class="fa-solid fa-calendar-check me-2"></i>
                ${item.Title}
                <div class="text-muted small">${dateStr} — <span class="text-primary">${hijriStr}</span> — ${timeStr}</div>
                ${extraInfo}
            </a>
        `;
    });
    return html;
}

let styleTag = document.createElement("style");
styleTag.innerHTML = `
  #reminder-dropdown-menu .nav-tabs .nav-link.active {
    color: #000 !important;
    font-weight: bold;
  }
  #reminder-header {
    text-align: center !important;
    font-weight: bold;
  }
  .next-reminder-info {
    font-size: 15px !important;
    font-weight: bold;
    color: #d63384 !important;
    text-align: center;
  }
`;
document.head.appendChild(styleTag);

ew.templateData = ew.templateData || {};
ew.applyTemplate("myDropdown", "script", ew.templateData);

const dropdown = document.getElementById("reminder-dropdown-menu");
const badge = document.getElementById("reminder-badge");
const header = document.getElementById("reminder-header");

let taskCount = (typeof taskReminders !== "undefined") ? taskReminders.length : 0;
let sessionCount = (typeof sessionReminders !== "undefined") ? sessionReminders.length : 0;
let eventCount = (typeof eventReminders !== "undefined") ? eventReminders.length : 0;
let total = taskCount + sessionCount + eventCount;

let allReminders = [...(taskReminders || []), ...(sessionReminders || []), ...(eventReminders || [])];
let now = new Date();
let next = null;

allReminders.forEach(rem => {
    let start = new Date(rem.Start);
    let endBuffer = new Date(start.getTime() + 10 * 60000); // +10 Mint
    if (endBuffer >= now) {
        if (!next || start < new Date(next.Start)) next = rem;
    }
});

let hint = "";
if (next && taskReminders.some(t => t.Start === next.Start)) hint = "Task";
if (next && sessionReminders.some(s => s.Start === next.Start)) hint = "Jalsah";
if (next && eventReminders.some(e => e.Start === next.Start)) hint = "Appoint";

let duration = "";
if (next) {
    let diffMs = new Date(next.Start) - now;
    if (diffMs > 0) {
        let diffMins = Math.floor(diffMs / 60000);
        let hours = Math.floor(diffMins / 60);
        let mins = diffMins % 60;
        duration = `${hours > 0 ? `${hours} Hour` : ""} ${mins} Mint`;
    } else {
        duration = "Now";
    }
}

// ✅ Update Not
if (badge) badge.innerText = total;

if (header) {
  header.innerHTML = `
    <div>${total} Remander</div>
    ${next ? `<div class="next-reminder-info mt-2">next Task: ${hint} After ${duration}</div>` : ''}
  `;
}

const tabsHtml = `
  <div onclick="event.stopPropagation();">
    <ul class="nav nav-tabs px-2 pt-2" id="reminderTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks" type="button" role="tab" aria-controls="tasks" aria-selected="true">
          Task (${taskCount})
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="sessions-tab" data-bs-toggle="tab" data-bs-target="#sessions" type="button" role="tab" aria-controls="sessions" aria-selected="false">
          Jalsat (${sessionCount})
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button" role="tab" aria-controls="events" aria-selected="false">
          Appountmint (${eventCount})
        </button>
      </li>
    </ul>
    <div class="tab-content p-2" id="reminderTabsContent" style="max-height: 300px; overflow-y: auto;">
      <div class="tab-pane fade show active" id="tasks" role="tabpanel" aria-labelledby="tasks-tab">${renderItems(taskReminders)}</div>
      <div class="tab-pane fade" id="sessions" role="tabpanel" aria-labelledby="sessions-tab">${renderItems(sessionReminders)}</div>
      <div class="tab-pane fade" id="events" role="tabpanel" aria-labelledby="events-tab">${renderItems(eventReminders)}</div>
    </div>
  </div>
`;

dropdown.insertAdjacentHTML("beforeend", tabsHtml);

document.addEventListener("DOMContentLoaded", function () {
  const dropdown = document.getElementById("reminder-dropdown-menu");
  if (dropdown) {
    dropdown.addEventListener("click", function (e) {
      e.stopPropagation();
    });
  }
});

Of course, the code helped me with artificial intelligence, but the question is, can the code be placed or closed so that it does not affect the design? The design that was affected is the footer, which jumped to the middle of the page, and the buttons do not work. The calendar was also affected, as when I press the add button, it does not take me to the calendar, and when I drag and drop an appointment to another day, the appointment is not shown until after refreshing the page.

Last Page_head Code

<script type="text/html" class="ew-js-template" data-name="myDropdown" data-method="prependTo" data-target="#ew-navbar-end" data-seq="10">
<li class="nav-item dropdown" id="myDropdownContainer">
  <a class="nav-link" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
    <i class="fa-solid fa-bell" style="font-size: 17px;"></i>
    <span class="badge text-bg-warning navbar-badge" id="reminder-badge">0</span>
  </a>
  <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end" id="reminder-dropdown-menu" style="max-height: 400px; overflow-y: auto;">
    <span class="dropdown-item dropdown-header" id="reminder-header">0 Remander </span>
    <!--  -->
  </div>
</li>
</script>