MAINHACK

Viewing / Editing File: newpos.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Corner POS</title>
    <link rel="stylesheet" href="pos-styles.css">

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #2a2f3b;
    height: 100vh;
    overflow: hidden;
}

/* Header Styles */
.pos-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 80px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}

.header-left .store-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.store-icon {
    font-size: 1.5rem;
}

.store-info h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b82f6;
}

.store-info p {
    font-size: 0.875rem;
    color: #64748b;
}

.header-center {
    text-align: center;
}

.current-time {
    font-size: 0.875rem;
    font-weight: 500;
    color: #2a2f3b;
    margin-bottom: 0.25rem;
}

.status-badge {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #475569;
}

.header-right {
    display: flex;
    gap: 0.5rem;
}

.header-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
    transition: background-color 0.2s;
}

.header-btn:hover {
    background: #f1f5f9;
}

.logout-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

/* Main POS Container */
.pos-container {
    display: flex;
    height: calc(100vh - 80px);
    margin-top: 80px;
}

/* Product Section */
.product-section {
    flex: 2;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.product-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.search-container {
    position: relative;
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: #ffffff;
}

.search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.categories {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.category-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
    white-space: nowrap;
    transition: all 0.2s;
}

.category-btn:hover {
    background: #f1f5f9;
}

.category-btn.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Product Grid */
.product-grid {
    flex: 1;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    overflow-y: auto;
}

.product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.product-card.out-of-stock {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-image {
    aspect-ratio: 1;
    background: #f8fafc;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-name {
    font-weight: 500;
    color: #2a2f3b;
    font-size: 0.875rem;
    line-height: 1.2;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #3b82f6;
}

.add-btn {
    background: #10b981;
    color: #ffffff;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.add-btn:hover {
    background: #059669;
}

.out-of-stock-text {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 500;
}

/* Cart Section */
.cart-section {
    width: 400px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2a2f3b;
}

.cart-badge {
    background: #3b82f6;
    color: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.cart-items {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-cart p {
    color: #64748b;
    margin-bottom: 0.25rem;
}

.empty-subtitle {
    font-size: 0.875rem;
}

.cart-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cart-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-info h3 {
    font-weight: 500;
    color: #2a2f3b;
    margin-bottom: 0.25rem;
}

.cart-item-info p {
    font-size: 0.875rem;
    color: #64748b;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.quantity-btn:hover {
    background: #f1f5f9;
}

.quantity-display {
    width: 2rem;
    text-align: center;
    font-weight: 500;
}

.item-total {
    width: 4rem;
    text-align: right;
    font-weight: 500;
}

.remove-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

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

/* Order Summary */
.order-summary {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 1.5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    color: #2a2f3b;
}

.summary-row.total {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.summary-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.75rem 0;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payment-btn {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    background: #ffffff;
    color: #2a2f3b;
}

.payment-btn:hover {
    background: #f8fafc;
}

.payment-btn.primary {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.payment-btn.primary:hover {
    background: #2563eb;
}

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.clear-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #64748b;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.clear-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Toast Notification */
.toast {
    position: fixed;
    top: 100px;
    right: 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    min-width: 300px;
}

.toast.show {
    transform: translateX(0);
}

.toast-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toast-title {
    font-weight: 600;
    color: #2a2f3b;
}

.toast-message {
    font-size: 0.875rem;
    color: #64748b;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .cart-section {
        width: 350px;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 1024px) {
    .cart-section {
        width: 320px;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .product-header {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    /* Mobile Layout - Stack vertically */
    .pos-container {
        flex-direction: column;
    }
    
    .product-section {
        height: 60vh;
        min-height: 400px;
    }
    
    .cart-section {
        width: 100%;
        height: 40vh;
        min-height: 300px;
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }
    
    /* Header adjustments */
    .pos-header {
        padding: 0.75rem 1rem;
        height: 70px;
    }
    
    .pos-container {
        height: calc(100vh - 70px);
        margin-top: 70px;
    }
    
    .header-content {
        gap: 0.5rem;
    }
    
    .store-info h1 {
        font-size: 1rem;
    }
    
    .store-info p {
        font-size: 0.75rem;
    }
    
    .header-center {
        display: none; /* Hide time on small screens */
    }
    
    .header-right {
        gap: 0.25rem;
    }
    
    .header-btn {
        padding: 0.375rem;
        font-size: 0.8rem;
    }
    
    .header-btn span {
        display: none; /* Hide text, keep icons */
    }
    
    /* Product grid mobile */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .product-card {
        padding: 0.75rem;
    }
    
    .product-image {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .product-name {
        font-size: 0.8rem;
    }
    
    .product-price {
        font-size: 1rem;
    }
    
    .add-btn {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    /* Search and categories mobile */
    .search-input {
        padding: 0.625rem 0.625rem 0.625rem 2.25rem;
        font-size: 0.8rem;
    }
    
    .search-icon {
        left: 0.625rem;
    }
    
    .categories {
        gap: 0.375rem;
    }
    
    .category-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Cart mobile */
    .cart-header {
        padding: 1rem;
    }
    
    .cart-header h2 {
        font-size: 1.1rem;
    }
    
    .cart-items {
        padding: 1rem;
        max-height: none; /* Remove height restriction */
    }
    
    .cart-item {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .cart-item-content {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .cart-item-controls {
        justify-content: space-between;
        width: 100%;
    }
    
    .quantity-controls {
        gap: 0.75rem;
    }
    
    .quantity-btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }
    
    .quantity-display {
        width: 2.5rem;
        font-size: 1rem;
    }
    
    .item-total {
        font-size: 1rem;
        font-weight: 600;
    }
    
    .remove-btn {
        padding: 0.5rem;
        font-size: 1.2rem;
    }
    
    /* Order summary mobile */
    .order-summary {
        padding: 1rem;
    }
    
    .summary-row {
        font-size: 0.9rem;
    }
    
    .summary-row.total {
        font-size: 1.1rem;
    }
    
    .payment-btn {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .payment-grid {
        gap: 0.5rem;
    }
    
    /* Toast mobile */
    .toast {
        right: 1rem;
        left: 1rem;
        min-width: auto;
        top: 80px;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .pos-header {
        padding: 0.5rem;
        height: 60px;
    }
    
    .pos-container {
        height: calc(100vh - 60px);
        margin-top: 60px;
    }
    
    .store-info {
        gap: 0.5rem;
    }
    
    .store-icon {
        font-size: 1.25rem;
    }
    
    .store-info h1 {
        font-size: 0.9rem;
    }
    
    .header-right .header-btn {
        padding: 0.25rem;
        min-width: 2rem;
        height: 2rem;
    }
    
    .product-card {
        padding: 0.5rem;
    }
    
    .product-image {
        font-size: 1.25rem;
        margin-bottom: 0.375rem;
    }
    
    .cart-item-content {
        gap: 0.5rem;
    }
    
    .payment-btn {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .toast {
        top: 70px;
        padding: 0.75rem;
    }
}

@media (max-width: 360px) {
    /* Very small screens */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0.5rem;
        gap: 0.375rem;
    }
    
    .product-card {
        padding: 0.375rem;
    }
    
    .product-name {
        font-size: 0.75rem;
        line-height: 1.1;
    }
    
    .product-price {
        font-size: 0.9rem;
    }
    
    .add-btn {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.8rem;
    }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .pos-container {
        flex-direction: row;
    }
    
    .product-section {
        height: 100%;
        flex: 1;
    }
    
    .cart-section {
        width: 300px;
        height: 100%;
        border-left: 1px solid #e2e8f0;
        border-top: none;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
    .product-card {
        min-height: 120px;
    }
    
    .category-btn, .header-btn, .quantity-btn, .payment-btn {
        min-height: 44px; /* Apple's recommended touch target size */
    }
    
    .add-btn {
        min-width: 40px;
        min-height: 40px;
    }
    
    .remove-btn {
        min-width: 40px;
        min-height: 40px;
    }
}</style>
</head>
<body>
    
    <header class="pos-header">
        <div class="header-content">
            
            <div class="header-left">
                <div class="store-info">
                    <div class="store-icon">🏪</div>
                    <div>
                        <h1>Coffee Corner POS</h1>
                        <p>Terminal #001</p>
                    </div>
                </div>
            </div>

<div class="header-center">
                <p class="current-time" id="currentTime"></p>
                <span class="status-badge">Online</span>
            </div>

<div class="header-right">
                <button class="header-btn">🔔</button>
                <button class="header-btn">⚙️</button>
                <button class="header-btn">👤 John Doe</button>
                <button class="header-btn logout-btn">🚪 Sign Out</button>
            </div>
        </div>
    </header>

<div class="pos-container">
        
        <div class="product-section">
            
            <div class="product-header">
                <div class="search-container">
                    <input type="text" id="searchInput" placeholder="Search products..." class="search-input">
                    <span class="search-icon">🔍</span>
                </div>
                <div class="categories" id="categories">
                    <button class="category-btn active" data-category="All">All</button>
                    <button class="category-btn" data-category="Coffee">Coffee</button>
                    <button class="category-btn" data-category="Tea">Tea</button>
                    <button class="category-btn" data-category="Bakery">Bakery</button>
                    <button class="category-btn" data-category="Food">Food</button>
                    <button class="category-btn" data-category="Beverages">Beverages</button>
                </div>
            </div>

<div class="product-grid" id="productGrid">
                
            </div>
        </div>

<div class="cart-section">
            
            <div class="cart-header">
                <h2>Current Order</h2>
                <span class="cart-badge" id="cartBadge">0 items</span>
            </div>

<div class="cart-items" id="cartItems">
                <div class="empty-cart" id="emptyCart">
                    <div class="empty-icon">💰</div>
                    <p>No items in cart</p>
                    <p class="empty-subtitle">Add items to get started</p>
                </div>
            </div>

<div class="order-summary" id="orderSummary" style="display: none;">
                <div class="summary-row">
                    <span>Subtotal:</span>
                    <span id="subtotal">$0.00</span>
                </div>
                <div class="summary-row">
                    <span>Tax (8%):</span>
                    <span id="tax">$0.00</span>
                </div>
                <div class="summary-divider"></div>
                <div class="summary-row total">
                    <span>Total:</span>
                    <span id="total">$0.00</span>
                </div>

<div class="payment-methods">
                    <button class="payment-btn primary" onclick="processPayment('Card')">
                        💳 Pay with Card
                    </button>
                    <div class="payment-grid">
                        <button class="payment-btn" onclick="processPayment('Cash')">
                            💵 Cash
                        </button>
                        <button class="payment-btn" onclick="processPayment('Mobile')">
                            📱 Mobile
                        </button>
                    </div>
                    <button class="clear-btn" onclick="clearCart()">Clear Order</button>
                </div>
            </div>
        </div>
    </div>

<div class="toast" id="toast">
        <div class="toast-content">
            <span class="toast-title" id="toastTitle"></span>
            <span class="toast-message" id="toastMessage"></span>
        </div>
    </div>
    <script>
        // Product Data
const products = [
    { id: "1", name: "Espresso", price: 2.50, category: "Coffee", inStock: true },
    { id: "2", name: "Cappuccino", price: 4.25, category: "Coffee", inStock: true },
    { id: "3", name: "Latte", price: 4.75, category: "Coffee", inStock: true },
    { id: "4", name: "Americano", price: 3.00, category: "Coffee", inStock: true },
    { id: "5", name: "Croissant", price: 2.95, category: "Bakery", inStock: true },
    { id: "6", name: "Blueberry Muffin", price: 3.50, category: "Bakery", inStock: true },
    { id: "7", name: "Bagel with Cream Cheese", price: 4.25, category: "Bakery", inStock: true },
    { id: "8", name: "Caesar Salad", price: 8.95, category: "Food", inStock: true },
    { id: "9", name: "Turkey Sandwich", price: 7.50, category: "Food", inStock: true },
    { id: "10", name: "Orange Juice", price: 3.25, category: "Beverages", inStock: false },
    { id: "11", name: "Sparkling Water", price: 2.00, category: "Beverages", inStock: true },
    { id: "12", name: "Green Tea", price: 2.75, category: "Tea", inStock: true },
];

// Global State
let cart = [];
let currentCategory = "All";
let currentSearch = "";

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

function initializeApp() {
    updateTime();
    setInterval(updateTime, 1000);
    setupEventListeners();
    renderProducts();
    updateCartDisplay();
}

// Time Display
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleString('en-US', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
    document.getElementById('currentTime').textContent = timeString;
}

// Event Listeners
function setupEventListeners() {
    // Search functionality
    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('input', function(e) {
        currentSearch = e.target.value;
        renderProducts();
    });

// Category filters
    const categoryButtons = document.querySelectorAll('.category-btn');
    categoryButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            categoryButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentCategory = this.dataset.category;
            renderProducts();
        });
    });
}

// Product Rendering
function renderProducts() {
    const productGrid = document.getElementById('productGrid');
    const filteredProducts = products.filter(product => {
        const matchesSearch = product.name.toLowerCase().includes(currentSearch.toLowerCase());
        const matchesCategory = currentCategory === "All" || product.category === currentCategory;
        return matchesSearch && matchesCategory;
    });

productGrid.innerHTML = '';

filteredProducts.forEach(product => {
        const productCard = createProductCard(product);
        productGrid.appendChild(productCard);
    });
}

if (product.inStock) {
        card.addEventListener('click', () => addToCart(product.id));
    }

return card;
}

// Cart Management
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (!product || !product.inStock) return;

updateCartDisplay();
    showToast('Item Added', `${product.name} added to cart`);
}

function updateQuantity(productId, newQuantity) {
    if (newQuantity === 0) {
        removeFromCart(productId);
        return;
    }

const item = cart.find(item => item.id === productId);
    if (item) {
        item.quantity = newQuantity;
        updateCartDisplay();
    }
}

function clearCart() {
    cart = [];
    updateCartDisplay();
    showToast('Cart Cleared', 'All items removed from cart');
}

// Cart Display
function updateCartDisplay() {
    const cartItemsContainer = document.getElementById('cartItems');
    const emptyCart = document.getElementById('emptyCart');
    const orderSummary = document.getElementById('orderSummary');
    const cartBadge = document.getElementById('cartBadge');

const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
    cartBadge.textContent = `${totalItems} item${totalItems !== 1 ? 's' : ''}`;

if (cart.length === 0) {
        emptyCart.style.display = 'flex';
        orderSummary.style.display = 'none';
        cartItemsContainer.innerHTML = '<div class="empty-cart" id="emptyCart"><div class="empty-icon">💰</div><p>No items in cart</p><p class="empty-subtitle">Add items to get started</p></div>';
    } else {
        emptyCart.style.display = 'none';
        orderSummary.style.display = 'block';
        renderCartItems();
        updateOrderSummary();
    }
}

function renderCartItems() {
    const cartItemsContainer = document.getElementById('cartItems');
    
    cartItemsContainer.innerHTML = cart.map(item => `
        <div class="cart-item">
            <div class="cart-item-content">
                <div class="cart-item-info">
                    <h3>${item.name}</h3>
                    <p>$${item.price.toFixed(2)} each</p>
                </div>
                <div class="cart-item-controls">
                    <div class="quantity-controls">
                        <button class="quantity-btn" onclick="updateQuantity('${item.id}', ${Math.max(0, item.quantity - 1)})">-</button>
                        <span class="quantity-display">${item.quantity}</span>
                        <button class="quantity-btn" onclick="updateQuantity('${item.id}', ${item.quantity + 1})">+</button>
                    </div>
                    <div class="item-total">$${(item.price * item.quantity).toFixed(2)}</div>
                    <button class="remove-btn" onclick="removeFromCart('${item.id}')">🗑️</button>
                </div>
            </div>
        </div>
    `).join('');
}

function updateOrderSummary() {
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const tax = subtotal * 0.08; // 8% tax
    const total = subtotal + tax;

// Payment Processing
function processPayment(method) {
    if (cart.length === 0) return;

const total = parseFloat(document.getElementById('total').textContent.replace('$', ''));
    
    // Disable payment buttons
    const paymentButtons = document.querySelectorAll('.payment-btn');
    paymentButtons.forEach(btn => {
        btn.disabled = true;
        btn.textContent = 'Processing...';
    });

// Simulate payment processing
    setTimeout(() => {
        showToast('Payment Successful!', `Order total: $${total.toFixed(2)} paid via ${method}`);
        clearCart();
        
        // Re-enable payment buttons
        paymentButtons.forEach(btn => {
            btn.disabled = false;
        });
        // Restore original button texts
        document.querySelector('.payment-btn.primary').textContent = '💳 Pay with Card';
        document.querySelectorAll('.payment-btn:not(.primary)')[0].textContent = '💵 Cash';
        document.querySelectorAll('.payment-btn:not(.primary)')[1].textContent = '📱 Mobile';
    }, 2000);
}

// Toast Notifications
function showToast(title, message) {
    const toast = document.getElementById('toast');
    const toastTitle = document.getElementById('toastTitle');
    const toastMessage = document.getElementById('toastMessage');

toastTitle.textContent = title;
    toastMessage.textContent = message;

toast.classList.add('show');

setTimeout(() => {
        toast.classList.remove('show');
    }, 3000);
}
    </script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: newpos.php

Server Info

System Features

User Info