{"id":2,"date":"2025-02-28T15:33:01","date_gmt":"2025-02-28T15:33:01","guid":{"rendered":"https:\/\/azai.menuz.gr\/wordpress\/?page_id=2"},"modified":"2025-03-02T19:36:35","modified_gmt":"2025-03-02T19:36:35","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/azai.menuz.gr\/wordpress\/","title":{"rendered":"Sample Page"},"content":{"rendered":"<p class=\"wp-block-paragraph\">\n<div class=\"wcptm-wrapper\">\n        <h2 class=\"wcptm-table-title\">My Menu<\/h2>\n        \n    <div class=\"wcptm-controls\">\n        <div class=\"wcptm-controls-row\">\n                        <div class=\"wcptm-search\">\n                <div class=\"search-input-wrapper\">\n                <input type=\"text\" class=\"wcptm-search-input\" placeholder=\"Search products...\">\n                    <button type=\"button\" class=\"wcptm-search-clear\" aria-label=\"Clear search\">\u00d7<\/button>\n                <\/div>\n            <\/div>\n                        \n                        <div class=\"wcptm-filter\">\n                <div class=\"filter-by-category\">Filter by Category<\/div>\n                <select class=\"wcptm-category-filter\">\n                    <option value=\"\">All Categories<\/option>\n                                        <option value=\"15\">Uncategorized<\/option>\n                                        <option value=\"17\">Food<\/option>\n                                    <\/select>\n            <\/div>\n                        \n                        <div class=\"wcptm-sort\">\n                <select class=\"wcptm-sorter\">\n                    <option value=\"name\"  selected='selected'>Name (A-Z)<\/option>\n                    <option value=\"name-desc\" >Name (Z-A)<\/option>\n                    <option value=\"price\" >Price (Low to High)<\/option>\n                    <option value=\"price-desc\" >Price (High to Low)<\/option>\n                    <option value=\"date\" >Newest First<\/option>\n                    <option value=\"date-desc\" >Oldest First<\/option>\n                <\/select>\n            <\/div>\n                    <\/div>\n    <\/div>\n\n    <div class=\"wcptm-container\" style=\"width: 100%; max-width: 1200px; margin: 0 auto;\">\n        <table class=\"wcptm-table\">\n            <thead>\n                <tr>\n                                        <th>Image<\/th>\n                                        <th>Name<\/th>\n                                        <th>Description<\/th>\n                                        <th>Price<\/th>\n                                        <th>Action<\/th>\n                                    <\/tr>\n            <\/thead>\n            <tbody>\n                                    <tr data-category-ids=\"15\" \n                        data-product-name=\"menu10\"\n                        data-product-price=\"50\"\n                        data-product-date=\"1741363450\">\n                        \n                                                <td data-label=\"Image\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-logo-2-416x416-2-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Menu10\" srcset=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-logo-2-416x416-2-150x150.jpg 150w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-logo-2-416x416-2-300x300.jpg 300w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-logo-2-416x416-2-100x100.jpg 100w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-logo-2-416x416-2.jpg 416w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" style=\"width:100%;height:100%;max-width:416px;\" \/><\/td>\n                                                \n                                                <td data-label=\"Name\">Menu10<\/td>\n                                                \n                                                <td data-label=\"Description\">This is a short description2222222<\/td>\n                                                \n                                                <td data-label=\"Price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;<\/span>50.00<\/bdi><\/span><\/td>\n                                                \n                                                <td data-label=\"Action\">\n                            <button class=\"wcptm-select-btn\" \n                                    data-product-id=\"472\"\n                                    data-product-name=\"Menu10\"\n                                    data-product-price=\"&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;\/span&gt;50.00&lt;\/bdi&gt;&lt;\/span&gt;\"\n                                    data-product-raw-price=\"50\">\n                                Select\n                            <\/button>\n                        <\/td>\n                                            <\/tr>\n                                    <tr data-category-ids=\"17\" \n                        data-product-name=\"menu9\"\n                        data-product-price=\"30\"\n                        data-product-date=\"1741002918\">\n                        \n                                                <td data-label=\"Image\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/cap-2-416x416-1-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Menu9\" srcset=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/cap-2-416x416-1-150x150.jpg 150w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/cap-2-416x416-1-300x300.jpg 300w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/cap-2-416x416-1-100x100.jpg 100w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/cap-2-416x416-1.jpg 416w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" style=\"width:100%;height:100%;max-width:416px;\" \/><\/td>\n                                                \n                                                <td data-label=\"Name\">Menu9<\/td>\n                                                \n                                                <td data-label=\"Description\">10 12 14 description<\/td>\n                                                \n                                                <td data-label=\"Price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;<\/span>30.00<\/bdi><\/span><\/td>\n                                                \n                                                <td data-label=\"Action\">\n                            <button class=\"wcptm-select-btn\" \n                                    data-product-id=\"226\"\n                                    data-product-name=\"Menu9\"\n                                    data-product-price=\"&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;\/span&gt;30.00&lt;\/bdi&gt;&lt;\/span&gt;\"\n                                    data-product-raw-price=\"30\">\n                                Select\n                            <\/button>\n                        <\/td>\n                                            <\/tr>\n                                    <tr data-category-ids=\"17\" \n                        data-product-name=\"menu3\"\n                        data-product-price=\"20\"\n                        data-product-date=\"1741002840\">\n                        \n                                                <td data-label=\"Image\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/beanie-2-416x416-1-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Menu3\" srcset=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/beanie-2-416x416-1-150x150.jpg 150w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/beanie-2-416x416-1-300x300.jpg 300w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/beanie-2-416x416-1-100x100.jpg 100w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/beanie-2-416x416-1.jpg 416w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" style=\"width:100%;height:100%;max-width:416px;\" \/><\/td>\n                                                \n                                                <td data-label=\"Name\">Menu3<\/td>\n                                                \n                                                <td data-label=\"Description\">123456789<\/td>\n                                                \n                                                <td data-label=\"Price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;<\/span>20.00<\/bdi><\/span><\/td>\n                                                \n                                                <td data-label=\"Action\">\n                            <button class=\"wcptm-select-btn\" \n                                    data-product-id=\"224\"\n                                    data-product-name=\"Menu3\"\n                                    data-product-price=\"&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;\/span&gt;20.00&lt;\/bdi&gt;&lt;\/span&gt;\"\n                                    data-product-raw-price=\"20\">\n                                Select\n                            <\/button>\n                        <\/td>\n                                            <\/tr>\n                                    <tr data-category-ids=\"15\" \n                        data-product-name=\"menu2\"\n                        data-product-price=\"2\"\n                        data-product-date=\"1740998989\">\n                        \n                                                <td data-label=\"Image\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-pocket-2-416x416-1-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Menu2\" srcset=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-pocket-2-416x416-1-150x150.jpg 150w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-pocket-2-416x416-1-300x300.jpg 300w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-pocket-2-416x416-1-100x100.jpg 100w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/hoodie-with-pocket-2-416x416-1.jpg 416w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" style=\"width:100%;height:100%;max-width:416px;\" \/><\/td>\n                                                \n                                                <td data-label=\"Name\">Menu2<\/td>\n                                                \n                                                <td data-label=\"Description\">This is description 2<\/td>\n                                                \n                                                <td data-label=\"Price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;<\/span>2.00<\/bdi><\/span><\/td>\n                                                \n                                                <td data-label=\"Action\">\n                            <button class=\"wcptm-select-btn\" \n                                    data-product-id=\"221\"\n                                    data-product-name=\"Menu2\"\n                                    data-product-price=\"&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;\/span&gt;2.00&lt;\/bdi&gt;&lt;\/span&gt;\"\n                                    data-product-raw-price=\"2\">\n                                Select\n                            <\/button>\n                        <\/td>\n                                            <\/tr>\n                                    <tr data-category-ids=\"17\" \n                        data-product-name=\"menu1\"\n                        data-product-price=\"1\"\n                        data-product-date=\"1740998962\">\n                        \n                                                <td data-label=\"Image\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/belt-2-416x416-1-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Menu1\" srcset=\"https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/belt-2-416x416-1-150x150.jpg 150w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/belt-2-416x416-1-300x300.jpg 300w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/belt-2-416x416-1-100x100.jpg 100w, https:\/\/azai.menuz.gr\/wordpress\/wp-content\/uploads\/2025\/03\/belt-2-416x416-1.jpg 416w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" style=\"width:100%;height:100%;max-width:416px;\" \/><\/td>\n                                                \n                                                <td data-label=\"Name\">Menu1<\/td>\n                                                \n                                                <td data-label=\"Description\">This is description 1<\/td>\n                                                \n                                                <td data-label=\"Price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;<\/span>1.00<\/bdi><\/span><\/td>\n                                                \n                                                <td data-label=\"Action\">\n                            <button class=\"wcptm-select-btn\" \n                                    data-product-id=\"219\"\n                                    data-product-name=\"Menu1\"\n                                    data-product-price=\"&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;\/span&gt;1.00&lt;\/bdi&gt;&lt;\/span&gt;\"\n                                    data-product-raw-price=\"1\">\n                                Select\n                            <\/button>\n                        <\/td>\n                                            <\/tr>\n                            <\/tbody>\n        <\/table>\n    <\/div>\n\n    <!-- Add divider with \"Selected Items\" label -->\n    <div class=\"wcptm-divider\">\n        <div class=\"wcptm-divider-line\"><\/div>\n        <div class=\"wcptm-divider-label\">Selected Items<\/div>\n        <div class=\"wcptm-divider-line\"><\/div>\n    <\/div>\n\n    <div class=\"wcptm-selected-items\" style=\"width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; box-sizing: border-box !important;\">\n        <table class=\"wcptm-selected-table\">\n            <!-- ... existing cart table code ... -->\n        <\/table>\n        <div class=\"clear-cart-container\">\n            <button class=\"wcptm-clear-cart\">Clear Cart<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Order form section -->\n    <div class=\"wcptm-order-form\" id=\"wcptm-order-form-container\">\n                \n        <h2>Place Your Order<\/h2>\n        \n        <!-- Response messages will appear here -->\n        <div class=\"order-response\"><\/div>\n        \n        <form id=\"wcptm-order-form\" method=\"post\" onsubmit=\"return false;\">\n                                                <div class=\"form-row\">\n                        <label for=\"customer_name\">\n                            Your Name                             *                        <\/label>\n                        \n                                                    <input \n                                type=\"text\" \n                                id=\"customer_name\" \n                                name=\"customer_name\"\n                                required                                placeholder=\"\"\n                                                            >\n                                            <\/div>\n                                                                <div class=\"form-row\">\n                        <label for=\"customer_email\">\n                            Email Address                             *                        <\/label>\n                        \n                                                    <input \n                                type=\"email\" \n                                id=\"customer_email\" \n                                name=\"customer_email\"\n                                required                                placeholder=\"\"\n                                                            >\n                                            <\/div>\n                                                                <div class=\"form-row\">\n                        <label for=\"customer_phone\">\n                            Phone Number                             *                        <\/label>\n                        \n                                                    <input \n                                type=\"tel\" \n                                id=\"customer_phone\" \n                                name=\"customer_phone\"\n                                required                                placeholder=\"\"\n                                                            >\n                                            <\/div>\n                                                                <div class=\"form-row\">\n                        <label for=\"table_number\">\n                            Table Number                                                    <\/label>\n                        \n                                                    <input \n                                type=\"text\" \n                                id=\"table_number\" \n                                name=\"table_number\"\n                                                                placeholder=\"\"\n                                                            >\n                                            <\/div>\n                                                                <div class=\"form-row\">\n                        <label for=\"order_notes\">\n                            Special Notes                                                    <\/label>\n                        \n                                                    <textarea \n                                id=\"order_notes\" \n                                name=\"order_notes\"\n                                                                placeholder=\"Additional notes or special requests\"\n                            ><\/textarea>\n                                            <\/div>\n                                                                <div class=\"form-row\">\n                        <label for=\"custom_field_0\">\n                            address                                                    <\/label>\n                        \n                                                    <input \n                                type=\"text\" \n                                id=\"custom_field_0\" \n                                name=\"custom_field_0\"\n                                                                placeholder=\"\"\n                                                            >\n                                            <\/div>\n                                                                <div class=\"form-row\">\n                        <label for=\"custom_field_1\">\n                            Date                                                    <\/label>\n                        \n                                                    <input \n                                type=\"date\" \n                                id=\"custom_field_1\" \n                                name=\"custom_field_1\"\n                                                                placeholder=\"\"\n                                                            >\n                                            <\/div>\n                                        \n            <div class=\"form-row payment-methods\">\n                <label>Payment Method<\/label>\n                <div class=\"payment-options\">\n                                                <label class=\"payment-option\">\n                                <input type=\"radio\" name=\"payment_method\" value=\"bacs\" checked>\n                                <span class=\"payment-label\">\n                                                                        Direct bank transfer                                <\/span>\n                            <\/label>\n                                                        <label class=\"payment-option\">\n                                <input type=\"radio\" name=\"payment_method\" value=\"cheque\" >\n                                <span class=\"payment-label\">\n                                                                        Check payments                                <\/span>\n                            <\/label>\n                                                        <label class=\"payment-option\">\n                                <input type=\"radio\" name=\"payment_method\" value=\"cod\" >\n                                <span class=\"payment-label\">\n                                                                        Cash on delivery                                <\/span>\n                            <\/label>\n                                            <\/div>\n            <\/div>\n            \n            <div class=\"order-total\">\n                Order Total: <span id=\"order-total-amount\"><\/span>\n            <\/div>\n            \n            <button type=\"submit\" id=\"wcptm-submit-btn\" class=\"order-submit-btn\">Place Order<\/button>\n        <\/form>\n    <\/div>\n\n    \n    <style>\n    \/* Modern styling for controls *\/\n    .wcptm-controls {\n        margin: 20px 0;\n        padding: 15px;\n        background: #f8f9fa;\n        border-radius: 8px;\n        box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n    }\n    \n    .wcptm-controls-row {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 15px;\n        align-items: center;\n    }\n    \n    .wcptm-search {\n        flex: 1;\n        min-width: 200px;\n    }\n    \n    .wcptm-filter, .wcptm-sort {\n        flex: 1;\n        min-width: 180px;\n    }\n    \n    .wcptm-search-input, \n    .wcptm-category-filter, \n    .wcptm-sorter {\n        width: 100%;\n        padding: 10px 15px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        color: #333;\n        background-color: white;\n        transition: all 0.3s ease;\n        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n    }\n    \n    .wcptm-category-filter, \n    .wcptm-sorter {\n        background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"6\" viewBox=\"0 0 12 6\"><path fill=\"%23333\" d=\"M0 0l6 6 6-6z\"\/><\/svg>');\n        background-repeat: no-repeat;\n        background-position: right 15px center;\n        padding-right: 30px;\n    }\n    \n    .wcptm-search-input:focus, \n    .wcptm-category-filter:focus, \n    .wcptm-sorter:focus {\n        outline: none;\n        border-color: #80bdff;\n        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\n    }\n    \n    \/* Responsive adjustments *\/\n    @media (max-width: 768px) {\n        .wcptm-controls-row {\n            flex-direction: column;\n            gap: 10px;\n        }\n        \n        .wcptm-search, \n        .wcptm-filter, \n        .wcptm-sort {\n            width: 100%;\n        }\n    }\n\n    \/* Mobile-specific styles *\/\n    @media screen and (max-width: 768px) {\n        .wcptm-controls-row {\n            flex-direction: column;\n            gap: 10px;\n        }\n        \n        .wcptm-search, \n        .wcptm-filter, \n        .wcptm-sort {\n            width: 100%;\n        }\n\n        \/* Mobile remove button styling *\/\n        .wcptm-selected-items .item-row {\n            position: relative !important;\n            padding-right: 40px !important;\n        }\n\n        .wcptm-selected-items .mobile-remove-btn {\n            position: absolute !important;\n            top: 8px !important;\n            right: 8px !important;\n            width: 24px !important;\n            height: 24px !important;\n            padding: 0 !important;\n            border-radius: 50% !important;\n            background-color: #ff5252 !important;\n            color: white !important;\n            font-size: 20px !important;\n            line-height: 1 !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            border: none !important;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;\n            z-index: 10 !important;\n            cursor: pointer !important;\n            transition: all 0.2s ease !important;\n        }\n\n        .wcptm-selected-items .mobile-remove-btn:hover {\n            background-color: #ff1744 !important;\n            transform: scale(1.1) !important;\n        }\n\n        .wcptm-selected-items .mobile-remove-btn:active {\n            transform: scale(0.95) !important;\n        }\n\n        \/* Hide desktop remove button on mobile *\/\n        .wcptm-selected-items .item-row .remove-item:not(.mobile-remove-btn) {\n            display: none !important;\n        }\n    }\n\n    \/* Ensure desktop layout remains intact *\/\n    @media screen and (min-width: 769px) {\n        .mobile-remove-btn {\n            display: none !important;\n        }\n    }\n\n    \/* Search input wrapper styles *\/\n    .search-input-wrapper {\n        position: relative !important;\n        width: 100% !important;\n        display: flex !important;\n        align-items: center !important;\n    }\n\n    .wcptm-search-input {\n        padding-right: 30px !important;\n    }\n\n    .wcptm-search-clear {\n        position: absolute !important;\n        right: 10px !important;\n        top: 50% !important;\n        transform: translateY(-50%) !important;\n        width: 20px !important;\n        height: 20px !important;\n        border-radius: 50% !important;\n        background: #e0e0e0 !important;\n        border: none !important;\n        color: #666 !important;\n        font-size: 16px !important;\n        line-height: 1 !important;\n        display: none !important;\n        align-items: center !important;\n        justify-content: center !important;\n        cursor: pointer !important;\n        transition: all 0.2s ease !important;\n        padding: 0 !important;\n        margin: 0 !important;\n    }\n\n    .wcptm-search-clear:hover {\n        background: #d0d0d0 !important;\n        color: #333 !important;\n    }\n\n    .wcptm-search-input:not(:placeholder-shown) + .wcptm-search-clear {\n        display: flex !important;\n    }\n\n    \/* Mobile-specific adjustments *\/\n    @media screen and (max-width: 768px) {\n        .wcptm-search-clear {\n            width: 24px !important;\n            height: 24px !important;\n            font-size: 18px !important;\n        }\n    }\n\n    \/* Mobile landscape optimizations *\/\n    @media screen and (max-width: 768px) and (orientation: landscape) {\n        \/* Container adjustments *\/\n        .wcptm-container {\n            padding: 0 15px !important;\n        }\n\n        \/* Table adjustments *\/\n        .wcptm-table {\n            display: block !important;\n            width: 100% !important;\n        }\n\n        .wcptm-table thead {\n            display: none !important;\n        }\n\n        .wcptm-table tbody {\n            display: flex !important;\n            flex-direction: column !important;\n            width: 100% !important;\n        }\n\n        .wcptm-table tr {\n            display: flex !important;\n            flex-direction: column !important;\n            background: #fff !important;\n            margin-bottom: 15px !important;\n            padding: 15px !important;\n            border-radius: 8px !important;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n            position: relative !important;\n        }\n\n        .wcptm-table td {\n            display: flex !important;\n            padding: 8px 0 !important;\n            border: none !important;\n            align-items: center !important;\n        }\n\n        .wcptm-table td::before {\n            content: attr(data-label) !important;\n            font-weight: bold !important;\n            width: 120px !important;\n            min-width: 120px !important;\n            margin-right: 15px !important;\n            color: #666 !important;\n        }\n\n        \/* Image optimization *\/\n        .wcptm-table td[data-label=\"Image\"] {\n            justify-content: center !important;\n            padding: 0 0 15px 0 !important;\n        }\n\n        .wcptm-table td[data-label=\"Image\"]::before {\n            display: none !important;\n        }\n\n        .wcptm-table td[data-label=\"Image\"] img {\n            max-width: 120px !important;\n            height: auto !important;\n        }\n\n        \/* Price and action button styling *\/\n        .wcptm-table td[data-label=\"Price\"] {\n            font-weight: bold !important;\n            color: #2c3338 !important;\n        }\n\n        .wcptm-table td[data-label=\"Action\"] {\n            padding-top: 15px !important;\n            border-top: 1px solid #eee !important;\n            margin-top: 10px !important;\n        }\n\n        .wcptm-select-btn {\n            width: 100% !important;\n            padding: 10px !important;\n            background: #4CAF50 !important;\n            color: white !important;\n            border: none !important;\n            border-radius: 4px !important;\n            cursor: pointer !important;\n            transition: background 0.3s ease !important;\n        }\n\n        .wcptm-select-btn:hover {\n            background: #45a049 !important;\n        }\n\n        \/* Controls optimization *\/\n        .wcptm-controls {\n            position: sticky !important;\n            top: 0 !important;\n            z-index: 100 !important;\n            background: #f8f9fa !important;\n            padding: 10px !important;\n            margin: 0 0 15px 0 !important;\n        }\n\n        .wcptm-controls-row {\n            display: grid !important;\n            grid-template-columns: 1fr !important;\n            gap: 10px !important;\n        }\n\n        \/* Search field optimization *\/\n        .search-input-wrapper {\n            width: 100% !important;\n            margin-bottom: 10px !important;\n        }\n\n        .wcptm-search-input {\n            width: 100% !important;\n            height: 40px !important;\n        }\n\n        \/* Selected items table optimization *\/\n        .wcptm-selected-items {\n            margin-top: 20px !important;\n        }\n\n        .wcptm-selected-table {\n            display: block !important;\n            width: 100% !important;\n        }\n\n        .wcptm-selected-table tr {\n            display: flex !important;\n            flex-direction: column !important;\n            padding: 15px !important;\n            margin-bottom: 10px !important;\n            background: #fff !important;\n            border-radius: 8px !important;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n            position: relative !important;\n        }\n\n        .wcptm-selected-table td {\n            display: flex !important;\n            align-items: center !important;\n            padding: 8px 0 !important;\n            border: none !important;\n        }\n\n        \/* Quantity controls optimization *\/\n        .quantity {\n            display: flex !important;\n            align-items: center !important;\n            gap: 10px !important;\n            margin-top: 10px !important;\n        }\n\n        .quantity-input {\n            width: 60px !important;\n            text-align: center !important;\n            padding: 5px !important;\n        }\n\n        .quantity-decrease,\n        .quantity-increase {\n            width: 30px !important;\n            height: 30px !important;\n            display: flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            background: #f0f0f0 !important;\n            border: none !important;\n            border-radius: 4px !important;\n            cursor: pointer !important;\n        }\n\n        \/* Clear cart button optimization *\/\n        .clear-cart-container {\n            padding: 15px !important;\n            text-align: center !important;\n        }\n\n        .wcptm-clear-cart {\n            width: 100% !important;\n            max-width: 200px !important;\n            padding: 10px !important;\n            background: #dc3545 !important;\n            color: white !important;\n            border: none !important;\n            border-radius: 4px !important;\n            cursor: pointer !important;\n    }\n    <\/style>\n\n    <script>\n    jQuery(document).ready(function($) {\n        \/\/ Initialize selectedItems from localStorage or empty array\n        let selectedItems = JSON.parse(localStorage.getItem('wcptm_selected_items') || '[]');\n        \n        \/\/ Display any previously selected items on page load\n        if (selectedItems.length > 0) {\n            updateSelectedItemsDisplay();\n        }\n\n        function updateSelectedItemsDisplay() {\n            const container = $('.wcptm-selected-items');\n            container.empty();\n\n            if (selectedItems.length > 0) {\n                let total = 0;\n                \n                const cartContent = $('<div class=\"cart-content\"><\/div>');\n                const table = $('<table class=\"wcptm-selected-table\"><\/table>');\n                \n                table.append(`\n                    <thead>\n                        <tr>\n                            <th>Item<\/th>\n                            <th>Quantity<\/th>\n                            <th>Price<\/th>\n                            <th>Subtotal<\/th>\n                            <th>Action<\/th>\n                        <\/tr>\n                    <\/thead>\n                `);\n\n                const tbody = $('<tbody><\/tbody>');\n                selectedItems.forEach(item => {\n                    const itemRawPrice = parseFloat(item.rawPrice) || 0;\n                    const quantity = parseInt(item.quantity) || 1;\n                    const subtotal = itemRawPrice * quantity;\n                    total += subtotal;\n                    \n                    tbody.append(`\n                        <tr class=\"item-row\" data-product-id=\"${item.id}\">\n                            <td>${item.name}<\/td>\n                            <td>\n                                <div class=\"quantity\">\n                                    <button type=\"button\" class=\"quantity-decrease\">-<\/button>\n                                    <input type=\"number\" min=\"1\" value=\"${quantity}\" \n                                        class=\"quantity-input\" data-product-id=\"${item.id}\">\n                                    <button type=\"button\" class=\"quantity-increase\">+<\/button>\n                                <\/div>\n                            <\/td>\n                            <td>${item.price}<\/td>\n                            <td>${wcptm_params.currency_symbol}${subtotal.toFixed(2)}<\/td>\n                            <td>\n                                <button class=\"remove-item\" data-product-id=\"${item.id}\">Remove<\/button>\n                                <button class=\"mobile-remove-btn\" aria-label=\"Remove item\" data-product-id=\"${item.id}\">\u00d7<\/button>\n                            <\/td>\n                        <\/tr>\n                    `);\n                });\n                table.append(tbody);\n\n                table.append(`\n                    <tfoot>\n                        <tr>\n                            <th colspan=\"3\">Total<\/th>\n                            <th colspan=\"2\">${wcptm_params.currency_symbol}${total.toFixed(2)}<\/th>\n                        <\/tr>\n                    <\/tfoot>\n                `);\n\n                cartContent.append(table);\n                container.append(cartContent);\n                $('#order-total-amount').text(wcptm_params.currency_symbol + total.toFixed(2));\n            } else {\n                container.append('<p>No items selected<\/p>');\n            }\n        }\n\n        \/\/ Initialize mobile category filter\n        if (window.innerWidth <= 768) {\n            \/\/ Add category filter header if it doesn't exist\n            if (!$('.filter-by-category').length) {\n                $('.wcptm-filter').prepend('<div class=\"filter-by-category\">Filter by Category<\/div>');\n            }\n            \n            \/\/ Initialize category filter\n            var filterTitle = $('.filter-by-category');\n            filterTitle.addClass('collapsed');\n            \n            \/\/ Toggle on click\n            filterTitle.on('click', function() {\n                $(this).toggleClass('collapsed');\n            });\n\n            \/\/ Add touch feedback\n            filterTitle.on('touchstart', function() {\n                $(this).css('background', '#f0f0f0');\n            }).on('touchend touchcancel', function() {\n                $(this).css('background', '');\n            });\n\n            \/\/ Add mobile styles\n            $('head').append(`\n                <style>\n                    \/* Mobile Category Filter *\/\n                    .filter-by-category {\n                        cursor: pointer;\n                        padding: 15px;\n                        background: linear-gradient(to right, #f8f9fa, #ffffff);\n                        border-radius: 8px;\n                        margin: 10px 0;\n                        position: relative;\n                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n                        font-weight: 600;\n                        color: #2c3338;\n                        user-select: none;\n                    }\n\n                    .filter-by-category:after {\n                        content: '\u25bc';\n                        position: absolute;\n                        right: 15px;\n                        top: 50%;\n                        transform: translateY(-50%);\n                        transition: transform 0.3s ease;\n                        font-size: 12px;\n                    }\n\n                    .filter-by-category.collapsed:after {\n                        transform: translateY(-50%) rotate(-90deg);\n                    }\n\n                    .wcptm-category-filter {\n                        max-height: 300px;\n                        opacity: 1;\n                        margin: 10px 0;\n                        transition: all 0.3s ease;\n                    }\n\n                    .filter-by-category.collapsed + .wcptm-category-filter {\n                        max-height: 0;\n                        opacity: 0;\n                        margin: 0;\n                        padding: 0;\n                        pointer-events: none;\n                        overflow: hidden;\n                    }\n\n                    \/* Mobile Remove Button *\/\n                    .wcptm-selected-items .item-row {\n                        position: relative !important;\n                        padding-right: 40px !important;\n                    }\n\n                    .wcptm-selected-items .mobile-remove-btn {\n                        position: absolute !important;\n                        top: 8px !important;\n                        right: 8px !important;\n                        width: 24px !important;\n                        height: 24px !important;\n                        padding: 0 !important;\n                        border-radius: 50% !important;\n                        background-color: #ff5252 !important;\n                        color: white !important;\n                        font-size: 20px !important;\n                        line-height: 1 !important;\n                        display: flex !important;\n                        align-items: center !important;\n                        justify-content: center !important;\n                        border: none !important;\n                        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;\n                        z-index: 999 !important;\n                        cursor: pointer !important;\n                        transition: all 0.2s ease !important;\n                    }\n\n                    .wcptm-selected-items .mobile-remove-btn:hover {\n                        background-color: #ff1744 !important;\n                        transform: scale(1.1) !important;\n                    }\n\n                    .wcptm-selected-items .mobile-remove-btn:active {\n                        transform: scale(0.95) !important;\n                    }\n\n                    .wcptm-selected-items .remove-item:not(.mobile-remove-btn) {\n                        display: none !important;\n                    }\n\n                    @media screen and (min-width: 769px) {\n                        .filter-by-category {\n                            display: none !important;\n                        }\n                        .wcptm-selected-items .mobile-remove-btn {\n                            display: none !important;\n                        }\n                    }\n                <\/style>\n            `);\n\n            \/\/ Initialize mobile remove buttons\n            function initMobileRemoveButtons() {\n                $('.wcptm-selected-items .item-row').each(function() {\n                    var $row = $(this);\n                    if (!$row.find('.mobile-remove-btn').length) {\n                        var productId = $row.data('product-id');\n                        var $removeBtn = $('<button class=\"mobile-remove-btn\" aria-label=\"Remove item\">\u00d7<\/button>')\n                            .data('product-id', productId)\n                            .on('click', function(e) {\n                                e.preventDefault();\n                                e.stopPropagation();\n                                \n                                $row.css({\n                                    'opacity': '0',\n                                    'transform': 'translateX(20px)'\n                                });\n                                \n                                setTimeout(function() {\n                                    var selectedItems = JSON.parse(localStorage.getItem('wcptm_selected_items') || '[]');\n                                    selectedItems = selectedItems.filter(item => item.id !== productId);\n                                    localStorage.setItem('wcptm_selected_items', JSON.stringify(selectedItems));\n                                    updateSelectedItemsDisplay();\n                                }, 300);\n                            });\n                        $row.append($removeBtn);\n                    }\n                });\n            }\n\n            \/\/ Initial setup\n            initMobileRemoveButtons();\n\n            \/\/ Watch for cart updates\n            var observer = new MutationObserver(function() {\n                initMobileRemoveButtons();\n            });\n\n            var cartContainer = $('.wcptm-selected-items')[0];\n            if (cartContainer) {\n                observer.observe(cartContainer, {\n                    childList: true,\n                    subtree: true\n                });\n            }\n\n            \/\/ Remove upper filter\n            setTimeout(function() {\n                var controls = document.querySelector('.wcptm-wrapper > .wcptm-controls');\n                if (controls) {\n                    controls.remove();\n                }\n            }, 100);\n        }\n\n        \/\/ Handle resize events\n        $(window).on('resize', function() {\n            if (window.innerWidth > 768) {\n                $('.filter-by-category').removeClass('collapsed');\n                } else {\n                $('.filter-by-category').addClass('collapsed');\n                }\n            });\n        });\n    <\/script>\n<\/div> \n\n<\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":12,"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":205,"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/205"}],"wp:attachment":[{"href":"https:\/\/azai.menuz.gr\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}