@extends('frontend.layouts.contentLayoutMaster')

@section('title', '銷售頁')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/extensions/toastr.css') }}">
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" /> --}}
@endsection

@section('page-styles')
    <link rel="stylesheet" type="text/css" href="{{ mix('css/pages/frontend/shopping.css') }}">
@endsection

@section('content')
    <!-- BEGIN: 結團倒數 -->
    <div class="row m-0 bg-red timer">
        @{{ targetDate.SaleTitle }}
        <span>@{{ targetDate.days }}</span> 日
        <span>@{{ targetDate.hours }}</span>時
        <span>@{{ targetDate.minutes }}</span>分
        <span>@{{ targetDate.seconds }}</span>秒
    </div>
    <!-- END: 結團倒數 -->

    <!-- BEGIN: 活動BN -->
    <div class="mainBN">
        <picture>
            <source :srcset="mainBN.imgsrc" media="(min-width: 993px)">
            <source :srcset="mainBN.imgsrc_m" media="(max-width: 992px)">
            <img :src="mainBN.imgsrc_m" :alt="mainBN.alt">
        </picture>
    </div>
    <!-- END: 活動BN -->

    <!-- BEGIN: 活動描述 -->
    <section class="row prod-info">
        <div class="container">
            <div class="row prod-inner">
                <div class="col-12 d-flex timetxt">
                    <span v-if="new Date() < targetDate.Dateline" class="ontime">開團中</span>
                    <span v-else class="timeup">已結團</span>
                </div>
                <div class="col-12 d-flex prodname-wapper">
                    <h1 class="col-8 prod-name">@{{ Prod.ProdName }}</h1>
                    <div class="col-4 btn-wapper">
                        <a class="btn" href="#chosenProd" title="">開始選購</a>
                    </div>
                </div>
            </div>
            <div class="row prod-desc">
                <div class="col-12 d-flex store-serv">
                    <ul>
                        <li>運送方式 : <span v-for="(lst, index) of Prod.Delivery">@{{ lst.Title }}</span></li>
                        <li>付款方式 : <span v-for="(lst, index) of Prod.Pay">@{{ lst.Title }}</span></li>
                        <li class="mt-1"></li>
                        <li>六月初一團購官方LINE@：@312onfre</li>
                        <li>客服專線：04-23760082</li>
                        <li>客服信箱：<a href="mailto:service@june1.com.tw">service@june1.com.tw</a></li>
                        <li>客服時間：周一至周五AM9:00～PM18:00</li>
                        <li>若有任何問題，歡迎聯繫我們</li>
                    </ul>
                </div>
                <div class="col-12 sale-inner" v-for="(item, index) of Prod.CartEvent">
                    <span class="tt">@{{ item.Tag }}</span>
                    <div class="SaleDesc">
                        <div class="col-12">
                            <p class="hd">優惠說明</p>
                            <p class="hdtxt">@{{ item.DescDate }}</p>
                            <hr>
                            <div class="txt" v-html="item.DescInfo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END: 活動描述 -->

    <!-- BEGIN: 活動內容&精選商品 -->
    <div class="row m-0 bg-red">
        <div class="container">
            <!-- BEGIN: 活動內容 -->
            <section id="activity_description_section" class="row bg-w">
                <ul class="col-12 nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#tab1">團購內容<i
                                class='bx bxs-down-arrow-circle'></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab2">產品規格<i
                                class='bx bxs-down-arrow-circle'></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#ShoppingNotes">購物須知<i class='bx bxs-down-arrow-circle'></i></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                        <div class="col-12 p-0" v-html="activity.description"></div>
                    </div>
                    <div class="tab-pane fade" id="tab2" role="tabpanel">
                        <div class="col-12" v-html="activity.description_products"></div>
                    </div>
                </div>
            </section>
            <!-- END: 活動內容 -->

            <!-- BEGIN: 精選商品 -->
            <section id="chosenProd" class="row chosen">
                <div class="container">
                    <div class="row  justify-content-center bg-w">
                        <div class="col-8 titleline">
                            <span class="title">精選商品</span>
                        </div>
                        <div class="col-12 d-flex m-0 p-0">
                            <div class="swiper-wrapper-customer row">
                                <div class="swiper-slide col-6 col-md-4" style="height: auto"
                                    v-for="(item, index) of products">
                                    <div :href="item.url" class=" chosen-a" v-if="item.stock > 0">
                                        <div class="col-12 chosen-img">
                                            <img :src="item.image_path" :srcset="item.image_path" :alt="item.name"
                                                width="500" height="500" class="img-fluid">
                                        </div>
                                        <div class="col-12 pro-info">
                                            <h2 class="pName">
                                                @{{ item.name }}
                                            </h2>
                                            <div class="pMo" v-html="item.description"></div>
                                            <div class="col-12 price">
                                                <span class="sPrice">$@{{ item.price }}</span>
                                                <small
                                                    v-if="item.original_price > item.price">$@{{ item.original_price }}</small>
                                            </div>
                                            <button type="button" class="btn" data-toggle="modal"
                                                data-target="#modalProductBottom" @click="setSelectedProduct(item.id)">選購
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                {{-- <div class="swiper-slide col-6 col-md-4">
                                    <div class="col-12 chosen-a">
                                        <div class="col-12 chosen-img">
                                            <img src="https://product.june1cloud.com/storage/uploads/images/product/2023/5/24/product_1684917004_ZQi7E.jpg"
                                                srcset="https://product.june1cloud.com/storage/uploads/images/product/2023/5/24/product_1684917004_ZQi7E.jpg"
                                                alt="加購品請至購物車選購" width="500" height="500" class="img-fluid">
                                        </div>
                                        <div class="col-12 pro-info">
                                            <h2 class="pName">
                                                加購品請至購物車選購
                                            </h2>
                                            <div class="pMo"></div>
                                            <div class="col-12 price">
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- END: 精選商品 -->

            <!-- BEGIN: 加購價 -->
            <section class="row chosen" v-show="additionalProducts.length > 0">
                <div class="container">
                    <div class="row  justify-content-center bg-w">
                        <div class="col-8 titleline">
                            <span class="title">加購價</span>
                        </div>
                        <div class="col-12 d-flex m-0 p-0">
                            <div class="swiper-wrapper-customer row">
                                <div class="swiper-slide col-6 col-md-4" style="height: auto"
                                    v-for="(item, index) of additionalProducts">

                                    <div :href="item.url" class="col-12 chosen-a" v-if="item.stock > 0">
                                        <div class="col-12 chosen-img">
                                            <img :src="item.image_path" :srcset="item.image_path" :alt="item.name"
                                                width="500" height="500" class="img-fluid">
                                        </div>
                                        <div class="col-12 pro-info">
                                            <h2 class="pName">
                                                @{{ item.name }}
                                            </h2>
                                            <div class="pMo" v-html="item.description"></div>
                                            <div class="col-12 price">
                                                <span class="sPrice">$@{{ item.price }}</span>
                                                <small
                                                    v-if="item.original_price > item.price">$@{{ item.original_price }}</small>
                                            </div>
                                            <button type="button" class="btn" data-toggle="modal"
                                                v-if="canAdditional" data-target="#modalProductBottom"
                                                @click="setAdditionalSelectedProduct(item.id)">選購
                                            </button>

                                            <span class="text-notice" style="font-size: 12px;" v-if="!canAdditional">
                                                滿 @{{ format(additionalPromotionSettings.amount) }} 元可加購
                                                (
                                                <span style="font-size: 12px;"
                                                    v-if="additionalPromotionSettings.mode == 'multiple'"> 多選</span>
                                                <span style="font-size: 12px;"
                                                    v-else-if="additionalPromotionSettings.mode == 'single'"> 單選</span>
                                                )
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- END: 加購價 -->
        </div>
    </div>
    <!-- END: 活動內容&精選商品 -->

    <!-- BEGIN: 加購商品的MODAL -->
    <div id="modalAdditionalProductBottom" class="modal fade modal-product-bottom"
        v-if="Object.keys(selected_product).length > 0">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header justify-content-center">
                    <div class="row w-100 d-flex justify-content-center">
                        <div class="col-12">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="col-4">
                            <div id="carouselExampleFade" data-ride="carousel"
                                class="carousel slide carousel-fade pointer-event">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img :src="selected_product.image_path" :alt="selected_product.name"
                                            class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-8 d-flex align-items-end">
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="modal-title " id="exampleModalCenterTitle">@{{ selected_product.name }}</h5>
                                </div>
                                <div class="col-12">
                                    <span class="price">
                                        $ <span v-text="format(selected_product.price)"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row mb-1" v-for="(v, i) of selected_product.specs.id">
                        <div class="col-2 justify-content-center p-0">
                            <span v-if="selected_product.combinations[i].name">
                                @{{ selected_product.combinations[i].name }}
                            </span>
                            <span v-else>
                                組合&nbsp;<span v-text="i + 1"></span>
                            </span>
                        </div>
                        <div class="col-10 p-0">
                            <div class="btn-group btn-group-toggle mb-75 product-material-spec-button-group">
                                <label :class="{ active: val.id == v }"
                                    class="btn
                                            product-material-spec-button"
                                    v-for="val of selected_product.combinations[i].material_specifications"
                                    v-text="val.name"
                                    @click="chooseProductCombination(selected_product.id, i, val)"></label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-1 quantity">
                        <div class="col-8 justify-content-center p-0">
                            <span>數量</span>
                        </div>
                        <div class="col-4 p-0">
                            <input-number-spinner :data-index="selected_product.product_id" :min="1"
                                :max="selected_product.stock" v-model="selected_product.unit"></input-number-spinner>
                            <div class="row">
                                <div class="col-12"
                                    v-if="selected_product.stock*1 < (selected_product.unit*1 + selected_product.quantity*1)">
                                    <div class="invalid-feedback d-block">
                                        <i class="bx bx-radio-circle"></i>
                                        已達到購買上限
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <div class="row w-100 d-flex justify-content-center">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary shadow text-nowrap w-100" data-dismiss="modal"
                                v-if="selected_product.is_show & selected_product.stock > 0"
                                @click="addProductToCart(selected_product.product_id)">
                                <span class="align-middle">
                                    加入購物車
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- BEGIN: 加購商品的MODAL -->

    <!-- BEGIN: 購物須知 -->
    <section id="ShoppingNotes" class="row m-0">
        <div class="container p-0">
            <div class="row m-0 justify-content-center">
                <div class="col-8 titleline">
                    <span class="title">購物須知</span>
                </div>
                <div class="col-12 inner" v-html="activity.faq"></div>
            </div>
        </div>
    </section>

    <!-- END: 購物須知 -->

    <!-- BEGIN: 精選商品的MODAL -->
    <div id="modalProductBottom" class="modal fade modal-product-bottom" v-if="Object.keys(selected_product).length > 0">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header justify-content-center">
                    <div class="row w-100 d-flex justify-content-center">
                        <div class="col-12">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="col-4">
                            <div id="carouselExampleFade" data-ride="carousel"
                                class="carousel slide carousel-fade pointer-event">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img :src="selected_product.image_path" :alt="selected_product.name"
                                            class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-8 d-flex align-items-end">
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="modal-title " id="exampleModalCenterTitle">@{{ selected_product.name }}</h5>
                                </div>
                                <div class="col-12">
                                    <span class="price">
                                        $ <span v-text="format(selected_product.price)"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row mb-1" v-for="(v, i) of selected_product.specs.id">
                        <div class="col-2 justify-content-center p-0">
                            <span v-if="selected_product.combinations[i].name">
                                @{{ selected_product.combinations[i].name }}
                            </span>
                            <span v-else>
                                組合&nbsp;<span v-text="i + 1"></span>
                            </span>
                        </div>
                        <div class="col-10 p-0">
                            <div class="btn-group btn-group-toggle mb-75 product-material-spec-button-group">
                                <label :class="{ active: val.id == v }"
                                    class="btn
                                        product-material-spec-button"
                                    v-for="val of selected_product.combinations[i].material_specifications"
                                    v-text="val.name"
                                    @click="chooseProductCombination(selected_product.id, i, val)"></label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-1 quantity">
                        <div class="col-8 justify-content-center p-0">
                            <span>數量</span>
                        </div>
                        <div class="col-4 p-0">
                            <input-number-spinner :data-index="selected_product.id" :min="1"
                                :max="selected_product.stock" v-model="selected_product.unit"></input-number-spinner>
                            <div class="row">
                                <div class="col-12"
                                    v-if="selected_product.stock*1 < (selected_product.unit*1 + selected_product.quantity*1)">
                                    <div class="invalid-feedback d-block">
                                        <i class="bx bx-radio-circle"></i>
                                        已達到購買上限
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row w-100 d-flex justify-content-center">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary shadow text-nowrap w-100" data-dismiss="modal"
                                v-if="selected_product.is_show & selected_product.stock > 0" @click="addProductToCart">
                                <span class="align-middle">
                                    加入購物車
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: 精選商品的MODAL -->

    <!-- 選購行動按鈕 fix -->
    <div class="ProdFix">
        <div class="goProd">
            <a class="btn" href="#chosenProd" title="">開始選購</a>
        </div>
    </div>
@endsection

@section('vendor-scripts')
    <script src="{{ asset('vendors/js/extensions/toastr.min.js') }}"></script>
    <script src="{{ asset('plugins/tw-city-selector/tw-city-selector.min.js') }}"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> --}}
@endsection

@section('page-scripts')
    <script>
        const api = Object.freeze({
            'storeItems': '{{ Route('ajax.frontend.shopping.storeItems') }}'
        });
        const uuid = '{{ $match['uuid'] ?? '' }}';
        const activity = @json($activity, true);
        const timeUp = @json($timeUp, true);
        const administrator = @json($administrator ?? [], true);
        const freights = @json($freights, true);
        const payMethods = @json($payMethods, true);
        const promotions = @json($promotions, true);
        const promotionProducts = @json($promotionProducts, true);
        const generalProducts = @json($generalProducts, true);
        const additionalProducts = @json($additionalProducts, true);
        const additionalPromotionSettings = @json($additionalPromotionSettings, true);
        const hasOld = {{ old() ? 1 : 0 }};
        const promotionsForShow = @json($promotionsForShow, true);
        const sessionCartItems = {!! $sessionCartItems !!};
    </script>
    <script src="{{ mix('assets/js/frontend/shopping.js') }}"></script>
@endsection