@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') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/forms/spinner/jquery.bootstrap-touchspin.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>
@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>
<script src="{{ asset('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js') }}"></script>
<script>
    // (function (d, s, id) {
    //     var js,
    //         fjs = d.getElementsByTagName(s)[0];
    //     if (d.getElementById(id)) {
    //         return;
    //     }
    //     js = d.createElement(s);
    //     js.id = id;
    //     js.src = '//connect.facebook.net/zh_TW/sdk.js';
    //     fjs.parentNode.insertBefore(js, fjs);
    // })(document, 'script', 'facebook-jssdk');
</script>
@endsection

@section('page-scripts')
<script>
    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' }},

        isOver3500NotifyFlag: false,
        isOver2000NotifyFlag: false,
        // authorized: true,
        // fbId: '',
        // ary_FilterTabBody: [],
    };
    const TwCity = {
        "countyValue": '{{ old("customer_county") }}',
        "districtValue": '{{ old("customer_district") }}'
    };
    const TimeUp = '{{ $match->activity->publish_end_at }}';

    // {{-- 我覺得之後會用到 --}}
    // {{-- $('html, body').animate({ scrollTop: $("#general_products_section").offset().top - 50 }, 1000); --}}

</script>
<script src="{{ mix('assets/js/frontend/shopping.js')}}"></script>
@endsection