MAINHACK

Viewing / Editing File: qsale1.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{
$pageTitle1 = 'Add New Service Sales';
$shopname = $_SESSION['business_name_Xw211qAAsq4'];

$currency = mysqli_query($new,"SELECT currency from barber_admin WHERE
business_name = '$shopname'");
$fechC = mysqli_fetch_array($currency);
$qurtyCurrency1 = $fechC['currency'];

if($qurtyCurrency1 == "GHC"){
$qurtyCurrency = "₵";
} else {
$qurtyCurrency = $qurtyCurrency1;
}
}
?>

<!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 $pageTitle1;?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

.main-wrapper {
    max-width: 100%;
    padding: 0 18px 28px;
}

.panel-box {
    background:white;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    margin-bottom:20px;
}

.table thead {
    background: #eef1f7;
    font-size:13px;
}
.table td input,
.table td select {
    font-size:13px;
}
.add-item-btn {
    background:#4c6ef5;
    border:none;
    padding:10px 16px;
    font-size:13px;
    border-radius:8px;
    font-weight:600;
    color:white;
}

/* Summary */
.summary-box {
    background:#f8faff;
    padding:16px;
    border-radius:10px;
    margin-bottom:16px;
}
.summary-row {
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:14px;
}

.payable-box {
    background:#eef3ff;
    padding:16px;
    border-radius:10px;
    margin-bottom:16px;
    font-size:15px;
}
.payable-header {
    display:flex;
    justify-content:space-between;
    font-weight:600;
    margin-bottom:6px;
}

.btn-main {
    background:#4c6ef5;
    color:white;
    border:none;
    padding:12px;
    border-radius:10px;
    width:100%;
    font-size:16px;
    margin-bottom:10px;
}
.btn-reset {
    background:#d0d5dd;
    color:#222;
    border:none;
    padding:12px;
    border-radius:10px;
    width:100%;
}

/* Payments */
.payment-method {
    background:#fff;
    border:1px solid #e3e7ef;
    border-radius:10px;
    padding:10px;
    margin-bottom:8px;
}
.payment-method label {
    font-size:12px;
    color:#6b7280;
}
.payment-delete {
    background:#fee2e2;
    border:none;
    padding:4px 8px;
    color:#b91c1c;
    border-radius:8px;
    font-size:12px;
}

.add-payment-btn {
    background:#e8f0ff;
    border:1px dashed #4c6ef5;
    color:#4c6ef5;
    padding:7px 14px;
    border-radius:8px;
    font-size:13px;
}

.modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
}
.modal-content {
    background:white;
    padding:20px;
    width:350px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.modal-content h3 {
    font-size:16px;
    font-weight:600;
}
.close-btn, .modal-close {
    float:right;
    cursor:pointer;
    font-size:18px;
}
</style>
</head>
<body>
<header class="header-bar">
    <div>
        <a href="index">Quick Sale</a>
        <a href="index">Go Back</a>
    </div>
    <a href="addSales">Switch to old sale</a>
</header>

<div class="container-fluid main-wrapper">
    <div class="row">
        
        
        <div class="col-lg-8">
            <div class="panel-box">
                <h5>Create Sale</h5>
                
                <div class="row g-3 mb-3">
                    <div class="col-md-8">
                        <label class="form-label">Customer*</label>
                        <input id="customerSearch" class="form-control" placeholder="Search customer" list="customerList">
                        <datalist id="customerList"></datalist>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date</label>
                        <input id="saleDate" type="date" class="form-control" value="<?php echo date('Y-m-d'); ?>">
                    </div>
                </div>

<table class="table table-bordered align-middle">
                    <thead>
                        <tr>
                            <th>Service</th>
                            <th>Staff</th>
                            <th>Qty</th>
                            <th>Price</th>
                            <th>Disc%</th>
                            <th>Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        <tr>
                            <td>
                                <input type="text" class="form-control item-name" placeholder="Search service..." list="serviceList">
                                <datalist id="serviceList"></datalist>
                            </td>
                            <td>
                                <select class="form-select item-description" name="employee_id">
                                    <option value="">Select Employee</option>
                                    <?php foreach ($rows_categories as $c): ?>
                                        <option value="<?php echo $c['employee_id']?>"><?php echo $c['first_name'].' '.$c['last_name']?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                            <td><input type="number" class="form-control item-qty" min="1" value="1"></td>
                            <td><input type="number" class="form-control item-price" min="0" value="0"></td>
                            <td><input type="number" class="form-control item-disc" min="0" max="100" value="0"></td>
                            <td><input type="text" class="form-control item-total" readonly value="0.00"></td>
                            <td><button class="btn btn-sm btn-danger item-delete">✖</button></td>
                        </tr>
                    </tbody>
                </table>

<div class="col-lg-4">
            <div class="panel-box">
                <h5>Billing Summary</h5>

<div class="summary-box">
                    <div class="summary-row"><span>Sub Total</span><strong id="subTotalDisplay">0.00</strong></div>
                    <div class="summary-row"><span>Tip</span><strong id="tipDisplay">0.00</strong></div>
                    <div class="summary-row"><span>VAT</span><strong id="vatDisplay">0.00</strong></div>
                    <div class="summary-row"><span>Commission</span><strong id="commissionDisplay">0.00</strong></div>
                    
                    <button class="btn btn-outline-primary btn-sm mt-2" id="addTipBtn">Add Tip</button>
                    <button class="btn btn-outline-primary btn-sm mt-2" id="addComm">Add Commission</button>
                </div>

<div class="payable-box">
    <div class="payable-header"><span>Payable Amount</span><span id="grandTotalDisplay"><?php echo htmlspecialchars($qurtyCurrency ?? ''); ?> 0.00</span></div>
    <div class="pay-methods" id="payMethods">
        <div class="field payment-method">
            <label for="paymentType0">Payment</label>
            <select class="payment-type" id="paymentType0">
              <option value="Cash">Cash</option>
              <option value="Mobile Money">Mobile Money</option>
              <option value="Card">Credit Card</option>
              <option value="Bank Transfer">Bank Transfer</option>
            </select>
            <input type="number" class="payment-amount" min="0" step="0.01" value="0" />
            <button type="button" class="payment-delete" title="Remove">🗑️</button>
        </div>
    </div>
    <button class="add-payment-btn" id="addPaymentBtn" type="button">Add Payment</button>
</div>

<div class="action-buttons">
    <button class="btn btn-primary" id="checkoutBtn" type="button">Checkout</button>
    <button class="btn btn-secondary" id="resetBtn" type="button">Reset</button>
</div>
</aside>

<div id="tipModal" class="modal" style="display: none;">
<div class="modal-content">
    <span class="close-btn" id="closeTipModal">×</span>
    <h3>Add Tip</h3>
    <div class="field">
        <label for="tipInput">Tip Amount (<?php echo htmlspecialchars($qurtyCurrency ?? 'USD'); ?>):</label>
        <input type="number" id="tipInput" min="0" step="0.01" value="0" />
    </div>
    <button class="btn btn-primary" id="saveTipBtn" type="button">Save Tip</button>
</div>
</div>

<div id="commissionModal" class="modal" style="display: none;">
<div class="modal-content">
    <span class="modal-close" id="closeCommissionModal">×</span>
    <h3>Add Commission</h3>
    <form id="commissionForm">
        <div class="field">
            <label for="commissionPercentage">Commission Percentage (%):</label>
                <select class="form-control"  id="commissionPercentage" style="width:100%">
                <option value="">Select option</option>
                <?php
                $active = 1;
                $stmt = $con->prepare("SELECT * FROM comm_rate WHERE business_name = ? and active = ? order by rate_id DESC");
                $stmt->execute(array($shopname,$active));
                $rows_categories = $stmt->fetchAll();
                ?>
                <?php
                foreach($rows_categories as $service){
                ?>
                <option value="<?php echo $service['rate'];?>"><?php echo $service['rate'];?> %</option>
                <?php }?>
                </select>

</div>
        <div class="field">
            <label for="commissionAmount">Commission Amount (<?php echo htmlspecialchars($qurtyCurrency ?? ''); ?>):</label>
            <input type="text" id="commissionAmount" readonly />
        </div>
        <button type="submit" class="btn btn-primary">Save Commission</button>
    </form>
</div>
</div>
</div>

let tipAmount = 0;
let commissionPercentageValue = 0;
let commissionAmount = 0;
let paymentMethodCount = 0;
let selectedCustomer = null;
const customerSearchCache = new Map();

// Debounce function
function debounce(func, wait) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

function updateTotals() {
    let subTotal = 0;
    const rows = itemsBody.querySelectorAll('tr');
    rows.forEach(row => {
        const total = parseFloat(row.querySelector('.item-total').value) || 0;
        subTotal += total;
    });

let totalPayments = 0;
    const paymentAmounts = payMethods.querySelectorAll('.payment-amount');
    paymentAmounts.forEach(input => {
        totalPayments += parseFloat(input.value) || 0;
    });

const vat = parseFloat(vatDisplay.textContent.replace(currency, '').trim()) || 0;
    commissionAmount = subTotal * (commissionPercentageValue / 100);
    const grandTotal = subTotal + tipAmount;

subTotalDisplay.textContent = `${currency} ${subTotal.toFixed(2)}`;
    tipDisplay.textContent = `${currency} ${tipAmount.toFixed(2)}`;
    commissionPercentageDisplay.textContent = `${commissionPercentageValue.toFixed(2)}`;
    commissionDisplay.textContent = `${currency} ${commissionAmount.toFixed(2)}`;
    grandTotalDisplay.textContent = `${currency} ${grandTotal.toFixed(2)}`;
}

input.addEventListener('input', () => {
        const term = input.value.trim();
        if (term.length < 2) {
            datalist.innerHTML = '';
            return;
        }
        debouncedSearch(term);
    });

input.addEventListener('change', () => {
        const selectedOption = Array.from(datalist.options).find(
            option => option.value === input.value
        );
        const row = input.closest('tr');
        if (selectedOption) {
            const price = selectedOption.getAttribute('data-price') || '0';
            row.querySelector('.item-price').value = parseFloat(price).toFixed(2);
            updateTotal(row);
            updateTotals();
        }
    });
}

