MAINHACK

Viewing / Editing File: servicetable.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 = 'Today 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);
$qurtyCurrency = $fechC['currency'];

if($qurtyCurrency === "GHC"){
    $mycureency = "₵";
} else {
    $mycureency = $qurtyCurrency ;
}

$stmt1 = $con->prepare("SELECT * FROM barber_admin WHERE business_name = ? ");
$stmt1->execute(array($shopname));
$rows = $stmt1->fetchAll();
foreach($rows as $row)
{
     $phone =  $row['phone'];
     $location =  $row['location'];
   
}
$active = 1;
 $stmt1 = $con->prepare("SELECT rate FROM comm_rate WHERE business_name = ? and active = ?");
$stmt1->execute(array($shopname,$active));
$rows = $stmt1->fetchAll();
foreach($rows as $row)
{
     $comRate1 =  $row['rate'];

if($comRate1 == 0){
        $comRates = 0;
    } else {
         $comRates = $comRate1;
    }
}

$date = date("Y-m-d");

$stmtStats = $con->prepare("
    SELECT 
        COUNT(DISTINCT a.appointment_id) as record_count,
        COALESCE(SUM(tp.price), 0) as total_revenue,
        COALESCE(SUM((tp.price - (tp.price * a.discount / 100)) * a.comRate / 100), 0) as total_commission,
        COALESCE(SUM(tp.price - (tp.price * a.discount / 100) - ((tp.price - (tp.price * a.discount / 100)) * a.comRate / 100)), 0) as total_net
    FROM appointments a
    LEFT JOIN true_price tp ON a.appointment_id = tp.appointment_id
    WHERE a.canceled = 0 
    AND a.status = 'offline' 
    AND a.created = ? 
    AND a.business_name = ?
");
$stmtStats->execute([$date, $shopname]);
$stats = $stmtStats->fetch(PDO::FETCH_ASSOC);

// Format the values
$recordCount = $stats['record_count'];
$totalRevenue = number_format($stats['total_revenue'], 2);
$totalCommission = number_format($stats['total_commission'], 2);
$totalNet = number_format($stats['total_net'], 2);

if (!isset($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf_token = $_SESSION['csrf_token'];

}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Service Records Grid</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.462.0/lucide.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background-color: #f9fafb;
    color: hsl(222.2, 84%, 4.9%);
    line-height: 1.6;
}

.container {
    padding: 1rem;
    max-width: 90%;
    margin: 0 auto;
}

/* Header */
.header {
    margin-bottom: 1.5rem;
}

.title {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(222.2, 84%, 4.9%);
    margin-bottom: 0.25rem;
}

.subtitle {
    font-size: 0.875rem;
    color: hsl(215.4, 16.3%, 46.9%);
}

/* Search and Filter Bar */
.search-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(215.4, 16.3%, 46.9%);
}

.search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: white;
    height: 2.25rem;
}

.search-input:focus {
    outline: none;
    border-color: hsl(207, 89%, 54%);
    box-shadow: 0 0 0 2px hsl(207, 89%, 54%, 0.2);
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    border-radius: 0.375rem;
    background-color: white;
    font-size: 0.875rem;
    cursor: pointer;
    height: 2.25rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    background-color: hsl(210, 40%, 96.1%);
}

