@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/checkout.css') }}">
    <style>
        .text-notice {
            color: #84848C;
        }

        .input-required:before {
            content: " *";
        }

        .input-required {
            color: red;
        }
    </style>
@endsection

@section('content')
    <!-- BEGIN: 購物車清單 -->
    <section class="row m-0" v-cloak>
        <div class="container cart-list">
            <div class="row m-0 justify-content-center">
                <div class="col-8 titleline">
                    <span class="title">購物車明細</span>
                </div>
            </div>
            <div class="row m-0 d-none d-md-flex hd">
                <div class="col-3 col-md-1"></div>
                <div class="col-8 col-md-10">
                    <div class="row m-0">
                        <div class="col-12 col-md-5 text-center">商 品</div>
                        <div class="col-md-2 text-center">單 價</div>
                        <div class="col-6 col-md-2 p-0 text-center">數 量</div>
                        <div class="col-6 col-md-3 text-center">小 計</div>
                    </div>
                </div>
                <div class="col-2 col-md-1"></div>
            </div>

            <div class="row lst"
                v-for="(item, index) of cartItems.filter((item) => { return item.order_item_status == 1 && item.quantity > 0 })">

                <template v-if="item.property_id == 1 || item.property_id == 2">
                    <div class="col-3 col-md-1 p-0">
                        <img :src="item.image_path" :alt="item.product_name" width="500" height="500"
                            class="img-fluid">
                    </div>
                    <div class="col-8 col-md-10">
                        <div class="row m-0">
                            <div class="col-12 col-md-5 p-0">
                                <p class="col-12 m-0 pName">@{{ item.product_name }}
                                </p>
                                <p class="col-12 pMo">@{{ item.specs_name.join(',') }}</p>
                            </div>
                            <div class="col-md-2 d-none d-md-inline-block sPrice">$@{{ format(item.price) }}</div>
                            <div class="col-6 col-md-2 p-0 quantity">
                                <input-number-spinner pattern="[0-9]*" :min="1"
                                    :max="findProductStock(item.product_id, item.property_id)" :index="item.cartKey"
                                    v-model="item.quantity" @input="edit(item)"></input-number-spinner>
                            </div>
                            <div class="col-6 col-md-3 lsttotal">$@{{ format(item.subtotal) }}</div>
                        </div>
                    </div>
                    <div class="col-1 p-0">
                        <a class="trash" href="javascript:;" @click="trash(item.cartKey)" title="移除">
                            <i class="bx bx-x"></i>
                        </a>
                    </div>
                </template>
                <template v-else-if="item.property_id == 3">
                    <div class="col-3 col-md-1 p-0">
                        <img :src="item.image_path" :alt="item.product_name" width="500" height="500"
                            class="img-fluid">
                    </div>
                    <div class="col-8 col-md-10">
                        <div class="row m-0">
                            <div class="col-12 col-md-5 p-0">
                                <p class="col-12 m-0 pName">(贈) @{{ item.product_name }}
                                </p>
                            </div>
                            <div class="col-md-2 d-none d-md-inline-block sPrice">$@{{ item.price }}</div>
                            <div class="col-6 col-md-2 p-0 quantity">
                                x @{{ item.quantity }}
                            </div>
                            <div class="col-6 col-md-3 lsttotal">$@{{ item.subtotal }}</div>
                        </div>
                    </div>
                    <div class="col-1 p-0">

                    </div>
                </template>
            </div>

            <div class="row justify-content-center" v-if="cartItemsCount == 0">
                <div class="col-12 text-center cart-empty">
                    您的購物車是空的
                </div>
            </div>

            <div class="row tips">
                <p class="col-12 p-0 item" v-for="(gift, index) of gifts">
                    (贈品) @{{ gift.name }} x @{{ gift.quantity }}
                </p>
            </div>

            <div class="invalid-feedback d-block" v-if="invalid?.cart_items_json">
                <i class="bx bx-radio-circle"></i>
                @{{ invalid?.cart_items_json.join('') }}
            </div>

            <div class="row m-0">
                <div class="col-12 col-md-5 p-0">
                    <div class="row discount">
                        <div class="col-12 inner p-0">
                            <div class="d-flex radio">
                                <input type="radio" id="Coupon" value="優惠序號">
                                <label for="Coupon">
                                    優惠序號
                                </label>
                                <input type="text" placeholder="請優惠輸入序號" class="form-control w-50" v-model="coupon_code">
                                <button class="btn btnLink" @click="useCoupon">兌換</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-3 p-0 total">
                    <p class="col-7 offset-5 item">小計<span>$@{{ format(itemsTotal) }}</span></p>
                    <p class="col-7 offset-5 item">運費<span>$@{{ format(freight_fee) }}</span></p>
                    <template v-for="item in discounts">
                        <p class="col-7 offset-5 item">@{{ item.name }}<span>-$ @{{ format(item.discount) }}</span></p>
                    </template>
                    <hr>
                    <p class="col-7 offset-5 item">總結<span>$@{{ format(total) }}</span></p>
                </div>
            </div>
            <div class="row m-0 btn-group">
                <div class="col-12 d-flex justify-content-center">
                    <a href="{{ Route('frontend.shopping', $match['uuid']) }}"
                        class="btn btn-light mr-1 col col-md-3">繼續購物</a>
                    <a href="#customer_section" class="btn btn-primary col col-md-3">結 帳</a>
                </div>
            </div>
        </div>
    </section>
    <!-- END: 購物車清單 -->

    <!-- BEGIN: 顧客資訊 -->
    <section id="customer_section" class="row">
        <div class="container">
            <form class="row m-0 form form-vertical" action="index" method="POST" id="form">
                <input type="hidden" name="_token" value="9BluHKxvCIRZOWzJxrTkz3bkdP27c7IgRy5r49cP">
                <div class="col-12 col-md-6 card">
                    <div class="col-12 card-body">
                        <div class="row m-0 justify-content-center">
                            <div class="col-8 titleline">
                                <span class="title">訂購人</span>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-12 form-group">
                                <label>訂購人姓名</label>
                                <div class="position-relative has-icon-left">
                                    <input type="text" id="customer_name" name="customer_name"
                                        v-model="customer.name"invalid class="form-control" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-user"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_name?.length > 0 ">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_name.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>訂購人手機</label>
                                <div class="position-relative has-icon-left">
                                    <input type="text" id="customer_cellphone" name="customer_cellphone"
                                        v-model="customer.cellphone" class="form-control" maxlength="10"
                                        pattern="[0-9]*" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-mobile"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_cellphone">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_cellphone.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>訂購人市話</label>
                                <div class="position-relative has-icon-left">
                                    <input type="text" id="customer_telephone" name="customer_telephone"
                                        v-model="customer.telephone" class="form-control" maxlength="10"
                                        pattern="[0-9]*" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-mobile"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_telephone">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_telephone.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>訂購人 Email</label><span class="input-required"></span>
                                <div class="position-relative has-icon-left">
                                    <input type="email" id="customer_email" name="customer_email"
                                        v-model="customer.email" class="form-control" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-mail-send"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_email">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_email.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>訂購人地址</label><span class="input-required"></span>
                                <div class="city-selector-set d-flex justify-content-start justify-content-xs-between"
                                    id="city-selector-set-customer"></div>
                                <div class="position-relative has-icon-left mt-1">
                                    <input type="text" id="customer_address" name="customer_address"
                                        v-model="customer.address" class="form-control" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-home"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_county">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_county.join('') }}
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_district">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_district.join('') }}
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.customer_address">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.customer_address.join('') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-12 col-md-6 card">
                    <div class="col-12 card-body">
                        <div class="row m-0 justify-content-center">
                            <div class="col-8 titleline">
                                <span class="title">收件人</span>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-12">
                                <div class="checkbox">
                                    <input type="checkbox" class="checkbox-input" id="customer_equal_receiver"
                                        v-model="customer_equal_receiver">
                                    <label for="customer_equal_receiver">收件人同訂購人</label>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>收件人姓名</label><span class="input-required"></span>
                                <div class="position-relative has-icon-left">
                                    <input type="text" id="receiver_name" name="receiver_name"
                                        v-model="receiver.name" class="form-control" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-user"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_name">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_name.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>收件人手機</label>
                                <div class="position-relative has-icon-left">
                                    <input type="text" id="receiver_cellphone" name="receiver_cellphone"
                                        v-model="receiver.cellphone" class="form-control" maxlength="10"
                                        pattern="[0-9]*" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-mobile"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_cellphone">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_cellphone.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>收件人市話</label>
                                <div class="position-relative has-icon-left">
                                    <input type="text" id="receiver_telephone" name="receiver_telephone"
                                        v-model="receiver.telephone" class="form-control" maxlength="10"
                                        pattern="[0-9]*" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-mobile"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_telephone">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_telephone.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>收件人 Email</label><span class="input-required"></span>
                                <div class="position-relative has-icon-left">
                                    <input type="email" id="receiver_email" name="receiver_email"
                                        v-model="receiver.email" class="form-control" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-mail-send"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_email">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_email.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>收件人地址</label><span class="input-required"></span>
                                <div class="city-selector-set d-flex justify-content-start justify-content-xs-between"
                                    id="city-selector-set-receiver"></div>
                                <div class="position-relative has-icon-left mt-1">
                                    <input type="text" id="receiver_address" name="receiver_address"
                                        v-model="receiver.address" class="form-control" required>
                                    <div class="form-control-position">
                                        <i class="bx bx-home"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_county">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_county.join('') }}
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_district">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_district.join('') }}
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.receiver_address">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.receiver_address.join('') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-12 col-md-6 card">
                    <div class="col-12 card-body">
                        <div class="row m-0 justify-content-center">
                            <div class="col-8 titleline">
                                <span class="title">付款資訊</span>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-12 form-group">
                                <label>付款方式</label><span class="input-required"></span>
                                <ul class="list-unstyled mb-0">
                                    <li class="d-inline-block mr-2 mb-1" v-for="method in paymentMethods"
                                        :key="method.id">
                                        <fieldset>
                                            <div class="radio">
                                                <input type="radio" :id="'pay_method_id_' + method.id"
                                                    :name="'pay_method_id'" :value="method.id"
                                                    v-model="selectedPaymentMethod">
                                                <label :for="'pay_method_id_' + method.id">@{{ method.name }}</label>
                                            </div>
                                        </fieldset>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-12 form-group">
                                <label>個人載具</label>
                                <div class="position-relative has-icon-left">
                                    <input type='text' v-model="invoice_personal_code" class='form-control'
                                        maxlength="8">
                                    <div class="form-control-position">
                                        <i class="bx bx-barcode"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.invoice_personal_code">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.invoice_personal_code.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>公司抬頭</label>
                                <div class="position-relative has-icon-left">
                                    <input type='text' v-model="invoice_company_title" class="form-control">
                                    <div class="form-control-position">
                                        <i class="bx bx-pencil"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.invoice_company_title">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.invoice_company_title.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>公司統一編號</label>
                                <div class="position-relative has-icon-left">
                                    <input type='text' v-model="invoice_company_number" value=""
                                        class='form-control' maxlength="8">
                                    <div class="form-control-position">
                                        <i class="bx bx-pencil"></i>
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="invalid?.invoice_company_number">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ invalid?.invoice_company_number.join('') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <label>備註 (選填)</label>
                                <div class="position-relative has-icon-left">
                                    <textarea class="form-control" v-model="customer_remark" rows="3"></textarea>
                                    <div class="form-control-position">
                                        <i class="bx bx-comment"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- BEGIN: 加購商品的MODAL -->
                    <!-- BEGIN: 加購商品的MODAL -->
                </div>
                {{--                2023.04.27 需求：先關閉，目前開團會先統一出貨 --}}
                {{--                <div class="col-12 col-md-6 card"> --}}
                {{--                    <div class="col-12 card-body"> --}}
                {{--                        <div class="row m-0 justify-content-center"> --}}
                {{--                            <div class="col-8 titleline"> --}}
                {{--                                <span class="title">可出貨日期</span> --}}
                {{--                            </div> --}}
                {{--                        </div> --}}
                {{--                        <div class="row m-0"> --}}
                {{--                            <div class="col-12 form-group"> --}}
                {{--                                <date-flatpickr id="shipping_on" name="shipping_on" v-model="shipping_on"></date-flatpickr> --}}
                {{--                            </div> --}}
                {{--                        </div> --}}
                {{--                    </div> --}}
                {{--                </div> --}}

                <div class="col-12 d-flex justify-content-center">
                    <button type="button" class="btn btn-primary mr-1 col col-md-6 btnAsap" @click.stop="submit">送
                        出</button>
                </div>
            </form>
        </div>
    </section>
    <!-- END: 顧客資訊 -->
