@extends('admin.layouts.contentLayoutMaster')

@section('title', $cardTitle)

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

@section('page-styles')

@endsection

@include('admin.promotion.input_options')

@section('content')
    <div id="createPromotion">
        <div class="card" id="create_page">
            <div class="card-content">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-1">
                            <label>編號</label>
                        </div>
                        <div class="col-md-6 form-group">
                            <p>@{{ id }}</p>
                        </div>
                        <div class="invalid-feedback d-block col-md-3" v-if="error?.name?.message">
                            <i class="bx bx-radio-circle"></i>
                            @{{ error.name.message }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1">
                            <label>優惠名稱</label>
                        </div>
                        <div class="col-md-6 form-group">
                            <input class="form-control" id="name" name="name" placeholder="優惠名稱" type="text"
                                   v-model="name">
                        </div>
                        <div class="invalid-feedback d-block col-md-3" v-if="error?.name?.message">
                            <i class="bx bx-radio-circle"></i>
                            @{{ error.name.message }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1">
                            <label>優惠說明</label>
                        </div>
                        <div class="col-md-6 form-group">
                            <textarea class="form-control" id="content" name="content" rows="6" placeholder="優惠說明"
                                      v-model="content"></textarea>
                        </div>
                        <div class="invalid-feedback d-block col-md-3" v-if="error?.content?.message">
                            <i class="bx bx-radio-circle"></i>
                            @{{ error.content.message }}
                        </div>
                    </div>

                    {{-- 引用 input_options.blade.php 組合各優惠類別選項 --}}
                    @foreach($promotionColumns as $columnKey => $value)
                        @yield($columnKey)
                    @endforeach
                </div>

                <div class="row">
                    <div class="col-12">
                        <a type="button" class="btn btn-lg btn-danger offset-1 mr-1 mb-1" href="{{ Route('admin.' . $routeName . '.index') }}">
                            {{-- 取消，回上一頁 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-undo"></i>
                            </div>
                        </a>
                        <button type="button" class="btn btn-lg btn-success mr-1 mb-1" @click="storePromotion">
                            {{-- 送出 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-save"></i>
                            </div>
                        </button>
                    </div>
                </div>

                <div class="card-footer">
                </div>
            </div>
        </div>
    </div>

@endsection

@section('vendor-scripts')
@endsection

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

                promotion: {!! $promotion !!},

                // 編號
                id: "",
                // 優惠名稱
                name: "",
                // 優惠說明
                content: "",

                // 商品列表 (for 贈品→贈品列表、加價購→加價購列表)
                selected_products: [],
                // 條件 (for 贈品→贈送條件、折價→折價條件、免運→免運條件)
                conditions: [],
                // 排除條件(不可同時使用)
                excepts: [],

                // 免運類型
                free_freight_type: "default",

                // 加購模式
                additional_mode: "single",
                // 購物車金額
                cart_amount: "0",

                // coupon 代碼
                coupon_code: "",
                // coupon 內容
                coupon_settings: [],
                // coupon 總可使用次數
                coupon_limit: "0",

                {{-- 物件 --}}
                struct_select_product: {!! json_encode($structs['selected_product']) !!},
                struct_condition: {!! json_encode($structs['condition']) !!},
                struct_coupon_setting: {!! json_encode($structs['coupon_setting']) !!},

                {{-- 選項 --}}
                option_freight_types: {!! json_encode($options['freight_types']) !!},
                option_coupon_setting_types: {!! json_encode($options['coupon_setting_types']) !!},
                option_condition_types: {!! json_encode($options['condition_types']) !!},
                option_excepts: {!! json_encode($options['excepts']) !!},

                {{-- 所有商品 --}}
                products: {!! $products !!},

                {{-- Error msg --}}
                error: [],
            },
            beforeMount() {
                
                // 編號
                this.id = this.promotion.id;
                // 優惠名稱
                this.name = this.promotion.name;
                // 優惠說明
                this.content = this.promotion.content;

                this.settings = this.promotion.settings;

                // 商品列表 (for 贈品→贈品列表、加價購→加價購列表)
                this.selected_products = this.settings.selected_products;
                // 條件 (for 贈品→贈送條件、折價→折價條件、免運→免運條件)
                this.conditions = this.settings.conditions;
                // 排除條件(不可同時使用)
                this.excepts = this.settings.excepts;

                // 免運類型
                this.free_freight_type = this.settings.free_freight_type;

                // 加購模式
                this.additional_mode = this.settings.additional_mode;
                // 購物車金額
                this.cart_amount = this.settings.cart_amount;

                // coupon 代碼
                this.coupon_code = this.settings.coupon_code;
                // coupon 內容
                this.coupon_settings = this.settings.coupon_settings;
                // coupon 總可使用次數
                this.coupon_limit = this.settings.coupon_limit;

                // 更新 已選擇商品的 即時性資料
                this.updateSelectedProducts();
            },
            computed: {
                selectProd() {
                    return this.products.map(p => {
                        return {
                            value: p.code,
                            text: p.code + " - " + p.name,
                        };
                    })
                },
                selectExcepts() {
                    return this.option_excepts.map(e => {
                        return {
                            value: e.type,
                            text: e.name
                        }
                    })
                }
            },
            methods: {
                // 更新 已選擇商品的 即時性資料
                updateSelectedProducts() {
                    this.selected_products.forEach(selected_product => {
                        let product = this.products.find(product => product.code === selected_product.code)
                        selected_product.stocks = product.stocks;

                        return selected_product;
                    });
                },

                findProduct(index) {
                    let selectedProd = this.products.filter(p => p.code === this.selected_products[index].code).pop();
                    this.selected_products[index].name = selectedProd.name;
                    this.selected_products[index].original_price = selectedProd.originalPrice;
                    this.selected_products[index].stocks = selectedProd.stocks;
                },

                // 新增 贈品品項 & 加購品項
                addProductSelector() {
                    let productSelector = JSON.parse(JSON.stringify(this.struct_select_product));
                    this.selected_products.push(productSelector);
                },
                // 移除 贈品品項 & 加購品項
                removeProductSelector(index) {
                    this.selected_products.splice(index, 1);
                },

                // 新增 優惠條件
                addCondition() {
                    let condition = JSON.parse(JSON.stringify(this.struct_condition));
                    this.conditions.push(condition);
                },
                // 移除 優惠條件
                removeCondition(index) {
                    this.conditions.splice(index, 1);
                },

                // 新增 coupon 內容
                addCouponSetting() {
                    let couponSetting = JSON.parse(JSON.stringify(this.struct_coupon_setting));
                    this.coupon_settings.push(couponSetting);
                },
                // 移除 coupon 內容
                removeCouponSetting(index) {
                    this.coupon_settings.splice(index, 1);
                },

                // 送啦 就送啦 都送給APi啦
                storePromotion() {
                    let {
                        routeName,
                        name,
                        content,
                        selected_products,
                        conditions,
                        excepts,
                        free_freight_type,
                        additional_mode,
                        cart_amount,
                        coupon_code,
                        coupon_settings,
                        coupon_limit,
                    } = this;

                    axios.put('{{Route('ajax.admin.'. $routeName .'.index')}}/' + this.id, {
                        routeName,
                        name,
                        content,
                        selected_products,
                        conditions,
                        excepts,
                        free_freight_type,
                        additional_mode,
                        cart_amount,
                        coupon_code,
                        coupon_settings,
                        coupon_limit,
                    })
                        .then(response => {
                            Swal.fire({ title: '修改成功', icon: 'success' }).then(() => {
                                location.href = '{{ route('admin.' . $routeName . '.index') }}';
                            });
                        })
                        .catch(error => {
                            this.error = error.response.data;

                            if (error.response.status === 500) {
                                Swal.fire({ title: '失敗', html: this.error.message, icon: 'error' });
                            }
                        })
                },
            },
        });
    </script>
@endsection