File: /home/bigisxfd/public_html/cowork/buyvoucher.php
<?php
// Include necessary files
include_once("header.php");
include_once("sidebar.php");
?>
<style>
/* Style for the modal */
.modal {
display: none; /* Hide the modal by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
z-index: 1;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
/* Styling for form elements */
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Styling for the "Add Member" button */
#addMemberButton {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
#addMemberButton:hover {
background-color: #218838;
}
/* Styling for the dropdown */
#member {
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
/* Styling for the submit button */
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
<section>
<div class="column" style="max-width: 700px;">
<form action="process_voucher.php" method="post">
<div>
<select name="member" id="member" required style="width: 80%;">
<option value="" disabled selected>Select Existing Member</option> <!-- Placeholder option -->
<?php
// Fetch and populate member options
$members = getExistingMembers(); // Define this function to fetch members
foreach ($members as $member) {
echo "<option value='{$member['memberid']}'>{$member['firstname']} {$member['lastname']}</option>";
}
?>
</select>
<!-- Initialize Select2 -->
<script>
$(document).ready(function() {
$('#member').select2({
placeholder: "Select Existing Member",
allowClear: true
});
});
</script>
</select>
<button type="button" id="addMemberButton" style="width: 19%;">Add Member</button>
</div>
<div>
<br>
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Dropdown with inline search -->
<select name="package" id="package" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" required>
<option value="" disabled selected>Select Package</option>
<?php
// Fetch and populate package options
$packages = getExistingPackages(); // Define this function to fetch packages
// Define the membership categories (category_id => category_name)
$categories = [
1 => 'Common',
2 => 'Dedicated',
3 => 'Board',
4 => 'Whole Venue'
// Add more categories as needed
];
foreach ($packages as $package) {
$categoryId = $package['category'];
$categoryName = isset($categories[$categoryId]) ? $categories[$categoryId] : 'Unknown Category';
echo "<option value='{$package['packageid']}'>{$package['packagename']} / {$package['price']} ({$categoryName})</option>";
}
?>
</select>
<!-- Include jQuery and Select2 JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- Initialize Select2 -->
<script>
$(document).ready(function() {
$('#package').select2({
placeholder: "Select Package",
allowClear: true
});
});
</script>
<!-- Add this hidden input field inside the form -->
<input type="hidden" id="selectedPackageName" name="selectedPackageName" value="">
<br><br>
<input type="number" id="quantity" name="quantity" placeholder="Quantity of voucher to generate">
<br><br>
<input type="number" id="amount" name="amount" placeholder="Total Payment">
<br><br>
<select name="paymentMode" id="paymentMode" style="width: 100%; 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="Card">Card</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Store Credits">Store Credits</option>
</select>
</div>
<br>
<div>
<label for="startDate">Select Start Date:</label>
<input type="date" id="startDate" name="startDate" required>
</div>
<br>
<div>
<input type="submit" value="Generate Vouchers">
</div>
</form>
<div id="addMemberModal" class="modal" style="display: none;">
<div class="modal-content">
<h2>Add Member</h2>
<form id="addMemberForm">
<div class="form-group">
<label for="rfid">Member ID:</label>
<input type="text" id="rfid" name="rfid">
</div>
<div class="form-group">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" required>
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div class="form-group">
<label for="number">Number:</label>
<input type="text" id="number" name="number">
</div>
<div class="form-group">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</div>
<div class="form-group">
<button type="submit">Add Member</button>
</div>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get the package dropdown element
const packageDropdown = document.getElementById('package');
// Get the hidden input field for the selected package name
const selectedPackageNameInput = document.getElementById('selectedPackageName');
// Update the hidden input field with the selected package name when the dropdown changes
packageDropdown.addEventListener('change', function () {
const selectedPackageName = this.options[this.selectedIndex].text;
selectedPackageNameInput.value = selectedPackageName;
});
const addMemberButton = document.getElementById('addMemberButton');
const addMemberModal = document.getElementById('addMemberModal');
const addMemberForm = document.getElementById('addMemberForm');
// Show modal when "Add Member" button is clicked
addMemberButton.addEventListener('click', function () {
addMemberModal.style.display = 'block';
});
// Hide modal when clicking outside of the modal content
window.addEventListener('click', function (event) {
if (event.target === addMemberModal) {
addMemberModal.style.display = 'none';
}
});
// Handle form submission
addMemberForm.addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the default form submission
// ... rest of your code ...
});
});
</script>
</div>
</section>
</body>
</html>