File: /home/bigisxfd/public_html/cowork/bookings.php
<?php
// Include necessary files
include_once("header.php");
include_once("sidebar.php");
// Fetch active bookings with customer names and package details
$activeBookings = getActiveBookingsWithDetails(); // Define this function to fetch active bookings with customer names and package details
?>
<style>
.highlight-red {
background-color: red;
color: white;
}
/* Modal Styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<section>
<div class="column">
<div style="display: flex; align-items: center; justify-content: space-between;">
<h2>Active Bookings</h2>
<button class="add-button" onclick="location.href='pos.php'">Add Booking</button>
</div>
<table>
<tr>
<th>Booking ID</th>
<th>Customer Name</th>
<th>Package</th>
<th>Start Time</th>
<th>End Time</th>
<th>Time Remaining</th>
<th>Action</th>
</tr>
<?php foreach ($activeBookings as $booking): ?>
<tr <?php if ($booking['time_remaining_minutes'] <= 10) echo 'class="highlight-red"'; ?>>
<td><?php echo $booking['bookingid']; ?></td>
<td><?php echo $booking['firstname'] . ' ' . $booking['lastname']; ?></td>
<td><?php echo $booking['packagename']; ?></td>
<td><?php echo $booking['formatted_startdate']; ?></td>
<td><?php echo $booking['formatted_enddate']; ?></td>
<td>
<span id="countdown-<?php echo $booking['bookingid']; ?>">
<?php echo $booking['time_remaining']; ?>
</span>
</td>
<td>
<?php if ($booking['paymentstatus'] == 0): ?>
<?php if (isset($booking['balance']) && $booking['balance'] > 0): ?>
<!-- If user has a balance, show "Add Payment" -->
<a class="checkout-link"
href="partial_payment.php?bookingId=<?php echo $booking['bookingid']; ?>&memberId=<?php echo $booking['memberid']; ?>"
style="background-color: lightblue; padding: 6px; border-radius: 15px; font-size: 12px;">
Add Payment
</a>
<?php else: ?>
<!-- Otherwise, show "Unpaid Orders" -->
<a class="billout-link"
href="billout.php?memberId=<?php echo $booking['memberid']; ?>&bookingId=<?php echo $booking['bookingid']; ?>"
style="background-color: orange; padding: 6px; border-radius: 15px; font-size: 12px;">
Unpaid Orders
</a>
<?php endif; ?>
<?php else: ?>
<a class="checkout-link" href="checkout.php?bookingId=<?php echo $booking['bookingid']; ?>" style="background-color: lightgreen; padding: 6px; border-radius: 15px;font-size: 12px;<?php if ($booking['time_remaining_minutes'] >= 11440) echo 'display: none'; ?>">Checkout</a>
<?php endif; ?>
<a class="extend-link" href="extend.php?bookingId=<?php echo $booking['bookingid']; ?>" style="background-color: lightblue; padding: 6px; border-radius: 15px;font-size: 12px;">Extend</a>
<a class="extend-link" href="add_order.php?bookingId=<?php echo $booking['bookingid']; ?>&memberId=<?php echo $booking['memberid']; ?>" style="background-color: lightblue; padding: 6px; border-radius: 15px;font-size: 12px;">Add Order</a>
<a class="extend-link" href="print.php?bookingId=<?php echo $booking['bookingid']; ?>&in=<?php echo $booking['formatted_startdate']; ?>&out=<?php echo $booking['formatted_enddate']; ?>&memberid=<?php echo $booking['memberid']; ?>&name=<?php echo $booking['firstname'] . ' ' . $booking['lastname']; ?>" target="_blank" style="background-color: lightgrey; padding: 6px; border-radius: 15px;font-size: 12px;">Print</a>
</td>
</tr>
<?php endforeach; ?>
</table>
<a href="/inactive-bookings.php">View Booking Archives</a>
</div>
</section>
<!-- Modal -->
<div id="ordersModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Orders</h2>
<table>
<tr>
<th width='70%'>Items</th>
<th width='30%'>Amount</th>
</tr>
<!-- Populate this table with orders linked to the member -->
</table>
</div>
</div>
<script>
// JavaScript to handle modal behavior and AJAX request
document.addEventListener("DOMContentLoaded", function() {
const modal = document.getElementById("ordersModal");
const modalContent = document.querySelector(".modal-content");
const closeBtn = document.querySelector(".close");
const openLinks = document.querySelectorAll(".open-modal");
openLinks.forEach(link => {
link.addEventListener("click", function(event) {
event.preventDefault();
const memberId = this.getAttribute("data-member-id");
// Make an AJAX request to fetch orders for the member
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const orders = JSON.parse(xhr.responseText);
populateModal(orders, memberId);
}
};
xhr.open("GET", "get_orders.php?memberid=" + memberId, true);
xhr.send();
// Display the modal
modal.style.display = "block";
});
});
// Close the modal when the close button is clicked
closeBtn.addEventListener("click", function() {
modal.style.display = "none";
});
// Close the modal when the user clicks anywhere outside of it
window.addEventListener("click", function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
});
// Populate the modal with orders and payment form
function populateModal(orders, memberId) {
let html = "";
let totalAmount = 0;
for (const order of orders) {
html += `
<tr>
<td width='70%'>${order.items}</td>
<td width='30%'>${order.amount}</td>
</tr>
`;
totalAmount += parseFloat(order.amount); // Add order amount to total
}
// Add the TOTAL row
html += `
<tr>
<td><strong>TOTAL</strong></td>
<td>${totalAmount.toFixed(2)}</td>
</tr>
`;
// Add payment form
html += `
<tr>
<td colspan="2">
<form id="paymentForm">
<input type="hidden" name="memberId" value="${memberId}">
<label for="paymentMode">Payment Mode:</label>
<select name="paymentMode" id="paymentMode" style="width: 50%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">
<option value="Gcash">Gcash</option>
<option value="Cash">Cash</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Voucher">Apply Voucher</option>
</select>
<button type="submit" style="width: 49%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">Submit Payment</button>
</form>
</td>
</tr>
`;
modalContent.querySelector("table").innerHTML = html;
// Handle payment form submission
const paymentForm = document.getElementById("paymentForm");
paymentForm.addEventListener("submit", function(event) {
event.preventDefault();
const paymentMode = paymentForm.querySelector("#paymentMode").value;
// Create a FormData object and set values for memberId, paymentMode, and amount
const formData = new FormData();
formData.append("memberId", memberId);
formData.append("paymentMode", paymentMode);
formData.append("amount", totalAmount.toFixed(2));
// Make an AJAX request to insert the payment record
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// You can perform additional actions here after successful payment submission
alert("Payment submitted successfully!");
location.reload(); // Refresh the page
}
};
xhr.open("POST", "insert_payment.php", true);
xhr.send(formData);
});
}
});
window.setTimeout( function() {
window.location.reload();
}, 60000);
</script>
</body>
</html>