{"id":3361,"date":"2026-03-09T06:22:55","date_gmt":"2026-03-09T00:52:55","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=3361"},"modified":"2026-03-09T06:22:55","modified_gmt":"2026-03-09T00:52:55","slug":"order-your-food","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/order-your-food\/","title":{"rendered":"Order Your Food"},"content":{"rendered":"    <div id=\"qs-app\" data-type=\"customer\"><\/div>\n    <style>\n        :root { --qs-purple: #60269E; --qs-yellow: #FFD700; --qs-bg: #F8F9FA; }\n        #qs-app { \n            font-family: 'Inter', sans-serif; \n            max-width: 480px; \n            margin: 20px auto; \n            background: var(--qs-bg); \n            min-height: 85vh; \n            border-radius: 35px; \n            overflow: hidden; \n            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); \n            position: relative;\n            border: 8px solid #fff;\n        }\n        .qs-header { \n            background: var(--qs-purple); \n            color: white; \n            padding: 30px 20px; \n            text-align: center; \n            border-radius: 0 0 40px 40px;\n            box-shadow: 0 10px 20px rgba(96, 38, 158, 0.2);\n        }\n        .qs-header h1 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -1px; color: #fff; }\n        .qs-header p { margin: 5px 0 0; opacity: 0.8; font-size: 14px; }\n        \n        .qs-content { padding: 20px; }\n        \n        .qs-input {\n            width: 100%;\n            padding: 15px;\n            border-radius: 15px;\n            border: 2px solid #eee;\n            margin-bottom: 15px;\n            font-size: 14px;\n            transition: border-color 0.2s;\n        }\n        .qs-input:focus { border-color: var(--qs-purple); outline: none; }\n\n        .qs-btn { \n            background: var(--qs-purple); \n            color: white; \n            border: none; \n            padding: 16px 24px; \n            border-radius: 18px; \n            font-weight: 800; \n            cursor: pointer; \n            width: 100%; \n            transition: all 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            box-shadow: 0 4px 12px rgba(96, 38, 158, 0.2);\n        }\n        .qs-btn:active { transform: scale(0.96); }\n        .qs-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n        \n        .qs-branch-card {\n            background: white;\n            padding: 15px;\n            border-radius: 18px;\n            margin-bottom: 10px;\n            border: 2px solid #f0f0f0;\n            transition: all 0.2s;\n            cursor: pointer;\n            text-align: left;\n            width: 100%;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        .qs-branch-card.active { border-color: var(--qs-purple); background: #fdfbff; }\n        .qs-branch-card h4 { margin: 0; color: var(--qs-purple); font-size: 16px; font-weight: 800; }\n        .qs-branch-card p { margin: 2px 0 0; color: #888; font-size: 12px; }\n\n        .qs-product-card { \n            background: white; \n            margin-bottom: 15px; \n            padding: 12px; \n            border-radius: 20px; \n            display: flex; \n            gap: 15px; \n            align-items: center; \n            box-shadow: 0 4px 15px rgba(0,0,0,0.03);\n            border: 1px solid #f0f0f0;\n            transition: transform 0.2s;\n        }\n        .qs-product-card:active { transform: scale(0.98); }\n        .qs-product-img { width: 90px; height: 90px; border-radius: 15px; object-fit: cover; background: #f5f5f5; }\n        .qs-product-info { flex: 1; }\n        .qs-product-info h4 { margin: 0; font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }\n        .qs-product-price { margin: 4px 0 8px; font-weight: 800; font-size: 16px; color: var(--qs-purple); }\n        \n        .qs-search-container {\n            padding: 15px 20px;\n            background: var(--qs-purple);\n            position: sticky;\n            top: 0;\n            z-index: 100;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n        .qs-search-wrapper {\n            position: relative;\n            flex: 1;\n        }\n        .qs-search-wrapper i {\n            position: absolute;\n            left: 15px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: rgba(255,255,255,0.5);\n            font-size: 16px;\n        }\n        .qs-search-input {\n            width: 100%;\n            padding: 12px 15px 12px 40px;\n            border-radius: 15px;\n            border: none;\n            background: rgba(255,255,255,0.15);\n            color: white;\n            font-size: 14px;\n            outline: none;\n            transition: all 0.3s;\n        }\n        .qs-search-input:focus {\n            background: rgba(255,255,255,0.25);\n            box-shadow: 0 0 0 2px rgba(255,255,255,0.1);\n        }\n        .qs-search-input::placeholder { color: rgba(255,255,255,0.6); }\n\n        .qs-location-badge {\n            background: rgba(255,255,255,0.1);\n            color: white;\n            padding: 6px 12px;\n            border-radius: 12px;\n            font-size: 11px;\n            display: flex;\n            align-items: center;\n            gap: 5px;\n            cursor: pointer;\n        }\n        .qs-location-badge.active { background: #4CAF50; }\n\n        .qs-cart-bar {\n            position: fixed;\n            bottom: 25px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: calc(100% - 40px);\n            max-width: 440px;\n            background: var(--qs-purple);\n            color: white;\n            padding: 18px 25px;\n            border-radius: 22px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            box-shadow: 0 15px 30px rgba(96, 38, 158, 0.4);\n            cursor: pointer;\n            z-index: 1000;\n        }\n        .qs-cart-bar b { font-size: 18px; }\n        \n        .qs-category-tabs {\n            display: flex;\n            gap: 10px;\n            overflow-x: auto;\n            padding: 15px 20px;\n            scrollbar-width: none;\n            background: var(--qs-purple);\n        }\n        .qs-category-tabs::-webkit-scrollbar { display: none; }\n        .qs-tab {\n            padding: 8px 18px;\n            background: rgba(255,255,255,0.1);\n            border-radius: 50px;\n            font-size: 13px;\n            font-weight: 700;\n            white-space: nowrap;\n            color: white;\n            cursor: pointer;\n        }\n        .qs-tab.active { background: var(--qs-yellow); color: var(--qs-purple); }\n\n        \/* Modal Styles *\/\n        .qs-modal {\n            position: fixed;\n            inset: 0;\n            background: rgba(0,0,0,0.5);\n            z-index: 2000;\n            display: none;\n            align-items: flex-end;\n            justify-content: center;\n        }\n        .qs-modal.active { display: flex; }\n        .qs-modal-content {\n            background: white;\n            width: 100%;\n            max-width: 480px;\n            border-radius: 30px 30px 0 0;\n            padding: 30px 20px;\n            max-height: 90vh;\n            overflow-y: auto;\n            animation: slideUp 0.3s ease-out;\n            box-shadow: 0 -10px 40px rgba(0,0,0,0.2);\n            position: relative;\n        }\n        .qs-modal-close {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            width: 35px;\n            height: 35px;\n            background: #f5f5f5;\n            color: #333;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 20px;\n            font-weight: bold;\n            cursor: pointer;\n            z-index: 10;\n        }\n        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }\n\n        .qs-cart-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 15px 0;\n            border-bottom: 1px solid #eee;\n        }\n        .qs-qty-btn {\n            width: 30px;\n            height: 30px;\n            border-radius: 8px;\n            border: 1px solid #ddd;\n            background: white;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: bold;\n            cursor: pointer;\n        }\n    <\/style>\n    <div id=\"qs-modal\" class=\"qs-modal\">\n        <div class=\"qs-modal-content\" id=\"qs-modal-body\"><\/div>\n    <\/div>\n    <script>\n        const QS_API = 'https:\/\/malikskitchen.in\/index.php\/wp-json\/qs\/v1';\n        let currentBranch = null;\n        let cart = [];\n        let appliedCoupon = null;\n        let customerData = JSON.parse(localStorage.getItem('qs_customer') || 'null');\n        let userLocation = null;\n        let deliveryCharge = 0;\n        let distance = 0;\n\n        document.addEventListener('DOMContentLoaded', () => {\n            renderStart();\n            getUserLocation();\n        });\n\n        function getUserLocation() {\n            const btn = document.getElementById('loc-btn');\n            if (btn) btn.innerHTML = '\u231b Fetching location...';\n            \n            if (navigator.geolocation) {\n                navigator.geolocation.getCurrentPosition((pos) => {\n                    userLocation = { lat: pos.coords.latitude, lng: pos.coords.longitude };\n                    if (btn) {\n                        btn.innerHTML = '\u2705 Location Captured';\n                        btn.style.borderColor = '#4CAF50';\n                        btn.style.color = '#4CAF50';\n                        btn.style.background = '#f0fff0';\n                    }\n                    if (currentBranch) calculateDelivery();\n                }, (err) => {\n                    if (btn) btn.innerHTML = '\u274c Location Denied. Please enable GPS.';\n                });\n            } else {\n                if (btn) btn.innerHTML = '\u274c Browser does not support location.';\n            }\n        }\n\n        function calculateDistance(lat1, lon1, lat2, lon2) {\n            const R = 6371; \/\/ Radius of the earth in km\n            const dLat = deg2rad(lat2 - lat1);\n            const dLon = deg2rad(lon2 - lon1);\n            const a = Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\n                      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *\n                      Math.sin(dLon \/ 2) * Math.sin(dLon \/ 2);\n            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n            return R * c;\n        }\n\n        function deg2rad(deg) { return deg * (Math.PI \/ 180); }\n\n        function calculateDelivery() {\n            if (!userLocation || !currentBranch || !currentBranch.lat || !currentBranch.lng) {\n                deliveryCharge = 0;\n                distance = 0;\n                return;\n            }\n            distance = calculateDistance(userLocation.lat, userLocation.lng, currentBranch.lat, currentBranch.lng);\n            deliveryCharge = Math.ceil(distance) * 10;\n        }\n\n        async function renderStart() {\n            const app = document.getElementById('qs-app');\n            app.innerHTML = `\n                <div class=\"qs-header\">\n                    <h1>QuickServe<\/h1>\n                    <p>Welcome! Let's get started<\/p>\n                    <div style=\"margin-top:15px; display:flex; justify-content:center; gap:10px;\">\n                        <button onclick=\"renderStart()\" style=\"background:var(--qs-yellow); color:var(--qs-purple); border:none; padding:5px 15px; border-radius:20px; font-size:11px; font-weight:800; cursor:pointer;\">Order Now<\/button>\n                        <button onclick=\"renderHistory()\" style=\"background:rgba(255,255,255,0.1); color:white; border:none; padding:5px 15px; border-radius:20px; font-size:11px; font-weight:800; cursor:pointer;\">My Orders<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"qs-content\">\n                    <div style=\"background:white; padding:25px; border-radius:25px; box-shadow:0 10px 30px rgba(0,0,0,0.05);\">\n                        <label style=\"display:block; margin-bottom:8px; font-weight:700; color:#666; font-size:12px; text-transform:uppercase;\">Full Name<\/label>\n                        <input type=\"text\" id=\"cust-name\" class=\"qs-input\" placeholder=\"Your Name\" value=\"${customerData?.name || ''}\">\n                        \n                        <label style=\"display:block; margin-bottom:8px; font-weight:700; color:#666; font-size:12px; text-transform:uppercase;\">WhatsApp Number<\/label>\n                        <input type=\"text\" id=\"cust-phone\" class=\"qs-input\" placeholder=\"91XXXXXXXXXX\" value=\"${customerData?.phone || ''}\">\n                        \n                        <label style=\"display:block; margin-bottom:8px; font-weight:700; color:#666; font-size:12px; text-transform:uppercase;\">Delivery Location<\/label>\n                        <button onclick=\"getUserLocation()\" id=\"loc-btn\" style=\"width:100%; padding:12px; border-radius:15px; border:2px dashed #ddd; background:#f9f9f9; color:#666; font-weight:600; margin-bottom:20px; cursor:pointer;\">\n                            ${userLocation ? '\u2705 Location Captured' : '\ud83d\udccd Click to Set Delivery Location'}\n                        <\/button>\n\n                        <label style=\"display:block; margin-bottom:8px; font-weight:700; color:#666; font-size:12px; text-transform:uppercase;\">Select Branch<\/label>\n                        <div id=\"branch-list\" style=\"margin-bottom:25px;\">Loading branches...<\/div>\n                        \n                        <button id=\"start-btn\" onclick=\"saveAndStart()\" class=\"qs-btn\" disabled>Explore Menu<\/button>\n                    <\/div>\n                <\/div>\n            `;\n\n            const branches = await fetch(QS_API + '\/branches').then(r => r.json());\n            const list = document.getElementById('branch-list');\n            list.innerHTML = '';\n            \n            branches.forEach(b => {\n                const card = document.createElement('div');\n                card.className = 'qs-branch-card';\n                card.id = `branch-${b.id}`;\n                card.innerHTML = `<div><h4>${b.name}<\/h4><p>${b.location || ''}<\/p><\/div>`;\n                card.onclick = () => {\n                    document.querySelectorAll('.qs-branch-card').forEach(c => c.classList.remove('active'));\n                    card.classList.add('active');\n                    currentBranch = b;\n                    document.getElementById('start-btn').disabled = false;\n                };\n                list.appendChild(card);\n            });\n        }\n\n        window.saveAndStart = async () => {\n            const name = document.getElementById('cust-name').value;\n            const phone = document.getElementById('cust-phone').value;\n            if (!name || !phone || !currentBranch) return alert(\"Please fill all details and select a branch\");\n            \n            await fetch(QS_API + '\/customer\/save', {\n                method: 'POST',\n                headers: {'Content-Type': 'application\/json'},\n                body: JSON.stringify({ name, phone })\n            });\n\n            customerData = { name, phone };\n            localStorage.setItem('qs_customer', JSON.stringify(customerData));\n            startOrder(currentBranch);\n        };\n\n        async function startOrder(branch) {\n            if (branch.is_open == 0) {\n                alert(\"This branch is currently closed. Please choose another branch.\");\n                return;\n            }\n            currentBranch = branch;\n            calculateDelivery();\n            \n            const app = document.getElementById('qs-app');\n            app.innerHTML = `\n                <div class=\"qs-header\" style=\"padding:20px; text-align:left;\">\n                    <div style=\"display:flex; justify-content:space-between; align-items:flex-start;\">\n                        <div>\n                            <h1 style=\"font-size:22px; margin:0;\">${branch.name}<\/h1>\n                            <p style=\"margin:5px 0 0; font-size:11px; opacity:0.8; line-height:1.4;\">\n                                \ud83d\udccd ${branch.location || 'No address'}<br>\n                                \ud83d\udcde ${branch.manager_phone || ''}<br>\n                                \u23f0 ${branch.timing || 'Always Open'}\n                                ${distance > 0 ? `<br>\ud83d\udef5 Distance: ${distance.toFixed(1)} km` : ''}\n                            <\/p>\n                        <\/div>\n                        <button onclick=\"renderStart()\" style=\"background:rgba(255,255,255,0.1); border:none; color:white; padding:8px 15px; border-radius:12px; cursor:pointer; font-size:12px; font-weight:700;\">Change<\/button>\n                    <\/div>\n                <\/div>\n                <div id=\"qs-offer-banner\" style=\"padding:15px 20px 0;\"><\/div>\n                <div class=\"qs-search-container\">\n                    <div class=\"qs-search-wrapper\">\n                        <i>\ud83d\udd0d<\/i>\n                        <input type=\"text\" id=\"qs-search\" class=\"qs-search-input\" placeholder=\"Search for dishes...\" oninput=\"handleSearch(this.value)\">\n                    <\/div>\n                    <div class=\"qs-location-badge ${userLocation ? 'active' : ''}\" onclick=\"getUserLocation()\">\n                        \ud83d\udccd ${userLocation ? 'GPS ON' : 'GPS OFF'}\n                    <\/div>\n                <\/div>\n                <div id=\"qs-cats\" class=\"qs-category-tabs\"><\/div>\n                <div class=\"qs-content\" id=\"qs-menu\" style=\"padding-bottom:120px;\">Loading menu...<\/div>\n            `;\n            \n            const data = await fetch(QS_API + '\/menu?branch_id=' + branch.id).then(r => r.json());\n            if (data.banner || data.offer) {\n                const banner = document.getElementById('qs-offer-banner');\n                banner.innerHTML = `\n                    <div style=\"background:linear-gradient(45deg, #FFD700, #FFA500); border-radius:20px; padding:20px; position:relative; overflow:hidden; min-height:100px; display:flex; align-items:center;\">\n                        ${data.banner ? `<img decoding=\"async\" src=\"${data.banner}\" style=\"position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.3;\">` : ''}\n                        <div style=\"position:relative; z-index:1;\">\n                            <h3 style=\"margin:0; color:var(--qs-purple); font-weight:900; font-size:18px;\">${data.offer}<\/h3>\n                            <p style=\"margin:5px 0 0; color:var(--qs-purple); font-size:12px; font-weight:700; opacity:0.7;\">Order now on WhatsApp!<\/p>\n                        <\/div>\n                    <\/div>\n                `;\n            }\n            renderMenu(data);\n        }\n\n        window.handleSearch = (query) => {\n            const menu = document.getElementById('qs-menu');\n            menu.innerHTML = '';\n            const filtered = allProducts.filter(p => p.name.toLowerCase().includes(query.toLowerCase()));\n            renderProductList(filtered);\n        };\n\n        function renderProductList(products) {\n            const menu = document.getElementById('qs-menu');\n            if (products.length === 0) {\n                menu.innerHTML = '<div style=\"text-align:center; padding:50px 20px;\"><div style=\"font-size:40px; margin-bottom:10px;\">\ud83d\udd0d<\/div><p style=\"color:#888; font-weight:600;\">No items found matching your search.<\/p><\/div>';\n                return;\n            }\n            products.forEach(p => {\n                menu.innerHTML += `\n                    <div class=\"qs-product-card\">\n                        <img decoding=\"async\" src=\"${p.image_url || 'https:\/\/picsum.photos\/200'}\" class=\"qs-product-img\" onerror=\"this.src='https:\/\/picsum.photos\/200'\">\n                        <div class=\"qs-product-info\">\n                            <h4>${p.name}<\/h4>\n                            <p class=\"qs-product-price\">\u20b9${p.price}<\/p>\n                            <button class=\"qs-btn\" style=\"padding:10px 18px; font-size:13px; width:auto; border-radius:12px;\" onclick=\"addToCart(${p.id}, '${p.name}', ${p.price})\">\n                                <span style=\"font-size:16px;\">+<\/span> Add\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                `;\n            });\n        }\n\n        async function renderHistory() {\n            if (!customerData?.phone) return alert(\"Please login first\");\n            const app = document.getElementById('qs-app');\n            app.innerHTML = `\n                <div class=\"qs-header\">\n                    <h1>My Orders<\/h1>\n                    <p>Track your recent orders<\/p>\n                    <button onclick=\"renderStart()\" style=\"margin-top:10px; background:var(--qs-yellow); color:var(--qs-purple); border:none; padding:5px 15px; border-radius:20px; font-size:11px; font-weight:800; cursor:pointer;\">Back to Menu<\/button>\n                <\/div>\n                <div class=\"qs-content\" id=\"history-list\">Loading...<\/div>\n            `;\n            const orders = await fetch(QS_API + '\/customer\/orders?phone=' + customerData.phone).then(r => r.json());\n            const list = document.getElementById('history-list');\n            list.innerHTML = '';\n            if (orders.length === 0) list.innerHTML = '<p style=\"text-align:center; color:#888; padding:50px;\">No orders found.<\/p>';\n            orders.forEach(o => {\n                list.innerHTML += `\n                    <div style=\"background:white; padding:20px; border-radius:20px; margin-bottom:15px; border:1px solid #eee;\">\n                        <div style=\"display:flex; justify-content:space-between; margin-bottom:10px;\">\n                            <span style=\"font-size:10px; font-weight:800; color:#aaa;\">ORDER #${o.id}<\/span>\n                            <span style=\"font-size:10px; font-weight:800; color:white; background:${o.status === 'Accepted' ? '#4caf50' : (o.status === 'Rejected' ? '#f44336' : '#60269E')}; padding:3px 8px; border-radius:4px;\">${o.status}<\/span>\n                        <\/div>\n                        <div style=\"font-weight:800; color:#333;\">\u20b9${o.total_price}<\/div>\n                        <div style=\"font-size:11px; color:#888; margin-top:5px;\">${o.created_at}<\/div>\n                    <\/div>\n                `;\n            });\n        }\n\n        function renderMenu(data) {\n            const menu = document.getElementById('qs-menu');\n            const cats = document.getElementById('qs-cats');\n            \n            cats.innerHTML = '<div class=\"qs-tab active\" onclick=\"filterMenu(0, this)\">All Items<\/div>';\n            data.categories.forEach(c => {\n                cats.innerHTML += `<div class=\"qs-tab\" onclick=\"filterMenu(${c.term_id}, this)\">${c.name}<\/div>`;\n            });\n\n            window.allProducts = data.products;\n            filterMenu(0, cats.firstChild);\n        }\n\n        window.filterMenu = (catId, el) => {\n            document.querySelectorAll('.qs-tab').forEach(t => t.classList.remove('active'));\n            el.classList.add('active');\n            const filtered = catId === 0 ? allProducts : allProducts.filter(p => p.category_id == catId);\n            renderProductList(filtered);\n        };\n\n        window.addToCart = (id, name, price) => {\n            const existing = cart.find(i => i.id === id);\n            if (existing) {\n                existing.qty++;\n            } else {\n                cart.push({id, name, price, qty: 1});\n            }\n            updateCartBar();\n        };\n\n        window.updateQty = (id, delta) => {\n            const item = cart.find(i => i.id === id);\n            if (!item) return;\n            item.qty += delta;\n            if (item.qty <= 0) {\n                cart = cart.filter(i => i.id !== id);\n            }\n            updateCartBar();\n            showCartModal();\n        };\n\n        function updateCartBar() {\n            let bar = document.getElementById('qs-cart-bar');\n            if (cart.length === 0) {\n                if (bar) bar.remove();\n                return;\n            }\n            if (!bar) {\n                bar = document.createElement('div');\n                bar.id = 'qs-cart-bar';\n                bar.className = 'qs-cart-bar';\n                bar.onclick = showCartModal;\n                document.getElementById('qs-app').appendChild(bar);\n            }\n            const subtotal = cart.reduce((s, i) => s + (parseFloat(i.price || 0) * i.qty), 0);\n            const count = cart.reduce((s, i) => s + i.qty, 0);\n            bar.innerHTML = `\n                <span>${count} Items added<\/span>\n                <b>View Cart \u20b9${subtotal.toFixed(0)}<\/b>\n            `;\n        }\n\n        window.showCartModal = () => {\n            const modal = document.getElementById('qs-modal');\n            const body = document.getElementById('qs-modal-body');\n            modal.classList.add('active');\n            \n            const subtotal = cart.reduce((s, i) => s + (parseFloat(i.price || 0) * i.qty), 0);\n            let discount = 0;\n            if (appliedCoupon) {\n                discount = appliedCoupon.type === 'percent' ? (subtotal * appliedCoupon.value \/ 100) : appliedCoupon.value;\n            }\n            const total = Math.max(0, subtotal - discount + deliveryCharge);\n\n            body.innerHTML = `\n                <div class=\"qs-modal-close\" onclick=\"document.getElementById('qs-modal').classList.remove('active')\">\u00d7<\/div>\n                <h2 style=\"margin:0 0 20px; font-weight:900; font-size:20px;\">Your Cart<\/h2>\n                \n                <div style=\"margin-bottom:20px; max-height:300px; overflow-y:auto;\">\n                    ${cart.map(i => `\n                        <div class=\"qs-cart-item\">\n                            <div>\n                                <h4 style=\"margin:0; font-size:14px;\">${i.name}<\/h4>\n                                <p style=\"margin:5px 0 0; color:var(--qs-purple); font-weight:700; font-size:13px;\">\u20b9${i.price}<\/p>\n                            <\/div>\n                            <div style=\"display:flex; align-items:center; gap:12px;\">\n                                <button class=\"qs-qty-btn\" onclick=\"updateQty(${i.id}, -1)\">-<\/button>\n                                <span style=\"font-weight:800; min-width:20px; text-align:center;\">${i.qty}<\/span>\n                                <button class=\"qs-qty-btn\" onclick=\"updateQty(${i.id}, 1)\">+<\/button>\n                            <\/div>\n                        <\/div>\n                    `).join('')}\n                <\/div>\n\n                <div style=\"background:#f9f9f9; padding:15px; border-radius:15px; margin-bottom:20px; border:1px solid #eee;\">\n                    <label style=\"display:block; margin-bottom:8px; font-weight:700; color:#666; font-size:11px; text-transform:uppercase;\">Delivery Address \/ Landmark<\/label>\n                    <textarea id=\"delivery-address\" class=\"qs-input\" style=\"height:60px; padding:10px; font-size:13px; margin:0;\" placeholder=\"House No, Street, Landmark...\"><\/textarea>\n                <\/div>\n\n                <div style=\"background:#f8f9fa; padding:15px; border-radius:15px; margin-bottom:20px;\">\n                    <div style=\"display:flex; justify-content:space-between; margin-bottom:10px;\">\n                        <input type=\"text\" id=\"coupon-input\" placeholder=\"Coupon Code\" style=\"flex:1; padding:10px; border-radius:10px; border:1px solid #ddd; margin-right:10px; font-size:13px;\" value=\"${appliedCoupon ? appliedCoupon.code : ''}\">\n                        <button onclick=\"applyCoupon()\" class=\"qs-btn\" style=\"width:auto; padding:10px 20px; font-size:12px; border-radius:10px;\">Apply<\/button>\n                    <\/div>\n                <\/div>\n\n                <div style=\"border-top:2px dashed #eee; padding-top:20px;\">\n                    <div style=\"display:flex; justify-content:space-between; margin-bottom:8px; color:#666; font-size:13px;\">\n                        <span>Subtotal<\/span>\n                        <span>\u20b9${subtotal.toFixed(0)}<\/span>\n                    <\/div>\n                    ${appliedCoupon ? `\n                        <div style=\"display:flex; justify-content:space-between; margin-bottom:8px; color:#4caf50; font-weight:700; font-size:13px;\">\n                            <span>Discount (${appliedCoupon.code})<\/span>\n                            <span>-\u20b9${discount.toFixed(0)}<\/span>\n                        <\/div>\n                    ` : ''}\n                    <div style=\"display:flex; justify-content:space-between; margin-bottom:8px; color:#666; font-size:13px;\">\n                        <span>Delivery Charge ${distance > 0 ? `(${distance.toFixed(1)} km)` : ''}<\/span>\n                        <span>\u20b9${deliveryCharge}<\/span>\n                    <\/div>\n                    <div style=\"display:flex; justify-content:space-between; margin-top:15px; font-size:20px; font-weight:900; color:var(--qs-purple);\">\n                        <span>Total Amount<\/span>\n                        <span>\u20b9${total.toFixed(0)}<\/span>\n                    <\/div>\n                <\/div>\n\n                <button onclick=\"placeOrder()\" class=\"qs-btn\" style=\"margin-top:20px; padding:18px; font-size:16px;\">Confirm & Order on WhatsApp<\/button>\n                <button onclick=\"document.getElementById('qs-modal').classList.remove('active')\" class=\"qs-btn\" style=\"margin-top:10px; background:#f5f5f5; color:#333; border:1px solid #ddd;\">Cancel \/ Close<\/button>\n            `;\n        };\n\n        window.applyCoupon = async () => {\n            const code = document.getElementById('coupon-input').value;\n            if (!code) return;\n            const res = await fetch(QS_API + '\/coupon\/validate?code=' + code).then(r => r.json());\n            if (res.success) {\n                appliedCoupon = res.coupon;\n                showCartModal();\n                alert(\"Coupon Applied!\");\n            } else {\n                alert(\"Invalid Coupon\");\n            }\n        };\n\n        async function placeOrder() {\n            const address = document.getElementById('delivery-address').value;\n            if (!address) return alert(\"Please provide a delivery address\/landmark\");\n\n            const subtotal = cart.reduce((s, i) => s + (parseFloat(i.price || 0) * i.qty), 0);\n            let discount = 0;\n            if (appliedCoupon) {\n                discount = appliedCoupon.type === 'percent' ? (subtotal * appliedCoupon.value \/ 100) : appliedCoupon.value;\n            }\n            const total = Math.max(0, subtotal - discount + deliveryCharge);\n\n            const res = await fetch(QS_API + '\/order', {\n                method: 'POST',\n                headers: {'Content-Type': 'application\/json'},\n                body: JSON.stringify({\n                    branch_id: currentBranch.id,\n                    customer_name: customerData.name,\n                    customer_phone: customerData.phone,\n                    items: cart,\n                    total_price: total,\n                    discount_amount: discount,\n                    coupon_code: appliedCoupon ? appliedCoupon.code : ''\n                })\n            }).then(r => r.json());\n\n            if (res.success) {\n                const itemsList = cart.map(i => `${i.name} x ${i.qty}`).join('%0A');\n                let msg = `*New Order from QuickServe*%0A%0A`;\n                msg += `*Name:* ${customerData.name}%0A`;\n                msg += `*Phone:* ${customerData.phone}%0A`;\n                msg += `*Branch:* ${currentBranch.name}%0A`;\n                msg += `*Address:* ${address}%0A`;\n                msg += `*Distance:* ${distance.toFixed(1)} km%0A%0A`;\n                msg += `*Items:*%0A${itemsList}%0A%0A`;\n                msg += `*Subtotal:* \u20b9${subtotal}%0A`;\n                if (discount > 0) msg += `*Discount:* -\u20b9${discount}%0A`;\n                msg += `*Delivery:* \u20b9${deliveryCharge}%0A`;\n                msg += `*Total:* \u20b9${total}`;\n                \n                window.open(`https:\/\/wa.me\/${res.manager_phone}?text=${msg}`);\n                cart = [];\n                document.getElementById('qs-cart-bar')?.remove();\n                document.getElementById('qs-modal').classList.remove('active');\n                alert(\"Order placed! Redirecting to WhatsApp...\");\n                renderStart();\n            } else {\n                alert(res.message || \"Failed to place order.\");\n            }\n        }\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-3361","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3361","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=3361"}],"version-history":[{"count":1,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3361\/revisions"}],"predecessor-version":[{"id":3362,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3361\/revisions\/3362"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=3361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}