Mini Kabibi Habibi
<?php
session_start();
if (!isset($_SESSION['user'])) {
header("Location: login.php");
exit;
}
include 'includes/db.php'; // DB connection using $pdo
// --- Handle Add New Activity ---
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$activity = $_POST['activity'];
$location = $_POST['location'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
try {
$stmt = $pdo->prepare("INSERT INTO activities (name, activity, location, start_date, end_date, status) VALUES (?, ?, ?, ?, ?, 'pending')");
$stmt->execute([$name, $activity, $location, $start_date, $end_date]);
echo "<script>alert('Activity successfully added!'); window.location.href='index.php?page=activities&tab=insert';</script>";
exit;
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
}
// --- Handle Complete Activity ---
if (isset($_GET['complete'])) {
$activity_id = $_GET['complete'];
try {
$stmt = $pdo->prepare("UPDATE activities SET status = 'completed', mark_as_completed = NOW() WHERE id = ?");
$stmt->execute([$activity_id]);
echo "<script>alert('Activity marked as completed!'); window.location.href='index.php?page=activities&tab=ongoing';</script>";
exit;
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
}
// --- Handle Delete Activity ---
if (isset($_GET['delete'])) {
$activity_id = $_GET['delete'];
try {
$stmt = $pdo->prepare("DELETE FROM activities WHERE id = ?");
$stmt->execute([$activity_id]);
echo "<script>alert('Activity deleted successfully!'); window.location.href='index.php?page=activities&tab=" . ($_GET['tab'] ?? 'insert') . "';</script>";
exit;
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
}
// --- Handle Insert Leave Schedule ---
if (isset($_POST['insert_leave'])) {
$complete_name = $_POST['complete_name'];
$date_of_leave = $_POST['date_of_leave'];
$type_of_leave = $_POST['type_of_leave'];
try {
$stmt = $pdo->prepare("INSERT INTO leave_schedule (complete_name, date_of_leave, type_of_leave) VALUES (?, ?, ?)");
$stmt->execute([$complete_name, $date_of_leave, $type_of_leave]);
// ✅ Redirect to prevent form resubmission
header("Location: index.php?page=leave&success=1");
exit;
} catch (PDOException $e) {
echo "Error inserting leave: " . $e->getMessage();
}
}
// --- Fetch Leave Records ---
$leaveRecords = [];
try {
$stmt = $pdo->query("SELECT * FROM leave_schedule ORDER BY date_of_leave DESC");
$leaveRecords = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
echo "Error fetching leave records: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ICT Monitoring Dashboard</title>
<style>
body { margin: 0; font-family: Arial; display: flex; }
.sidebar { width: 220px; background: #2f4050; color: white; height: 100vh; position: fixed; padding-top: 20px; }
.sidebar a { color: white; display: block; padding: 15px 20px; text-decoration: none; border-left: 4px solid transparent; }
.sidebar a:hover, .sidebar a.active { background: #1ab394; border-left-color: #1ab394; }
.sidebar .submenu a { font-size: 14px; padding-left: 40px; }
.content { margin-left: 220px; padding: 20px; flex-grow: 1; background: #f3f3f4; min-height: 100vh; }
table { width: 100%; border-collapse: collapse; background: white; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.btn { padding: 6px 12px; border: none; border-radius: 3px; text-decoration: none; font-size: 14px; }
.btn-complete { background: #1ab394; color: white; }
.btn-delete { background: #d9534f; color: white; }
form input, form select, form textarea {
width: 100%; padding: 8px; margin-bottom: 12px;
border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box;
}
form button {
background: #1ab394; color: white; padding: 10px 16px; border: none; border-radius: 3px; cursor: pointer;
}
.tab-container { margin-bottom: 15px; }
.tab-button {
background: #f1f1f1; border: none; padding: 10px 20px;
cursor: pointer; margin-right: 5px; font-size: 16px;
border-radius: 3px 3px 0 0;
}
.tab-button.active { background: #1ab394; color: white; }
.tab-content {
border: 1px solid #ddd; padding: 15px; background: white;
display: none;
}
.activities-table .activities-header th {
background-color: #555;
color: white;
}
.leave-records-table .leave-header th {
background-color: #555; /* dark gray */
color: white;
}
</style>
</head>
<body>
<div class="sidebar">
<h2 style="text-align:center;">ICT Monitoring</h2>
<a href="index.php" class="<?= !isset($_GET['page']) ? 'active' : '' ?>">Dashboard</a>
<a href="index.php?page=activities&tab=ongoing" class="<?= ($_GET['page'] ?? '') == 'activities' ? 'active' : '' ?>">Manage Activities</a>
<div class="submenu">
<a href="index.php?page=activities&tab=insert" class="<?= ($_GET['page'] ?? '') == 'activities' && ($_GET['tab'] ?? '') == 'insert' ? 'active' : '' ?>">➕ Add Activity</a>
<a href="index.php?page=activities&tab=ongoing" class="<?= ($_GET['page'] ?? '') == 'activities' && ($_GET['tab'] ?? '') == 'ongoing' ? 'active' : '' ?>">⏳ Ongoing</a>
<a href="index.php?page=activities&tab=completed" class="<?= ($_GET['page'] ?? '') == 'activities' && ($_GET['tab'] ?? '') == 'completed' ? 'active' : '' ?>">✅ Completed</a>
</div>
<a href="index.php?page=calendar" class="<?= ($_GET['page'] ?? '') == 'calendar' ? 'active' : '' ?>">Monthly Calendar</a>
<a href="index.php?page=leave" class="<?= ($_GET['page'] ?? '') == 'leave' ? 'active' : '' ?>">Leave Schedule</a>
<a href="logout.php">Logout</a>
</div>
<div class="content">
<?php
$page = $_GET['page'] ?? '';
$tab = $_GET['tab'] ?? '';
// Get total number of ongoing activities
$ongoingCount = $pdo->query("SELECT COUNT(*) FROM activities WHERE status = 'pending'")->fetchColumn();
// Get total number of completed activities
$completedCount = $pdo->query("SELECT COUNT(*) FROM activities WHERE status = 'completed'")->fetchColumn();
// Get total number of leave schedules
$leaveCount = $pdo->query("SELECT COUNT(*) FROM leave_schedule")->fetchColumn();
if ($page == '') {
// Add live clock container
echo "<div id='clock' style='font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 10px; color: #333;'></div>";
// JavaScript for live clock
echo "<script>
function updateClock() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('clock').textContent = 'Current Time: ' + timeString;
}
setInterval(updateClock, 1000);
updateClock(); // initial call
</script>";
echo "<h1>Welcome ICT Team!</h1>";
echo "<div style='display: flex; gap: 20px; margin-top: 20px;'>";
echo "<div style='flex: 1; background: #1ab394; color: white; padding: 20px; border-radius: 5px; text-align: center;'>
<h2>$ongoingCount</h2>
<p>Ongoing Activities</p>
</div>";
echo "<div style='flex: 1; background: #337ab7; color: white; padding: 20px; border-radius: 5px; text-align: center;'>
<h2>$completedCount</h2>
<p>Completed Activities</p>
</div>";
echo "<div style='flex: 1; background: #f0ad4e; color: white; padding: 20px; border-radius: 5px; text-align: center;'>
<h2>$leaveCount</h2>
<p>Total Leave Schedules</p>
</div>";
echo "</div>"; // Closing the statistics flex container
// 👇 New image container added below
echo "<div style='margin-top: 30px; text-align: center;'>
<!-- Image container with real image -->
<div style='
width: 70%;
max-width: 750px;
margin: 0 auto;
padding: 50px;
border-radius: 10px;
background: #f9f9f9;
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.1),
inset -4px -4px 10px rgba(255,255,255,0.7);
border: 1px solid #ddd;
'>
<img src='image/background7.jpg' alt='image' style='
max-width: 100%;
height: auto;
border-radius: 10px;
'>
</div>
</div>";
} elseif ($page == 'activities') {
if ($tab == 'insert') {
?>
<h1>Add New Activity</h1>
<div style="display: flex; gap: 30px; align-items: flex-start; margin-top: 20px; flex-wrap: wrap;">
<!-- 📝 Left: The Form -->
<div style="flex: 1; min-width: 300px; max-width: 600px; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.05);">
<form method="POST" style="display: flex; flex-direction: column; gap: 15px;">
<div>
<label style="font-weight: bold;">Name:</label><br>
<input type="text" name="name" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div>
<label style="font-weight: bold;">Activity:</label><br>
<textarea name="activity" rows="3" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></textarea>
</div>
<div>
<label style="font-weight: bold;">Location:</label><br>
<input type="text" name="location" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="display: flex; gap: 10px;">
<div style="flex: 1;">
<label style="font-weight: bold;">Start Date:</label><br>
<input type="date" name="start_date" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="flex: 1;">
<label style="font-weight: bold;">End Date:</label><br>
<input type="date" name="end_date" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
</div>
</div>
<button type="submit" name="submit" style="
background: #1ab394;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
">➕ Add Activity</button>
</form>
</div>
<!-- 🖼️ Right: Embossed Image Placeholder -->
<div style="
flex: 1;
min-width: 300px;
height: 320px;
background: #D3D3D3;
border-radius: 10px;
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.08),
inset -4px -4px 10px rgba(255,255,255,0.7);
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #aaa;
font-style: italic;
">
<img src="image/background5.jpg" alt="ICT Activities" style="width: 95%; max-height: 90%; object-fit: cover; border-radius: 10px;">
</div>
</div>
<?php
} elseif ($tab == 'ongoing' || $tab == 'completed') {
$status = $tab == 'ongoing' ? 'pending' : 'completed';
$orderField = $status == 'pending' ? 'start_date' : 'mark_as_completed';
if ($tab == 'completed') {
$filter_start = $_GET['filter_start'] ?? '';
$filter_end = $_GET['filter_end'] ?? '';
$query = "SELECT * FROM activities WHERE status = 'completed'";
$params = [];
if (!empty($filter_start)) {
$query .= " AND start_date >= ?";
$params[] = $filter_start;
}
if (!empty($filter_end)) {
$query .= " AND end_date <= ?";
$params[] = $filter_end;
}
$query .= " ORDER BY mark_as_completed DESC";
$stmt = $pdo->prepare($query);
$stmt->execute($params);
} else {
$stmt = $pdo->prepare("SELECT * FROM activities WHERE status = ? ORDER BY $orderField DESC");
$stmt->execute([$status]);
}
$activities = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo "<h1>" . ucfirst($tab) . " Activities</h1>";
if ($tab == 'completed') {
$filter_start = $_GET['filter_start'] ?? '';
$filter_end = $_GET['filter_end'] ?? '';
?>
<form method="GET" style="margin-bottom: 20px;">
<input type="hidden" name="page" value="activities">
<input type="hidden" name="tab" value="completed">
<label for="filter_start">Start Date:</label>
<input type="date" id="filter_start" name="filter_start" value="<?= htmlspecialchars($filter_start) ?>">
<label for="filter_end">End Date:</label>
<input type="date" id="filter_end" name="filter_end" value="<?= htmlspecialchars($filter_end) ?>">
<button type="submit">Filter</button>
<a href="index.php?page=activities&tab=completed" style="margin-left: 10px;">Reset</a>
</form>
<?php
}
if ($activities) {
echo "<table class='activities-table'><tr class='activities-header'><th>Name</th><th>Activity</th><th>Location</th><th>Start</th><th>End</th><th>Status</th><th>Actions</th></tr>";
foreach ($activities as $a) {
echo "<tr>
<td>" . htmlspecialchars($a['name']) . "</td>
<td>" . htmlspecialchars($a['activity']) . "</td>
<td>" . htmlspecialchars($a['location']) . "</td>
<td>" . htmlspecialchars($a['start_date']) . "</td>
<td>" . htmlspecialchars($a['end_date']) . "</td>
<td>" . htmlspecialchars($a['status']) . "</td>
<td>";
if ($status == 'pending') {
echo "<a class='btn btn-complete' href='?page=activities&tab=ongoing&complete={$a['id']}' onclick=\"return confirm('Mark as completed?')\">Complete</a>";
}
echo "<a class='btn btn-delete' href='?page=activities&tab=$tab&delete={$a['id']}' onclick=\"return confirm('Delete this activity?')\">Delete</a>";
echo "</td></tr>";
}
echo "</table>";
} else {
echo "<p>No $tab activities.</p>";
}
}
} elseif ($page == 'calendar') {
?>
<h1>Monthly Calendar</h1>
<div class="tab-container">
<button class="tab-button" onclick="openTab(event, 'ebora')">Dandy G. Ebora</button>
<button class="tab-button" onclick="openTab(event, 'ali')">Aldin Van T. Ali</button>
<button class="tab-button" onclick="openTab(event, 'macalalad')">Ralph Kevin G. Macalalad</button>
<button class="tab-button" onclick="openTab(event, 'garcia')">Kenneth C. Garcia</button>
</div>
<div id="ebora" class="tab-content"><h3>Dandy G. Ebora</h3><iframe src="https://calendar.google.com/calendar/embed?src=dandy.ebora%40deped.gov.ph&ctz=Asia%2FManila" width="100%" height="600" frameborder="0"></iframe></div>
<div id="ali" class="tab-content"><h3>Aldin Van T. Ali</h3><iframe src="https://calendar.google.com/calendar/embed?src=aldinvan.ali%40deped.gov.ph&ctz=Asia%2FManila" width="100%" height="600" frameborder="0"></iframe></div>
<div id="macalalad" class="tab-content"><h3>Ralph Kevin G. Macalalad</h3><iframe src="https://calendar.google.com/calendar/embed?src=ralphkevin.macalalad%40deped.gov.ph&ctz=Asia%2FManila" width="100%" height="600" frameborder="0"></iframe></div>
<div id="garcia" class="tab-content"><h3>Kenneth C. Garcia</h3><iframe src="https://calendar.google.com/calendar/embed?src=kenneth.garcia002%40deped.gov.ph&ctz=Asia%2FManila" width="100%" height="600" frameborder="0"></iframe></div>
<script>
function openTab(evt, tabName) {
var i, content = document.getElementsByClassName("tab-content"), buttons = document.getElementsByClassName("tab-button");
for (i = 0; i < content.length; i++) content[i].style.display = "none";
for (i = 0; i < buttons.length; i++) buttons[i].classList.remove("active");
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add("active");
}
document.addEventListener("DOMContentLoaded", () => document.querySelector(".tab-button").click());
</script>
<?php
} elseif ($page == 'leave') {
?>
<h1>Leave Schedule</h1>
<?php
// Display a simple success message after insertion
if (isset($_POST['insert_leave'])) {
echo "<div style='background: #d4edda; color: #155724; padding: 10px; border: 1px solid #c3e6cb; border-radius: 4px; margin-bottom: 15px;'>
✅ Leave record successfully added!
</div>";
}
?>
<form method="POST" style="background: white; padding: 20px; border-radius: 8px; max-width: 500px;">
<label><strong>Complete Name:</strong></label>
<input type="text" name="complete_name" placeholder="Enter your full name" required>
<label><strong>Date of Leave:</strong></label>
<input type="date" name="date_of_leave" required>
<label><strong>Type of Leave:</strong></label>
<select name="type_of_leave" required>
<option value="">-- Select Leave Type --</option>
<option value="Sick Leave">Sick Leave</option>
<option value="Special Privileged Leave">Special Privileged Leave</option>
<option value="Force Leave">Force Leave</option>
<option value="COC Leave">COC Leave</option> <!-- ✅ Fixed -->
</select>
<button type="submit" name="insert_leave">➕ Insert Leave</button>
</form>
<h3 style="margin-top: 30px;">Leave Records</h3>
<?php if (count($leaveRecords) > 0): ?>
<table class="leave-records-table">
<tr class="leave-header">
<th>Name</th>
<th>Date of Leave</th>
<th>Type of Leave</th>
</tr>
<?php foreach ($leaveRecords as $record): ?>
<tr>
<td><?= htmlspecialchars($record['complete_name']) ?></td>
<td><?= htmlspecialchars($record['date_of_leave']) ?></td>
<td><?= htmlspecialchars($record['type_of_leave']) ?></td>
</tr>
<?php endforeach; ?>
</table>
<?php else: ?>
<p>No leave records found.</p>
<?php endif; ?>
<?php
}
?>
<footer style="
margin-top: 50px;
padding: 15px;
text-align: right;
font-size: 14px;
color: #777;
border-top: 1px solid #e0e0e0;
background-color: #f9f9f9;
">
<marquee behavior="scroll" direction="left">
<strong>Developed by DGE - SDO Batangas City ICT Unit @ 2024 | Improved @ 2025</strong>
</marquee>
</footer>
</div>
</body>
</html>