function setupCustomerSearch(input, datalist) {
    const debouncedSearch = debounce((term) => {
        if (customerSearchCache.has(term)) {
            const data = customerSearchCache.get(term);
            datalist.innerHTML = '';
            data.forEach(customer => {
                const option = document.createElement('option');
                option.value = customer.display_name;
                option.setAttribute('data-client-id', customer.client_id);
                option.setAttribute('data-first-name', customer.first_name);
                option.setAttribute('data-last-name', customer.last_name);
                option.setAttribute('data-mobile', customer.mobile);
                datalist.appendChild(option);
            });
            return;
        }

fetch(`search_customers.php?shopname=${encodeURIComponent(shopname)}&term=${encodeURIComponent(term)}`)
            .then(response => response.json())
            .then(data => {
                customerSearchCache.set(term, data);
                datalist.innerHTML = '';
                data.forEach(customer => {
                    const option = document.createElement('option');
                    option.value = customer.display_name;
                    option.setAttribute('data-client-id', customer.client_id);
                    option.setAttribute('data-first-name', customer.first_name);
                    option.setAttribute('data-last-name', customer.last_name);
                    option.setAttribute('data-mobile', customer.mobile);
                    datalist.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching customers:', error));
    }, 300);

input.addEventListener('change', () => {
        const selectedOption = Array.from(datalist.options).find(
            option => option.value === input.value
        );
        if (selectedOption) {
            selectedCustomer = {
                client_id: selectedOption.getAttribute('data-client-id'),
                first_name: selectedOption.getAttribute('data-first-name'),
                last_name: selectedOption.getAttribute('data-last-name'),
                mobile: selectedOption.getAttribute('data-mobile')
            };
        } else {
            selectedCustomer = null;
        }
    });
}

document.querySelectorAll('.item-name').forEach(input => {
    const datalist = input.closest('td').querySelector('datalist');
    setupLiveSearch(input, datalist);
});

setupCustomerSearch(customerSearch, customerList);

itemsBody.addEventListener('input', (e) => {
    if (
        e.target.classList.contains('item-qty') ||
        e.target.classList.contains('item-price') ||
        e.target.classList.contains('item-disc')
    ) {
        updateTotal(e.target.closest('tr'));
        updateTotals();
    }
});

addItemBtn.addEventListener('click', () => {
    const uniqueId = Date.now();
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td data-label="Name">
            <input type="text" class="form-control item-name" placeholder="Search service..." list="serviceList${uniqueId}" />
            <datalist id="serviceList${uniqueId}"></datalist>
        </td>
        <td data-label="Description">
                 <?php
                    $stmt = $con->prepare("SELECT * FROM employees WHERE business_name = ? ORDER BY employee_id DESC");
                    $stmt->execute([$shopname]);
                    $rows_categories = $stmt->fetchAll();
                    ?>
                    <select class="form-select item-description" data-toggle="select2" name="employee_id">
                        <option value="">Select Employee</option>
                        <?php
                        foreach ($rows_categories as $category) {
                            echo "<option value='" . htmlspecialchars($category['employee_id']) . "'>";
                            echo htmlspecialchars($category['first_name'] . ' ' . $category['last_name']);
                            echo "</option>";
                        }
                        ?>
                    </select>
        </td>
        <td data-label="Qty." class="qty">
            <input type="number" class="form-control item-qty" min="1" step="1" value="1" />
        </td>
        <td data-label="Price" class="price">
            <input type="number" class="form-control item-price" min="0" step="0.01" value="0" />
        </td>
        <td data-label="Disc.%" class="disc">
            <input type="number" class="form-control item-disc" min="0" max="100" step="0.01" value="0" />
        </td>
        <td data-label="Total" class="total">
            <input type="text" class="form-control item-total" value="0.00" readonly />
        </td>
        <td data-label="" class="delete text-center">
            <button type="button" class="btn btn-sm btn-outline-danger item-delete" title="Remove">🗑️</button>
        </td>
    `;
    itemsBody.appendChild(newRow);
    const newInput = newRow.querySelector('.item-name');
    const newDatalist = newRow.querySelector(`#serviceList${uniqueId}`);
    setupLiveSearch(newInput, newDatalist);
    updateTotals();
});

itemsBody.addEventListener('click', (e) => {
    if (e.target.classList.contains('item-delete')) {
        e.target.closest('tr').remove();
        updateTotals();
    }
});

function updateTotal(row) {
    const qty = parseFloat(row.querySelector('.item-qty').value) || 1;
    const price = parseFloat(row.querySelector('.item-price').value) || 0;
    const disc = parseFloat(row.querySelector('.item-disc').value) || 0;
    const total = qty * price * (1 - disc / 100);
    row.querySelector('.item-total').value = total.toFixed(2);
}

addTipBtn.addEventListener('click', () => {
    tipInput.value = tipAmount.toFixed(2);
    tipModal.style.display = 'flex';
});

addComm.addEventListener('click', () => {
    commissionPercentage.value = commissionPercentageValue.toFixed(2);
    const subTotal = parseFloat(subTotalDisplay.textContent.replace(currency, '').trim()) || 0;
    commissionAmountDisplay.value = (subTotal * (commissionPercentageValue / 100)).toFixed(2);
    commissionModal.style.display = 'flex';
});

commissionPercentage.addEventListener('input', () => {
    const percentage = parseFloat(commissionPercentage.value) || 0;
    const subTotal = parseFloat(subTotalDisplay.textContent.replace(currency, '').trim()) || 0;
    commissionAmountDisplay.value = (subTotal * (percentage / 100)).toFixed(2);
});

closeTipModal.addEventListener('click', () => {
    tipModal.style.display = 'none';
});

closeCommissionModal.addEventListener('click', () => {
    commissionModal.style.display = 'none';
});

tipModal.addEventListener('click', (e) => {
    if (e.target === tipModal) {
        tipModal.style.display = 'none';
    }
});

commissionModal.addEventListener('click', (e) => {
    if (e.target === commissionModal) {
        commissionModal.style.display = 'none';
    }
});

saveTipBtn.addEventListener('click', () => {
    tipAmount = parseFloat(tipInput.value) || 0;
    if (tipAmount < 0) tipAmount = 0;
    tipModal.style.display = 'none';
    updateTotals();
});

commissionForm.addEventListener('submit', (e) => {
    e.preventDefault();
    commissionPercentageValue = parseFloat(commissionPercentage.value) || 0;
    if (commissionPercentageValue < 0) commissionPercentageValue = 0;
    if (commissionPercentageValue > 100) commissionPercentageValue = 100;
    commissionModal.style.display = 'none';
    commissionForm.reset();
    updateTotals();
});

addPaymentBtn.addEventListener('click', () => {
    paymentMethodCount++;
    const newPayment = document.createElement('div');
    newPayment.classList.add('payment-method');
    newPayment.innerHTML = `
        <label for="paymentType${paymentMethodCount}">Payment</label>
        <select class="payment-type form-select form-select-sm" id="paymentType${paymentMethodCount}">
            <option value="Cash">Cash</option>
            <option value="Mobile Money">Mobile Money</option>
            <option value="Card">Credit Card</option>
            <option value="Bank Transfer">Bank Transfer</option>
        </select>
        <input type="number" class="payment-amount form-control form-control-sm" min="0" step="0.01" value="0" />
        <button type="button" class="payment-delete" title="Remove">🗑️</button>
    `;
    payMethods.appendChild(newPayment);
    updateTotals();
});

payMethods.addEventListener('input', (e) => {
    if (e.target.classList.contains('payment-amount')) {
        updateTotals();
    }
});

payMethods.addEventListener('click', (e) => {
    if (e.target.classList.contains('payment-delete')) {
        const paymentMethod = e.target.closest('.payment-method');
        if (payMethods.querySelectorAll('.payment-method').length > 1) {
            paymentMethod.remove();
            updateTotals();
        }
    }
});

// Reset form
resetBtn.addEventListener('click', () => {
    itemsBody.innerHTML = `
        <tr>
            <td data-label="Name">
                <input type="text" class="form-control item-name" placeholder="Search service..." list="serviceList" />
                <datalist id="serviceList"></datalist>
            </td>
            <td data-label="Description">
                    <?php
                    $stmt = $con->prepare("SELECT * FROM employees WHERE business_name = ? ORDER BY employee_id DESC");
                    $stmt->execute([$shopname]);
                    $rows_categories = $stmt->fetchAll();
                    ?>
                    <select class="form-select item-description" data-toggle="select2" name="employee_id">
                        <option value="">Select Employee</option>
                        <?php
                        foreach ($rows_categories as $category) {
                            echo "<option value='" . htmlspecialchars($category['employee_id']) . "'>";
                            echo htmlspecialchars($category['first_name'] . ' ' . $category['last_name']);
                            echo "</option>";
                        }
                        ?>
                    </select>
            </td>
            <td data-label="Qty." class="qty">
                <input type="number" class="form-control item-qty" min="1" step="1" value="1" />
            </td>
            <td data-label="Price" class="price">
                <input type="number" class="form-control item-price" min="0" step="0.01" value="0" />
            </td>
            <td data-label="Disc.%" class="disc">
                <input type="number" class="form-control item-disc" min="0" max="100" step="0.01" value="0" />
            </td>
            <td data-label="Total" class="total">
                <input type="text" class="form-control item-total" value="0.00" readonly />
            </td>
            <td data-label="" class="delete text-center">
                <button type="button" class="btn btn-sm btn-outline-danger item-delete" title="Remove">🗑️</button>
            </td>
        </tr>
    `;
    customerSearch.value = '';
    selectedCustomer = null;
    customerList.innerHTML = '';
    customerSearchCache.clear();
    document.getElementById('saleDate').value = '<?php echo date('Y-m-d'); ?>';
    tipAmount = 0;
    commissionPercentageValue = 0;
    commissionAmount = 0;
    paymentMethodCount = 0;
    payMethods.innerHTML = `
        <div class="field payment-method">
            <label for="paymentType0">Payment</label>
            <select class="payment-type form-select form-select-sm" id="paymentType0">
                <option value="Cash">Cash</option>
                <option value="Mobile Money">Mobile Money</option>
                <option value="Card">Credit Card</option>
                <option value="Bank Transfer">Bank Transfer</option>
            </select>
            <input type="number" class="payment-amount form-control form-control-sm" min="0" step="0.01" value="0" />
            <button type="button" class="payment-delete" title="Remove">🗑️</button>
        </div>
    `;
    document.querySelectorAll('.item-name').forEach(input => {
        const datalist = input.closest('td').querySelector('datalist');
        setupLiveSearch(input, datalist);
    });
    updateTotals();
});

// Checkout handler
document.getElementById('checkoutBtn').addEventListener('click', () => {
    const customerInput = customerSearch.value;
    if (!selectedCustomer) {
        Swal.fire('Error!', 'Please select a valid customer.', 'error');
        return;
    }

const saleDate = document.getElementById('saleDate').value;
    if (!saleDate) {
        Swal.fire('Error!', 'Please select a sale date.', 'error');
        return;
    }

if (items.length === 0) {
        Swal.fire('Error!', 'Please add at least one service.', 'error');
        return;
    }

const grandTotal = parseFloat(grandTotalDisplay.textContent.replace(currency, '').trim()) || 0;
    const totalPayments = payments.reduce((sum, p) => sum + p.amount, 0);
    if (totalPayments < grandTotal) {
        Swal.fire('Error!', 'Total payment amount does not cover the payable amount.', 'error');
        return;
    }

const subTotal = parseFloat(subTotalDisplay.textContent.replace(currency, '').trim()) || 0;
    const tip = tipAmount;
    const commission = commissionAmount;
    const commissionPercentage = commissionPercentageValue;

const formData = {
        customer: selectedCustomer,
        sale_date: saleDate,
        items,
        payments,
        sub_total: subTotal,
        tip,
        commission,
        commission_percentage: commissionPercentage,
        grand_total: grandTotal,
        shopname
    };

fetch('save_appointment.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire('Success!', 'Sale recorded successfully.', 'success');
                resetBtn.click();
            } else {
                Swal.fire('Error!', data.message || 'Failed to record sale.', 'error');
            }
        })
        .catch(error => {
            console.error('Error saving sale:', error);
            Swal.fire('Error!', 'An error occurred while saving the sale.', 'error');
        });
});
});
</script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: qsale1.php

Server Info

System Features

User Info