@extends('admin.layouts.contentLayoutMaster')

@section('title', $pageTitle . '列表')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/vue-good-table/vue-good-table.css') }}">


@endsection

@section('page-styles')

@endsection

@section('content')
    <div id="promotion_list">
        <div class="card" id="create_page">
            <div class="card-content">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <a class="btn btn-primary mr-1 mb-1" :href="'{{ Route('admin.' . $routeName . '.create') }}'">新增優惠</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-content">
                                    <vue-good-table
                                            ref="orders-good-table"
                                            :columns="goodTableColumns"
                                            :rows="goodTableRows"
                                            :pagination-options="{
                            enabled: true,
                            perPage: 10,
                            perPageDropdownEnabled: false,
                            dropdownAllowAll: false,
                            mode: 'records'
                        }"
                                            :select-options="{
                            enabled: true,
                            selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
                            selectionInfoClass: 'good-table-selection-info',
                            selectionText: '列，已選取',
                            clearSelectionText: '清除',
                            selectAllByGroup: true,
                            initialSortBy: {field: 'id', type: 'desc'}
                        }"
                                            :line-numbers="true"
                                    >
                                        <template slot="table-row" slot-scope="props">
                        <span v-if="props.column.field == 'actions'" class="d-flex justify-content-center">
                            <div style="margin-right: 15px;">
                            <a :href="'{{ Route('admin.' . $routeName . '.index') }}/' + props.row.id" title="編輯訂單" class="mr-1">
                                <i class="badge-circle badge-circle-light-secondary bx bx-edit font-medium-1 mb-2 mr-1" title="編輯"></i>
                            </a>
                            </div>
                            <a
                                    href="javascript:;"
                                    title="刪除訂單"
                                    class=""
                                    {{--                                    v-if=""--}}
                                    {{--                                    :data-url=""--}}
                                    @click="removePromotions(props.row.id)">
                                <i class="badge-circle badge-circle-light-secondary bx bx-trash font-medium-1" title="刪除"></i>
                            </a>
                            </div>
                        </span>
                                        </template>
                                    </vue-good-table>

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


@endsection

@section('vendor-scripts')
    <script src="{{ asset('plugins/vue-good-table/vue-good-table.js') }}"></script>

@endsection

@section('page-scripts')
    <script>
        const vm = new Vue({
            el: '#promotion_list',
            data: {
                routeName: '{{ $routeName }}',

                promotions: {!! json_encode($promotions) !!},

                goodTableColumns: {!! json_encode($columnNameSetting) !!},

                categoryId: {{ $categoryId }},
            },
            computed: {
                goodTableRows() {
                    if (!this.promotions) return [];

                    return this.promotions.map((promotion) => {
                        // 所有變數
                        let {
                            id,
                            name,
                            createDate,

                            products,
                            isContinuous,

                            discount_amount,
                            conditions,

                            freeFreight,

                            cartAmount,

                            couponCode,
                            couponContent,
                            useLabel,
                        } = 'undefined';

                        id = promotion?.id;
                        name = promotion?.name;
                        createDate = promotion?.createDate;

                        // 贈品
                        if (this.categoryId === 1) {
                            products = promotion?.products;
                            isContinuous = `
                            <div class="badge badge-light-${(promotion?.conditions[0]) ? 'success' : 'danger'} mr-1 mb-1">
                                ${(promotion?.conditions[0]) ? '可累贈' : '不可累贈'}
                            </div>`;
                        }

                        // 折價
                        if (this.categoryId === 2) {
                            discount_amount = `
                                <ol>` +
                                promotion?.discountAmount.map((discount_amount) => {
                                    return `<li>${discount_amount}</li>`
                                }).join('');
                                + `</ol>
                            `;
                            conditions = `
                                <ol>` +
                                promotion?.conditions.map((discount_amount) => {
                                    return `<li>${discount_amount}</li>`
                                }).join('');
                            + `</ol>
                            `;
                        }

                        // 免運
                        if (this.categoryId === 3) {
                            freeFreight = promotion?.freeFreight;
                            conditions = promotion?.conditions.map((discount_amount) => {
                                return discount_amount;
                            }).join('');
                        }

                        // 加價購
                        if (this.categoryId === 4) {
                            products = promotion?.products;
                            cartAmount = promotion?.cartAmount;
                        }

                        // coupon
                        if (this.categoryId === 5) {
                            couponCode = promotion?.couponCode;
                            couponContent = promotion?.couponContent;

                            // 百分比
                            $usedRate = promotion?.beenUsed / promotion?.totalCanUse;

                            useLabel = '<span style="color: dodgerblue">' + $usedRate.toFixed(4) * 100 + ' %</span> (' + promotion?.beenUsed + ' / ' + promotion?.totalCanUse + ')';
                        }

                        return {id, name, products, isContinuous, discount_amount,
                            conditions, freeFreight, cartAmount, couponCode,
                            couponContent, useLabel, createDate};
                    })
                }
            },
            methods: {
                removePromotions(id) {
                    Swal.fire({
                        title: '確定要刪除嗎？',
                        html: '編號：' + id,
                        icon: 'question',
                        showCloseButton: true,
                        showCancelButton: true,
                        confirmButtonText: 'YES',
                        cancelButtonText: 'NO',
                    }).then((response) => {
                        if (response.isConfirmed === true) {
                            axios.delete('{{Route('ajax.admin.' . $routeName . '.index')}}' + '/' + id)
                                .then(response => {
                                    this.getPromotions(); // 成功刪除後重新取資料
                                })
                                .catch(error => {
                                    if (error.response.status === 500) {
                                        alert(this.error.message);
                                    }
                                });
                        }
                    });
                }
            },
        });
    </script>

@endsection