{"id":9316,"date":"2025-09-11T11:44:48","date_gmt":"2025-09-11T11:44:48","guid":{"rendered":"https:\/\/shop.liwadates.com\/?page_id=9316"},"modified":"2025-09-11T11:47:48","modified_gmt":"2025-09-11T11:47:48","slug":"%d8%b5%d9%86%d8%af%d9%88%d9%82-%d9%87%d8%af%d8%a7%d9%8a%d8%a7-%d9%85%d8%ae%d8%b5%d8%b5","status":"publish","type":"page","link":"https:\/\/shop.liwadates.com\/ar\/%d8%b5%d9%86%d8%af%d9%88%d9%82-%d9%87%d8%af%d8%a7%d9%8a%d8%a7-%d9%85%d8%ae%d8%b5%d8%b5\/","title":{"rendered":"\u0635\u0646\u062f\u0648\u0642 \u0647\u062f\u0627\u064a\u0627 \u0645\u062e\u0635\u0635"},"content":{"rendered":"        <div class=\"cgb-gift-builder\">\n            <style>\n              :root {\n                --primary-color: #976a4d;\n                --primary-dark: #7a5439;\n                --primary-darker: #5d3f2a;\n                --primary-light: #b5896f;\n                --primary-lighter: #d3b299;\n                --primary-lightest: #f1e8e0;\n                --hover-bg-light: #faf8f6;\n              }\n              \n              \/* RTL Support *\/\n              .cgb-gift-builder {\n                direction: inherit;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder {\n                direction: rtl;\n              }\n              \n              \/* RTL-aware layout using logical properties *\/\n              .cgb-gift-builder .flex {\n                direction: inherit;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .text-start,\n              [dir=\"rtl\"] .cgb-gift-builder .text-left {\n                text-align: right !important;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .text-end,\n              [dir=\"rtl\"] .cgb-gift-builder .text-right {\n                text-align: left !important;\n              }\n              \n              \/* RTL spacing and margins *\/\n              [dir=\"rtl\"] .cgb-gift-builder .gap-2 > *:not(:last-child) {\n                margin-inline-start: 0.5rem;\n                margin-inline-end: 0;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .gap-3 > *:not(:last-child) {\n                margin-inline-start: 0.75rem;\n                margin-inline-end: 0;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .gap-4 > *:not(:last-child) {\n                margin-inline-start: 1rem;\n                margin-inline-end: 0;\n              }\n              \n              \/* RTL button positioning *\/\n              [dir=\"rtl\"] .cgb-gift-builder .justify-end {\n                justify-content: flex-start;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .justify-start {\n                justify-content: flex-end;\n              }\n              \n              \/* RTL step indicators *\/\n              [dir=\"rtl\"] .cgb-gift-builder .step-indicators {\n                flex-direction: row-reverse;\n              }\n              \n              \/* RTL absolute positioning *\/\n              [dir=\"rtl\"] .cgb-gift-builder .absolute.top-1.right-1 {\n                right: auto;\n                left: 1px;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .absolute.bottom-1.left-1 {\n                left: auto;\n                right: 1px;\n              }\n              \n              \/* RTL progress bar *\/\n              [dir=\"rtl\"] .cgb-gift-builder .progress-bar {\n                transform: scaleX(-1);\n              }\n              \n              \/* RTL list styling *\/\n              [dir=\"rtl\"] .cgb-gift-builder .list-disc {\n                list-style-position: inside;\n                text-align: right;\n              }\n              \n              [dir=\"rtl\"] .cgb-gift-builder .list-inside {\n                margin-right: 1rem;\n                margin-left: 0;\n              }\n              \n              \/* Smaller, More Compact Typography *\/\n              .cgb-gift-builder h2 {\n                font-family: 'Almarai', sans-serif !important;\n                font-size: 24px !important;\n                font-weight: 700 !important;\n                margin-bottom: 1rem !important;\n                color: #95684B !important;\n              }\n\n              \n              .cgb-gift-builder .product-title {\n                font-family: 'Almarai', sans-serif !important;\n                font-size: 18px !important;\n                font-weight: 700 !important;\n                margin-bottom: 0.5rem !important;\n                line-height: 1.3 !important;\n                color: #000 !important;\n              }\n              \n              .cgb-gift-builder .product-price {\n             font-family: 'Almarai', sans-serif !important;\n                font-size: 18px !important;\n                font-weight: 700 !important;\n                margin-bottom: 0.5rem !important;\n                line-height: 1.3 !important;\n                color: #000 !important;\n              }\n\n              .currency-text {\n    color: #704E38 !important; \/* \u062e\u0644\u064a\u062a \u0644\u0648\u0646\u0647\u0627 \u0623\u0633\u0648\u062f\u060c \u062a\u0642\u062f\u0631\u064a \u062a\u063a\u064a\u0631\u064a\u0647 \u0644\u0623\u064a \u0644\u0648\u0646 *\/\n}\n              \n              .cgb-gift-builder .product-meta {\n                font-size: 0.75rem !important;\n                line-height: 1.4 !important;\n                margin-bottom: 0.25rem !important;\n                color: #6b7280 !important;\n              }\n              \n              @media (max-width: 767px) {\n                .step-text {\n                  display: none !important;\n                }\n                .step-indicators {\n                  align-items: center !important;\n                  justify-content: center !important;\n                }\n                .step-number {\n                  width: 24px !important;\n                  height: 24px !important;\n                  font-size: 10px !important;\n                }\n                .step-icon {\n                  width: 48px !important;\n                  height: 48px !important;\n                }\n                .step-icon img {\n                  width: 32px !important;\n                  height: 32px !important;\n                }\n              }\n              \n              @media (max-width: 768px) {\n                body:has(#hs-order-summary) {\n                  padding-bottom: 142px;\n                }\n              }\n\n              @media (min-width: 768px) {\n  .grid-3-cols {\n    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n  }\n\n\n\n}\n\n\/* Custom Card Style *\/\n.custom-gift-card {\n    background: rgba(255, 255, 255, 0.88);\n    box-shadow: 0px 17.6988px 23.0085px rgba(0, 0, 0, 0.05);\n    backdrop-filter: blur(5.30964px);\n    -webkit-backdrop-filter: blur(5.30964px); \/* \u0639\u0634\u0627\u0646 \u064a\u0634\u062a\u063a\u0644 \u0639\u0644\u0649 \u0627\u0644\u0627\u064a\u0641\u0648\u0646 *\/\n    border-radius: 24.7783px;\n    border: 1px solid rgba(255, 255, 255, 0.5); \/* \u0625\u0637\u0627\u0631 \u0634\u0641\u0627\u0641 \u062e\u0641\u064a\u0641 \u0639\u0634\u0627\u0646 \u064a\u0628\u0631\u0632 \u0627\u0644\u0634\u0643\u0644 *\/\npadding: 0; \/* \u062e\u0644\u064a\u0646\u0627 \u0627\u0644\u062d\u0634\u0648\u0629 \u0635\u0641\u0631 \u0639\u0634\u0627\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\n    overflow: hidden; \/* \u0639\u0634\u0627\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 \u0645\u062a\u062e\u0631\u062c\u0634 \u0628\u0631\u0647 \u0627\u0644\u062f\u0648\u0631\u0627\u0646 *\/\n    height: 100%;\n}\n\n\n.card-details{\n    padding: 0 20px 20px 20px;\n}\n.custom-heading-style {\n    font-family: 'Almarai', sans-serif !important;\n    font-size: 32px !important;\n    font-weight: 700 !important;\n    color: #95684B !important; \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0628\u0646\u064a *\/\n    margin-bottom: 15px !important;\n}\n\n\n              h2 .custom-heading-style{\n                 font-size: 40px !important;\n              }\n            <\/style>\n\n            <div class=\"w-full px-4 max-w-screen-xl mx-auto py-10\" x-data=\"giftBuilder()\" x-init=\"init()\">\n\n  \n\n              <div x-show=\"showLimitPopup\" class=\"fixed inset-0 flex items-center justify-center bg-black bg-opacity-50\" style=\"z-index: 999999;\">\n\n              \n                <div class=\"bg-white rounded-lg p-6 shadow-lg max-w-lg w-full text-left\">\n                  <h3 class=\"text-xl font-semibold text-gray-800 mb-2\">\u062a\u0645 \u0627\u0644\u0648\u0635\u0648\u0644 \u0644\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649<\/h3>\n                  <p class=\"text-sm text-gray-600 mb-4\">\n                    \u0644\u0642\u062f \u0627\u062e\u062a\u0631\u062a \u0627\u0644\u0639\u062f\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0627\u0644\u0645\u0633\u0645\u0648\u062d \u0645\u0646 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062a\u0645\u0648\u0631 \u0644\u0647\u0630\u0627 \u0627\u0644\u062d\u062c\u0645 \u0645\u0646 \u0627\u0644\u0639\u0644\u0628\u0629.                    <span class=\"font-semibold\" x-text=\"selectedSize ? selectedSize.limit : ''\"><\/span>\n                  <\/p>\n\n                  <div class=\"space-y-3 text-sm text-gray-700 mb-4\">\n                    <div>\n                      <span class=\"custom-heading-style\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0639\u0644\u0628\u0629:<\/span>\n                      <span x-text=\"selectedBox ? selectedBox.title : ''\"><\/span>\n                    <\/div>\n                    <div>\n                      <span class=\"font-medium\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062d\u062c\u0645:<\/span>\n                      <span x-text=\"selectedSize ? selectedSize.name : ''\"><\/span>\n                    <\/div>\n                    <div>\n                      <span class=\"font-medium\">\u0627\u0644\u062d\u0634\u0648\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629:<\/span>\n                      <ul class=\"list-disc list-inside ml-4 mt-1\">\n                        <template x-for=\"d in selectedDates\" :key=\"d.id\">\n                          <li x-text=\"d.title + ' \u00d7 ' + d.qty\"><\/li>\n                        <\/template>\n                      <\/ul>\n                    <\/div>\n                    <div>\n                      <span class=\"font-medium\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0637\u0644\u0628:<\/span>\n                      <span x-text=\"total + ' AED'\" class=\"font-bold text-gray-900\"><\/span>\n                    <\/div>\n                  <\/div>\n\n                  <div class=\"flex justify-end gap-3 pt-2\">\n                    <button @click=\"showLimitPopup = false\" class=\"px-4 py-2 rounded transition-colors\" style=\"background-color: var(--primary-lightest); color: var(--primary-darker);\" onmouseover=\"this.style.backgroundColor='var(--primary-lighter)'\" onmouseout=\"this.style.backgroundColor='var(--primary-lightest)'\">\n                      \u0631\u062c\u0648\u0639                    <\/button>\n                    <button @click=\"placeOrder\" class=\"text-white px-4 py-2 rounded transition-colors\" style=\"background-color: var(--primary-color);\" onmouseover=\"this.style.backgroundColor='var(--primary-dark)'\" onmouseout=\"this.style.backgroundColor='var(--primary-color)'\">\n                      \u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0637\u0644\u0628                    <\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n\n\n              <div class=\"flex flex-col lg:flex-row gap-6\">\n\n                <!-- Steps -->\n                <div class=\"flex-1 space-y-6\">\n <div class=\"cgb-steps-header mb-8\">\n    <h2 class=\"custom-heading-style\" style=\"margin-bottom: 8px !important; font-size: 40px !important;\">\n        Customize Your Gift Box    <\/h2>\n    <p style=\"font-family: 'Almarai', sans-serif; font-size: 18px; color: #4b5563; line-height: 1.5; max-width: 90%;\">\n        Create your own custom gift box from a selection of exquisite packaging, filled with your personal choice of favorite gourmet dates.    <\/p>\n<\/div>\n                              <div class=\"w-full mb-12\">\n                <!-- Step Indicators -->\n                <div class=\"relative\">\n                  <!-- Step Indicators -->\n                  <div class=\"step-indicators flex items-start justify-between relative z-20 mb-40\" style=\"margin-bottom:45px !important ; margin-top:40px !important\">\n                    <template x-for=\"(stepInfo, index) in [\n                      {\n                        number: 1,\n                        icon: 'https:\/\/shop.liwadates.com\/wp-content\/plugins\/custom-gift-boxes\/assets\/icons\/gift-box.svg',\n                        title: '1- Choose gift packaging',\n                        subtitle: ''\n                      },\n                      {\n                        number: 2,\n                        icon: 'https:\/\/shop.liwadates.com\/wp-content\/plugins\/custom-gift-boxes\/assets\/icons\/packaging-size.svg',\n                        title: '2- Choose your gift size',\n                        subtitle: ' '\n                      },\n                      {\n                        number: 3,\n                        icon: 'https:\/\/shop.liwadates.com\/wp-content\/plugins\/custom-gift-boxes\/assets\/icons\/chocolate-box.svg',\n                        title: 'Choose your gift fillings',\n                        subtitle: ''\n                      }\n                    ]\">\n                      <div class=\"flex flex-col items-left justify-center gap-3 flex-1\">\n                        <!-- Step Number\/Checkmark -->\n                        <div class=\"step-number w-16 h-16 flex items-center justify-center rounded-full font-semibold text-xs transition border-2 flex-shrink-0\"\n                             :style=\"index < step ? 'background-color: var(--primary-color); color: white; border-color: var(--primary-color);' : index === step ? 'background-color: var(--primary-color); color: white; border-color: var(--primary-color);' : 'background-color: var(--primary-lightest); color: var(--primary-color); border-color: var(--primary-lighter);'\">\n                          <span x-show=\"index < step\">\u2713<\/span>\n                          <span x-show=\"index >= step\" x-text=\"stepInfo.number\"><\/span>\n                        <\/div>\n                        \n                        <!-- Step Icon -->\n                        <div class=\"step-icon w-16 h-16 flex items-center justify-center flex-shrink-0\">\n                          <img :src=\"stepInfo.icon\" :alt=\"stepInfo.title + ' ' + stepInfo.subtitle\" class=\"w-16 h-16\" \n                               :style=\"index <= step ? 'filter: none; opacity: 1;' : 'filter: grayscale(100%); opacity: 0.5;'\" \/>\n                        <\/div>\n                        \n                        <!-- Step Text -->\n                        <div class=\"step-text flex flex-col min-w-0\">\n                          <div class=\"text-sm font-medium leading-tight\" \n                               :style=\"index <= step ? 'color:#000;' : 'color: #00000050;;'\" \n                               x-text=\"stepInfo.title\"><\/div>\n                          <div class=\"text-sm font-medium leading-tight\" \n                               :style=\"index <= step ? '#000;' : 'color: #00000050;'\" \n                               x-text=\"stepInfo.subtitle\"><\/div>\n                        <\/div>\n\n                        \n                      <\/div>\n    <template x-if=\"index < 2\">\n        <div class=\"flex-shrink-0 px-2 self-center\" style=\"margin-top: -60px;\"> \n          <img decoding=\"async\" src=\"https:\/\/shop.liwadates.com\/wp-content\/plugins\/custom-gift-boxes\/assets\/icons\/arrow.svg\" \n               alt=\"arrow\" \n               class=\"w-10 h-auto object-contain\"\n               :style=\"index < step ? 'filter: none; opacity: 1;' : 'filter: grayscale(100%); opacity: 0.2;'\" \/>\n        <\/div>\n      <\/template>\n      <\/div>\n                    <\/template>\n                  <\/div>\n                  \n             \n                <\/div>\n              <\/div>\n                  <!-- Step 1: Box -->\n                  <div x-show=\"step === 0\" x-transition>\n                    <h2 class=\"custom-heading-style  \">\u0627\u062e\u062a\u0631 \u0627\u0644\u0639\u0644\u0628\u0629<\/h2>\n                    <p style=\"font-family: 'Almarai', sans-serif; font-size: 18px; color: #000; margin-bottom: 25px; line-height: 1.6;\">\n                            Choose your gift box from a variety of wooden and cardboard packages of your choice.\n                    <\/p>                    <div class=\"grid grid-cols-2 grid-3-cols gap-4\">\n                      <template x-for=\"box in boxes\" :key=\"box.id\">\n                         <div class=\" custom-gift-card border-2 rounded p-2 cursor-pointer transition-all duration-200 hover:shadow-md\" style=\"border-color: #e5e7eb;\" onmouseover=\"this.style.borderColor='var(--primary-light)'; this.style.backgroundColor='var(--hover-bg-light)'\" onmouseout=\"this.style.borderColor='#e5e7eb'; this.style.backgroundColor='transparent'\" @click=\"selectBox(box)\">\n                          <img :src=\"box.image\" class=\"rounded w-full mx-auto aspect-square object-cover mb-4\" \/>\n                          <div class=\"card-details p-5 flex flex-col flex-grow\" >\n                          <h3 class=\"product-title text-start\" x-text=\"box.title\"><\/h3>\n                            <p class=\"product-price text-start\">\n                                <span x-text=\"box.start_price + ' - ' + box.end_price\"><\/span>\n                                \n                                <span class=\"currency-text\">AED<\/span>\n                            <\/p>                        <\/div>\n                                                <\/template>\n                    <\/div>\n                  <\/div>\n\n                  <!-- Step 2: Size -->\n                  <div x-show=\"step === 1\" x-transition>\n                    <h2 class=\"text-xl font-semibold mt-4 mb-2\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062d\u062c\u0645<\/h2>\n                    <div class=\"grid grid-cols-2 grid-3-cols gap-4\">\n                      <template x-if=\"selectedBox\">\n                        <template x-for=\"size in selectedBox.sizes\" :key=\"size.name\">\n                           <div class=\"border-2 rounded p-2 cursor-pointer transition-all duration-200 hover:shadow-md\" style=\"border-color: #e5e7eb;\" onmouseover=\"this.style.borderColor='var(--primary-light)'; this.style.backgroundColor='var(--hover-bg-light)'\" onmouseout=\"this.style.borderColor='#e5e7eb'; this.style.backgroundColor='transparent'\" @click=\"selectSize(size)\">\n                            <img :src=\"size.image\" class=\"rounded w-full aspect-square object-cover mb-4\" \/>\n                            <h3 class=\"product-title text-start\" x-text=\"size.name\"><\/h3>\n                            <p class=\"product-price text-start\">\n                              \u0645\u0646 \n                              <span x-text=\"(parseFloat(size.price) + (selectedBox.dates.length ? selectedBox.dates.reduce((min, d) => d.price < min ? d.price : min, selectedBox.dates[0].price) * size.limit : 0)).toFixed(2) + ' AED'\"><\/span>\n                            <\/p>\n                            <p class=\"product-meta text-start\">\u0627\u0644\u0648\u0632\u0646: <span x-text=\"size.weight\"><\/span>\u062c\u0645<\/p>\n                            <p class=\"product-meta text-start\">\u062d\u062f \u0627\u0644\u062d\u0634\u0648\u0629: <span x-text=\"size.limit\"><\/span><\/p>\n                          <\/div>\n                        <\/template>\n                      <\/template>\n                    <\/div>\n                  <\/div>\n\n                  <!-- Step 3: Dates -->\n                  <div x-show=\"step === 2\" x-transition>\n                    <h2 class=\"text-xl font-semibold mt-4 mb-2\">\n                      \u0627\u062e\u062a\u0631 \u0627\u0644\u062d\u0634\u0648\u0629                      (\u0627\u0644\u0645\u062c\u0645\u0648\u0639                        <template x-if=\"selectedSize\">\n                          <span x-text=\"selectedSize.limit\"><\/span>\n                        <\/template>\n                      )\n                    <\/h2>\n                    <div class=\"grid grid-cols-2 grid-3-cols gap-4\">\n                      <template x-if=\"selectedBox\">\n                        <template x-for=\"date in selectedBox.dates\" :key=\"date.id\">\n                          <div class=\"border-2 rounded p-2 text-center transition-all duration-200 hover:shadow-md\" style=\"border-color: #e5e7eb;\" onmouseover=\"this.style.borderColor='var(--primary-light)'; this.style.backgroundColor='var(--hover-bg-light)'\" onmouseout=\"this.style.borderColor='#e5e7eb'; this.style.backgroundColor='transparent'\">\n                            <img :src=\"date.image\" class=\"rounded w-full aspect-square object-cover mb-4\" \/>\n                            <h3 class=\"line-clamp-2 leading-[1.25em] min-h-[2.5em] text-sm font-medium mb-4\" x-text=\"date.title\"><\/h3>\n                             <div class=\"flex justify-center items-center mb-2 gap-2\">\n                               <button class=\"p-1 rounded transition-colors text-white\" style=\"background-color: var(--primary-light);\" onmouseover=\"this.style.backgroundColor='var(--primary-color)'\" onmouseout=\"this.style.backgroundColor='var(--primary-light)'\" @click=\"decreaseDate(date)\">\n                                 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                   <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 12H4\" \/>\n                                 <\/svg>\n                               <\/button>\n                               <span x-text=\"getDateQty(date.id)\" class=\"w-6 text-center font-semibold\" style=\"color: var(--primary-color);\"><\/span>\n                               <button class=\"p-1 rounded transition-colors text-white\" style=\"background-color: var(--primary-color);\" onmouseover=\"this.style.backgroundColor='var(--primary-dark)'\" onmouseout=\"this.style.backgroundColor='var(--primary-color)'\" @click=\"increaseDate(date)\">\n                                 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                   <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\" \/>\n                                 <\/svg>\n                               <\/button>\n                             <\/div>\n                          <\/div>\n                        <\/template>\n                      <\/template>\n                    <\/div>\n                  <\/div>\n\n                  \n                <\/div>\n\n                <!-- Summary -->\n                <template x-if=\"selectedBox\">\n                  <div class=\"lg:w-1\/3 bg-gray-50 p-4 rounded shadow\">\n                    <h2 class=\"text-xl font-semibold text-gray-800 mb-5\">\u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629<\/h2>\n                    <div class=\"space-y-6 text-sm leading-relaxed\">\n                      <!-- Box Selection -->\n                      <template x-if=\"selectedBox\">\n                        <div>\n                          <h3 class=\"text-sm font-semibold text-gray-700 mb-2\">\u0627\u0644\u0639\u0644\u0628\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629<\/h3>\n                          <div class=\"flex items-start justify-between\">\n                            <div class=\"flex items-center gap-2\">\n                              <img :src=\"selectedBox.image\" class=\"w-10 h-10 rounded object-cover border\" \/>\n                              <div>\n                                <div x-text=\"selectedBox.title\" class=\"text-gray-700 text-sm font-medium\"><\/div>\n                              <\/div>\n                            <\/div>\n                             <button class=\"text-sm underline transition-colors duration-200\" style=\"color: var(--primary-color);\" onmouseover=\"this.style.color='var(--primary-dark)'; this.style.backgroundColor='var(--hover-bg-light)'\" onmouseout=\"this.style.color='var(--primary-color)'; this.style.backgroundColor='transparent'\" @click=\"step = 0\">\u062a\u063a\u064a\u064a\u0631<\/button>\n                          <\/div>\n                        <\/div>\n                      <\/template>\n\n                      <!-- Size Selection -->\n                      <template x-if=\"selectedSize\">\n                        <div>\n                          <h3 class=\"text-sm font-semibold text-gray-700 mb-2\">\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u062e\u062a\u0627\u0631<\/h3>\n                          <div class=\"flex items-start justify-between\">\n                            <div class=\"flex items-center gap-2\">\n                              <img :src=\"selectedSize.image\" class=\"w-10 h-10 rounded object-cover border\" \/>\n                              <div>\n                                <div x-text=\"selectedSize.name\" class=\"text-gray-700 text-sm font-medium\"><\/div>\n                              <\/div>\n                            <\/div>\n                             <button class=\"text-sm underline transition-colors duration-200\" style=\"color: var(--primary-color);\" onmouseover=\"this.style.color='var(--primary-dark)'; this.style.backgroundColor='var(--hover-bg-light)'\" onmouseout=\"this.style.color='var(--primary-color)'; this.style.backgroundColor='transparent'\" @click=\"step = 1\">\u062a\u063a\u064a\u064a\u0631<\/button>\n                          <\/div>\n                        <\/div>\n                      <\/template>\n\n                      <!-- Dates Selection -->\n                      <template x-if=\"step === 2 && selectedDates.length > 0\">\n                        <div>\n                          <div class=\"flex items-center justify-between mb-2\">\n                            <h3 class=\"text-sm font-semibold text-gray-700\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062a\u0645\u0648\u0631 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629<\/h3>\n                            <div class=\"text-xs text-gray-500\">\n                              <span x-text=\"selectedDates.reduce((sum, d) => sum + d.qty, 0) + '\/' + selectedSize.limit\"><\/span>\n                            <\/div>\n                          <\/div>\n                          <div class=\"flex flex-wrap gap-2 mt-2\">\n                            <template x-for=\"d in selectedDates\" :key=\"d.id\">\n                              <div class=\"relative\">\n                                <img :src=\"d.image\" class=\"w-16 h-16 object-cover rounded-md\" \/>\n                                <span class=\"absolute bottom-1 left-1 bg-white text-xs font-semibold text-black rounded px-1\" x-text=\"d.qty\"><\/span>\n                                <button @click=\"decreaseDate(d)\" class=\"absolute top-1 right-1 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center leading-5\" style=\"background-color: var(--primary-color);\">\u00d7<\/button>\n                              <\/div>\n                            <\/template>\n                          <\/div>\n                        <\/div>\n                      <\/template>\n\n                      <!-- Price Display -->\n                      <template x-if=\"step === 2 && isReady()\">\n                        <div id=\"hs-order-summary\" class=\"border-t border-gray-200 flex flex-col gap-4 w-full p-4 bg-white shadow-lg fixed bottom-0 left-0 right-0 md:relative md:bottom-auto md:left-auto md:right-auto md:shadow-none\" style=\"z-index: 1000;\">\n                          <div>\n                            <h3 class=\"text-sm font-semibold text-gray-700 mb-2\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0644\u0628\u0629<\/h3>\n                            <div class=\"text-2xl font-bold text-gray-800 mt-1\" x-text=\"total + ' AED'\"><\/div>\n                          <\/div>\n\n                          <button @click=\"placeOrder\" class=\"w-full text-white px-6 py-3 rounded transition-colors\" style=\"background-color: var(--primary-color);\" onmouseover=\"this.style.backgroundColor='var(--primary-dark)'\" onmouseout=\"this.style.backgroundColor='var(--primary-color)'\">\n                            \u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0637\u0644\u0628                          <\/button>\n                        <\/div>\n                      <\/template>\n                    <\/div>\n                <\/template>\n\n                <template x-if=\"!selectedBox\">\n                  <div class=\"lg:w-1\/3 bg-gray-50 p-4 rounded shadow flex items-center justify-center text-center text-gray-500 text-sm\">\n                    <p>\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0639\u0644\u0628\u0629 \u0647\u062f\u0627\u064a\u0627 \u0644\u0628\u062f\u0621 \u062a\u062e\u0635\u064a\u0635 \u0637\u0644\u0628\u0643.<\/p>\n                  <\/div>\n                <\/template>\n              <\/div>\n            <\/div>\n\n            <script>\n            function giftBuilder() {\n              return {\n                boxes: [],\n                selectedBox: null,\n                selectedSize: null,\n                selectedDates: [],\n                basePrice: 0,\n                total: 0,\n                showLimitPopup: false,\n                step: 0,\n                init() {\n                  fetch('\/wp-json\/hs\/v1\/gift-boxes')\n                    .then(res => {\n                      if (!res.ok) {\n                        throw new Error('API request failed: ' + res.status);\n                      }\n                      return res.json();\n                    })\n                    .then(data => {\n                      console.log('Gift boxes data loaded:', data);\n                      if (!Array.isArray(data) || data.length === 0) {\n                      console.warn('\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0639\u0644\u0628 \u0647\u062f\u0627\u064a\u0627. \u064a\u0631\u062c\u0649 \u0625\u0646\u0634\u0627\u0621 \u0628\u0639\u0636\u0647\u0627 \u0641\u064a \u0625\u062f\u0627\u0631\u0629 \u0648\u0648\u0631\u062f\u0628\u0631\u0633.');\n                      return;\n                      }\n                      this.boxes = data.map(box => {\n                        const minSize = box.sizes.reduce((min, s) => parseFloat(s.price) < parseFloat(min.price) ? s : min, box.sizes[0]);\n                        const maxSize = box.sizes.reduce((max, s) => parseFloat(s.price) > parseFloat(max.price) ? s : max, box.sizes[0]);\n                        const minDate = box.dates.reduce((min, d) => parseFloat(d.price) < parseFloat(min.price) ? d : min, box.dates[0]);\n                        const maxDate = box.dates.reduce((max, d) => parseFloat(d.price) > parseFloat(max.price) ? d : max, box.dates[0]); \n                        \n                        const startPrice = parseFloat(minSize.price) + (parseFloat(minDate.price) * parseInt(minSize.limit)); \n                        const endPrice = parseFloat(maxSize.price) + (parseFloat(maxDate.price) * parseInt(maxSize.limit));\n                                               return { ...box, start_price: startPrice.toFixed(2) , \n      end_price: endPrice.toFixed(2) };\n                      });\n                    })\n                    .catch(error => {\n                      console.error('Error loading gift boxes:', error);\n                      alert('\u062e\u0637\u0623 \u0641\u064a \u062a\u062d\u0645\u064a\u0644 \u0639\u0644\u0628 \u0627\u0644\u0647\u062f\u0627\u064a\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0625\u0646\u0634\u0627\u0621 \u0639\u0644\u0628 \u0627\u0644\u0647\u062f\u0627\u064a\u0627 \u0641\u064a \u0625\u062f\u0627\u0631\u0629 \u0648\u0648\u0631\u062f\u0628\u0631\u0633.');\n                    });\n                },\n                selectBox(box) {\n                  this.selectedBox = box;\n                  this.selectedSize = null;\n                  this.selectedDates = [];\n                  this.total = 0;\n                  this.step = 1;\n                },\n                selectSize(size) {\n                  this.selectedSize = size;\n                  this.basePrice = parseFloat(size.price);\n                  this.selectedDates = [];\n                  this.calculateTotal();\n                  this.step = 2;\n                },\n                increaseDate(date) {\n                  const found = this.selectedDates.find(d => d.id === date.id);\n                  const totalQty = this.selectedDates.reduce((sum, d) => sum + d.qty, 0);\n                  if (totalQty >= this.selectedSize.limit) {\n                    this.showLimitPopup = true;\n                    return;\n                  }\n                  if (found) {\n                    found.qty++;\n                  } else {\n                    this.selectedDates.push({ id: date.id, title: date.title, price: date.price, image: date.image, qty: 1 });\n                  }\n                  this.calculateTotal();\n                },\n                decreaseDate(date) {\n                  const found = this.selectedDates.find(d => d.id === date.id);\n                  if (found && found.qty > 0) {\n                    found.qty--;\n                    if (found.qty === 0) {\n                      this.selectedDates = this.selectedDates.filter(d => d.id !== date.id);\n                    }\n                  }\n                  this.calculateTotal();\n                },\n                getDateQty(id) {\n                  const found = this.selectedDates.find(d => d.id === id);\n                  return found ? found.qty : 0;\n                },\n                calculateTotal() {\n                  const totalQty = this.selectedDates.reduce((sum, d) => sum + d.qty, 0);\n                  if (!this.selectedSize || totalQty < this.selectedSize.limit) {\n                    this.total = 0;\n                    return;\n                  }\n                  const datesTotal = this.selectedDates.reduce((sum, d) => sum + d.price * d.qty, 0);\n                  this.total = (this.basePrice + datesTotal).toFixed(2);\n                },\n                isReady() {\n                  return this.selectedBox && this.selectedSize && this.selectedDates.reduce((sum, d) => sum + d.qty, 0) === this.selectedSize.limit;\n                },\n                placeOrder() {\n                  const payload = {\n                    action: \"hs_add_to_cart\",\n                    product_id: 9312,\n                    box_title: this.selectedBox.title,\n                    size: this.selectedSize.name,\n                    size_image: this.selectedSize.image,\n                    base_price: this.basePrice,\n                    dates: JSON.stringify(this.selectedDates),\n                    total_price: this.total\n                  };\n\n                  console.log('Placing order with:', payload);\n\n                  fetch(\"\/wp-admin\/admin-ajax.php\", {\n                    method: \"POST\",\n                    headers: { \"Content-Type\": \"application\/x-www-form-urlencoded\" },\n                    body: new URLSearchParams(payload)\n                  })\n                  .then(res => res.json())\n                  .then(data => {\n                    if (data.success) {\n                      window.location.href = \"\/checkout\/\";\n                    } else {\n                      alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0645\u0627.');\n                    }\n                  });\n                }\n              }\n            }\n            <\/script>\n        <\/div>\n        \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-9316","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/pages\/9316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/comments?post=9316"}],"version-history":[{"count":0,"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/pages\/9316\/revisions"}],"wp:attachment":[{"href":"https:\/\/shop.liwadates.com\/ar\/wp-json\/wp\/v2\/media?parent=9316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}