<link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
<style>
    #coupon-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    #coupon-list > .coupon-item {
        width: 33.3%;
        flex: 0 0 33.3%;
        padding: 20px;
    }
    #coupon-list .coupon-image img {
        width: 100%;
        height: 260px;
        object-fit: cover;
    }
    #coupon-list > .coupon-item > .main-container {
        border-radius: 15px;
        overflow: hidden;
    }
    #coupon-list .coupon-image figcaption {
        display: none;
    }
    #coupon-list .coupon-image p {
        margin-bottom: 10px;
    }
    #coupon-list > .coupon-item {
        cursor: pointer;
    }
    #coupon-list > .coupon-item .coupon-inner .coupon-title{
        color: #0F0D1D;
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 5px;
    }
    #coupon-list .coupon-inner .coupon-date {
        color: #445375;
        margin-bottom: 10px;
    }
    #coupon-list .exchange-btn {
        background-color: #5577a6;
        color: #fff;
        padding: 5px 0;
        text-align: center;
    }
    #coupon-list figure {
        margin: 0;
    }
    #popup-container {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999999;
    }
    #popup-container .popup-bg {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .6);
    }
    #popup-container .popup-inner {
        width: 400px;
        max-width: 100%;
        height: 550px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
    #popup-container .popup-inner > div {
        height: calc( 100% - 50px );
        overflow-y: auto;
    }
    #popup-container .reserve-btn {
        position: absolute;
        width: 100%;
        height: 40px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        text-align: center;
        color: #fff;
        background-color: #5577A6;
        bottom: 0;
        line-height: 40px;
        cursor: pointer;
    }
    #popup-container .img img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }
    #popup-container .img p {
        margin: 0;
    }
    #popup-container .title {
        margin-bottom: 5px;
        font-size: 28px;
    }
    #popup-container .sub-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    #popup-container  .points-container {
        display: flex;
        align-items: center;
    }
    #popup-container  .points-container svg {
        height: 20px;
    }
    #popup-container .company-name {
        margin: 0;
    }
    #popup-container .close-btn {
        position: absolute;
        right: 20px;
        width: 40px;
        height: 40px;
        top: 20px;
        cursor: pointer;
    }
    #popup-container .popup-inner.showing::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.6);
    }