@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({
            'isOffshoreIsland': '{{ Route('ajax.frontend.shopping.isOffshoreIsland') }}',
            'storeItems': '{{ Route('ajax.frontend.shopping.storeItems') }}',
            'trialCalculate': '{{ Route('ajax.frontend.order.trialCalculate') }}',
            'createOrder': '{{ Route('ajax.frontend.order.createOrder') }}',
        });
        const uuid = '{{ $match['uuid'] }}';
        const activity = {!! json_encode($activity, true) !!};
        const timeUp = {!! json_encode($timeUp, true) !!};
        const administrator = {!! json_encode($administrator, true) !!};
        const freights = {!! json_encode($freights, true) !!};
        // const payMethods = {!! json_encode($payMethods, true) !!};
        const promotions = {!! json_encode($promotions, true) !!};
        const promotionProducts = {!! json_encode($promotionProducts, true) !!};
        const additionalProducts = {!! json_encode($additionalProducts, true) !!};
        const generalProducts = {!! json_encode($generalProducts, true) !!};
        const hasOld = {{ old() ? 1 : 0 }};
        const promotionsForShow = {!! json_encode($promotionsForShow, true) !!};
        const sessionCartItems = {!! $sessionCartItems !!};
        const activity_freight_id = "{{ $activity_freight_id }}";
        const paymentMethods = {!! json_encode($payMethods, true) !!};
        const userId = {{ Auth::id() }};
        const discounts = {!! json_encode($discounts, true) !!};
        const default_shipping_on = '{{ now()->format('Y-m-d 00:00') }}';
        const additionalPromotionSettings = {!! json_encode($additionalPromotionSettings) !!};
        const UserName = '{{ $user->name }}';
        const UserCellphone = '{{ $user->cellphone }}';
        const UserEmail = '{{ $user->email }}';
    </script>
    <script src="{{ mix('assets/js/frontend/checkout.js') }}"></script>
@endsection