{"id":2917,"date":"2026-01-30T10:11:19","date_gmt":"2026-01-30T10:11:19","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=2917"},"modified":"2026-01-30T10:15:44","modified_gmt":"2026-01-30T10:15:44","slug":"pos","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/pos\/","title":{"rendered":"POS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2917\" class=\"elementor elementor-2917\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c6f781 e-flex e-con-boxed e-con e-parent\" data-id=\"6c6f781\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56076d1 elementor-widget elementor-widget-html\" data-id=\"56076d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Elementor HTML Widget \u092e\u0947\u0902 \u092f\u0939 code paste \u0915\u0930\u0947\u0902 -->\r\n<style>\r\n    * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    #pos-system-wrapper {\r\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        min-height: 100vh;\r\n        width: 100%;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    \/* Dark Mode Styles *\/\r\n    #pos-system-wrapper.dark-mode {\r\n        background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .container {\r\n        background: #1a202c;\r\n        color: #e2e8f0;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .navbar {\r\n        background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .products-section,\r\n    #pos-system-wrapper.dark-mode .billing-section,\r\n    #pos-system-wrapper.dark-mode .filters {\r\n        background: #2d3748;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .product-card,\r\n    #pos-system-wrapper.dark-mode .cart-item,\r\n    #pos-system-wrapper.dark-mode .cart-summary,\r\n    #pos-system-wrapper.dark-mode .item-card,\r\n    #pos-system-wrapper.dark-mode .stat-card,\r\n    #pos-system-wrapper.dark-mode .chart-container,\r\n    #pos-system-wrapper.dark-mode .settings-container,\r\n    #pos-system-wrapper.dark-mode .orders-table,\r\n    #pos-system-wrapper.dark-mode .modal-content {\r\n        background: #374151;\r\n        color: #e2e8f0;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .search-bar input,\r\n    #pos-system-wrapper.dark-mode .customer-info input,\r\n    #pos-system-wrapper.dark-mode .customer-info select,\r\n    #pos-system-wrapper.dark-mode .filter-group input,\r\n    #pos-system-wrapper.dark-mode .filter-group select,\r\n    #pos-system-wrapper.dark-mode .form-group input,\r\n    #pos-system-wrapper.dark-mode .form-group select,\r\n    #pos-system-wrapper.dark-mode .form-group textarea {\r\n        background: #2d3748;\r\n        color: #e2e8f0;\r\n        border-color: #4a5568;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .category-btn {\r\n        background: #2d3748;\r\n        color: #e2e8f0;\r\n        border-color: #4a5568;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .product-name,\r\n    #pos-system-wrapper.dark-mode .cart-item-name,\r\n    #pos-system-wrapper.dark-mode .cart-title,\r\n    #pos-system-wrapper.dark-mode .item-card h3,\r\n    #pos-system-wrapper.dark-mode .page-header h2,\r\n    #pos-system-wrapper.dark-mode .modal-header h2,\r\n    #pos-system-wrapper.dark-mode .settings-section h3 {\r\n        color: #e2e8f0;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode td {\r\n        border-bottom-color: #4a5568;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode tr:hover {\r\n        background: #2d3748;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .empty-cart {\r\n        color: #a0aec0;\r\n    }\r\n\r\n    #pos-system-wrapper .container {\r\n        max-width: 1600px;\r\n        margin: 0 auto;\r\n        background: white;\r\n        min-height: 100vh;\r\n    }\r\n\r\n    \/* Navigation *\/\r\n    #pos-system-wrapper .navbar {\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        color: white;\r\n        padding: 15px 20px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.2);\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n    }\r\n\r\n    #pos-system-wrapper .navbar h1 {\r\n        font-size: 1.5em;\r\n    }\r\n\r\n    #pos-system-wrapper .navbar-right {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    #pos-system-wrapper .nav-buttons {\r\n        display: flex;\r\n        gap: 10px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    #pos-system-wrapper .nav-btn {\r\n        padding: 10px 20px;\r\n        background: rgba(255,255,255,0.2);\r\n        border: 2px solid white;\r\n        color: white;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    #pos-system-wrapper .nav-btn:hover, \r\n    #pos-system-wrapper .nav-btn.active {\r\n        background: white;\r\n        color: #667eea;\r\n    }\r\n\r\n    \/* Dark Mode Toggle *\/\r\n    #pos-system-wrapper .dark-mode-toggle {\r\n        background: rgba(255,255,255,0.2);\r\n        border: 2px solid white;\r\n        color: white;\r\n        padding: 10px 15px;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 20px;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    #pos-system-wrapper .dark-mode-toggle:hover {\r\n        background: white;\r\n        color: #667eea;\r\n    }\r\n\r\n    \/* Page Container *\/\r\n    #pos-system-wrapper .page {\r\n        display: none;\r\n        padding: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .page.active {\r\n        display: block;\r\n    }\r\n\r\n    \/* POS Page *\/\r\n    #pos-system-wrapper .main-content {\r\n        display: grid;\r\n        grid-template-columns: 2fr 1fr;\r\n        gap: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .products-section {\r\n        background: #f8f9fa;\r\n        padding: 20px;\r\n        border-radius: 15px;\r\n    }\r\n\r\n    #pos-system-wrapper .search-bar {\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .search-bar input {\r\n        width: 100%;\r\n        padding: 15px 20px;\r\n        font-size: 16px;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 10px;\r\n        transition: border 0.3s;\r\n    }\r\n\r\n    #pos-system-wrapper .search-bar input:focus {\r\n        outline: none;\r\n        border-color: #667eea;\r\n    }\r\n\r\n    #pos-system-wrapper .category-filter {\r\n        display: flex;\r\n        gap: 10px;\r\n        margin-bottom: 20px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    #pos-system-wrapper .category-btn {\r\n        padding: 8px 16px;\r\n        background: white;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 20px;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        font-size: 13px;\r\n    }\r\n\r\n    #pos-system-wrapper .category-btn:hover, \r\n    #pos-system-wrapper .category-btn.active {\r\n        background: #667eea;\r\n        color: white;\r\n        border-color: #667eea;\r\n    }\r\n\r\n    #pos-system-wrapper .products-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\r\n        gap: 15px;\r\n        max-height: 600px;\r\n        overflow-y: auto;\r\n        padding-right: 10px;\r\n    }\r\n\r\n    #pos-system-wrapper .products-grid::-webkit-scrollbar {\r\n        width: 8px;\r\n    }\r\n\r\n    #pos-system-wrapper .products-grid::-webkit-scrollbar-track {\r\n        background: #f1f1f1;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    #pos-system-wrapper .products-grid::-webkit-scrollbar-thumb {\r\n        background: #667eea;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    #pos-system-wrapper .product-card {\r\n        background: white;\r\n        padding: 12px;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        transition: transform 0.3s, box-shadow 0.3s;\r\n        border: 2px solid transparent;\r\n        position: relative;\r\n    }\r\n\r\n    #pos-system-wrapper .product-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n        border-color: #667eea;\r\n    }\r\n\r\n    #pos-system-wrapper .product-icon {\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        height: 100px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: white;\r\n        font-size: 2em;\r\n        margin-bottom: 10px;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    #pos-system-wrapper .product-image {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    #pos-system-wrapper .product-icon-emoji {\r\n        font-size: 2em;\r\n    }\r\n\r\n    #pos-system-wrapper .product-name {\r\n        font-weight: 600;\r\n        font-size: 13px;\r\n        margin-bottom: 5px;\r\n        color: #333;\r\n    }\r\n\r\n    #pos-system-wrapper .product-price {\r\n        color: #667eea;\r\n        font-weight: bold;\r\n        font-size: 15px;\r\n    }\r\n\r\n    #pos-system-wrapper .product-stock {\r\n        font-size: 11px;\r\n        color: #999;\r\n        margin-top: 3px;\r\n    }\r\n\r\n    \/* Selection Counter Badge *\/\r\n    #pos-system-wrapper .selection-badge {\r\n        position: absolute;\r\n        top: 8px;\r\n        right: 8px;\r\n        background: #ef4444;\r\n        color: white;\r\n        width: 24px;\r\n        height: 24px;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 11px;\r\n        font-weight: bold;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.3);\r\n        animation: pulse 0.3s ease;\r\n    }\r\n\r\n    @keyframes pulse {\r\n        0% { transform: scale(0.8); }\r\n        50% { transform: scale(1.2); }\r\n        100% { transform: scale(1); }\r\n    }\r\n\r\n    \/* Billing Section *\/\r\n    #pos-system-wrapper .billing-section {\r\n        background: #f8f9fa;\r\n        padding: 20px;\r\n        border-radius: 15px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        max-height: 700px;\r\n    }\r\n\r\n    #pos-system-wrapper .customer-info {\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .customer-info input, \r\n    #pos-system-wrapper .customer-info select {\r\n        width: 100%;\r\n        padding: 12px;\r\n        margin-bottom: 10px;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-title {\r\n        font-size: 1.3em;\r\n        margin-bottom: 15px;\r\n        color: #333;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-items {\r\n        flex: 1;\r\n        overflow-y: auto;\r\n        margin-bottom: 15px;\r\n        max-height: 280px;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-item {\r\n        background: white;\r\n        padding: 12px;\r\n        margin-bottom: 10px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    #pos-system-wrapper .cart-item-info {\r\n        flex: 1;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-item-name {\r\n        font-weight: 600;\r\n        color: #333;\r\n        margin-bottom: 3px;\r\n        font-size: 13px;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-item-price {\r\n        color: #667eea;\r\n        font-size: 12px;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-item-selection-count {\r\n        font-size: 11px;\r\n        color: #10b981;\r\n        margin-top: 2px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-item-controls {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    #pos-system-wrapper .qty-btn {\r\n        width: 28px;\r\n        height: 28px;\r\n        border: none;\r\n        background: #667eea;\r\n        color: white;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        font-size: 16px;\r\n        transition: background 0.3s;\r\n    }\r\n\r\n    #pos-system-wrapper .qty-btn:hover {\r\n        background: #5568d3;\r\n    }\r\n\r\n    #pos-system-wrapper .qty-display {\r\n        min-width: 25px;\r\n        text-align: center;\r\n        font-weight: bold;\r\n        font-size: 13px;\r\n    }\r\n\r\n    #pos-system-wrapper .remove-btn {\r\n        background: #ef4444;\r\n        color: white;\r\n        border: none;\r\n        padding: 4px 8px;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        font-size: 11px;\r\n        transition: background 0.3s;\r\n    }\r\n\r\n    #pos-system-wrapper .remove-btn:hover {\r\n        background: #dc2626;\r\n    }\r\n\r\n    #pos-system-wrapper .cart-summary {\r\n        background: white;\r\n        padding: 15px;\r\n        border-radius: 10px;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    #pos-system-wrapper .summary-row {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        margin-bottom: 8px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper .summary-row.total {\r\n        font-size: 18px;\r\n        font-weight: bold;\r\n        color: #667eea;\r\n        padding-top: 10px;\r\n        border-top: 2px solid #e0e0e0;\r\n    }\r\n\r\n    #pos-system-wrapper .action-buttons {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 8px;\r\n    }\r\n\r\n    #pos-system-wrapper .btn {\r\n        padding: 12px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    #pos-system-wrapper .btn-checkout {\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        color: white;\r\n        grid-column: 1 \/ -1;\r\n    }\r\n\r\n    #pos-system-wrapper .btn-checkout:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\r\n    }\r\n\r\n    #pos-system-wrapper .btn-clear {\r\n        background: #ef4444;\r\n        color: white;\r\n    }\r\n\r\n    #pos-system-wrapper .btn-print {\r\n        background: #10b981;\r\n        color: white;\r\n    }\r\n\r\n    #pos-system-wrapper .empty-cart {\r\n        text-align: center;\r\n        padding: 30px;\r\n        color: #999;\r\n        font-size: 14px;\r\n    }\r\n\r\n    \/* Order History Page *\/\r\n    #pos-system-wrapper .filters {\r\n        background: #f8f9fa;\r\n        padding: 20px;\r\n        border-radius: 10px;\r\n        margin-bottom: 20px;\r\n        display: flex;\r\n        gap: 15px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    #pos-system-wrapper .filter-group {\r\n        flex: 1;\r\n        min-width: 200px;\r\n    }\r\n\r\n    #pos-system-wrapper .filter-group label {\r\n        display: block;\r\n        margin-bottom: 5px;\r\n        font-weight: 600;\r\n        color: #333;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .filter-group label {\r\n        color: #e2e8f0;\r\n    }\r\n\r\n    #pos-system-wrapper .filter-group input, \r\n    #pos-system-wrapper .filter-group select {\r\n        width: 100%;\r\n        padding: 10px;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper .orders-table {\r\n        background: white;\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    #pos-system-wrapper table {\r\n        width: 100%;\r\n        border-collapse: collapse;\r\n    }\r\n\r\n    #pos-system-wrapper th {\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        color: white;\r\n        padding: 15px;\r\n        text-align: left;\r\n        font-weight: 600;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper td {\r\n        padding: 12px 15px;\r\n        border-bottom: 1px solid #eee;\r\n        font-size: 13px;\r\n    }\r\n\r\n    #pos-system-wrapper tr:hover {\r\n        background: #f8f9fa;\r\n    }\r\n\r\n    #pos-system-wrapper .status-badge {\r\n        padding: 4px 12px;\r\n        border-radius: 20px;\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    #pos-system-wrapper .status-completed {\r\n        background: #d1fae5;\r\n        color: #065f46;\r\n    }\r\n\r\n    #pos-system-wrapper .view-btn, \r\n    #pos-system-wrapper .edit-btn-small {\r\n        padding: 6px 12px;\r\n        background: #667eea;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        font-size: 12px;\r\n        margin-right: 5px;\r\n    }\r\n\r\n    #pos-system-wrapper .delete-btn-small {\r\n        padding: 6px 12px;\r\n        background: #ef4444;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        font-size: 12px;\r\n    }\r\n\r\n    \/* Item Management Page *\/\r\n    #pos-system-wrapper .page-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 20px;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n    }\r\n\r\n    #pos-system-wrapper .page-header h2 {\r\n        font-size: 1.8em;\r\n        color: #333;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .page-header h2 {\r\n        color: #e2e8f0;\r\n    }\r\n\r\n    #pos-system-wrapper .add-item-btn {\r\n        padding: 12px 24px;\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    #pos-system-wrapper .items-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n        gap: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .item-card {\r\n        background: white;\r\n        padding: 20px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    #pos-system-wrapper .item-card-image {\r\n        width: 100%;\r\n        height: 150px;\r\n        border-radius: 8px;\r\n        margin-bottom: 15px;\r\n        overflow: hidden;\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: white;\r\n        font-size: 3em;\r\n    }\r\n\r\n    #pos-system-wrapper .item-card-image img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    #pos-system-wrapper .item-card h3 {\r\n        color: #333;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    #pos-system-wrapper .item-detail {\r\n        margin-bottom: 8px;\r\n        font-size: 14px;\r\n        color: #666;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .item-detail {\r\n        color: #a0aec0;\r\n    }\r\n\r\n    #pos-system-wrapper .item-actions {\r\n        display: flex;\r\n        gap: 8px;\r\n        margin-top: 15px;\r\n    }\r\n\r\n    #pos-system-wrapper .edit-btn {\r\n        flex: 1;\r\n        padding: 8px;\r\n        background: #10b981;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        font-size: 13px;\r\n    }\r\n\r\n    #pos-system-wrapper .delete-btn {\r\n        flex: 1;\r\n        padding: 8px;\r\n        background: #ef4444;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        font-size: 13px;\r\n    }\r\n\r\n    \/* Modal *\/\r\n    #pos-system-wrapper .modal {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0,0,0,0.7);\r\n        z-index: 99999;\r\n        justify-content: center;\r\n        align-items: center;\r\n        overflow-y: auto;\r\n        padding: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .modal.active {\r\n        display: flex;\r\n    }\r\n\r\n    #pos-system-wrapper .modal-content {\r\n        background: white;\r\n        padding: 30px;\r\n        border-radius: 15px;\r\n        max-width: 500px;\r\n        width: 100%;\r\n        max-height: 90vh;\r\n        overflow-y: auto;\r\n    }\r\n\r\n    #pos-system-wrapper .modal-header {\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .modal-header h2 {\r\n        color: #333;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    #pos-system-wrapper .form-group {\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    #pos-system-wrapper .form-group label {\r\n        display: block;\r\n        margin-bottom: 5px;\r\n        font-weight: 600;\r\n        color: #333;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .form-group label {\r\n        color: #e2e8f0;\r\n    }\r\n\r\n    #pos-system-wrapper .form-group input, \r\n    #pos-system-wrapper .form-group select, \r\n    #pos-system-wrapper .form-group textarea {\r\n        width: 100%;\r\n        padding: 10px;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #pos-system-wrapper .image-upload-area {\r\n        border: 2px dashed #667eea;\r\n        border-radius: 8px;\r\n        padding: 20px;\r\n        text-align: center;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        background: #f8f9fa;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .image-upload-area {\r\n        background: #2d3748;\r\n        border-color: #4a5568;\r\n    }\r\n\r\n    #pos-system-wrapper .image-upload-area:hover {\r\n        border-color: #5568d3;\r\n        background: #f0f0ff;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .image-upload-area:hover {\r\n        background: #374151;\r\n    }\r\n\r\n    #pos-system-wrapper .image-preview {\r\n        max-width: 100%;\r\n        max-height: 200px;\r\n        margin-top: 10px;\r\n        border-radius: 8px;\r\n    }\r\n\r\n    #pos-system-wrapper .form-actions {\r\n        display: flex;\r\n        gap: 10px;\r\n        margin-top: 20px;\r\n    }\r\n\r\n    #pos-system-wrapper .btn-submit {\r\n        flex: 1;\r\n        padding: 12px;\r\n        background: #667eea;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    #pos-system-wrapper .btn-cancel {\r\n        flex: 1;\r\n        padding: 12px;\r\n        background: #6b7280;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    \/* Reports Page *\/\r\n    #pos-system-wrapper .stats-cards {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n        gap: 20px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    #pos-system-wrapper .stat-card {\r\n        background: white;\r\n        padding: 25px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    #pos-system-wrapper .stat-card h3 {\r\n        color: #666;\r\n        font-size: 14px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .stat-card h3 {\r\n        color: #a0aec0;\r\n    }\r\n\r\n    #pos-system-wrapper .stat-value {\r\n        font-size: 2em;\r\n        font-weight: bold;\r\n        color: #667eea;\r\n    }\r\n\r\n    #pos-system-wrapper .chart-container {\r\n        background: white;\r\n        padding: 25px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    \/* Settings Page *\/\r\n    #pos-system-wrapper .settings-container {\r\n        max-width: 800px;\r\n        background: white;\r\n        padding: 30px;\r\n        border-radius: 15px;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    #pos-system-wrapper .settings-section {\r\n        margin-bottom: 30px;\r\n        padding-bottom: 30px;\r\n        border-bottom: 2px solid #f0f0f0;\r\n    }\r\n\r\n    #pos-system-wrapper.dark-mode .settings-section {\r\n        border-bottom-color: #4a5568;\r\n    }\r\n\r\n    #pos-system-wrapper .settings-section:last-child {\r\n        border-bottom: none;\r\n    }\r\n\r\n    #pos-system-wrapper .settings-section h3 {\r\n        color: #333;\r\n        margin-bottom: 15px;\r\n        font-size: 1.3em;\r\n    }\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 768px) {\r\n        #pos-system-wrapper .navbar h1 {\r\n            font-size: 1.2em;\r\n        }\r\n\r\n        #pos-system-wrapper .nav-buttons {\r\n            gap: 5px;\r\n        }\r\n\r\n        #pos-system-wrapper .nav-btn {\r\n            padding: 8px 12px;\r\n            font-size: 12px;\r\n        }\r\n\r\n        #pos-system-wrapper .main-content {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        #pos-system-wrapper .products-grid {\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 10px;\r\n        }\r\n\r\n        #pos-system-wrapper .product-card {\r\n            padding: 8px;\r\n        }\r\n\r\n        #pos-system-wrapper .product-icon {\r\n            height: 70px;\r\n            font-size: 1.5em;\r\n        }\r\n\r\n        #pos-system-wrapper .product-name {\r\n            font-size: 11px;\r\n        }\r\n\r\n        #pos-system-wrapper .product-price {\r\n            font-size: 13px;\r\n        }\r\n\r\n        #pos-system-wrapper .product-stock {\r\n            font-size: 10px;\r\n        }\r\n\r\n        #pos-system-wrapper .billing-section {\r\n            max-height: none;\r\n        }\r\n\r\n        #pos-system-wrapper .filters {\r\n            flex-direction: column;\r\n        }\r\n\r\n        #pos-system-wrapper .orders-table {\r\n            overflow-x: auto;\r\n        }\r\n\r\n        #pos-system-wrapper table {\r\n            min-width: 600px;\r\n        }\r\n\r\n        #pos-system-wrapper .items-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        #pos-system-wrapper .stats-cards {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    @media print {\r\n        body * {\r\n            visibility: hidden;\r\n        }\r\n        #pos-system-wrapper .modal-content, \r\n        #pos-system-wrapper .modal-content * {\r\n            visibility: visible;\r\n        }\r\n        #pos-system-wrapper .modal-content {\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n        }\r\n        #pos-system-wrapper .btn-cancel, \r\n        #pos-system-wrapper .close-receipt {\r\n            display: none;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"pos-system-wrapper\">\r\n    <div class=\"container\">\r\n        <!-- Navigation -->\r\n        <div class=\"navbar\">\r\n            <h1>\ud83d\uded2 POS System<\/h1>\r\n            <div class=\"navbar-right\">\r\n                <div class=\"nav-buttons\">\r\n                    <button class=\"nav-btn active\" onclick=\"POSSystem.showPage('pos')\">POS<\/button>\r\n                    <button class=\"nav-btn\" onclick=\"POSSystem.showPage('orders')\">Orders<\/button>\r\n                    <button class=\"nav-btn\" onclick=\"POSSystem.showPage('customers')\">Customers<\/button>\r\n                    <button class=\"nav-btn\" onclick=\"POSSystem.showPage('items')\">Items<\/button>\r\n                    <button class=\"nav-btn\" onclick=\"POSSystem.showPage('reports')\">Reports<\/button>\r\n                    <button class=\"nav-btn\" onclick=\"POSSystem.showPage('settings')\">Settings<\/button>\r\n                <\/div>\r\n                <button class=\"dark-mode-toggle\" onclick=\"POSSystem.toggleDarkMode()\">\r\n                    <span id=\"darkModeIcon\">\ud83c\udf19<\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- POS Page -->\r\n        <div class=\"page active\" id=\"posPage\">\r\n            <div class=\"main-content\">\r\n                <div class=\"products-section\">\r\n                    <div class=\"search-bar\">\r\n                        <input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d Search products...\">\r\n                    <\/div>\r\n\r\n                    <div class=\"category-filter\">\r\n                        <button class=\"category-btn active\" data-category=\"all\">All<\/button>\r\n                        <button class=\"category-btn\" data-category=\"electronics\">Electronics<\/button>\r\n                        <button class=\"category-btn\" data-category=\"clothing\">Clothing<\/button>\r\n                        <button class=\"category-btn\" data-category=\"food\">Food<\/button>\r\n                        <button class=\"category-btn\" data-category=\"beverages\">Beverages<\/button>\r\n                    <\/div>\r\n\r\n                    <div class=\"products-grid\" id=\"productsGrid\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"billing-section\">\r\n                    <div class=\"customer-info\">\r\n                        <select id=\"customerSelect\" onchange=\"POSSystem.selectCustomer()\">\r\n                            <option value=\"\">Select Customer (Optional)<\/option>\r\n                        <\/select>\r\n                        <input type=\"text\" id=\"customerName\" placeholder=\"Or enter new customer name\">\r\n                        <input type=\"tel\" id=\"customerPhone\" placeholder=\"Phone Number\">\r\n                    <\/div>\r\n\r\n                    <h2 class=\"cart-title\">Shopping Cart<\/h2>\r\n                    <div class=\"cart-items\" id=\"cartItems\">\r\n                        <div class=\"empty-cart\">\r\n                            <p>Your cart is empty<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"cart-summary\">\r\n                        <div class=\"summary-row\">\r\n                            <span>Subtotal:<\/span>\r\n                            <span id=\"subtotal\">\u20b90.00<\/span>\r\n                        <\/div>\r\n                        <div class=\"summary-row\">\r\n                            <span>Tax (<span id=\"taxRate\">10<\/span>%):<\/span>\r\n                            <span id=\"tax\">\u20b90.00<\/span>\r\n                        <\/div>\r\n                        <div class=\"summary-row\">\r\n                            <span>Discount:<\/span>\r\n                            <span id=\"discount\">\u20b90.00<\/span>\r\n                        <\/div>\r\n                        <div class=\"summary-row total\">\r\n                            <span>Total:<\/span>\r\n                            <span id=\"total\">\u20b90.00<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"action-buttons\">\r\n                        <button class=\"btn btn-clear\" onclick=\"POSSystem.clearCart()\">Clear<\/button>\r\n                        <button class=\"btn btn-print\" onclick=\"POSSystem.printReceipt()\">Print<\/button>\r\n                        <button class=\"btn btn-checkout\" onclick=\"POSSystem.checkout()\">Checkout<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Orders Page -->\r\n        <div class=\"page\" id=\"ordersPage\">\r\n            <div class=\"page-header\">\r\n                <h2>Order History<\/h2>\r\n            <\/div>\r\n\r\n            <div class=\"filters\">\r\n                <div class=\"filter-group\">\r\n                    <label>From Date<\/label>\r\n                    <input type=\"date\" id=\"filterFromDate\">\r\n                <\/div>\r\n                <div class=\"filter-group\">\r\n                    <label>To Date<\/label>\r\n                    <input type=\"date\" id=\"filterToDate\">\r\n                <\/div>\r\n                <div class=\"filter-group\">\r\n                    <label>Customer<\/label>\r\n                    <input type=\"text\" id=\"filterCustomer\" placeholder=\"Search by customer name\">\r\n                <\/div>\r\n                <div class=\"filter-group\">\r\n                    <label>&nbsp;<\/label>\r\n                    <button class=\"btn btn-checkout\" onclick=\"POSSystem.filterOrders()\">Filter<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"orders-table\">\r\n                <table>\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Order ID<\/th>\r\n                            <th>Date<\/th>\r\n                            <th>Customer<\/th>\r\n                            <th>Items<\/th>\r\n                            <th>Total<\/th>\r\n                            <th>Status<\/th>\r\n                            <th>Action<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"ordersTableBody\">\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Customers Page -->\r\n        <div class=\"page\" id=\"customersPage\">\r\n            <div class=\"page-header\">\r\n                <h2>Customer Management<\/h2>\r\n                <button class=\"add-item-btn\" onclick=\"POSSystem.openCustomerModal()\">+ Add New Customer<\/button>\r\n            <\/div>\r\n\r\n            <div class=\"filters\">\r\n                <div class=\"filter-group\">\r\n                    <label>Search Customer<\/label>\r\n                    <input type=\"text\" id=\"searchCustomer\" placeholder=\"Search by name or phone\" oninput=\"POSSystem.filterCustomers()\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"orders-table\">\r\n                <table>\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Customer ID<\/th>\r\n                            <th>Name<\/th>\r\n                            <th>Phone<\/th>\r\n                            <th>Email<\/th>\r\n                            <th>Total Orders<\/th>\r\n                            <th>Total Spent<\/th>\r\n                            <th>Last Visit<\/th>\r\n                            <th>Action<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"customersTableBody\">\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Items Management Page -->\r\n        <div class=\"page\" id=\"itemsPage\">\r\n            <div class=\"page-header\">\r\n                <h2>Item Management<\/h2>\r\n                <button class=\"add-item-btn\" onclick=\"POSSystem.openItemModal()\">+ Add New Item<\/button>\r\n            <\/div>\r\n\r\n            <div class=\"items-grid\" id=\"itemsGrid\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Reports Page -->\r\n        <div class=\"page\" id=\"reportsPage\">\r\n            <div class=\"page-header\">\r\n                <h2>Sales Reports<\/h2>\r\n            <\/div>\r\n\r\n            <div class=\"filters\">\r\n                <div class=\"filter-group\">\r\n                    <label>Report Type<\/label>\r\n                    <select id=\"reportType\" onchange=\"POSSystem.updateReports()\">\r\n                        <option value=\"daily\">Daily<\/option>\r\n                        <option value=\"weekly\">Weekly<\/option>\r\n                        <option value=\"monthly\">Monthly<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"filter-group\">\r\n                    <label>From Date<\/label>\r\n                    <input type=\"date\" id=\"reportFromDate\" onchange=\"POSSystem.updateReports()\">\r\n                <\/div>\r\n                <div class=\"filter-group\">\r\n                    <label>To Date<\/label>\r\n                    <input type=\"date\" id=\"reportToDate\" onchange=\"POSSystem.updateReports()\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"stats-cards\">\r\n                <div class=\"stat-card\">\r\n                    <h3>Total Sales<\/h3>\r\n                    <div class=\"stat-value\" id=\"totalSales\">\u20b90<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <h3>Total Orders<\/h3>\r\n                    <div class=\"stat-value\" id=\"totalOrders\">0<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <h3>Items Sold<\/h3>\r\n                    <div class=\"stat-value\" id=\"itemsSold\">0<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <h3>Average Order<\/h3>\r\n                    <div class=\"stat-value\" id=\"avgOrder\">\u20b90<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"chart-container\">\r\n                <h3>Top Selling Items<\/h3>\r\n                <div class=\"orders-table\">\r\n                    <table>\r\n                        <thead>\r\n                            <tr>\r\n                                <th>Item Name<\/th>\r\n                                <th>Category<\/th>\r\n                                <th>Quantity Sold<\/th>\r\n                                <th>Revenue<\/th>\r\n                            <\/tr>\r\n                        <\/thead>\r\n                        <tbody id=\"topItemsBody\">\r\n                        <\/tbody>\r\n                    <\/table>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Settings Page -->\r\n        <div class=\"page\" id=\"settingsPage\">\r\n            <div class=\"page-header\">\r\n                <h2>POS Settings<\/h2>\r\n                <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\r\n                    <button class=\"btn btn-print\" onclick=\"POSSystem.exportData()\">\ud83d\udce5 Export All Data<\/button>\r\n                    <button class=\"btn btn-checkout\" onclick=\"document.getElementById('importFile').click()\">\ud83d\udce4 Import Data<\/button>\r\n                    <input type=\"file\" id=\"importFile\" accept=\".json\" style=\"display: none;\" onchange=\"POSSystem.importData(event)\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"settings-container\">\r\n                <div class=\"settings-section\">\r\n                    <h3>Store Information<\/h3>\r\n                    <div class=\"form-group\">\r\n                        <label>Store Name<\/label>\r\n                        <input type=\"text\" id=\"storeName\" value=\"My Store\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Store Address<\/label>\r\n                        <textarea id=\"storeAddress\" rows=\"3\">123 Main Street, City, Country<\/textarea>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Contact Number<\/label>\r\n                        <input type=\"tel\" id=\"storePhone\" value=\"+91 1234567890\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Email<\/label>\r\n                        <input type=\"email\" id=\"storeEmail\" value=\"info@mystore.com\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"settings-section\">\r\n                    <h3>Tax & Currency<\/h3>\r\n                    <div class=\"form-group\">\r\n                        <label>Tax Rate (%)<\/label>\r\n                        <input type=\"number\" id=\"settingsTaxRate\" value=\"10\" min=\"0\" max=\"100\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Currency Symbol<\/label>\r\n                        <input type=\"text\" id=\"currencySymbol\" value=\"\u20b9\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"settings-section\">\r\n                    <h3>Receipt Settings<\/h3>\r\n                    <div class=\"form-group\">\r\n                        <label>Receipt Header<\/label>\r\n                        <input type=\"text\" id=\"receiptHeader\" value=\"Thank you for your purchase!\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Receipt Footer<\/label>\r\n                        <input type=\"text\" id=\"receiptFooter\" value=\"Visit us again!\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <button class=\"btn btn-checkout\" onclick=\"POSSystem.saveSettings()\">Save Settings<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item Modal -->\r\n    <div class=\"modal\" id=\"itemModal\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h2 id=\"modalTitle\">Add New Item<\/h2>\r\n            <\/div>\r\n            <form id=\"itemForm\">\r\n                <div class=\"form-group\">\r\n                    <label>Item Name*<\/label>\r\n                    <input type=\"text\" id=\"itemName\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Category*<\/label>\r\n                    <select id=\"itemCategory\" required>\r\n                        <option value=\"electronics\">Electronics<\/option>\r\n                        <option value=\"clothing\">Clothing<\/option>\r\n                        <option value=\"food\">Food<\/option>\r\n                        <option value=\"beverages\">Beverages<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Price*<\/label>\r\n                    <input type=\"number\" id=\"itemPrice\" step=\"0.01\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Stock Quantity*<\/label>\r\n                    <input type=\"number\" id=\"itemStock\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Item Image<\/label>\r\n                    <div class=\"image-upload-area\" onclick=\"document.getElementById('itemImageInput').click()\">\r\n                        <p>\ud83d\udcf7 Click to upload image<\/p>\r\n                        <p style=\"font-size: 12px; color: #999; margin-top: 5px;\">JPG, PNG, GIF (Max 2MB)<\/p>\r\n                    <\/div>\r\n                    <input type=\"file\" id=\"itemImageInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"POSSystem.previewImage(event)\">\r\n                    <img id=\"imagePreview\" class=\"image-preview\" style=\"display: none;\">\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Description<\/label>\r\n                    <textarea id=\"itemDescription\" rows=\"3\"><\/textarea>\r\n                <\/div>\r\n                <div class=\"form-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" onclick=\"POSSystem.closeItemModal()\">Cancel<\/button>\r\n                    <button type=\"submit\" class=\"btn-submit\">Save Item<\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Customer Modal -->\r\n    <div class=\"modal\" id=\"customerModal\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h2 id=\"customerModalTitle\">Add New Customer<\/h2>\r\n            <\/div>\r\n            <form id=\"customerForm\">\r\n                <div class=\"form-group\">\r\n                    <label>Customer Name*<\/label>\r\n                    <input type=\"text\" id=\"customerFormName\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Phone Number*<\/label>\r\n                    <input type=\"tel\" id=\"customerFormPhone\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Email<\/label>\r\n                    <input type=\"email\" id=\"customerFormEmail\">\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Address<\/label>\r\n                    <textarea id=\"customerFormAddress\" rows=\"3\"><\/textarea>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Notes<\/label>\r\n                    <textarea id=\"customerFormNotes\" rows=\"2\"><\/textarea>\r\n                <\/div>\r\n                <div class=\"form-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" onclick=\"POSSystem.closeCustomerModal()\">Cancel<\/button>\r\n                    <button type=\"submit\" class=\"btn-submit\">Save Customer<\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Receipt Modal -->\r\n    <div class=\"modal\" id=\"receiptModal\">\r\n        <div class=\"modal-content\">\r\n            <div style=\"text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px dashed #ccc;\">\r\n                <h2 style=\"color: #667eea; margin-bottom: 10px;\">RECEIPT<\/h2>\r\n                <p id=\"receiptStoreName\" style=\"font-weight: bold;\"><\/p>\r\n                <p id=\"receiptStoreAddress\" style=\"font-size: 13px;\"><\/p>\r\n                <p id=\"receiptStoreContact\" style=\"font-size: 13px;\"><\/p>\r\n                <p id=\"receiptDate\" style=\"margin-top: 10px;\"><\/p>\r\n                <p id=\"receiptNumber\" style=\"font-weight: bold;\"><\/p>\r\n            <\/div>\r\n\r\n            <div style=\"margin-bottom: 20px;\">\r\n                <p><strong>Customer:<\/strong> <span id=\"receiptCustomer\"><\/span><\/p>\r\n                <p><strong>Phone:<\/strong> <span id=\"receiptPhone\"><\/span><\/p>\r\n            <\/div>\r\n\r\n            <div id=\"receiptItems\" style=\"margin-bottom: 20px;\"><\/div>\r\n\r\n            <div style=\"border-top: 2px solid #333; padding-top: 15px;\">\r\n                <p style=\"display: flex; justify-content: space-between; margin-bottom: 8px;\"><strong>Subtotal:<\/strong> <span id=\"receiptSubtotal\"><\/span><\/p>\r\n                <p style=\"display: flex; justify-content: space-between; margin-bottom: 8px;\"><strong>Tax:<\/strong> <span id=\"receiptTax\"><\/span><\/p>\r\n                <p style=\"display: flex; justify-content: space-between; margin-bottom: 8px;\"><strong>Discount:<\/strong> <span id=\"receiptDiscount\"><\/span><\/p>\r\n                <p style=\"display: flex; justify-content: space-between; font-size: 1.3em; font-weight: bold; color: #667eea; margin-top: 10px;\"><strong>Total:<\/strong> <span id=\"receiptTotal\"><\/span><\/p>\r\n            <\/div>\r\n\r\n            <div style=\"text-align: center; margin-top: 20px; padding-top: 20px; border-top: 2px dashed #ccc;\">\r\n                <p id=\"receiptFooterText\"><\/p>\r\n            <\/div>\r\n\r\n            <button class=\"btn-cancel\" onclick=\"POSSystem.closeReceipt()\" style=\"margin-top: 20px; width: 100%;\">Close<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ POS System - Wrapped in namespace to avoid conflicts\r\n    const POSSystem = (function() {\r\n        \/\/ Data Storage\r\n        let products = JSON.parse(localStorage.getItem('pos_products')) || [\r\n            { id: 1, name: \"Laptop\", price: 45000, category: \"electronics\", stock: 10, image: null, selectionCount: 0 },\r\n            { id: 2, name: \"Smartphone\", price: 30000, category: \"electronics\", stock: 25, image: null, selectionCount: 0 },\r\n            { id: 3, name: \"Headphones\", price: 4000, category: \"electronics\", stock: 50, image: null, selectionCount: 0 },\r\n            { id: 4, name: \"Keyboard\", price: 2500, category: \"electronics\", stock: 30, image: null, selectionCount: 0 },\r\n            { id: 5, name: \"Mouse\", price: 1500, category: \"electronics\", stock: 40, image: null, selectionCount: 0 },\r\n            { id: 6, name: \"T-Shirt\", price: 1000, category: \"clothing\", stock: 100, image: null, selectionCount: 0 },\r\n            { id: 7, name: \"Jeans\", price: 2500, category: \"clothing\", stock: 60, image: null, selectionCount: 0 },\r\n            { id: 8, name: \"Jacket\", price: 4500, category: \"clothing\", stock: 30, image: null, selectionCount: 0 },\r\n            { id: 9, name: \"Sneakers\", price: 4000, category: \"clothing\", stock: 45, image: null, selectionCount: 0 },\r\n            { id: 10, name: \"Hat\", price: 750, category: \"clothing\", stock: 80, image: null, selectionCount: 0 },\r\n            { id: 11, name: \"Pizza\", price: 650, category: \"food\", stock: 20, image: null, selectionCount: 0 },\r\n            { id: 12, name: \"Burger\", price: 450, category: \"food\", stock: 35, image: null, selectionCount: 0 },\r\n            { id: 13, name: \"Sandwich\", price: 350, category: \"food\", stock: 50, image: null, selectionCount: 0 },\r\n            { id: 14, name: \"Salad\", price: 400, category: \"food\", stock: 30, image: null, selectionCount: 0 },\r\n            { id: 15, name: \"Pasta\", price: 600, category: \"food\", stock: 25, image: null, selectionCount: 0 },\r\n            { id: 16, name: \"Coffee\", price: 200, category: \"beverages\", stock: 100, image: null, selectionCount: 0 },\r\n            { id: 17, name: \"Tea\", price: 150, category: \"beverages\", stock: 100, image: null, selectionCount: 0 },\r\n            { id: 18, name: \"Juice\", price: 250, category: \"beverages\", stock: 60, image: null, selectionCount: 0 },\r\n            { id: 19, name: \"Soda\", price: 100, category: \"beverages\", stock: 120, image: null, selectionCount: 0 },\r\n            { id: 20, name: \"Water\", price: 75, category: \"beverages\", stock: 200, image: null, selectionCount: 0 }\r\n        ];\r\n\r\n        let cart = [];\r\n        let orders = JSON.parse(localStorage.getItem('pos_orders')) || [];\r\n        let customers = JSON.parse(localStorage.getItem('pos_customers')) || [];\r\n        let settings = JSON.parse(localStorage.getItem('pos_settings')) || {\r\n            storeName: \"My Store\",\r\n            storeAddress: \"123 Main Street, City, Country\",\r\n            storePhone: \"+91 1234567890\",\r\n            storeEmail: \"info@mystore.com\",\r\n            taxRate: 10,\r\n            currencySymbol: \"\u20b9\",\r\n            receiptHeader: \"Thank you for your purchase!\",\r\n            receiptFooter: \"Visit us again!\",\r\n            darkMode: false\r\n        };\r\n\r\n        let editingItemId = null;\r\n        let editingCustomerId = null;\r\n        let currentItemImage = null;\r\n\r\n        \/\/ Initialize\r\n        function init() {\r\n            displayProducts(products);\r\n            setupEventListeners();\r\n            loadSettings();\r\n            setDefaultDates();\r\n            updateCustomerDropdown();\r\n            \r\n            \/\/ Apply dark mode if saved\r\n            if (settings.darkMode) {\r\n                document.getElementById('pos-system-wrapper').classList.add('dark-mode');\r\n                document.getElementById('darkModeIcon').textContent = '\u2600\ufe0f';\r\n            }\r\n        }\r\n\r\n        function toggleDarkMode() {\r\n            const wrapper = document.getElementById('pos-system-wrapper');\r\n            wrapper.classList.toggle('dark-mode');\r\n            settings.darkMode = wrapper.classList.contains('dark-mode');\r\n            localStorage.setItem('pos_settings', JSON.stringify(settings));\r\n            \r\n            const icon = document.getElementById('darkModeIcon');\r\n            icon.textContent = settings.darkMode ? '\u2600\ufe0f' : '\ud83c\udf19';\r\n        }\r\n\r\n        function setDefaultDates() {\r\n            const today = new Date().toISOString().split('T')[0];\r\n            document.getElementById('filterFromDate').value = today;\r\n            document.getElementById('filterToDate').value = today;\r\n            document.getElementById('reportFromDate').value = today;\r\n            document.getElementById('reportToDate').value = today;\r\n        }\r\n\r\n        function getProductIcon(category) {\r\n            const icons = {\r\n                electronics: '\ud83d\udcbb',\r\n                clothing: '\ud83d\udc55',\r\n                food: '\ud83c\udf55',\r\n                beverages: '\u2615'\r\n            };\r\n            return icons[category] || '\ud83d\udce6';\r\n        }\r\n\r\n        function displayProducts(productsToShow) {\r\n            const grid = document.getElementById('productsGrid');\r\n            grid.innerHTML = productsToShow.map(product => `\r\n                <div class=\"product-card\" onclick=\"POSSystem.addToCart(${product.id})\">\r\n                    ${product.selectionCount > 0 ? `<div class=\"selection-badge\">${product.selectionCount}<\/div>` : ''}\r\n                    <div class=\"product-icon\">\r\n                        ${product.image ? \r\n                            `<img decoding=\"async\" src=\"${product.image}\" class=\"product-image\" alt=\"${product.name}\">` : \r\n                            `<span class=\"product-icon-emoji\">${getProductIcon(product.category)}<\/span>`\r\n                        }\r\n                    <\/div>\r\n                    <div class=\"product-name\">${product.name}<\/div>\r\n                    <div class=\"product-price\">${settings.currencySymbol}${product.price.toFixed(2)}<\/div>\r\n                    <div class=\"product-stock\">Stock: ${product.stock}<\/div>\r\n                <\/div>\r\n            `).join('');\r\n        }\r\n\r\n        function previewImage(event) {\r\n            const file = event.target.files[0];\r\n            if (file) {\r\n                \/\/ Check file size (2MB limit)\r\n                if (file.size > 2 * 1024 * 1024) {\r\n                    alert('Image size should be less than 2MB!');\r\n                    event.target.value = '';\r\n                    return;\r\n                }\r\n\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    currentItemImage = e.target.result;\r\n                    const preview = document.getElementById('imagePreview');\r\n                    preview.src = currentItemImage;\r\n                    preview.style.display = 'block';\r\n                };\r\n                reader.readAsDataURL(file);\r\n            }\r\n        }\r\n\r\n        function setupEventListeners() {\r\n            document.getElementById('searchInput').addEventListener('input', function(e) {\r\n                const searchTerm = e.target.value.toLowerCase();\r\n                const filtered = products.filter(p => \r\n                    p.name.toLowerCase().includes(searchTerm)\r\n                );\r\n                displayProducts(filtered);\r\n            });\r\n\r\n            document.querySelectorAll('#pos-system-wrapper .category-btn').forEach(btn => {\r\n                btn.addEventListener('click', function() {\r\n                    document.querySelectorAll('#pos-system-wrapper .category-btn').forEach(b => b.classList.remove('active'));\r\n                    this.classList.add('active');\r\n                    \r\n                    const category = this.dataset.category;\r\n                    const filtered = category === 'all' \r\n                        ? products \r\n                        : products.filter(p => p.category === category);\r\n                    displayProducts(filtered);\r\n                });\r\n            });\r\n\r\n            document.getElementById('itemForm').addEventListener('submit', function(e) {\r\n                e.preventDefault();\r\n                saveItem();\r\n            });\r\n\r\n            document.getElementById('customerForm').addEventListener('submit', function(e) {\r\n                e.preventDefault();\r\n                saveCustomer();\r\n            });\r\n        }\r\n\r\n        function addToCart(productId) {\r\n            const product = products.find(p => p.id === productId);\r\n            if (!product) return;\r\n\r\n            if (product.stock <= 0) {\r\n                alert('This item is out of stock!');\r\n                return;\r\n            }\r\n\r\n            const existingItem = cart.find(item => item.id === productId);\r\n\r\n            if (existingItem) {\r\n                if (existingItem.quantity >= product.stock) {\r\n                    alert('Cannot add more. Insufficient stock!');\r\n                    return;\r\n                }\r\n                existingItem.quantity++;\r\n            } else {\r\n                cart.push({ ...product, quantity: 1 });\r\n            }\r\n\r\n            \/\/ Increment selection count\r\n            product.selectionCount = (product.selectionCount || 0) + 1;\r\n            localStorage.setItem('pos_products', JSON.stringify(products));\r\n\r\n            updateCart();\r\n            displayProducts(products); \/\/ Refresh to show updated badge\r\n        }\r\n\r\n        function updateCart() {\r\n            const cartContainer = document.getElementById('cartItems');\r\n            \r\n            if (cart.length === 0) {\r\n                cartContainer.innerHTML = '<div class=\"empty-cart\"><p>Your cart is empty<\/p><\/div>';\r\n            } else {\r\n                cartContainer.innerHTML = cart.map(item => {\r\n                    const product = products.find(p => p.id === item.id);\r\n                    const selectionCount = product ? product.selectionCount : 0;\r\n                    return `\r\n                        <div class=\"cart-item\">\r\n                            <div class=\"cart-item-info\">\r\n                                <div class=\"cart-item-name\">${item.name}<\/div>\r\n                                <div class=\"cart-item-price\">${settings.currencySymbol}${item.price.toFixed(2)} each<\/div>\r\n                                ${selectionCount > 0 ? `<div class=\"cart-item-selection-count\">\u2713 Selected ${selectionCount}x times<\/div>` : ''}\r\n                            <\/div>\r\n                            <div class=\"cart-item-controls\">\r\n                                <button class=\"qty-btn\" onclick=\"POSSystem.decreaseQuantity(${item.id})\">-<\/button>\r\n                                <span class=\"qty-display\">${item.quantity}<\/span>\r\n                                <button class=\"qty-btn\" onclick=\"POSSystem.increaseQuantity(${item.id})\">+<\/button>\r\n                                <button class=\"remove-btn\" onclick=\"POSSystem.removeFromCart(${item.id})\">\u2715<\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                }).join('');\r\n            }\r\n\r\n            updateSummary();\r\n        }\r\n\r\n        function increaseQuantity(productId) {\r\n            const item = cart.find(item => item.id === productId);\r\n            const product = products.find(p => p.id === productId);\r\n            \r\n            if (item && product) {\r\n                if (item.quantity >= product.stock) {\r\n                    alert('Cannot add more. Insufficient stock!');\r\n                    return;\r\n                }\r\n                item.quantity++;\r\n                product.selectionCount = (product.selectionCount || 0) + 1;\r\n                localStorage.setItem('pos_products', JSON.stringify(products));\r\n                updateCart();\r\n                displayProducts(products);\r\n            }\r\n        }\r\n\r\n        function decreaseQuantity(productId) {\r\n            const item = cart.find(item => item.id === productId);\r\n            const product = products.find(p => p.id === productId);\r\n            \r\n            if (item && item.quantity > 1) {\r\n                item.quantity--;\r\n                if (product && product.selectionCount > 0) {\r\n                    product.selectionCount--;\r\n                    localStorage.setItem('pos_products', JSON.stringify(products));\r\n                    displayProducts(products);\r\n                }\r\n                updateCart();\r\n            }\r\n        }\r\n\r\n        function removeFromCart(productId) {\r\n            const item = cart.find(item => item.id === productId);\r\n            const product = products.find(p => p.id === productId);\r\n            \r\n            if (item && product) {\r\n                product.selectionCount = Math.max(0, (product.selectionCount || 0) - item.quantity);\r\n                localStorage.setItem('pos_products', JSON.stringify(products));\r\n            }\r\n            \r\n            cart = cart.filter(item => item.id !== productId);\r\n            updateCart();\r\n            displayProducts(products);\r\n        }\r\n\r\n        function updateSummary() {\r\n            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);\r\n            const tax = subtotal * (settings.taxRate \/ 100);\r\n            const discount = 0;\r\n            const total = subtotal + tax - discount;\r\n\r\n            document.getElementById('subtotal').textContent = `${settings.currencySymbol}${subtotal.toFixed(2)}`;\r\n            document.getElementById('tax').textContent = `${settings.currencySymbol}${tax.toFixed(2)}`;\r\n            document.getElementById('discount').textContent = `${settings.currencySymbol}${discount.toFixed(2)}`;\r\n            document.getElementById('total').textContent = `${settings.currencySymbol}${total.toFixed(2)}`;\r\n            document.getElementById('taxRate').textContent = settings.taxRate;\r\n        }\r\n\r\n        function clearCart() {\r\n            if (cart.length === 0) return;\r\n            \r\n            if (confirm('Are you sure you want to clear the cart?')) {\r\n                \/\/ Decrease selection counts\r\n                cart.forEach(cartItem => {\r\n                    const product = products.find(p => p.id === cartItem.id);\r\n                    if (product) {\r\n                        product.selectionCount = Math.max(0, (product.selectionCount || 0) - cartItem.quantity);\r\n                    }\r\n                });\r\n                localStorage.setItem('pos_products', JSON.stringify(products));\r\n                \r\n                cart = [];\r\n                updateCart();\r\n                displayProducts(products);\r\n            }\r\n        }\r\n\r\n        function selectCustomer() {\r\n            const customerId = document.getElementById('customerSelect').value;\r\n            if (!customerId) {\r\n                document.getElementById('customerName').value = '';\r\n                document.getElementById('customerPhone').value = '';\r\n                return;\r\n            }\r\n\r\n            const customer = customers.find(c => c.id === customerId);\r\n            if (customer) {\r\n                document.getElementById('customerName').value = customer.name;\r\n                document.getElementById('customerPhone').value = customer.phone;\r\n            }\r\n        }\r\n\r\n        function checkout() {\r\n            if (cart.length === 0) {\r\n                alert('Your cart is empty!');\r\n                return;\r\n            }\r\n\r\n            let customerName = document.getElementById('customerName').value || 'Walk-in Customer';\r\n            const customerPhone = document.getElementById('customerPhone').value || 'N\/A';\r\n\r\n            \/\/ Save or update customer if phone provided\r\n            if (customerPhone !== 'N\/A') {\r\n                let customer = customers.find(c => c.phone === customerPhone);\r\n                if (customer) {\r\n                    customer.name = customerName;\r\n                    customer.lastVisit = new Date().toISOString();\r\n                } else {\r\n                    const newCustomer = {\r\n                        id: 'CUST-' + Date.now(),\r\n                        name: customerName,\r\n                        phone: customerPhone,\r\n                        email: '',\r\n                        address: '',\r\n                        notes: '',\r\n                        createdDate: new Date().toISOString(),\r\n                        lastVisit: new Date().toISOString()\r\n                    };\r\n                    customers.push(newCustomer);\r\n                }\r\n                localStorage.setItem('pos_customers', JSON.stringify(customers));\r\n                updateCustomerDropdown();\r\n            }\r\n\r\n            \/\/ Create order\r\n            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);\r\n            const tax = subtotal * (settings.taxRate \/ 100);\r\n            const order = {\r\n                id: 'ORD-' + Date.now(),\r\n                date: new Date().toISOString(),\r\n                customer: customerName,\r\n                phone: customerPhone,\r\n                items: [...cart],\r\n                subtotal: subtotal,\r\n                tax: tax,\r\n                discount: 0,\r\n                total: subtotal + tax,\r\n                status: 'completed'\r\n            };\r\n\r\n            \/\/ Update stock\r\n            cart.forEach(cartItem => {\r\n                const product = products.find(p => p.id === cartItem.id);\r\n                if (product) {\r\n                    product.stock -= cartItem.quantity;\r\n                }\r\n            });\r\n\r\n            orders.unshift(order);\r\n            localStorage.setItem('pos_orders', JSON.stringify(orders));\r\n            localStorage.setItem('pos_products', JSON.stringify(products));\r\n\r\n            generateReceipt(order);\r\n            document.getElementById('receiptModal').classList.add('active');\r\n\r\n            document.getElementById('customerName').value = '';\r\n            document.getElementById('customerPhone').value = '';\r\n            document.getElementById('customerSelect').value = '';\r\n        }\r\n\r\n        function generateReceipt(order) {\r\n            document.getElementById('receiptStoreName').textContent = settings.storeName;\r\n            document.getElementById('receiptStoreAddress').textContent = settings.storeAddress;\r\n            document.getElementById('receiptStoreContact').textContent = `${settings.storePhone} | ${settings.storeEmail}`;\r\n            document.getElementById('receiptDate').textContent = new Date(order.date).toLocaleString();\r\n            document.getElementById('receiptNumber').textContent = 'Receipt #: ' + order.id;\r\n            document.getElementById('receiptCustomer').textContent = order.customer;\r\n            document.getElementById('receiptPhone').textContent = order.phone;\r\n\r\n            const receiptItems = document.getElementById('receiptItems');\r\n            receiptItems.innerHTML = order.items.map(item => `\r\n                <div style=\"display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;\">\r\n                    <div>\r\n                        <strong>${item.name}<\/strong><br>\r\n                        <span style=\"font-size: 12px;\">${item.quantity} x ${settings.currencySymbol}${item.price.toFixed(2)}<\/span>\r\n                    <\/div>\r\n                    <div><strong>${settings.currencySymbol}${(item.quantity * item.price).toFixed(2)}<\/strong><\/div>\r\n                <\/div>\r\n            `).join('');\r\n\r\n            document.getElementById('receiptSubtotal').textContent = `${settings.currencySymbol}${order.subtotal.toFixed(2)}`;\r\n            document.getElementById('receiptTax').textContent = `${settings.currencySymbol}${order.tax.toFixed(2)}`;\r\n            document.getElementById('receiptDiscount').textContent = `${settings.currencySymbol}${order.discount.toFixed(2)}`;\r\n            document.getElementById('receiptTotal').textContent = `${settings.currencySymbol}${order.total.toFixed(2)}`;\r\n            document.getElementById('receiptFooterText').textContent = settings.receiptFooter;\r\n        }\r\n\r\n        function printReceipt() {\r\n            if (cart.length === 0) {\r\n                alert('Your cart is empty!');\r\n                return;\r\n            }\r\n\r\n            const customerName = document.getElementById('customerName').value || 'Walk-in Customer';\r\n            const customerPhone = document.getElementById('customerPhone').value || 'N\/A';\r\n            \r\n            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);\r\n            const tax = subtotal * (settings.taxRate \/ 100);\r\n            const tempOrder = {\r\n                id: 'TEMP-' + Date.now(),\r\n                date: new Date().toISOString(),\r\n                customer: customerName,\r\n                phone: customerPhone,\r\n                items: [...cart],\r\n                subtotal: subtotal,\r\n                tax: tax,\r\n                discount: 0,\r\n                total: subtotal + tax\r\n            };\r\n\r\n            generateReceipt(tempOrder);\r\n            window.print();\r\n        }\r\n\r\n        function closeReceipt() {\r\n            document.getElementById('receiptModal').classList.remove('active');\r\n            cart = [];\r\n            updateCart();\r\n            displayProducts(products);\r\n        }\r\n\r\n        function showPage(pageName) {\r\n            document.querySelectorAll('#pos-system-wrapper .page').forEach(p => p.classList.remove('active'));\r\n            document.querySelectorAll('#pos-system-wrapper .nav-btn').forEach(b => b.classList.remove('active'));\r\n            \r\n            document.getElementById(pageName + 'Page').classList.add('active');\r\n            event.target.classList.add('active');\r\n\r\n            if (pageName === 'orders') {\r\n                displayOrders();\r\n            } else if (pageName === 'customers') {\r\n                displayCustomers();\r\n            } else if (pageName === 'items') {\r\n                displayItems();\r\n            } else if (pageName === 'reports') {\r\n                updateReports();\r\n            } else if (pageName === 'settings') {\r\n                loadSettings();\r\n            }\r\n        }\r\n\r\n        function displayOrders(filteredOrders = null) {\r\n            const ordersToShow = filteredOrders || orders;\r\n            const tbody = document.getElementById('ordersTableBody');\r\n            \r\n            if (ordersToShow.length === 0) {\r\n                tbody.innerHTML = '<tr><td colspan=\"7\" style=\"text-align: center; padding: 30px;\">No orders found<\/td><\/tr>';\r\n                return;\r\n            }\r\n\r\n            tbody.innerHTML = ordersToShow.map(order => `\r\n                <tr>\r\n                    <td>${order.id}<\/td>\r\n                    <td>${new Date(order.date).toLocaleDateString()}<\/td>\r\n                    <td>${order.customer}<\/td>\r\n                    <td>${order.items.length}<\/td>\r\n                    <td>${settings.currencySymbol}${order.total.toFixed(2)}<\/td>\r\n                    <td><span class=\"status-badge status-completed\">${order.status}<\/span><\/td>\r\n                    <td><button class=\"view-btn\" onclick=\"POSSystem.viewOrder('${order.id}')\">View<\/button><\/td>\r\n                <\/tr>\r\n            `).join('');\r\n        }\r\n\r\n        function filterOrders() {\r\n            const fromDate = new Date(document.getElementById('filterFromDate').value);\r\n            const toDate = new Date(document.getElementById('filterToDate').value);\r\n            toDate.setHours(23, 59, 59);\r\n            const customerName = document.getElementById('filterCustomer').value.toLowerCase();\r\n\r\n            const filtered = orders.filter(order => {\r\n                const orderDate = new Date(order.date);\r\n                const dateMatch = orderDate >= fromDate && orderDate <= toDate;\r\n                const customerMatch = !customerName || order.customer.toLowerCase().includes(customerName);\r\n                return dateMatch && customerMatch;\r\n            });\r\n\r\n            displayOrders(filtered);\r\n        }\r\n\r\n        function viewOrder(orderId) {\r\n            const order = orders.find(o => o.id === orderId);\r\n            if (order) {\r\n                generateReceipt(order);\r\n                document.getElementById('receiptModal').classList.add('active');\r\n            }\r\n        }\r\n\r\n        function displayCustomers(filteredCustomers = null) {\r\n            const customersToShow = filteredCustomers || customers;\r\n            const tbody = document.getElementById('customersTableBody');\r\n            \r\n            if (customersToShow.length === 0) {\r\n                tbody.innerHTML = '<tr><td colspan=\"8\" style=\"text-align: center; padding: 30px;\">No customers found<\/td><\/tr>';\r\n                return;\r\n            }\r\n\r\n            tbody.innerHTML = customersToShow.map(customer => {\r\n                const customerOrders = orders.filter(o => o.phone === customer.phone);\r\n                const totalOrders = customerOrders.length;\r\n                const totalSpent = customerOrders.reduce((sum, order) => sum + order.total, 0);\r\n                const lastVisit = customer.lastVisit ? new Date(customer.lastVisit).toLocaleDateString() : 'N\/A';\r\n\r\n                return `\r\n                    <tr>\r\n                        <td>${customer.id}<\/td>\r\n                        <td>${customer.name}<\/td>\r\n                        <td>${customer.phone}<\/td>\r\n                        <td>${customer.email || 'N\/A'}<\/td>\r\n                        <td>${totalOrders}<\/td>\r\n                        <td>${settings.currencySymbol}${totalSpent.toFixed(2)}<\/td>\r\n                        <td>${lastVisit}<\/td>\r\n                        <td>\r\n                            <button class=\"edit-btn-small\" onclick=\"POSSystem.editCustomer('${customer.id}')\">Edit<\/button>\r\n                            <button class=\"delete-btn-small\" onclick=\"POSSystem.deleteCustomer('${customer.id}')\">Delete<\/button>\r\n                        <\/td>\r\n                    <\/tr>\r\n                `;\r\n            }).join('');\r\n        }\r\n\r\n        function filterCustomers() {\r\n            const searchTerm = document.getElementById('searchCustomer').value.toLowerCase();\r\n            const filtered = customers.filter(c => \r\n                c.name.toLowerCase().includes(searchTerm) || \r\n                c.phone.includes(searchTerm)\r\n            );\r\n            displayCustomers(filtered);\r\n        }\r\n\r\n        function updateCustomerDropdown() {\r\n            const select = document.getElementById('customerSelect');\r\n            select.innerHTML = '<option value=\"\">Select Customer (Optional)<\/option>' +\r\n                customers.map(c => `<option value=\"${c.id}\">${c.name} (${c.phone})<\/option>`).join('');\r\n        }\r\n\r\n        function openCustomerModal() {\r\n            editingCustomerId = null;\r\n            document.getElementById('customerModalTitle').textContent = 'Add New Customer';\r\n            document.getElementById('customerForm').reset();\r\n            document.getElementById('customerModal').classList.add('active');\r\n        }\r\n\r\n        function closeCustomerModal() {\r\n            document.getElementById('customerModal').classList.remove('active');\r\n        }\r\n\r\n        function editCustomer(id) {\r\n            const customer = customers.find(c => c.id === id);\r\n            if (!customer) return;\r\n\r\n            editingCustomerId = id;\r\n            document.getElementById('customerModalTitle').textContent = 'Edit Customer';\r\n            document.getElementById('customerFormName').value = customer.name;\r\n            document.getElementById('customerFormPhone').value = customer.phone;\r\n            document.getElementById('customerFormEmail').value = customer.email || '';\r\n            document.getElementById('customerFormAddress').value = customer.address || '';\r\n            document.getElementById('customerFormNotes').value = customer.notes || '';\r\n            document.getElementById('customerModal').classList.add('active');\r\n        }\r\n\r\n        function saveCustomer() {\r\n            const name = document.getElementById('customerFormName').value;\r\n            const phone = document.getElementById('customerFormPhone').value;\r\n            const email = document.getElementById('customerFormEmail').value;\r\n            const address = document.getElementById('customerFormAddress').value;\r\n            const notes = document.getElementById('customerFormNotes').value;\r\n\r\n            if (editingCustomerId) {\r\n                const customer = customers.find(c => c.id === editingCustomerId);\r\n                if (customer) {\r\n                    customer.name = name;\r\n                    customer.phone = phone;\r\n                    customer.email = email;\r\n                    customer.address = address;\r\n                    customer.notes = notes;\r\n                }\r\n            } else {\r\n                const newCustomer = {\r\n                    id: 'CUST-' + Date.now(),\r\n                    name,\r\n                    phone,\r\n                    email,\r\n                    address,\r\n                    notes,\r\n                    createdDate: new Date().toISOString(),\r\n                    lastVisit: new Date().toISOString()\r\n                };\r\n                customers.push(newCustomer);\r\n            }\r\n\r\n            localStorage.setItem('pos_customers', JSON.stringify(customers));\r\n            closeCustomerModal();\r\n            displayCustomers();\r\n            updateCustomerDropdown();\r\n        }\r\n\r\n        function deleteCustomer(id) {\r\n            if (!confirm('Are you sure you want to delete this customer?')) return;\r\n\r\n            customers = customers.filter(c => c.id !== id);\r\n            localStorage.setItem('pos_customers', JSON.stringify(customers));\r\n            displayCustomers();\r\n            updateCustomerDropdown();\r\n        }\r\n\r\n        function displayItems() {\r\n            const grid = document.getElementById('itemsGrid');\r\n            grid.innerHTML = products.map(product => `\r\n                <div class=\"item-card\">\r\n                    <div class=\"item-card-image\">\r\n                        ${product.image ? \r\n                            `<img decoding=\"async\" src=\"${product.image}\" alt=\"${product.name}\">` : \r\n                            `${getProductIcon(product.category)}`\r\n                        }\r\n                    <\/div>\r\n                    <h3>${product.name}<\/h3>\r\n                    <div class=\"item-detail\"><strong>Category:<\/strong> ${product.category}<\/div>\r\n                    <div class=\"item-detail\"><strong>Price:<\/strong> ${settings.currencySymbol}${product.price.toFixed(2)}<\/div>\r\n                    <div class=\"item-detail\"><strong>Stock:<\/strong> ${product.stock}<\/div>\r\n                    <div class=\"item-detail\"><strong>Times Selected:<\/strong> ${product.selectionCount || 0}<\/div>\r\n                    <div class=\"item-actions\">\r\n                        <button class=\"edit-btn\" onclick=\"POSSystem.editItem(${product.id})\">Edit<\/button>\r\n                        <button class=\"delete-btn\" onclick=\"POSSystem.deleteItem(${product.id})\">Delete<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            `).join('');\r\n        }\r\n\r\n        function openItemModal() {\r\n            editingItemId = null;\r\n            currentItemImage = null;\r\n            document.getElementById('modalTitle').textContent = 'Add New Item';\r\n            document.getElementById('itemForm').reset();\r\n            document.getElementById('imagePreview').style.display = 'none';\r\n            document.getElementById('itemImageInput').value = '';\r\n            document.getElementById('itemModal').classList.add('active');\r\n        }\r\n\r\n        function closeItemModal() {\r\n            document.getElementById('itemModal').classList.remove('active');\r\n            currentItemImage = null;\r\n        }\r\n\r\n        function editItem(id) {\r\n            const product = products.find(p => p.id === id);\r\n            if (!product) return;\r\n\r\n            editingItemId = id;\r\n            currentItemImage = product.image;\r\n            document.getElementById('modalTitle').textContent = 'Edit Item';\r\n            document.getElementById('itemName').value = product.name;\r\n            document.getElementById('itemCategory').value = product.category;\r\n            document.getElementById('itemPrice').value = product.price;\r\n            document.getElementById('itemStock').value = product.stock;\r\n            \r\n            const preview = document.getElementById('imagePreview');\r\n            if (product.image) {\r\n                preview.src = product.image;\r\n                preview.style.display = 'block';\r\n            } else {\r\n                preview.style.display = 'none';\r\n            }\r\n            \r\n            document.getElementById('itemModal').classList.add('active');\r\n        }\r\n\r\n        function saveItem() {\r\n            const name = document.getElementById('itemName').value;\r\n            const category = document.getElementById('itemCategory').value;\r\n            const price = parseFloat(document.getElementById('itemPrice').value);\r\n            const stock = parseInt(document.getElementById('itemStock').value);\r\n\r\n            if (editingItemId) {\r\n                const product = products.find(p => p.id === editingItemId);\r\n                if (product) {\r\n                    product.name = name;\r\n                    product.category = category;\r\n                    product.price = price;\r\n                    product.stock = stock;\r\n                    product.image = currentItemImage;\r\n                }\r\n            } else {\r\n                const newId = products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1;\r\n                products.push({ \r\n                    id: newId, \r\n                    name, \r\n                    category, \r\n                    price, \r\n                    stock, \r\n                    image: currentItemImage,\r\n                    selectionCount: 0 \r\n                });\r\n            }\r\n\r\n            localStorage.setItem('pos_products', JSON.stringify(products));\r\n            closeItemModal();\r\n            displayItems();\r\n            displayProducts(products);\r\n        }\r\n\r\n        function deleteItem(id) {\r\n            if (!confirm('Are you sure you want to delete this item?')) return;\r\n\r\n            products = products.filter(p => p.id !== id);\r\n            localStorage.setItem('pos_products', JSON.stringify(products));\r\n            displayItems();\r\n            displayProducts(products);\r\n        }\r\n\r\n        function updateReports() {\r\n            const fromDate = new Date(document.getElementById('reportFromDate').value);\r\n            const toDate = new Date(document.getElementById('reportToDate').value);\r\n            toDate.setHours(23, 59, 59);\r\n\r\n            const filteredOrders = orders.filter(order => {\r\n                const orderDate = new Date(order.date);\r\n                return orderDate >= fromDate && orderDate <= toDate;\r\n            });\r\n\r\n            const totalSales = filteredOrders.reduce((sum, order) => sum + order.total, 0);\r\n            const totalOrders = filteredOrders.length;\r\n            const itemsSold = filteredOrders.reduce((sum, order) => \r\n                sum + order.items.reduce((itemSum, item) => itemSum + item.quantity, 0), 0);\r\n            const avgOrder = totalOrders > 0 ? totalSales \/ totalOrders : 0;\r\n\r\n            document.getElementById('totalSales').textContent = `${settings.currencySymbol}${totalSales.toFixed(2)}`;\r\n            document.getElementById('totalOrders').textContent = totalOrders;\r\n            document.getElementById('itemsSold').textContent = itemsSold;\r\n            document.getElementById('avgOrder').textContent = `${settings.currencySymbol}${avgOrder.toFixed(2)}`;\r\n\r\n            \/\/ Top items\r\n            const itemStats = {};\r\n            filteredOrders.forEach(order => {\r\n                order.items.forEach(item => {\r\n                    if (!itemStats[item.id]) {\r\n                        itemStats[item.id] = {\r\n                            name: item.name,\r\n                            category: item.category,\r\n                            quantity: 0,\r\n                            revenue: 0\r\n                        };\r\n                    }\r\n                    itemStats[item.id].quantity += item.quantity;\r\n                    itemStats[item.id].revenue += item.quantity * item.price;\r\n                });\r\n            });\r\n\r\n            const topItems = Object.values(itemStats).sort((a, b) => b.revenue - a.revenue).slice(0, 10);\r\n            \r\n            const tbody = document.getElementById('topItemsBody');\r\n            if (topItems.length === 0) {\r\n                tbody.innerHTML = '<tr><td colspan=\"4\" style=\"text-align: center; padding: 30px;\">No data available<\/td><\/tr>';\r\n            } else {\r\n                tbody.innerHTML = topItems.map(item => `\r\n                    <tr>\r\n                        <td>${item.name}<\/td>\r\n                        <td>${item.category}<\/td>\r\n                        <td>${item.quantity}<\/td>\r\n                        <td>${settings.currencySymbol}${item.revenue.toFixed(2)}<\/td>\r\n                    <\/tr>\r\n                `).join('');\r\n            }\r\n        }\r\n\r\n        function loadSettings() {\r\n            document.getElementById('storeName').value = settings.storeName;\r\n            document.getElementById('storeAddress').value = settings.storeAddress;\r\n            document.getElementById('storePhone').value = settings.storePhone;\r\n            document.getElementById('storeEmail').value = settings.storeEmail;\r\n            document.getElementById('settingsTaxRate').value = settings.taxRate;\r\n            document.getElementById('currencySymbol').value = settings.currencySymbol;\r\n            document.getElementById('receiptHeader').value = settings.receiptHeader;\r\n            document.getElementById('receiptFooter').value = settings.receiptFooter;\r\n        }\r\n\r\n        function saveSettings() {\r\n            settings.storeName = document.getElementById('storeName').value;\r\n            settings.storeAddress = document.getElementById('storeAddress').value;\r\n            settings.storePhone = document.getElementById('storePhone').value;\r\n            settings.storeEmail = document.getElementById('storeEmail').value;\r\n            settings.taxRate = parseFloat(document.getElementById('settingsTaxRate').value);\r\n            settings.currencySymbol = document.getElementById('currencySymbol').value;\r\n            settings.receiptHeader = document.getElementById('receiptHeader').value;\r\n            settings.receiptFooter = document.getElementById('receiptFooter').value;\r\n\r\n            localStorage.setItem('pos_settings', JSON.stringify(settings));\r\n            alert('Settings saved successfully!');\r\n            updateSummary();\r\n        }\r\n\r\n        function exportData() {\r\n            const data = {\r\n                products: products,\r\n                orders: orders,\r\n                customers: customers,\r\n                settings: settings,\r\n                exportDate: new Date().toISOString()\r\n            };\r\n\r\n            const dataStr = JSON.stringify(data, null, 2);\r\n            const dataBlob = new Blob([dataStr], { type: 'application\/json' });\r\n            const url = URL.createObjectURL(dataBlob);\r\n            const link = document.createElement('a');\r\n            link.href = url;\r\n            link.download = `POS_Backup_${new Date().toISOString().split('T')[0]}.json`;\r\n            document.body.appendChild(link);\r\n            link.click();\r\n            document.body.removeChild(link);\r\n            URL.revokeObjectURL(url);\r\n\r\n            alert('Data exported successfully!');\r\n        }\r\n\r\n        function importData(event) {\r\n            const file = event.target.files[0];\r\n            if (!file) return;\r\n\r\n            const reader = new FileReader();\r\n            reader.onload = function(e) {\r\n                try {\r\n                    const data = JSON.parse(e.target.result);\r\n                    \r\n                    if (confirm('This will replace all current data. Are you sure?')) {\r\n                        if (data.products) {\r\n                            products = data.products;\r\n                            localStorage.setItem('pos_products', JSON.stringify(products));\r\n                        }\r\n                        if (data.orders) {\r\n                            orders = data.orders;\r\n                            localStorage.setItem('pos_orders', JSON.stringify(orders));\r\n                        }\r\n                        if (data.customers) {\r\n                            customers = data.customers;\r\n                            localStorage.setItem('pos_customers', JSON.stringify(customers));\r\n                        }\r\n                        if (data.settings) {\r\n                            settings = data.settings;\r\n                            localStorage.setItem('pos_settings', JSON.stringify(settings));\r\n                        }\r\n\r\n                        alert('Data imported successfully!');\r\n                        location.reload();\r\n                    }\r\n                } catch (error) {\r\n                    alert('Error importing data. Please check the file format.');\r\n                }\r\n            };\r\n            reader.readAsText(file);\r\n            \r\n            event.target.value = '';\r\n        }\r\n\r\n        \/\/ Initialize on page load\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', init);\r\n        } else {\r\n            init();\r\n        }\r\n\r\n        \/\/ Public API\r\n        return {\r\n            showPage,\r\n            addToCart,\r\n            increaseQuantity,\r\n            decreaseQuantity,\r\n            removeFromCart,\r\n            clearCart,\r\n            selectCustomer,\r\n            checkout,\r\n            printReceipt,\r\n            closeReceipt,\r\n            filterOrders,\r\n            viewOrder,\r\n            displayCustomers,\r\n            filterCustomers,\r\n            openCustomerModal,\r\n            closeCustomerModal,\r\n            editCustomer,\r\n            deleteCustomer,\r\n            openItemModal,\r\n            closeItemModal,\r\n            editItem,\r\n            deleteItem,\r\n            updateReports,\r\n            saveSettings,\r\n            exportData,\r\n            importData,\r\n            toggleDarkMode,\r\n            previewImage\r\n        };\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\uded2 POS System POS Orders Customers Items Reports Settings \ud83c\udf19 All Electronics Clothing Food Beverages Select Customer (Optional) Shopping Cart Your cart is empty Subtotal: \u20b90.00 Tax (10%): \u20b90.00 Discount: \u20b90.00 Total: \u20b90.00 Clear Print Checkout Order History From Date To Date Customer &nbsp; Filter Order ID Date Customer Items Total Status Action Customer Management [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2917","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2917"}],"version-history":[{"count":7,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2917\/revisions"}],"predecessor-version":[{"id":2924,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2917\/revisions\/2924"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}