</style>
<div id="coupon-container">
    <div id="coupon-list">
        <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/www/wwwroot/wooapi/wp-content/themes/maxbizz/aaaa.php</b> on line <b>167</b><br />
    </div>
    
    <div id="popup-container" v-if="showPopup">
        <div class="popup-bg"></div>
        <div :class="['popup-inner', { showing: loadingIndex }]">
            <div v-if="responseData">
                <svg class="close-btn" @click="closeFun" t="1745570523005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3674" width="200" height="200">
                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="3675"></path><path d="M955.733333 512c0 245.077333-198.656 443.733333-443.733333 443.733333S68.266667 757.077333 68.266667 512 266.922667 68.266667 512 68.266667s443.733333 198.656 443.733333 443.733333z" fill="#11AA66" p-id="3676"></path><path d="M512 102.4C285.7984 102.4 102.4 285.7984 102.4 512s183.3984 409.6 409.6 409.6 409.6-183.3984 409.6-409.6S738.2016 102.4 512 102.4zM34.133333 512C34.133333 248.081067 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512z" fill="#11AA66" p-id="3677"></path><path d="M305.152 305.152a51.2 51.2 0 0 1 72.362667 0L512 439.569067l134.485333-134.485334a51.2 51.2 0 0 1 72.362667 72.430934L584.430933 512l134.485334 134.485333a51.2 51.2 0 0 1-72.430934 72.362667L512 584.430933l-134.485333 134.485334a51.2 51.2 0 0 1-72.362667-72.430934L439.569067 512l-134.485334-134.485333a51.2 51.2 0 0 1 0-72.362667z" fill="#FFFFFF" p-id="3678"></path>
            </svg>
                <div class="main-popup-inner">
                    <div class="img" v-html="detailData.data.content"></div>
                    <div style="padding: 15px;">
                        <h5 class="title">{{ detailData.data.title }}</h5>
                        <div class="sub-inner">
                            <div class="points-container">
                                <svg t="1745563926281" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1642" width="30" height="30">
                                    <path d="M499.8144 535.2448a210.7392 115.2 0 1 0 421.4784 0 210.7392 115.2 0 1 0-421.4784 0Z" fill="#FF5A5A" p-id="1643"></path><path d="M710.5536 699.2896c-87.1936 0-162.048-27.0336-194.048-65.5872-10.7008 12.9024-16.64 27.0848-16.64 41.984 0 59.392 94.3616 107.5712 210.7392 107.5712 116.3776 0 210.7392-48.1792 210.7392-107.5712 0-14.8992-5.9392-29.0816-16.64-41.984-32.1536 38.5536-106.9568 65.5872-194.1504 65.5872z" fill="#F5504E" p-id="1644"></path><path d="M710.5536 833.024c-87.1936 0-162.048-27.0336-194.048-65.5872-10.7008 12.9024-16.64 27.0848-16.64 41.984 0 59.392 94.3616 107.5712 210.7392 107.5712 116.3776 0 210.7392-48.1792 210.7392-107.5712 0-14.8992-5.9392-29.0816-16.64-41.984-32.1536 38.5536-106.9568 65.5872-194.1504 65.5872z" fill="#F5504E" p-id="1645"></path><path d="M473.7536 457.3696c54.2208-88.6784 194.56-93.2352 260.352-90.0608 28.8256-26.5728 45.4144-57.3952 45.4144-90.2656 0-100.1472-153.1392-181.4016-342.016-181.4016s-342.016 81.2032-342.016 181.4016 153.1392 181.4016 342.016 181.4016c12.2368-0.0512 24.32-0.4096 36.2496-1.0752z" fill="#F66A68" p-id="1646"></path><path d="M470.3744 585.8816c-10.0352-8.192-18.6368-28.672-24.5248-45.1584-2.7648 0.0512-5.5296 0.1024-8.3456 0.1024-141.5168 0-262.9632-45.6192-314.9824-110.592-17.408 21.76-27.0336 45.6704-27.0336 70.8096 0 100.1472 153.1392 181.4016 342.016 181.4016 4.096 0 8.0896-0.1024 12.1344-0.1536-6.8608-50.5856 8.0384-74.1376 20.736-96.4096z" fill="#FF5A5A" p-id="1647"></path><path d="M442.5728 766.2592c-1.6896 0-3.328 0.0512-5.0176 0.0512-141.5168 0-262.9632-45.6192-314.9824-110.592-17.408 21.76-27.0336 45.6704-27.0336 70.7584 0 100.1472 153.1392 181.4016 342.016 181.4016 17.2032 0 34.048-0.6656 50.5856-1.9968-46.6432-49.152-49.152-106.8032-45.568-139.6224z" fill="#F5504E" p-id="1648"></path><path d="M443.648 815.2576c-2.9184-18.8416-2.5088-35.9424-1.1264-48.9984-1.6896 0-3.328 0.0512-5.0176 0.0512-111.8208 0-211.0976-28.4672-273.5104-72.4992 76.1856 67.4816 173.2608 111.5136 279.6544 121.4464zM516.5056 767.4368c-10.7008 12.9024-16.64 27.0848-16.64 41.984 0 2.6624 0.256 5.2736 0.6144 7.8336 3.1744-0.0512 6.4-0.1536 9.5744-0.256 23.3984-0.9728 46.2848-3.584 68.7104-7.68-26.9824-11.0592-48.5888-25.3952-62.2592-41.8816zM710.5536 699.2896c-87.1936 0-162.048-27.0336-194.048-65.5872-10.7008 12.9024-16.64 27.0848-16.64 41.984 0 53.0944 75.3664 97.1776 174.4384 105.9328a490.74176 490.74176 0 0 0 156.416-101.5808c-34.1504 12.1344-75.52 19.2512-120.1664 19.2512z" fill="#FF5A5A" p-id="1649"></path><path d="M445.8496 540.7232c-2.7648 0.0512-5.5296 0.1024-8.3456 0.1024-141.5168 0-262.9632-45.6192-314.9824-110.592-17.408 21.76-27.0336 45.6704-27.0336 70.7584 0 15.0016 3.4816 29.5936 9.984 43.52 87.1424 64.768 196.1472 101.2224 313.0368 96.4608 10.3424-0.4096 20.6336-1.2288 30.8224-2.2528 3.4304-22.9888 12.6976-38.1952 21.0432-52.8384-10.0352-8.192-18.5856-28.672-24.5248-45.1584zM801.3824 431.3088c-27.4944-7.168-58.3168-11.2128-90.8288-11.2128-116.3776 0-210.7392 51.5584-210.7392 115.2 0 30.8224 22.2208 58.8288 58.3168 79.5136 99.6352-34.2016 184.32-99.328 243.2512-183.5008z" fill="#F66A68" p-id="1650"></path><path d="M150.9888 458.496c-10.9568-8.9088-20.5312-18.3808-28.4672-28.2624-3.9424 4.9664-7.4752 10.0352-10.5984 15.2064 12.8 4.864 25.8048 9.216 39.0656 13.056zM437.504 95.6416c-188.8768 0-342.016 81.2032-342.016 181.4016 0 97.6896 145.664 177.3056 328.0896 181.1968a492.5952 492.5952 0 0 0 70.1952-26.2144c21.7088-22.016 49.8688-36.9152 79.9744-46.7968 69.888-50.3296 125.8496-118.4256 161.4848-197.4272-58.7776-54.9888-170.0352-92.16-297.728-92.16z" fill="#F67271" p-id="1651"></path><path d="M576.1024 111.2064c-42.3936-9.984-89.2416-15.5648-138.5984-15.5648-188.8768 0-342.016 81.2032-342.016 181.4016 0 5.4272 0.512 10.752 1.4336 16.0768a446.8224 446.8224 0 0 0 127.488 13.0048c146.9952-6.0416 274.5344-82.176 351.6928-194.9184z" fill="#F67B7A" p-id="1652"></path></svg>
                                <span>{{ detailData.data.points }}</span>
                            </div>
                            <p class="company-name">{{ detailData.data.merchantCompanyName }}</p>
                        </div>
    
      
                        <div class="tnc" v-html="detailData.data.tnc">
                        </div>
                    </div>
                </div>
                <div class="reserve-btn" @click="reserveFun">立即預約</div>
                </div>
            
            <div v-else style="display: flex;align-items: center;height: 100%;justify-content: center;">
                <img style="height:60px;" src="/wp-content/uploads/2025/04/loading-2.gif">
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#coupon-container',
        data: {
           showPopup: false,
           responseData: false,
           detailData: '',
           user_id: 0,
           error: '',
           loadingIndex: ''
        },
        methods: {
            async showCouponDetail(coupon_id) {
                this.showPopup = true;
                await this.fetchData(coupon_id);
            },
            async fetchData(coupon_id) {
              try {
                const response = await fetch('/wp-json/coupon/detail?coupon_id=' + coupon_id);
                if (!response.ok) {
                  throw new Error('網絡響應不正常：' + response.statusText);
                }
                this.detailData = await response.json();
                this.responseData = true;
              } catch (err) {
                this.error = '獲取數據時出現錯誤：' + err.message;
              }
            },
            async reserveFun() {
                this.loadingIndex = layer.load(0, {
                    zIndex: 99999999999999,
                })
                try {
                    const response = await fetch('/wp-json/coupon/redeem', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        'coupon_id': this.detailData.data.coupon_id,
                        'user_id': this.user_id,
                        'payRef': '',
                        'merchant_id': this.detailData.data.merchant
                    }),
                });
        
                if (!response.ok) {
                  throw new Error('網絡響應不正常：' + response.statusText);
                }
                
                const result = await response.json();
                layer.close(this.loadingIndex);
                this.loadingIndex = '';
                
                layer.open({
                    shade: false,
                    zIndex: 99999999999999,
                    content: result.message
                })
                
              } catch (err) {
                this.error = '提交數據時出現錯誤：' + err.message;
              }
            },
            closeFun() {
                this.showPopup = false;
                this.responseData = false;
                this.detailData = '';
                this.error = '';
            }
        }
    });
</script>
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /www/wwwroot/wooapi/wp-content/themes/maxbizz/aaaa.php:183) in <b>/www/wwwroot/wooapi/wp-includes/rest-api/class-wp-rest-server.php</b> on line <b>1930</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /www/wwwroot/wooapi/wp-content/themes/maxbizz/aaaa.php:183) in <b>/www/wwwroot/wooapi/wp-includes/rest-api/class-wp-rest-server.php</b> on line <b>1930</b><br />
{"id":13,"date":"2025-04-24T13:19:36","date_gmt":"2025-04-24T05:19:36","guid":{"rendered":"http:\/\/wooapi.adaptivesuite.cloud\/?page_id=13"},"modified":"2025-04-24T13:22:11","modified_gmt":"2025-04-24T05:22:11","slug":"111-2","status":"publish","type":"page","link":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/111-2\/","title":{"rendered":"111"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13\" class=\"elementor elementor-13\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e9da9d8 e-flex e-con-boxed e-con e-parent\" data-id=\"e9da9d8\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-713c752 elementor-widget elementor-widget-html\" data-id=\"713c752\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":7,"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/wooapi.adaptivesuite.cloud\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}