{"version":3,"file":"Dw1HXuMw.js","sources":["../../../../virtual:public?%2Fimages%2FVisa.png","../../../../virtual:public?%2Fimages%2Fmaster.png","../../../../virtual:public?%2Fimages%2Fqr-banking.png","../../../../components/payment/PaymentType.vue","../../../../components/PaymentForm.vue","../../../../pages/bang-gia.vue"],"sourcesContent":["import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(\"/images/Visa.png\")","import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(\"/images/master.png\")","import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(\"/images/qr-banking.png\")","<script setup>\nconst Pantmentabs = [\n    {\n        label: \"Credit Card\",\n        isActivated: true\n    },\n    {\n        label: \"Tiền mặt\",\n        isActivated: false\n    },\n    {\n        label: \"Chuyển khoản\",\n        isActivated: false\n    }\n];\nconst stepCurrent = ref(0);\nfunction nextStep(index) {\n    stepCurrent.value = index;\n    Pantmentabs.forEach((tab, i) => {\n        if (i === index) {\n            tab.isActivated = true;\n        } else {\n            tab.isActivated = false;\n        }\n    });\n};\nconst inputValue = ref(\"\");\nconst email = ref(\"\");\nconst name = ref(\"\");\nconst phone = ref(\"\");\nconst cardNumber = ref(\"\");\nconst cardHolderName = ref(\"\");\nconst cvc = ref(\"\");\nconst errorMessage = ref(\"\");\n\nfunction handleInput(event) {\n    let inputValue = event.target.value;\n\n    // Remove all characters that are not numbers or '/'\n    inputValue = inputValue.replace(/[^0-9/]/g, '');\n\n    // Limit the total length to 5 characters (MM/YY)\n    if (inputValue.length > 5) {\n        inputValue = inputValue.slice(0, 5);\n    }\n\n    // Check for MM/YY format (2 characters / 2 characters)\n    const match = inputValue.match(/^(\\d{0,2})\\/?(\\d{0,2})$/);\n    if (match) {\n        const MM = match[1];\n        const YY = match[2];\n\n        // Check if MM and YY are valid\n        if (MM && YY) {\n            const MMNumber = parseInt(MM, 10);\n            const YYNumber = parseInt(YY, 10);\n\n            // MM must be between 01 and 12, YY between 00 and 99\n            if (MMNumber >= 1 && MMNumber <= 12 && YYNumber >= 0 && YYNumber <= 99) {\n                inputValue = MM + '/' + YY;\n\n                // Reset the error message if the input is valid\n                errorMessage.value = \"\";\n            } else {\n                // Set an error message if MM or YY is invalid\n                errorMessage.value = \"Tháng hoặc năm không hợp lệ.\";\n                inputValue = '';\n            }\n        } else {\n            // Create a formatted string \"MM/YY\" if both MM and YY exist\n            if (MM) {\n                inputValue = MM;\n            }\n            if (YY) {\n                inputValue += '/' + YY;\n            }\n\n            // Reset the error message if both MM and YY are missing\n            errorMessage.value = \"\";\n        }\n    } else {\n        // Set an error message if the format is invalid\n        errorMessage.value = \"Invalid format. Please use MM/YY.\";\n        inputValue = '';\n    }\n\n    // Update the input value\n    event.target.value = inputValue;\n}\nconst nameError = ref(\"\");\nfunction validateName() {\n    nameError.value = '';\n    if (!name.value.trim()) {\n        nameError.value = 'Họ và tên không được để trống.';\n    } else if (!/^[a-zA-Z\\s]+$/.test(name.value)) {\n        nameError.value = 'Họ và tên vui lòng viết hoa không dấu.';\n    }\n}\nconst emailError = ref(\"\");\nfunction validateEmail() {\n    emailError.value = '';\n    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/;\n    if (!emailPattern.test(email.value)) {\n        emailError.value = 'Địa chỉ email không hợp lệ.';\n    }\n}\nconst phoneError = ref(\"\");\nfunction validatePhone() {\n    phoneError.value = '';\n    const phonePattern = /^[0-9]{10}$/;\n    if (!phonePattern.test(phone.value)) {\n        phoneError.value = 'Số điện thoại không hợp lệ (10 chữ số).';\n    }\n}\nconst cardNumberError = ref('');\nfunction validateCardNumber() {\n    cardNumberError.value = '';\n    const cardNumberPattern = /^[0-9]{16}$/;\n    if (!cardNumberPattern.test(cardNumber.value)) {\n        cardNumberError.value = 'Số thẻ không hợp lệ (16 chữ số).';\n    }\n}\nconst cardHolderNameError = ref('');\nfunction validateCardHolderName() {\n    cardHolderNameError.value = '';\n    if (!cardHolder.value.trim()) {\n        cardHolderNameError.value = 'Tên chủ thẻ là bắt buộc.';\n    }\n}\nconst cvcError = ref('');\nfunction validateCVC() {\n    cvcError.value = '';\n    const cvcPattern = /^[0-9]{3}$/;\n    if (!cvcPattern.test(cvc.value)) {\n        cvcError.value = 'CVC không hợp lệ (3 chữ số).';\n    }\n}\n</script>\n<template>\n    <div class=\"flex flex-wrap\">\n        <div v-for=\"(item, index) in Pantmentabs\" :key=\"index\" @click=\"nextStep(index)\">\n            <button class=\"w-fit h-[60px] m-[12px] border-2 bg-[#ffffff] text-[16px] max-lg:text-[12px] max-lg:h-[45px] font-[600]\"\n                :class=\"{ 'border-[#ED7F22]': item.isActivated, 'border-[#F5F5F5]': !item.isActivated }\">{{\n                    item.label }}</button>\n        </div>\n    </div>\n    <section v-show=\"stepCurrent === 0\">\n        <div class=\"mt-[30px]\">\n            <div class=\"mt-[10px]\">\n                <label class=\"block mb-2 \">Họ và tên<span class=\"text-[red]\">*</span></label>\n                <input\n                    class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                    type=\"text\" v-model=\"name\" @input=\"validateName\" placeholder=\"Mời nhập họ và tên\">\n                <p class=\"error-message\" v-if=\"nameError\">{{ nameError }}</p>\n            </div>\n            <div class=\"mt-[10px]\">\n                <label class=\"block mb-2 \">Số điện thoại<span class=\"text-[red]\">*</span></label>\n                <input\n                    class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                    type=\"text\" v-model=\"phone\" @input=\"validatePhone\" placeholder=\"Mời nhập số điện thoại\">\n                <p class=\"error-message\" v-if=\"phoneError\">{{ phoneError }}</p>\n            </div>\n            <div class=\"mt-[10px]\">\n                <label class=\"block mb-2 \">Email<span class=\"text-[red]\">*</span></label>\n                <input\n                    class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                    type=\"text\" v-model=\"email\" @input=\"validateEmail\" placeholder=\"Mời nhập Email\">\n                <p class=\"error-message\" v-if=\"emailError\">{{ emailError }}</p>\n            </div>\n            <div class=\"mt-[10px] py-[15px] flex flex-wrap justify-between items-center\">\n                <div class=\"flex-1\">\n                    <p class=\"text-[16px] text-[#000000]\">Credit Card</p>\n                </div>\n                <div class=\"flex-1 flex flex-wrap justify-end\">\n                    <div class=\"mx-[10px]\"><img src=\"/images/Visa.png\" alt=\"\"></div>\n                    <div class=\"mx-[10px]\"><img src=\"/images/master.png\" alt=\"\"></div>\n                </div>\n            </div>\n            <div class=\"mt-[10px]\">\n                <label class=\"block mb-2 \">Số thẻ<span class=\"text-[red]\">*</span></label>\n                <input\n                    class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                    type=\"text\" id=\"cardNumber\" v-model=\"cardNumber\" @input=\"validateCardNumber\"\n                    placeholder=\"Mời nhập số thẻ\">\n                <p class=\"error-message\" v-if=\"cardNumberError\">{{ cardNumberError }}</p>\n            </div>\n            <div class=\"mt-[10px]\">\n                <label class=\"block mb-2 \">Họ và tên chủ thẻ<span class=\"text-[red]\">*</span></label>\n                <input\n                    class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                    type=\"text\" id=\"cardHolderName\" v-model=\"cardHolderName\" @input=\"validateCardHolderName\"\n                    placeholder=\"Mời nhập họ và tên chủ thẻ\">\n                <p class=\"error-message\" v-if=\"cardHolderNameError\">{{ cardHolderNameError }}</p>\n            </div>\n            <div class=\"mt-[10px] flex flex-wrap\">\n                <div class=\"flex-1 mr-[10px]\">\n                    <label class=\"block mb-2 \">Ngày hêt hạn<span class=\"text-[red]\">*</span></label>\n                    <input type=\"text\" id=\"custom-month-input\" name=\"custom-month-input\"\n                        class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                        v-model=\"inputValue\" @input=\"handleInput\" placeholder=\"MM/YY\">\n                    <p class=\"error-message\" v-if=\"errorMessage\">{{ errorMessage }}</p>\n                </div>\n                <div class=\"flex-1 ml-[10px]\">\n                    <label class=\"block mb-2 \">CVC<span class=\"text-[red]\">*</span></label>\n                    <input\n                        class=\"appearance-none border-2 w-full rounded-[12px] p-4 leading-tight focus:outline-none focus:border-[#ED7F22]\"\n                        type=\"text\" id=\"cvc\" v-model=\"cvc\" @input=\"validateCVC\" placeholder=\"Mời nhập CVC\">\n                    <p class=\"error-message\" v-if=\"cvcError\">{{ cvcError }}</p>\n                </div>\n            </div>\n        </div>\n        <div class=\"text-right my-[25px]\">\n            <button class=\"border-none bg-[#ED7F22] text-[#ffffff]\">Thanh toán</button>\n        </div>\n        <p class=\"my-[10px]\">“Nhân viên của MIRAWAY sẽ gọi lại bạn trong vòng 24h để xác nhận thanh toán và giải đáp các\n            thắc mắc của bạn”</p>\n        <p class=\"my-[10px]\">Hỗ trợ: Nếu bạn gặp bất kỳ các vấn đề gì vui lòng liên hệ với chúng tôi thông qua số Hotline\n            sau: <span class=\"text-[#ED7F22]\">0969 059\n                786</span>\n        </p>\n    </section>\n    <section v-show=\"stepCurrent === 1\">\n        <div class=\"py-[10px]\">\n            <p class=\"text-[16px] font-[600] my-[5px] text-[#000000]\">Cơ sở Hà Nội</p>\n            <span>Bạn có thể đến thanh toán tiền trực tiếp tại Văn phòng MIRAWAY, Tầng 4 - Tòa nhà GTC, Số 69, phố Tố Hữu,\n                Vạn Phúc, Hà Đông, Hà Nội. Văn phòng làm việc từ 8h30 sáng đến 7h tối từ thứ 2 đến thứ 6 hàng tuần.</span>\n        </div>\n        <div class=\"py-[10px]\">\n            <p class=\"text-[16px] font-[600] my-[5px] text-[#000000]\">Cơ sở Tp. Hồ Chí Minh</p>\n            <span>Bạn có thể đến thanh toán tiền trực tiếp tại Văn phòng MIRAWAY, Tầng 4 - Tòa nhà GTC, Số 69, phố Tố Hữu,\n                Vạn Phúc, Hà Đông, Hà Nội. Văn phòng làm việc từ 8h30 sáng đến 7h tối từ thứ 2 đến thứ 6 hàng tuần.</span>\n        </div>\n        <p class=\"py-[10px]\">Hỗ trợ: Nếu bạn gặp bất kỳ các vấn đề gì vui lòng liên hệ với chúng tôi thông qua số Hotline\n            sau: <a href=\"tel:0969059786\" class=\"#ED7F22\">0969 059 786</a></p>\n    </section>\n    <section v-show=\"stepCurrent === 2\">\n        <p>Sử dụng thiết bị của bạn thực hiện quét mã QR hoặc chuyển tiển nhanh đến số tài khoản ngân hàng bên dưới. Trong\n            24h nhân viên của MIRAWAY sẽ liên hệ xác nhận với bạn</p>\n        <div class=\"flex flex-wrap justify-center my-[20px]\">\n            <div class=\"flex-1\"><img src=\"/images/qr-banking.png\" alt=\"\"></div>\n            <div class=\"flex-1\">\n                <p>-Ngân hàng:<span>Mbbank</span></p>\n                <p>-Người nhận:<span>...</span></p>\n                <p>-Số tài khoản:<span>...</span></p>\n                <p>-Nội dung:<span>...</span></p>\n            </div>\n        </div>\n        <p class=\"py-[5px]\">“Nhân viên của MIRAWAY sẽ gọi lại bạn trong vòng 24h để xác nhận thanh toán và giải đáp các thắc\n            mắc của bạn”</p>\n        <p class=\"py-[5px]\">Hỗ trợ: Nếu bạn gặp bất kỳ các vấn đề gì vui lòng liên hệ với chúng tôi thông qua số Hotline\n            sau: <a href=\"tel:0969059786\" class=\"text-[#ED7F22]\">0969 059 786</a>\n        </p>\n    </section>\n</template>\n","<template>\n  <section v-show=\"stepCurrent === 0\">\n    <section>\n      <div class=\"text-[40px] text-[#000000] font-[600] mb-[30px]\">{{ steptabs[stepCurrent]?.label }}</div>\n      <div class=\"flex\">\n        <div class=\"max-xl:w-[140px] max-xl:ml-[7px]\">\n          <p class=\"text-[24px] mb-[40px] font-[600] text-[#333333]\">Lựa chọn nhu cầu</p>\n          <div\n            v-for=\"(agreement, index) in agreements\"\n            :key=\"index\"\n            class=\"agreement-container bg-[#ffffff] border-[3px] cursor-pointer mb-[24px] max-xl:mb-[12px] shadow-lg border-[#ffffff] w-[302px] max-xl:w-[120px] rounded-[12px] py-[5px] px-[13px]\"\n            @click=\"toggleAgreements(agreement.id)\"\n            :class=\"{\n              agreement: agreement.checked,\n              'opacity-50': agreement.disabled,\n              'agreements-disabled': agreement.disabled,\n            }\"\n          >\n            <div class=\"py-[10px] border-dashed flex items-center\" :class=\"{ 'border-b-[2px]': agreement.checked }\">\n              <img :src=\"agreement.icon\" alt=\"\" />\n              <span class=\"pl-[5px] text-[#000000] font-[600]\">{{ agreement.description }}</span>\n            </div>\n            <div class=\"expandable p-[10px] max-xl:hidden\" :class=\"{ expanded: agreement.checked }\">\n              {{ agreement.description }}\n            </div>\n          </div>\n        </div>\n        <div>\n          <p class=\"text-[24px] mb-[40px] font-[600] pl-[20px] text-[#333333]\">Các tính năng tương ứng</p>\n          <div class=\"flex flex-wrap\">\n            <TransitionGroup>\n              <div\n                class=\"bg-[#ffffff] border-[2px] border-[#F5F5F5] cursor-pointer ml-[20px] max-xl:ml-[10px] mb-[20px] shadow-lg max-xl:mb-[12px] h-fit w-[330px] max-xl:w-[230px] rounded-[12px]\"\n                v-for=\"(agreementqrx, index) in agreementsqrx\"\n                :key=\"agreementqrx.description\"\n                :class=\"{ agreement: agreementqrx.checked }\"\n              >\n                <div @click=\"toggleAgreementqrx(agreementqrx.id)\" class=\"p-[10px]\">\n                  <div class=\"border-b-[2px] border-dashed py-[10px]\">\n                    <span class=\"font-[700] text-[#333333] text-[20px] max-xl:text-[14px]\">{{\n                      agreementqrx.description\n                    }}</span>\n                  </div>\n                  <div\n                    class=\"py-[10px] payment-desc max-xl:hidden\"\n                    :class=\"{ 'border-dashed': agreementqrx.checked, 'border-b-[2px]': agreementqrx.checked }\"\n                  >\n                    <p v-html=\"agreementqrx.description\"></p>\n                  </div>\n                </div>\n                <div class=\"expandable p-[10px] rounded-[12px]\" :class=\"{ expanded: agreementqrx.checked }\">\n                  <div>\n                    <div v-show=\"agreementqrx.user_qrx\" class=\"flex justify-between mt-[10px] items-center mx-[20px]\">\n                      <div>\n                        <p class=\"text-[#000000] text-[14px] font-[700]\">Số User:</p>\n                      </div>\n                      <div>\n                        <select\n                          class=\"border-2 w-[200px] leading-tight focus:outline-none focus:bg-red focus:border-[#ED7F22] h-[40px] rounded-[8px]\"\n                          v-model=\"userNumber['userNumber_' + agreementqrx.id]\"\n                          @input=\"UserNumber(agreementqrx.id)\"\n                        >\n                          <option :value=\"0\">Mời chọn số người dùng</option>\n                          <option :value=\"5\">5 người dùng</option>\n                          <option :value=\"10\">10 người dùng</option>\n                          <option :value=\"20\">20 người dùng</option>\n                          <option :value=\"30\">30 người dùng</option>\n                        </select>\n                      </div>\n                    </div>\n                    <div v-show=\"agreementqrx.code_qrx\" class=\"flex justify-between mt-[10px] items-center mx-[20px]\">\n                      <div>\n                        <p class=\"text-[#000000] text-[14px] font-[700]\">Số mã:</p>\n                      </div>\n                      <div>\n                        <select\n                          class=\"border-2 w-[200px] leading-tight focus:outline-none focus:bg-red focus:border-[#ED7F22] h-[40px] rounded-[8px]\"\n                          v-model=\"codeNumber['numberCode_' + agreementqrx.id]\"\n                          @input=\"numberCode(agreementqrx.id)\"\n                        >\n                          <option :value=\"0\" selected>Mời chọn số người dùng</option>\n                          <option :value=\"5\">5 người dùng</option>\n                          <option :value=\"10\">10 người dùng</option>\n                          <option :value=\"20\">20 người dùng</option>\n                          <option :value=\"30\">30 người dùng</option>\n                        </select>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </TransitionGroup>\n          </div>\n        </div>\n      </div>\n    </section>\n    <div class=\"fixed bottom-0 bg-[#F5F5F5] px-[80px] m-auto left-0 right-0 text-right\">\n      <div class=\"p-[10px] max-xl:pb-[30px] max-xl:w-[500px] inline-flex items-center\">\n        <div class=\"px-[10px]\">\n          <p class=\"text-[24px] max-xl:text-[18px] text-[#999999] font-[600]\">Tổng báo giá</p>\n          <span class=\"text-[32px] max-xl:text-[18px] text-[#000000] font-[500]\"\n            >{{ formatPrice(totalPrice) }} <span class=\"text-[8px]\">(đồng)</span></span\n          >\n        </div>\n        <button @click=\"nextStep\" class=\"bg-[#ED7F22] text-[#ffff] text-[16px] font-[500] border-none\">\n          Thanh Toán\n        </button>\n      </div>\n    </div>\n  </section>\n  <section v-show=\"stepCurrent === 1\">\n    <div class=\"flex justify-center\">\n      <div class=\"flex-1 px-[10px]\">\n        <p class=\"border-b-[3px] border-dashed py-[10px] text-[40px] max-lg:text-[30px]\">\n          {{ steptabs[stepCurrent]?.label }}\n        </p>\n        <div class=\"flex flex-wrap\">\n          <div\n            v-for=\"(item, index) in selectedAgreements\"\n            :key=\"index\"\n            class=\"bg-[#ffffff] border-[3px] my-[10px] agreement mr-[20px] cursor-pointer border-[#ffffff] w-[302px] h-[129px] rounded-[12px] py-[5px] px-[13px]\"\n          >\n            <div class=\"border-b-[2px] py-[10px] border-dashed flex items-center\">\n              <img :src=\"item.icon\" alt=\"\" />\n              <span class=\"pl-[5px]\">{{ item.description }}</span>\n            </div>\n            <span>{{ item.long_description }}</span>\n          </div>\n        </div>\n        <div>\n          <p class=\"text-[24px] text-[#000000]\">các tính năng tương ứng</p>\n          <div\n            v-for=\"(item, index) in selectedAgreementsqrx\"\n            :key=\"index\"\n            class=\"bg-[#ffffff] my-[15px] rounded-[6px] shadow-lg\"\n          >\n            <div class=\"flex justify-between py-[10px] px-[20px]\">\n              <div class=\"text-[#000000] text-[24px]\">{{ item.description }}</div>\n              <div class=\"text-[#ED7F22] text-[24px]\">\n                {{ formatPrice(item.price) }}<span class=\"text-[#ED7F22] text-[24px]\">đ</span>\n              </div>\n            </div>\n            <div v-show=\"item.user_qrx\" class=\"flex justify-between py-[10px] px-[20px]\">\n              <div class=\"text-[#000000] text-[24px]\">Số User</div>\n              <input\n                disabled\n                class=\"appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-[#ED7F22]\"\n                type=\"text\"\n                :value=\"item.count_user_qrx\"\n              />\n            </div>\n            <div v-show=\"item.code_qrx\" class=\"flex justify-between py-[10px] px-[20px]\">\n              <div class=\"text-[#000000] text-[24px]\">Số mã</div>\n              <input\n                disabled\n                class=\"appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-[#ED7F22]\"\n                type=\"text\"\n                :value=\"item.count_code_qrx\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"flex-1 px-[10px] mx-[10px]\">\n        <div class=\"bg-[#fcfcfd] rounded-[12px]\">\n          <div class=\"px-[20px]\">\n            <p class=\"py-[30px] text-[40px] text-[#333333] max-lg:text-[30px]\">Ước tính chi phí</p>\n            <div class=\"grid grid-cols-[70px,1fr]\">\n              <span>Lưu ý</span>\n              <div>\n                <li>Giá cả có thể được điều chỉnh tùy theo nhu cầu và mức độ mở rộng của bạn!</li>\n                <li>Nếu có bất kỳ thắc mắc gì giá cả bạn có thể liên hệ với chúng tôi.</li>\n              </div>\n            </div>\n            <div class=\"flex justify-between py-[30px]\">\n              <div>\n                <p class=\"text-[40px] font-[600] text-[#999999] max-lg:text-[20px]\">Tổng</p>\n              </div>\n              <div>\n                <p class=\"text-[40px] font-[600] text-[#ED7F22] max-lg:text-[20px]\">\n                  {{ formatPrice(totalPrice) }}\n                  <span class=\"text-[#ED7F22] text-[40px] max-lg:text-[20px]\">đ</span>\n                </p>\n              </div>\n            </div>\n            <div class=\"text-center pb-[15px]\">\n              <div>\n                <button class=\"bg-[#ED7F22] text-[#ffffff] border-none my-[5px] w-2/3\" @click=\"nextStep\">\n                  Mua ngay\n                </button>\n              </div>\n              <div><button class=\"text-[#ED7F22] border-[#ED7F22] border-2 my-[5px] w-2/3\">Liên hệ</button></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"fixed bottom-0 w-[1440px] max-xl:w-auto bg-[#F5F5F5] px-[60px] m-auto left-0 right-0 text-right\">\n      <div class=\"p-[10px] inline-flex items-center\">\n        <button @click=\"prewStep\" class=\"border-[#ED7F22] text-[#ED7F22] text-[16px] font-[500] border-2 mx-[15px]\">\n          Quay lại\n        </button>\n        <button class=\"bg-[#ED7F22] text-[#ffff] text-[16px] font-[500] border-none mx-[15px]\">Thoát</button>\n      </div>\n    </div>\n  </section>\n  <section v-show=\"stepCurrent === 2\">\n    <div class=\"flex justify-center\">\n      <div class=\"flex-1 px-[10px]\">\n        <p class=\"border-b-[3px] border-dashed py-[10px] text-[40px] text-[#000000] max-lg:text-[30px]\">\n          {{ steptabs[stepCurrent]?.label }}\n        </p>\n        <p class=\"text-[24px] text-[#000000]\">chọn hình thức thanh toán</p>\n        <PaymentType />\n      </div>\n      <div class=\"max-lg:w-1/3 px-[10px] mx-[10px]\">\n        <div class=\"bg-[#fcfcfd] rounded-[12px]\">\n          <div class=\"p-[20px]\">\n            <p class=\"py-[30px] text-[40px] text-[#333333] max-lg:text-[20px]\">Thông tin thanh toán</p>\n            <div class=\"flex flex-wrap py-[5px]\">\n              <p>\n                Dịch vụ:\n                <span v-for=\"(item, index) in selectedAgreements\" :key=\"index\" class=\"text-[#000000]\">\n                  {{ item.description }},\n                </span>\n              </p>\n            </div>\n            <p>Tính năng</p>\n            <div v-for=\"(item, index) in selectedAgreementsqrx\" :key=\"index\" class=\"my-[5px]\">\n              <div class=\"flex justify-between py-[5px] px-[20px]\">\n                <div class=\"text-[16px]\">{{ item.description }}</div>\n                <div class=\"text-[#000000] text-[16px]\">\n                  {{ formatPrice(item.price) }}<span class=\"text-[#000000] text-[16px]\"> đ</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"flex justify-between items-center my-[20px] rounded-[12px] bg-[#F5F5F5] px-[5px] py-[10px]\">\n              <div class=\"text-[16px] max-lg:text-[12px]\">Tổng</div>\n              <div class=\"text-[#ED7F22] text-[16px]\">\n                {{ formatPrice(totalPrice) }}<span class=\"text-[#ED7F22] text-[16px]\"> đ</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script setup>\nconst agreements = ref([]);\nconst agreementsqrx = ref([]);\nconst totalPrice = ref(0);\nconst steptabs = ref([\n  {\n    label: \"Bảng giá QRX\",\n    isActivated: true,\n  },\n  {\n    label: \"Tóm tắt đơn hàng\",\n    isActivated: false,\n  },\n  {\n    label: \"Thanh toán đơn hàng\",\n    isActivated: false,\n  },\n]);\nconst config = useRuntimeConfig();\nconst stepCurrent = ref(0);\nconst selectedAgreements = ref([]);\nconst selectedAgreementsqrx = ref([]);\nconst userNumber = ref({});\nconst codeNumber = ref({});\nconst errors = ref([]);\nonMounted(() => {\n  $fetch(\"api/packages\", { baseURL: config.public.baseUrl.crm })\n    .then(function (response) {\n      agreements.value = response.data;\n    })\n    .catch(function (error) {\n      errors.value.push(error);\n    });\n  $fetch(\"api/services\", { baseURL: config.public.baseUrl.crm })\n    .then(function (response) {\n      agreementsqrx.value = response.data;\n      if (userNumber.value) {\n        agreementsqrx.value.forEach((row, index) => {\n          userNumber.value[\"userNumber_\" + row.id] = 0;\n        });\n      }\n      if (codeNumber.value) {\n        agreementsqrx.value.forEach((row, index) => {\n          codeNumber.value[\"numberCode_\" + row.id] = 0;\n        });\n      }\n    })\n    .catch(function (error) {\n      errors.value.push(error);\n    });\n});\nconst formatPrice = (price) => {\n  return price.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n};\nconst toggleAgreements = (id) => {\n  const agreement = agreements.value.find((agr) => agr.id === id);\n\n  if (!agreement) {\n    return;\n  }\n\n  const originalCheckedState = agreement.checked;\n\n  if (!originalCheckedState) {\n    agreement.checked = true;\n\n    const correspondingItems = agreementsqrx.value.filter((item) => item.package_id.includes(id));\n\n    agreementsqrx.value = correspondingItems.concat(\n      agreementsqrx.value.filter((item) => !item.package_id.includes(id)),\n    );\n    setTimeout(() => {\n      selectedAgreementsqrx.value = agreementsqrx.value.filter((item) => item.checked === true);\n      totalPrice.value = agreementsqrx.value.reduce((total, item) => {\n        return item.checked ? total + parseFloat(item.price || 0) : total;\n      }, 0);\n    }, 0);\n    correspondingItems.forEach((item) => {\n      item.checked = true;\n    });\n\n    agreementsqrx.value.sort((a, b) => (a.checked && !b.checked ? -1 : a.checked || !b.checked ? 1 : 0));\n\n    const parentIds = agreement.parent_id;\n    const childAgreements = agreements.value.filter((agr) => parentIds.includes(agr.id));\n\n    childAgreements.forEach((child) => {\n      if (!child.checked) {\n        child.checked = true;\n        totalPrice.value += child.price || 0;\n      }\n    });\n\n    agreements.value.forEach((agr, agrIndex) => {\n      if (parentIds.includes(agr.id) && !agr.checked) {\n        agr.disabled = true;\n        agr.border = false;\n      }\n    });\n\n    agreements.value.forEach((agr, agrIndex) => {\n      if (agr.id !== agreement.id && parentIds.includes(agr.id) && agr.checked) {\n        agr.disabled = true;\n        agr.border = false;\n        agr.checked = false;\n        totalPrice.value -= agr.price || 0;\n      }\n    });\n\n    const selectedAgreementIndex = selectedAgreements.value.findIndex((selectedAgr) => selectedAgr.id === agreement.id);\n    if (selectedAgreementIndex === -1) {\n      selectedAgreements.value.push(agreement);\n    }\n  } else {\n    agreement.checked = false;\n\n    const correspondingItems = agreementsqrx.value.filter((item) => item.package_id.includes(id));\n    setTimeout(() => {\n      totalPrice.value = agreementsqrx.value.reduce((total, item) => {\n        return item.checked ? total + parseFloat(item.price || 0) : total;\n      }, 0);\n    }, 0);\n    agreementsqrx.value.forEach((item) => {\n      if (!agreements.value.some((agr) => agr.checked && item.package_id.includes(agr.id))) {\n        item.checked = false;\n        const delayNumber = userNumber.value[\"userNumber_\" + item.id] || 0;\n        const delayCode = codeNumber.value[\"numberCode_\" + item.id] || 0;\n        setTimeout(() => {\n          item.price = item.price - (delayNumber * 10000 + delayCode * 10000);\n          userNumber.value[\"userNumber_\" + item.id] = 0;\n          codeNumber.value[\"numberCode_\" + item.id] = 0;\n        }, 0);\n      }\n    });\n\n    agreementsqrx.value.sort((a, b) => (a.checked && !b.checked ? -1 : a.checked || !b.checked ? 1 : 0));\n\n    const parentIds = agreement.parent_id;\n    if (parentIds.length > 0) {\n      agreements.value.forEach((agr, agrIndex) => {\n        if (parentIds.includes(agr.id) && !agr.checked) {\n          agr.disabled = true; // Remove disable when disabled\n          agr.border = false; // Show border again when disabled\n        }\n      });\n      const selectedAgreementIndex = selectedAgreements.value.findIndex(\n        (selectedAgr) => selectedAgr.id === agreement.id,\n      );\n      if (selectedAgreementIndex !== -1) {\n        selectedAgreements.value.splice(selectedAgreementIndex, 1);\n      }\n    }\n\n    const anyAgreementChecked = agreements.value.some((agr) => agr.checked);\n    if (!anyAgreementChecked) {\n      selectedAgreements.value = [];\n      selectedAgreementsqrx.value = [];\n    }\n    if (!anyAgreementChecked) {\n      agreements.value.forEach((agr, agrIndex) => {\n        agr.disabled = false;\n        agr.border = true;\n      });\n    }\n  }\n};\nconst toggleAgreementqrx = (id) => {\n  const agreementqrx = agreementsqrx.value.find((item) => item.id === id);\n  const originalCheckedState = agreementqrx.checked;\n  if (!originalCheckedState) {\n    agreementqrx.checked = true;\n    selectedAgreementsqrx.value = agreementsqrx.value.filter((item) => item.checked === true);\n    agreementsqrx.value.sort((a, b) => {\n      if (a.checked && !b.checked) return -1;\n      if (!a.checked && b.checked) return 1;\n      return 0;\n    });\n    totalPrice.value += parseFloat(agreementqrx.price || 0);\n\n    // Thêm vào selectedAgreementsqrx\n    if (!selectedAgreementsqrx.value.includes(agreementqrx)) {\n      selectedAgreementsqrx.value.push(agreementqrx);\n    }\n  } else {\n    agreementqrx.checked = false;\n    // Sắp xếp lại mảng agreementsqrx\n    agreementsqrx.value.sort((a, b) => {\n      if (a.checked && !b.checked) return -1;\n      if (!a.checked && b.checked) return 1;\n      return 0;\n    });\n    totalPrice.value -= agreementqrx.price || 0;\n    const delayNumber = userNumber.value[\"userNumber_\" + id] ?? 0;\n    const delayCode = codeNumber.value[\"numberCode_\" + id] ?? 0;\n    setTimeout(() => {\n      agreementsqrx.value.reduce((total, item) => {\n        if (item.id === id) {\n          item.price = parseFloat(item.price || 0) - (delayNumber * 10000 + delayCode * 10000);\n          return total;\n        } else {\n          return total;\n        }\n      }, 0);\n      userNumber.value[\"userNumber_\" + id] = 0;\n      codeNumber.value[\"numberCode_\" + id] = 0;\n    }, 0);\n\n    const selectedAgreementqrxIndex = selectedAgreementsqrx.value.findIndex(\n      (selectedAgr) => selectedAgr.id === agreementqrx.id,\n    );\n    if (selectedAgreementqrxIndex !== -1) {\n      selectedAgreementsqrx.value.splice(selectedAgreementqrxIndex, 1);\n    }\n  }\n};\nconst nextStep = () => {\n  stepCurrent.value += 1;\n  this.steptabs.value[this.stepCurrent.value].isActivated = true;\n};\nconst prewStep = () => {\n  stepCurrent.value -= 1;\n  this.steptabs.value[this.stepCurrent.value].isActivated = true;\n};\nconst UserNumber = (id) => {\n  const delayNumber = userNumber.value[\"userNumber_\" + id] ?? 0;\n  const money = 10000;\n  setTimeout(() => {\n    const number = userNumber.value[\"userNumber_\" + id] ?? 0;\n    totalPrice.value += agreementsqrx.value.reduce((total, item) => {\n      if (item.id === id) {\n        d;\n        item.count_user_qrx = number;\n        item.price = parseFloat(item.price) + number * money - delayNumber * money;\n        return total + parseFloat(number * money) - parseFloat(delayNumber * money);\n      } else {\n        return total;\n      }\n    }, 0);\n  }, 0);\n};\n\nconst numberCode = (id) => {\n  const delayCode = codeNumber.value[\"numberCode_\" + id] ?? 0;\n  const money = 10000;\n  setTimeout(() => {\n    const number = codeNumber.value[\"numberCode_\" + id] ?? 0;\n    totalPrice.value += agreementsqrx.value.reduce((total, item) => {\n      if (item.id === id) {\n        item.count_code_qrx = number;\n        item.price = parseFloat(item.price) + number * money - delayCode * money;\n        return total + parseFloat(number * money) - parseFloat(delayCode * money);\n      } else {\n        return total;\n      }\n    }, 0);\n  }, 0);\n};\n</script>\n","<script setup>\nconst seoTitle = \"Bảng giá QRX\";\nconst seoDescription = \"Bảng giá QRX\";\nuseHead({\n  title: seoTitle,\n  meta: [\n    { name: \"description\", content: seoDescription },\n    { name: \"og:title\", content: seoTitle },\n    { name: \"og:description\", content: seoDescription },\n    { name: \"keywords\", content: \"Bảng giá QRX\" },\n  ],\n});\n</script>\n\n<template>\n  <section class=\"qrcode-website max-lg:py-0 max-lg:mx-[-16px]\">\n    <PaymentForm />\n  </section>\n</template>\n"],"names":["_imports_0","publicAssetsURL","_imports_1","_imports_2","Pantmentabs","stepCurrent","ref","nextStep","index","tab","i","inputValue","email","name","phone","cardNumber","cardHolderName","cvc","errorMessage","handleInput","event","match","MM","YY","MMNumber","YYNumber","nameError","validateName","emailError","validateEmail","phoneError","validatePhone","cardNumberError","validateCardNumber","cardHolderNameError","validateCardHolderName","cvcError","validateCVC","agreements","agreementsqrx","totalPrice","steptabs","config","useRuntimeConfig","selectedAgreements","selectedAgreementsqrx","userNumber","codeNumber","errors","onMounted","response","error","row","formatPrice","price","toggleAgreements","id","agreement","agr","item","total","delayNumber","delayCode","a","b","parentIds","agrIndex","selectedAgreementIndex","selectedAgr","anyAgreementChecked","correspondingItems","child","toggleAgreementqrx","agreementqrx","selectedAgreementqrxIndex","prewStep","UserNumber","money","number","numberCode","seoTitle","seoDescription","useHead"],"mappings":"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"}