MAINHACK

Viewing / Editing File: admin_booking.php

<?php include("../admin/includes/functions/functions.php");?>
<?php include("../admin/db/db.php");?>
<?php 
if(!isset($_SESSION['username_Xw211qAAsq4']))
{
    header('Location: ../auth/');
    exit();
} else {
    $pageTitle = 'Admin Booking';
    $shopname = $_SESSION['business_name_Xw211qAAsq4'];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $shopname;?> - <?php echo $pageTitle;?></title>
    
    
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #333;
        }

.header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

.logo span {
            font-size: 1.5rem;
            margin-left: 0.5rem;
        }

.main {
            display: flex;
            flex-wrap: wrap;
            padding: 1rem;
            gap: 1rem;
        }

.sidebar, .services, .hair-services, .cart {
            background-color: white;
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid #e0e0e0;
        }

.left-sidebar, .right-sidebar, .services, .hair-services {
            flex: 1 1 100%;
        }

.services h2, .hair-services h2, .cart h3 {
            margin-top: 0;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 0.5rem;
            font-size: clamp(1.2rem, 2.5vw, 1.5rem);
        }

.services ul {
            list-style: none;
            padding: 0;
        }

.services ul li {
            margin: 0.5rem 0;
            padding: 0.5rem;
            border-radius: 4px;
            transition: background-color 0.3s;
            cursor: pointer;
        }

.services ul li:hover, .services ul li.active {
            background-color: #ecf0f1;
        }

.hair-services .service {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e0e0e0;
        }

.hair-services .service:last-child {
            border-bottom: none;
        }

.search-bar {
            margin-bottom: 1rem;
        }

#service-search {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            font-size: 1rem;
            box-sizing: border-box;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

#service-search:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }

#service-search::placeholder {
            color: #95a5a6;
            font-style: italic;
        }

.customer-details {
            margin-bottom: 1.5rem;
            background: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

.customer-details h4 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
            border-bottom: 2px solid #3498db;
            padding-bottom: 0.5rem;
        }

.customer-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

.customer-details label {
            display: block;
            margin-bottom: 0.4rem;
            font-weight: 500;
            color: #34495e;
            font-size: 0.95rem;
        }

.customer-details input,
        .customer-details textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 1rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

.customer-details input:focus,
        .customer-details textarea:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }

.customer-details textarea {
            height: 100px;
            resize: vertical;
        }

.full-width {
            grid-column: 1 / -1;
        }

.customer-details input:required:invalid:not(:placeholder-shown),
        .customer-details input:required:invalid:focus {
            border-color: #e74c3c;
        }

.customer-details .required::after {
            content: ' *';
            color: #e74c3c;
        }

.customer-details input::placeholder,
        .customer-details textarea::placeholder {
            color: #95a5a6;
            font-style: italic;
        }

.cart .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e0e0e0;
        }

.cart .cart-header span {
            font-size: 0.9rem;
            color: #7f8c8d;
        }

.cart .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e0e0e0;
        }

.cart .cart-item:last-child {
            border-bottom: none;
        }

.cart .cart-item .item-name {
            font-weight: bold;
        }

.cart .cart-item .item-duration {
            color: #7f8c8d;
            font-size: 0.9rem;
        }

.cart .cart-total {
            margin-top: 1rem;
            text-align: right;
        }

.cart .cart-action button {
            background-color: #16a085;
            border: none;
            color: white;
            padding: 0.75rem;
            cursor: pointer;
            border-radius: 4px;
            width: 100%;
            font-size: 1rem;
            transition: background-color 0.3s, transform 0.3s;
        }

.cart .cart-action button:hover {
            background-color: #1abc9c;
            transform: scale(1.05);
        }

.cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0.5rem;
            border-bottom: 1px solid #ecf0f1;
        }

.item-name, .item-duration {
            color: #34495e;
            margin-right: 1rem;
        }