/* Statistics Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    padding: 0.75rem;
    border-radius: 0.5rem;
    color: white;
}

.stat-card h3 {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.stat-card p {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-primary {
    background-color: hsl(207, 89%, 54%);
}

.stat-success {
    background-color: hsl(142, 71%, 45%);
}

.stat-warning {
    background-color: hsl(38, 92%, 50%);
}

.stat-accent {
    background-color: hsl(207, 89%, 54%);
}

/* Records Grid */
.records-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .records-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .records-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .records-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1536px) {
    .records-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Record Card */
.record-card {
    background-color: white;
    border: 1px solid hsl(220, 13%, 91%);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s;
    position: relative;
    min-height: 140px;
}

.record-card:hover {
    background-color: hsl(210, 40%, 98%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.service-info {
    flex: 1;
    min-width: 0;
}

.date-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: hsl(215.4, 16.3%, 46.9%);
    margin-bottom: 0.25rem;
}

.service-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: hsl(222.2, 84%, 4.9%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.additional-services {
    font-size: 0.75rem;
    color: hsl(215.4, 16.3%, 46.9%);
    margin-left: 0.25rem;
}

/* Actions Menu */
.actions-menu {
    position: relative;
}

.menu-trigger {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.record-card:hover .menu-trigger {
    opacity: 1;
}

.menu-trigger:hover {
    background-color: hsl(210, 40%, 96.1%);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    min-width: 8rem;
    display: none;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: hsl(210, 40%, 96.1%);
}

.dropdown-item.delete {
    color: hsl(0, 84.2%, 60.2%);
}

.dropdown-item.delete:hover {
    color: hsl(0, 84.2%, 60.2%);
}

/* Financial Info */
.financial-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.amount-item .amount {
    font-weight: 600;
    color: hsl(222.2, 84%, 4.9%);
}

.amount-item .amount.warning {
    color: hsl(38, 92%, 50%);
}

.amount-item .amount.primary {
    color: hsl(207, 89%, 54%);
}

.amount-item .label {
    color: hsl(215.4, 16.3%, 46.9%);
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.employee {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: hsl(215.4, 16.3%, 46.9%);
    flex: 1;
    min-width: 0;
}

.employee span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.status-payment {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment {
    color: hsl(215.4, 16.3%, 46.9%);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    font-weight: 500;
    min-width: 1.5rem;
    height: auto;
}

.status-badge.done {
    background-color: hsl(207, 89%, 54%);
    color: white;
}

.status-badge.pending {
    background-color: hsl(0, 84.2%, 60.2%);
    color: white;
}

/* Modal Container */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.modal-title {
    font-size: 1.25rem;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

.modal-close:hover {
    color: #000;
}

/* Modal Body */
.modal-body {
    padding: 15px;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e9ecef;
}

.service-name {
    font-weight: 500;
    color: #333;
}

.service-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-price {
    font-weight: 400;
    color: #333;
}

.change-price {
    font-size: 0.9em;
    color: #007bff;
    text-decoration: none;
}

.change-price:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Modal Footer */
.modal-footer {
    padding: 10px 15px;
    text-align: right;
    border-top: 1px solid #e9ecef;
}

.btn-close {
    padding: 8px 16px;
    background-color: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-close:hover {
    background-color: #5a6268;
}

.btn-save {
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-save:hover {
    background-color: #0056b3;
}

/* Form Styling for qtyModal */
.modal-body form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-body label {
    font-weight: 500;
}

.modal-body input[type="number"] {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure modal is visible when active */
.custom-modal.active {
    display: flex;
}

/* Existing Modal CSS (unchanged) */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.modal-title {
    font-size: 1.25rem;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

.modal-close:hover {
    color: #000;
}

.modal-body {
    padding: 15px;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e9ecef;
}

.service-name {
    font-weight: 500;
    color: #333;
}

.service-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-price {
    font-weight: 400;
    color: #333;
}

.change-price {
    font-size: 0.9em;
    color: #007bff;
    text-decoration: none;
}

.change-price:hover {
    text-decoration: underline;
    color: #0056b3;
}

.modal-footer {
    padding: 10px 15px;
    text-align: right;
    border-top: 1px solid #e9ecef;
}

.btn-close {
    padding: 8px 16px;
    background-color: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-close:hover {
    background-color: #5a6268;
}

.btn-save {
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-save:hover {
    background-color: #0056b3;
}

.modal-body form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-body label {
    font-weight: 500;
}

.modal-body input[type="number"] {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.custom-modal.active {
    display: flex;
}

/* New Dropdown Menu CSS */
.actions-menu {
    position: relative;
}

.menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    min-width: 120px;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.dropdown-item svg {
    margin-right: 8px;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item.delete {
    color: #dc3545;
}

.dropdown-item.delete:hover {
    background-color: #f8d7da;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.title {
    font-size: 1.8rem;
    margin: 0;
}

.subtitle {
    font-size: 1rem;
    color: #666;
    margin: 5px 0 0;
}

.btn-add-sales {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-add-sales:hover {
    background-color: #218838;
}

</style>
</head>
<body>
    <div class="container">
        
  <div class="header">
    <h1 class="title">Today's Sales </h1>
    <a href="addSales?csrf_token=<?php echo $csrf_token; ?>" class="btn btn-add-sales">Add Sales</a><br />
    <a href="index" class="btn btn-add-sales" style="background-color:black;color: white;">Go back</a>
</div>

<div class="stats-grid">
    <div class="stat-card stat-primary">
        <h3>Records</h3>
        <p><?php echo $recordCount; ?></p>
    </div>
    <div class="stat-card stat-success">
        <h3>Total Income</h3>
        <p><?php echo $mycureency . ' ' . $totalRevenue; ?></p>
    </div>
    <div class="stat-card stat-warning">
        <h3>Commission</h3>
        <p><?php echo $mycureency . ' ' . $totalCommission; ?></p>
    </div>
    <div class="stat-card stat-accent">
        <h3>Net</h3>
        <p><?php echo $mycureency . ' ' . $totalNet; ?></p>
    </div>
</div>

<div class="records-grid">
    <?php
    $date = date("Y-m-d");
    $stmt = $con->prepare("SELECT * FROM appointments a, clients c WHERE a.client_id = c.client_id AND a.canceled = 0 AND a.status = 'offline' AND a.created = ? AND a.business_name = ? ORDER BY a.appointment_id DESC");
    $stmt->execute(array($date, $shopname));
    $rows = $stmt->fetchAll();
    $count = $stmt->rowCount();
    foreach ($rows as $service) {
        // Fetch services for this appointment
        $stmtServices = $con->prepare("SELECT s.service_name as service_name, sb.price as price, sb.service_id as sid FROM services s, true_price sb WHERE s.service_id = sb.service_id AND sb.appointment_id = ?");
        $stmtServices->execute(array($service['appointment_id']));
        $rowsServices = $stmtServices->fetchAll();
        $serviceNames = [];
        $totalPrice = 0;
        foreach ($rowsServices as $rowsService) {
            $serviceNames[] = [
                'name' => $rowsService['service_name'],
                'price' => $rowsService['price'],
                'sid' => $rowsService['sid']
            ];
            $totalPrice += $rowsService['price'];
        }
        $primaryService = $serviceNames[0]['name'] ?? '';
        $additionalServices = count($serviceNames) > 1 ? '+' . (count($serviceNames) - 1) . ' more' : '';

// Calculate discount and commission
        $discountPercent = empty($service['discount']) ? 0 : $service['discount'];
        $discountAmount = ($discountPercent / 100) * $totalPrice;
        $afterDiscount = $totalPrice - $discountAmount;
        $commissionPercent = ($service['comRate'] == 'Null') ? 0 : $service['comRate'];
        $commissionAmount = ($commissionPercent / 100) * $afterDiscount;
        $netAmount = $afterDiscount - $commissionAmount;

// Fetch employee details
        $stmtEmployees = $con->prepare("SELECT first_name, last_name FROM employees e, appointments a WHERE e.employee_id = a.employee_id AND a.appointment_id = ?");
        $stmtEmployees->execute(array($service['appointment_id']));
        $rowsEmployees = $stmtEmployees->fetchAll();
        $employeeName = '';
        foreach ($rowsEmployees as $rowsEmployee) {
            $employeeName = $rowsEmployee['first_name'] . ' ' . $rowsEmployee['last_name'];
        }
    ?>
        <div class="record-card">
            <div class="card-header">
                <div class="service-info">
                    <div class="date-time">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                        <span><?php echo $service['date_created']; ?></span>
                    </div>
                    <div class="service-name">
                        <?php echo htmlspecialchars($primaryService); ?>
                        <?php if ($additionalServices) { ?>
                            <span class="additional-services" onclick="openModal('servicesModal_<?php echo $service['appointment_id']; ?>')" style="cursor: pointer;"><?php echo $additionalServices; ?></span>
                        <?php } ?>
                    </div>
                </div>
                <div class="actions-menu">
    <button class="menu-trigger" onclick="toggleDropdown('dropdown_<?php echo $service['appointment_id']; ?>')">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="1"/>
            <circle cx="19" cy="12" r="1"/>
            <circle cx="5" cy="12" r="1"/>
        </svg>
    </button>
    <div class="dropdown-menu" id="dropdown_<?php echo $service['appointment_id']; ?>">
        <button class="dropdown-item">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6,9 6,2 18,2 18,9"/>
                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
                <rect x="6" y="14" width="12" height="8"/>
            </svg>
            <a href="receipt?appid=<?php echo $service['appointment_id']; ?>">Print</a>
        </button>
        <button class="dropdown-item delete" onclick="deleteAppointment('<?php echo $service['appointment_id']; ?>')">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3,6 5,6 21,6"/>
                <path d="m19,6v14a2,2 0 0,1-2,2H7a2,2 0 0,1-2-2V6m3,0V4a2,2 0 0,1,2-2h4a2,2 0 0,1,2,2v2"/>
            </svg>
            Delete
        </button>
    </div>
</div>

</div>
            <div class="financial-info">
                <div class="amount-item">
                    <div class="amount"><?php echo number_format($totalPrice, 2) . ' ' . $mycureency; ?></div>
                    <div class="label">Total</div>
                </div>
                <div class="amount-item">
                    <div class="amount warning"><?php echo '-' . number_format($discountAmount, 2) . ' ' . $mycureency; ?></div>
                    <div class="label">Disc Amt</div>
                </div>
                <div class="amount-item">
                    <div class="amount"><?php echo number_format($afterDiscount, 2) . ' ' . $mycureency; ?></div>
                    <div class="label">After Disc</div>
                </div>
                <div class="amount-item">
                    <div class="amount warning"><?php echo '-' . number_format($commissionAmount, 2) . ' ' . $mycureency; ?></div>
                    <div class="label">Comm</div>
                </div>
                <div class="amount-item">
                    <div class="amount primary"><?php echo number_format($netAmount, 2) . ' ' . $mycureency; ?></div>
                    <div class="label">Net</div>
                </div>
            </div>
            <div class="card-footer">
                <div class="employee">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                        <circle cx="12" cy="7" r="4"/>
                    </svg>
                    <span><?php echo htmlspecialchars($employeeName); ?></span>
                </div>
                <div class="status-payment">
                    <span class="payment"><?php echo $service['payment_mode']; ?></span>
                    <span class="status-badge <?php echo $service['active'] == 'Yes' ? 'success' : 'pending'; ?>">
                        <?php echo $service['active'] == 'Yes' ? '●' : '○'; ?>
                    </span>
                </div>
            </div>
        </div>

<?php if ($additionalServices) { ?>
            <div class="custom-modal" id="servicesModal_<?php echo $service['appointment_id']; ?>">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Services for Appointment #<?php echo $service['appointment_id']; ?></h5>
                        <button class="modal-close" onclick="closeModal('servicesModal_<?php echo $service['appointment_id']; ?>')">×</button>
                    </div>
                    <div class="modal-body">
                        <div class="service-list">
                            <?php foreach ($serviceNames as $svc) { ?>
                                <div class="service-item">
                                    <span class="service-name"><?php echo htmlspecialchars($svc['name']); ?></span>
                                    <div class="service-details">
                                        <span class="service-price"><?php echo $mycureency . ' ' . number_format($svc['price'], 2); ?></span>
                                        <a href="javascript:;" class="change-price" data-id="<?php echo $svc['sid']; ?>" onclick="openQtyModal('<?php echo $svc['sid']; ?>', '<?php echo htmlspecialchars($svc['name']); ?>')">Change Price</a>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-close" onclick="closeModal('servicesModal_<?php echo $service['appointment_id']; ?>')">Close</button>
                    </div>
                </div>
            </div>
        <?php } ?>
    <?php } ?>

<div class="custom-modal" id="qtyModal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change Price for <span id="qtyModalServiceName"></span></h5>
                <button class="modal-close" onclick="closeModal('qtyModal')">×</button>
            </div>
            <div class="modal-body">
                <form id="changePriceForm">
                    <label for="newPrice">New Price (<?php echo $mycureency; ?>):</label>
                    <input type="number" id="newPrice" name="newPrice" step="0.01" min="0" required>
                    <input type="hidden" id="serviceId" name="serviceId">
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-close" onclick="closeModal('qtyModal')">Close</button>
                <button class="btn btn-save" onclick="savePrice()">Save</button>
            </div>
        </div>
    </div>
</div>

</div>
    </div>
    <br  /><br  /><br  />

// Close modal or dropdown when clicking outside
document.addEventListener('click', function(event) {
    const modals = document.querySelectorAll('.custom-modal.active');
    const dropdowns = document.querySelectorAll('.dropdown-menu.active');
    const isModalTrigger = event.target.classList.contains('additional-services') || event.target.classList.contains('change-price');
    const isDropdownTrigger = event.target.classList.contains('menu-trigger') || event.target.closest('.menu-trigger');

// Close modals
    modals.forEach(modal => {
        const modalContent = modal.querySelector('.modal-content');
        if (!modalContent.contains(event.target) && !isModalTrigger) {
            closeModal(modal.id);
        }
    });

// Close dropdowns
    dropdowns.forEach(dropdown => {
        const actionsMenu = dropdown.closest('.actions-menu');
        if (!actionsMenu.contains(event.target) && !isDropdownTrigger) {
            dropdown.classList.remove('active');
        }
    });
});

// Debugging: Check if script is loaded
console.log('Modal and dropdown script loaded');
</script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: servicetable.php

Server Info

System Features

User Info