@extends('frontend.layouts.contentLayoutMaster')
{{-- title --}}
@section('title', $match->activity->name)

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/extensions/toastr.css') }}">
@endsection

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

@section('content')
<section id="thisPageVue">

    
    <section class="pb-2">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h4>結團時間尚有</h4>
                <div class="clock"></div> 
            </div>
        </div>
    </section>

    <section id="activity_description_section">
        <div class="row">
            <div class="col-sm-12" v-html="activity.description"></div>
        </div>
    </section>

    {{-- 一般商品 --}}
    @include('frontend.shopping.general_products')
    {{-- 加購商品 --}}
    @include('frontend.shopping.additional_products')
    {{-- 準備選購的商品（手機版使用） --}}
    @include('frontend.shopping.selected_product')

    <section id="checkout_section">
        <div class="row">
            <div class="col-xl-8 col-12">
                {{-- 購物車 --}}
                @include('frontend.shopping.cart')
            </div>

            <div class="col-xl-4 col-12">
                {{-- 訂購人資訊 --}}
                @include('frontend.shopping.customer')
            </div>
        </div>
    </section>

    <span id="thisPageEnd"></span>
</section>
@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="{{ asset('vendors/js/coming-soon/jquery.countdown.min.js') }}"></script>
@endsection

@section('page-scripts')
<script>
    const GIFTS = {!! $gifts !!};
    const vueData = {
                
        customer: { 
            "name": '{{ old("customer_name") }}', 
            "cellphone": '{{ old("customer_cellphone") }}', 
            "email": '{{ old("customer_email") }}', 
            "county": '{{ old("customer_county") }}', 
            "district": '{{ old("customer_district") }}', 
            "address": '{{ old("customer_address") }}'
        },
        receiver:{ 
            "name": '{{ old("receiver_name") }}', 
            "cellphone": '{{ old("receiver_cellphone") }}', 
            "email": '{{ old("receiver_email") }}', 
            "county": '{{ old("receiver_county") }}', 
            "district": '{{ old("receiver_district") }}', 
            "address": '{{ old("receiver_address") }}'
        },
        customer_equal_receiver: true,

        ajaxUrl: {
            "setProductCombinationInformation": '{{ Route("ajax.frontend.frontend.get.product_combination") }}',
            'isOffshoreIsland' : '{{ Route("ajax.frontend.frontend.get.is_offshore_island") }}',
        },
        uuid: '{{ $match->uuid }}', 
        activity: {!! $json_activity !!}, 
        administrator: {!! $json_administrator !!}, 
        cart: {!! old("cart_items_json") ?: "{}" !!},
        products: {!! $json_products !!}, 
        // selected_product: {!! json_encode(json_decode($json_products, true)[0]) !!},
        selected_product: {},
        items_total: {{ old('items_total', 0) }}, 
        free_freight_amount: {{ $freight->free_freight_amount ?? 0 }},
        freight_fee: {{ $freight->fee ?? 0 }}, 
        activity_freight_id: {{ $freight->id ?? 0 }}, 
        total: {{ old('total', 0) }}, 
        json_cart: '{!! old("cart_items_json") !!}', 
        json_products: '{!! old("json_products") !!}', 
        hasOld: {{ old() ? 'true' : 'false' }},
    };
    const TwCity = {
        "countyValue": '{{ old("customer_county") }}',
        "districtValue": '{{ old("customer_district") }}'
    };
    const TimeUp = '{{ $match->activity->publish_end_at }}';
</script>
<script src="{{ mix('assets/js/frontend/shopping.js')}}"></script>
@endsection