.item-price {
            color: #2c3e50;
            font-weight: 500;
            margin-right: 1rem;
        }

.remove-btn {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            cursor: pointer;
            font-size: 0.8rem;
            transition: background 0.3s;
        }

.remove-btn:hover {
            background: #c0392b;
        }

.total {
            font-size: 1.1rem;
            font-weight: 500;
            color: #2c3e50;
            margin-top: 1rem;
        }

.booking-form {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1001;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
        }

.booking-form.active {
            display: flex;
        }

.booking-container {
            background-color: white;
            border-radius: 8px;
            padding: 1rem;
            width: 90%;
            max-width: 800px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-height: 90vh;
            overflow-y: auto;
        }

.booking-section {
            margin-bottom: 1rem;
        }

.booking-section h4 {
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
            color: #2c3e50;
        }

.close-btn {
            position: absolute;
            top: 10px;
            right: 0px;
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }

.close-btn:hover {
            background: #c0392b;
        }

.staff-selection, .date-selection {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

.staff-selection label, .date-selection button {
            padding: 0.5rem 0.75rem;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            cursor: pointer;
            background-color: white;
            transition: background-color 0.3s;
        }

.staff-selection label:hover, .date-selection button:hover {
            background-color: #ecf0f1;
        }

.staff-selection label.checked, .date-selection button.selected {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

.time-selection {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 0.5rem;
        }

.time-selection button {
            padding: 0.5rem;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            cursor: pointer;
            background-color: white;
            transition: background-color 0.3s;
        }

.time-selection button:hover {
            background-color: #ecf0f1;
        }

.time-selection button.selected {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

.book-now button {
            background: #3498db;
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
            width: 100%;
            font-size: 1rem;
        }

.book-now button:hover {
            background: #2980b9;
        }

button.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

@media (max-width: 480px) {
            .header {
                flex-direction: column;
                align-items: flex-start;
            }
            .header .info {
                align-items: flex-start;
                width: 100%;
            }
            .main {
                padding: 0.5rem;
            }
            .booking-container {
                width: 100%;
                border-radius: 0;
                height: 100%;
                max-height: 100vh;
            }
            .staff-selection, .date-selection {
                flex-direction: column;
            }
            .time-selection {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            }
        }

@media (min-width: 481px) and (max-width: 768px) {
            .header {
                flex-direction: row;
            }
            .main {
                flex-direction: column;
            }
            .booking-container {
                width: 95%;
            }
        }

@media (min-width: 769px) {
            .main {
                flex-wrap: nowrap;
            }
            .left-sidebar, .right-sidebar {
                flex: 1 1 20%;
                position: sticky;
                top: 1rem;
                height: calc(100vh - 2rem);
                overflow-y: auto;
            }
            .left-sidebar {
                margin-right: 1rem;
            }
            .right-sidebar {
                margin-left: 1rem;
                flex: 1 1 30%;
            }
            .services, .hair-services {
                flex: 2 1 50%;
                margin: 0;
            }
        }

@media (min-width: 1024px) {
            .main {
                gap: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <span><?php echo $shopname;?> - Admin Booking</span>
        </div>
        <div class="info">
            <a href="index.php" style="color: white; text-decoration: none;">← Back to Dashboard</a>
        </div>
    </div>

<div class="main">
        <div class="sidebar left-sidebar">
            <div class="services">
                <h2>Categories</h2>
                <ul id="category-list">
                    <?php
                    try {
                        $stmt = $con->prepare("SELECT category_id, category_name FROM service_categories WHERE cat_status = '1' AND business_name = ?");
                        $stmt->execute([$shopname]);
                        if ($stmt->rowCount() == 0) {
                            echo "<li>No categories found</li>";
                        }
                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                            echo '<li class="category-item" data-category-id="' . htmlspecialchars($row['category_id']) . '">' . htmlspecialchars($row['category_name']) . '</li>';
                        }
                    } catch (PDOException $e) {
                        echo "<li>Error: " . $e->getMessage() . "</li>";
                    }
                    ?>
                </ul>
            </div>
        </div>

<div class="hair-services" id="service-display">
            <h2>Services</h2>
            
            <div class="search-bar">
                <input type="text" id="service-search" placeholder="Search services..." onkeyup="searchServices()">
            </div>
            <div id="service-list"></div>
        </div>

<div class="sidebar right-sidebar">
            <div class="cart" id="cart">
                <div class="cart-empty" id="cart-empty">
                    <div class="icon">📦</div>
                    <h5>Your Cart is Empty</h5>
                </div>
                <div class="cart-header">
                    <span id="cart-count">0 SERVICES</span>
                </div>
                <div id="cart-items"></div>
                <div class="cart-total">
                    <div class="total">Total: <span id="cart-total">0.00</span></div>
                </div>
                <div class="cart-action">
                    <button onclick="showBookingForm()">Select Customer, Staff, Date & Time</button>
                </div>
            </div>
        </div>
    </div>

<div class="booking-form" id="bookingForm">
        <div class="booking-container">
            <div class="booking-section customer-details">
                <h4>Customer Details</h4>
                <button class="close-btn" onclick="closeBookingForm()">×</button>

<div class="customer-form-grid">
                    <div>
                        <label for="first_name" class="required">First Name</label>
                        <input type="text" id="first_name" placeholder="Enter customer first name" required>
                    </div>

<div>
                        <label for="customer_email">Email</label>
                        <input type="email" id="customer_email" placeholder="Enter customer email">
                    </div>

<div>
                        <label for="customer_phone" class="required">Phone Number</label>
                        <input type="tel" id="customer_phone" placeholder="Enter customer phone number" required>
                    </div>

<div class="full-width">
                        <label for="booking_note">Booking Note (Optional)</label>
                        <textarea id="booking_note" placeholder="Any special requests or notes"></textarea>
                    </div>
                </div>
            </div>

<div class="booking-section">
                <h4>Select Staff</h4>
                <div class="staff-selection">
                    <?php
                    try {
                        $stmt = $con->prepare("SELECT employee_id, first_name, last_name FROM employees WHERE status = 'active' AND business_name = ?");
                        $stmt->execute([$shopname]);
                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                            $employee_name = $row['first_name'] . ' ' . $row['last_name'];
                            echo '<label><input type="radio" name="staff" value="' . htmlspecialchars($row['employee_id']) . '" required> ' . htmlspecialchars($employee_name) . '</label>';
                        }
                    } catch (PDOException $e) {
                        echo '<script>Swal.fire("Error", "Error fetching employees", "error");</script>';
                    }
                    ?>
                </div>
            </div>

<div class="booking-section">
                <h4>Select Date</h4>
                <div class="date-selection" id="date-selection"></div>
            </div>

<div class="booking-section">
                <h4>Select Time</h4>
                <div class="time-selection" id="time-selection"></div>
            </div>

<div class="cart-summary">
                <h4>Cart Summary</h4>
                <div id="cart-summary-items"></div>
                <p>Date & Time: <span id="selectedDateTime"></span></p>
                <p>Total: <span id="summary-total">0.00</span></p>
            </div>

<div class="book-now">
                <button onclick="bookNow()">Book Appointment</button>
            </div>
        </div>
    </div>

document.addEventListener('DOMContentLoaded', () => {
        const categoryItems = document.querySelectorAll('.category-item');
        categoryItems.forEach(item => {
            item.addEventListener('click', () => {
                categoryItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
                const categoryId = item.getAttribute('data-category-id');
                loadServices(categoryId);
            });
        });

if (categoryItems.length > 0) {
            loadServices();
        }

generateWeekDates();
        updateCartDisplay();
    });

function loadServices(categoryId = null) {
        const shopname = '<?php echo $shopname; ?>';

fetch(`get_services.php?category_id=${categoryId}&shopname=${encodeURIComponent(shopname)}`)
            .then(response => response.text())
            .then(text => {
                try {
                    const data = JSON.parse(text);
                    const serviceList = document.getElementById('service-list');
                    serviceList.innerHTML = '';
                    
                    if (data.error) {
                        serviceList.innerHTML = `<p>${data.error}</p>`;
                        return;
                    }
                    
                    if (data.length === 0) {
                        serviceList.innerHTML = '<p>No services available</p>';
                        return;
                    }
                    
                    allServices = data;
                    displayServices(allServices);
                } catch (e) {
                    console.error('JSON parsing error:', e);
                }
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }

function searchServices() {
        const searchInput = document.getElementById('service-search').value.toLowerCase();
        const filteredServices = allServices.filter(service => 
            service.service_name.toLowerCase().includes(searchInput)
        );
        displayServices(filteredServices);
    }

function updateCart(checkbox) {
        const servicePrice = parseFloat(checkbox.value);
        const serviceId = checkbox.getAttribute('data-service-id');
        const serviceName = checkbox.getAttribute('data-service-name');
        const serviceDuration = parseInt(checkbox.getAttribute('data-duration'));

const existingItemIndex = cart.findIndex(item => item.service_id === serviceId);

if (checkbox.checked) {
            if (existingItemIndex === -1) {
                cart.push({ service_id: serviceId, name: serviceName, price: servicePrice, duration: serviceDuration });
            }
        } else {
            if (existingItemIndex !== -1) {
                cart.splice(existingItemIndex, 1);
            }
        }

updateCartDisplay();
    }

function updateCartDisplay() {
        const cartEmpty = document.getElementById('cart-empty');
        const cartHeader = document.querySelector('.cart-header');
        const cartItems = document.getElementById('cart-items');
        const cartTotal = document.querySelector('.cart-total');
        const cartAction = document.querySelector('.cart-action');

if (cart.length === 0) {
            cartEmpty.style.display = 'block';
            cartHeader.style.display = 'none';
            cartItems.style.display = 'none';
            cartTotal.style.display = 'none';
            cartAction.style.display = 'none';
        } else {
            cartEmpty.style.display = 'none';
            cartHeader.style.display = 'block';
            cartItems.style.display = 'block';
            cartTotal.style.display = 'block';
            cartAction.style.display = 'block';

cartItems.innerHTML = '';
            cart.forEach(item => {
                const durationDisplay = item.duration >= 60
                    ? `${Math.floor(item.duration / 60)} Hr${item.duration % 60 > 0 ? ` ${item.duration % 60} Mins` : ''}`
                    : `${item.duration} Mins`;
                    
                cartItems.innerHTML += `
                    <div class="cart-item">
                        <div>
                            <div class="item-name">${item.name}</div>
                            <div class="item-duration">${durationDisplay}</div>
                        </div>
                        <div class="item-price">GHC ${item.price.toFixed(2)}</div>
                        <button class="remove-btn" onclick="removeFromCart('${item.service_id}')">X</button>
                    </div>
                `;
            });

function generateWeekDates() {
        const dateSelection = document.getElementById('date-selection');
        if (!dateSelection) return;

const today = new Date();
        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        dateSelection.innerHTML = '';

for (let i = 0; i < 7; i++) {
            const date = new Date(today);
            date.setDate(today.getDate() + i);

const button = document.createElement('button');
            button.textContent = dateStr;
            button.setAttribute('data-date', date.toISOString().split('T')[0]);

if (i === 0) button.classList.add('selected');

button.addEventListener('click', () => selectDate(button));
            dateSelection.appendChild(button);
        }
        
        generateTimeSlots(today.toISOString().split('T')[0]);
    }

function selectDate(button) {
        document.querySelectorAll('#date-selection button').forEach(btn => 
            btn.classList.remove('selected')
        );
        button.classList.add('selected');
        const selectedDate = button.getAttribute('data-date');
        generateTimeSlots(selectedDate);
    }

function generateTimeSlots(selectedDateStr) {
        const timeSelection = document.getElementById('time-selection');
        timeSelection.innerHTML = '';

const startHour = 8;
        const endHour = 21;

const now = new Date();
        const selectedDate = new Date(selectedDateStr);
        const isToday = now.toDateString() === selectedDate.toDateString();

let firstEnabledSlot = true;

for (let hour = startHour; hour < endHour; hour++) {
            for (let minute of [0, 30]) {
                const slotTime = new Date(selectedDate);
                slotTime.setHours(hour, minute, 0, 0);

const button = document.createElement('button');
                button.textContent = timeStr;
                button.setAttribute('data-time', slotTime.toISOString());

timeSelection.appendChild(button);
            }
        }
    }

function selectTime(button) {
        document.querySelectorAll('.time-selection button').forEach(btn => 
            btn.classList.remove('selected')
        );
        button.classList.add('selected');
        updateSelectedDateTime();
    }

function closeBookingForm() {
        document.getElementById('bookingForm').classList.remove('active');
    }

function bookNow() {
        if (cart.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'No Services Selected',
                text: 'Please select at least one service.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#3085d6'
            });
            return;
        }

const selectedDateButton = document.querySelector('.date-selection button.selected');
        const selectedTimeButton = document.querySelector('.time-selection button.selected');
        const selectedStaff = document.querySelector('input[name="staff"]:checked');
        const firstname = document.getElementById('first_name').value.trim();
        const lastname = document.getElementById('last_name').value.trim();
        const customerPhone = document.getElementById('customer_phone').value.trim();
        const bookingNote = document.getElementById('booking_note').value.trim();

if (!selectedDateButton || !selectedTimeButton || !selectedStaff) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select date, time, and staff member.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#3085d6'
            });
            return;
        }

if (!firstname || !lastname || !customerPhone) {
            Swal.fire({
                icon: 'warning',
                title: 'Incomplete Customer Details',
                text: 'Please fill in all required customer details.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#3085d6'
            });
            return;
        }

const total = cart.reduce((sum, item) => sum + item.price, 0);
        const bookingTime = formatTimeToMySQL(selectedTimeButton.textContent);
        
        const bookingData = {
            employee_id: selectedStaff.value,
            shopname: '<?php echo $shopname; ?>',
            booking_date: selectedDateButton.getAttribute('data-date'),
            booking_time: bookingTime,
            total_amount: total,
            customer_first: firstname,
            customer_last: lastname,
            customer_phone: customerPhone,
            customer_email: document.getElementById('customer_email').value.trim(),
            booking_note: bookingNote,
            services: cart.map(item => ({
                service_id: item.service_id,
                price: item.price
            }))
        };

fetch('save_admin_booking.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(bookingData)
        })
        .then(response => response.text())
        .then(text => {
            try {
                const data = JSON.parse(text);
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Booking Confirmed!',
                        text: `Appointment booked successfully! Booking ID: ${data.booking_id}`,
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#3085d6'
                    }).then(() => {
                        document.getElementById('bookingForm').classList.remove('active');
                        cart = [];
                        updateCartDisplay();
                        document.getElementById('first_name').value = '';
                        document.getElementById('last_name').value = '';
                        document.getElementById('customer_email').value = '';
                        document.getElementById('customer_phone').value = '';
                        document.getElementById('booking_note').value = '';
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Booking Failed',
                        text: data.message || 'Unknown error occurred',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#3085d6'
                    });
                }
            } catch (e) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Invalid response from server',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#3085d6'
                });
            }
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Network error: ' + error.message,
                confirmButtonText: 'OK',
                confirmButtonColor: '#3085d6'
            });
        });
    }
</script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: admin_booking.php

Server Info

System Features

User Info