733 lines
29 KiB
HTML
Executable File
733 lines
29 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
|
<title>Bookings - MSPE Admin</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="/admin/css/admin.css">
|
|
<style>
|
|
.bookings-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.bookings-list {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.bookings-filters {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-group label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.filter-group select,
|
|
.filter-group input {
|
|
padding: 0.625rem;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.bookings-table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.bookings-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.bookings-table th {
|
|
background: var(--gray-100);
|
|
padding: 1rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bookings-table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.bookings-table tr:hover {
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-pending {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.status-confirmed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.status-cancelled {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-right: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn.view {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.action-btn.confirm {
|
|
background: var(--success);
|
|
color: white;
|
|
}
|
|
|
|
.action-btn.cancel {
|
|
background: var(--danger);
|
|
color: white;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.booking-details {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 1.5rem;
|
|
height: fit-content;
|
|
}
|
|
|
|
.booking-details-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.booking-details-header h3 {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.detail-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.detail-group label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--gray-500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.detail-group .value {
|
|
font-size: 1rem;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.detail-group .value.highlight {
|
|
color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.booking-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.availability-section {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.availability-header {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.availability-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.add-slot-form {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.add-slot-form .form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.bookings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="admin-wrapper">
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="/admin/dashboard.html" class="sidebar-logo">
|
|
<i class="fas fa-cube"></i>
|
|
<span>MSPE</span>
|
|
</a>
|
|
<button class="sidebar-toggle" id="sidebar-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Main</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/dashboard.html" class="nav-link">
|
|
<i class="fas fa-th-large"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Content</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/pages.html" class="nav-link">
|
|
<i class="fas fa-file-alt"></i>
|
|
<span>Pages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/services.html" class="nav-link">
|
|
<i class="fas fa-concierge-bell"></i>
|
|
<span>Services</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/portfolio.html" class="nav-link">
|
|
<i class="fas fa-briefcase"></i>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/news.html" class="nav-link">
|
|
<i class="fas fa-newspaper"></i>
|
|
<span>News & Events</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/testimonials.html" class="nav-link">
|
|
<i class="fas fa-quote-right"></i>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/team.html" class="nav-link">
|
|
<i class="fas fa-users"></i>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Media</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/media.html" class="nav-link">
|
|
<i class="fas fa-images"></i>
|
|
<span>Media Library</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Inquiries</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/messages.html" class="nav-link">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/subscribers.html" class="nav-link">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Subscribers</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/admin/bookings.html" class="nav-link">
|
|
<i class="fas fa-calendar-check"></i>
|
|
<span>Bookings</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Settings</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/settings.html" class="nav-link">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Site Settings</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/users.html" class="nav-link">
|
|
<i class="fas fa-user-shield"></i>
|
|
<span>Admin Users</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<a href="/index.html" class="view-site-btn" target="_blank">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
<span>View Website</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header class="admin-header">
|
|
<div class="header-left">
|
|
<button class="mobile-toggle" id="mobile-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<h1 class="page-title">Calendar Bookings</h1>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="header-search">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" placeholder="Search bookings..." id="bookings-search">
|
|
</div>
|
|
|
|
<a href="../calendar.html" class="btn btn-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
View Public Calendar
|
|
</a>
|
|
|
|
<div class="header-user">
|
|
<div class="user-avatar">
|
|
<img src="https://ui-avatars.com/api/?name=Admin&background=0ea5e9&color=fff" alt="Admin">
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">Admin</span>
|
|
<span class="user-role">Administrator</span>
|
|
</div>
|
|
<div class="user-dropdown">
|
|
<button class="dropdown-toggle">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="/admin/settings.html"><i class="fas fa-cog"></i> Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="bookings-grid">
|
|
<div class="bookings-list">
|
|
<div class="bookings-filters">
|
|
<div class="filter-group">
|
|
<label>Status</label>
|
|
<select id="filter-status">
|
|
<option value="">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="confirmed">Confirmed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label>Date From</label>
|
|
<input type="date" id="filter-date-from">
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label>Date To</label>
|
|
<input type="date" id="filter-date-to">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bookings-table-container">
|
|
<table class="bookings-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Time</th>
|
|
<th>Client</th>
|
|
<th>Email</th>
|
|
<th>Service</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="bookings-table-body">
|
|
<tr>
|
|
<td colspan="7">
|
|
<div class="empty-state">
|
|
<i class="fas fa-calendar-check"></i>
|
|
<p>Loading bookings...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="booking-details" id="booking-details">
|
|
<div class="empty-state">
|
|
<i class="fas fa-hand-pointer"></i>
|
|
<p>Select a booking to view details</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/admin/js/admin.js"></script>
|
|
<script>
|
|
let currentBookings = [];
|
|
let selectedBooking = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadBookings();
|
|
setupEventListeners();
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
document.getElementById('filter-status').addEventListener('change', loadBookings);
|
|
document.getElementById('filter-date-from').addEventListener('change', loadBookings);
|
|
document.getElementById('filter-date-to').addEventListener('change', loadBookings);
|
|
document.getElementById('bookings-search').addEventListener('input', filterBookings);
|
|
}
|
|
|
|
async function loadBookings() {
|
|
const status = document.getElementById('filter-status').value;
|
|
const dateFrom = document.getElementById('filter-date-from').value;
|
|
const dateTo = document.getElementById('filter-date-to').value;
|
|
|
|
let url = 'bookings.php';
|
|
const params = new URLSearchParams();
|
|
|
|
if (status) params.append('status', status);
|
|
if (dateFrom) params.append('date_from', dateFrom);
|
|
if (dateTo) params.append('date_to', dateTo);
|
|
|
|
if (params.toString()) {
|
|
url += '?' + params.toString();
|
|
}
|
|
|
|
try {
|
|
const response = await MSPE.API.get(url);
|
|
currentBookings = response.data || [];
|
|
renderBookings();
|
|
} catch (error) {
|
|
console.error('Error loading bookings:', error);
|
|
MSPE.showNotification('Failed to load bookings', 'error');
|
|
}
|
|
}
|
|
|
|
function renderBookings() {
|
|
const tbody = document.getElementById('bookings-table-body');
|
|
|
|
if (currentBookings.length === 0) {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="7">
|
|
<div class="empty-state">
|
|
<i class="fas fa-calendar-times"></i>
|
|
<p>No bookings found</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = currentBookings.map(booking => {
|
|
const date = new Date(booking.booking_date);
|
|
const formattedDate = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
|
const formattedTime = new Date(`${booking.booking_date}T${booking.booking_time}`).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
|
|
const statusClass = `status-${booking.status}`;
|
|
|
|
return `
|
|
<tr class="booking-row" data-id="${booking.id}" onclick="selectBooking('${booking.id}')">
|
|
<td>
|
|
<div style="font-weight: 600;">${formattedDate}</div>
|
|
<div style="font-size: 0.75rem; color: var(--gray-500);">${date.toLocaleDateString('en-US', { weekday: 'long' })}</div>
|
|
</td>
|
|
<td style="font-weight: 600;">${formattedTime}</td>
|
|
<td>
|
|
<div>${booking.first_name} ${booking.last_name}</div>
|
|
${booking.company ? `<div style="font-size: 0.75rem; color: var(--gray-500);">${booking.company}</div>` : ''}
|
|
</td>
|
|
<td>${booking.email}</td>
|
|
<td>${formatService(booking.service_interest)}</td>
|
|
<td><span class="status-badge ${statusClass}">${booking.status}</span></td>
|
|
<td>
|
|
<button class="action-btn view" onclick="event.stopPropagation(); selectBooking('${booking.id}')">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
${booking.status === 'pending' ? `
|
|
<button class="action-btn confirm" onclick="event.stopPropagation(); confirmBooking('${booking.id}')">
|
|
<i class="fas fa-check"></i>
|
|
</button>
|
|
<button class="action-btn cancel" onclick="event.stopPropagation(); cancelBooking('${booking.id}')">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
` : ''}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function selectBooking(id) {
|
|
selectedBooking = currentBookings.find(b => b.id === id);
|
|
|
|
if (!selectedBooking) return;
|
|
|
|
const container = document.getElementById('booking-details');
|
|
const date = new Date(selectedBooking.booking_date);
|
|
const formattedDate = date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
|
|
const formattedTime = new Date(`${selectedBooking.booking_date}T${selectedBooking.booking_time}`).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
|
|
|
|
container.innerHTML = `
|
|
<div class="booking-details-header">
|
|
<h3>Booking Details</h3>
|
|
<span class="status-badge status-${selectedBooking.status}">${selectedBooking.status}</span>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Booking ID</label>
|
|
<div class="value">${selectedBooking.id}</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Client Name</label>
|
|
<div class="value highlight">${selectedBooking.first_name} ${selectedBooking.last_name}</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Email</label>
|
|
<div class="value">
|
|
<a href="mailto:${selectedBooking.email}" style="color: var(--primary);">${selectedBooking.email}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Phone</label>
|
|
<div class="value">${selectedBooking.phone || 'Not provided'}</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Company</label>
|
|
<div class="value">${selectedBooking.company || 'Not provided'}</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Date & Time</label>
|
|
<div class="value highlight">${formattedDate} at ${formattedTime}</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Duration</label>
|
|
<div class="value">${selectedBooking.duration} minutes</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>Service Interest</label>
|
|
<div class="value">${formatService(selectedBooking.service_interest)}</div>
|
|
</div>
|
|
|
|
${selectedBooking.message ? `
|
|
<div class="detail-group">
|
|
<label>Message</label>
|
|
<div class="value" style="line-height: 1.6;">${selectedBooking.message}</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="detail-group">
|
|
<label>Submitted</label>
|
|
<div class="value">${MSPE.formatDate(selectedBooking.created_at)}</div>
|
|
</div>
|
|
|
|
<div class="detail-group">
|
|
<label>IP Address</label>
|
|
<div class="value">${selectedBooking.ip_address || 'N/A'}</div>
|
|
</div>
|
|
|
|
${selectedBooking.status === 'pending' ? `
|
|
<div class="booking-actions">
|
|
<button class="btn btn-success" onclick="confirmBooking('${selectedBooking.id}')">
|
|
<i class="fas fa-check"></i> Confirm Booking
|
|
</button>
|
|
<button class="btn btn-danger" onclick="cancelBooking('${selectedBooking.id}')">
|
|
<i class="fas fa-times"></i> Cancel Booking
|
|
</button>
|
|
</div>
|
|
` : ''}
|
|
`;
|
|
}
|
|
|
|
async function confirmBooking(id) {
|
|
if (!await MSPE.confirmDialog('Are you sure you want to confirm this booking? A confirmation email will be sent to the client.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await MSPE.API.put(`bookings.php?id=${id}`, { status: 'confirmed' });
|
|
MSPE.showNotification('Booking confirmed successfully!', 'success');
|
|
loadBookings();
|
|
if (selectedBooking && selectedBooking.id === id) {
|
|
selectBooking(id);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error confirming booking:', error);
|
|
MSPE.showNotification('Failed to confirm booking', 'error');
|
|
}
|
|
}
|
|
|
|
async function cancelBooking(id) {
|
|
if (!await MSPE.confirmDialog('Are you sure you want to cancel this booking? A cancellation notification will be sent to the client.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await MSPE.API.put(`bookings.php?id=${id}`, { status: 'cancelled' });
|
|
MSPE.showNotification('Booking cancelled successfully!', 'success');
|
|
loadBookings();
|
|
if (selectedBooking && selectedBooking.id === id) {
|
|
selectBooking(id);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error cancelling booking:', error);
|
|
MSPE.showNotification('Failed to cancel booking', 'error');
|
|
}
|
|
}
|
|
|
|
function formatService(service) {
|
|
const services = {
|
|
'it-support': 'IT Support',
|
|
'cybersecurity': 'Cybersecurity',
|
|
'cloud': 'Cloud Services',
|
|
'consulting': 'Business Consulting',
|
|
'general': 'General Consultation'
|
|
};
|
|
return services[service] || service || 'Not specified';
|
|
}
|
|
|
|
function filterBookings() {
|
|
const searchTerm = document.getElementById('bookings-search').value.toLowerCase();
|
|
const tbody = document.getElementById('bookings-table-body');
|
|
const rows = tbody.querySelectorAll('.booking-row');
|
|
|
|
rows.forEach(row => {
|
|
const id = row.dataset.id;
|
|
const booking = currentBookings.find(b => b.id === id);
|
|
|
|
if (!booking) return;
|
|
|
|
const searchableText = `
|
|
${booking.first_name} ${booking.last_name}
|
|
${booking.email}
|
|
${booking.company}
|
|
${booking.service_interest}
|
|
`.toLowerCase();
|
|
|
|
if (searchableText.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|