{{--贈品--}}
@section('gifts')
<div class="row">
    <div class="col-md-4">
        <label>贈品</label>
        <div class="invalid-feedback d-block" v-if="error?.selected_products?.message">
            <i class="bx bx-radio-circle"></i>
            @{{ error?.selected_products?.message }}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-7">
        <table class="table" id="list_table">
            <thead>
            <tr>
                <th style="width: 3%">
                    <button type="button" class="btn btn-icon rounded-circle btn-light-success" @click="addProductSelector()">
                        {{-- 增加一項 --}}
                        <div class="fonticon-wrap">
                            <i class="bx bx-add-to-queue"></i>
                        </div>
                    </button>
                </th>
                <th style="width: 48%">產品</th>
                <th style="width: 20%">原價</th>
                <th style="width: 30%">可贈數量 / 當前庫存</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(selected_product, index) in selected_products">
                <tr>
                    <td>
                        <button type="button" class="btn btn-icon rounded-circle btn-light-danger" @click="removeProductSelector(index)">
                            {{-- 去掉一項 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-minus-circle"></i>
                            </div>
                        </button>
                    </td>
                    {{-- 產品編號 --}}
                    <td>
                        <select2 :options="selectProd" :value="selected_product.code" v-model="selected_product.code" @prod-selected="findProduct(index)"></select2>
                        <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.code']?.message">
                            <i class="bx bx-radio-circle"></i>
                            @{{ error['selected_products.' + index + '.code']?.message }}
                        </div>
                    </td>
                    {{-- 原價 --}}
                    <td>
                        <p>@{{ selected_product.original_price }}</p>
                    </td>
                    {{-- 可贈數量 / 當前庫存 --}}
                    <td>
                        <div class="input-group">
                            <input type="text" class="form-control col-md-6" v-model="selected_product.quantity">
                            <div class="input-group-append">
                                <span class="input-group-text">@{{ selected_product.stocks }}</span>
                            </div>
                        </div>
                        <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.quantity']?.message">
                            <i class="bx bx-radio-circle"></i>
                            @{{ error['selected_products.' + index + '.quantity']?.message }}
                        </div>
                    </td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
</div>
@endsection

{{--贈送條件--}}
@section('gift_conditions')
    <div class="row">
        <div class="col-md-4">
            <label>贈送條件</label>
            <div class="invalid-feedback d-block" v-if="error?.conditions?.message">
                <i class="bx bx-radio-circle"></i>
                @{{ error?.conditions?.message }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <table class="table" id="list_table">
                <thead>
                <tr>
                    <th style="width: 3%">
                        <button type="button" class="btn btn-icon rounded-circle btn-light-success" @click="addCondition()">
                            {{-- 增加一項 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-add-to-queue"></i>
                            </div>
                        </button>
                    </th>
                    <th style="width: 25%">門檻</th>
                    <th style="width: 15%">可否累贈</th>
                    <th style="width: 15%">是否啟用</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(condition, index) in conditions">
                    <tr>
                        <td>
                            <button type="button" class="btn btn-icon rounded-circle btn-light-danger" @click="removeCondition(index)">
                                {{-- 去掉一項 --}}
                                <div class="fonticon-wrap">
                                    <i class="bx bx-minus-circle"></i>
                                </div>
                            </button>
                        </td>
                        {{-- 門檻 --}}
                        <td>
                            <div class="input-group">
                                <div class="row">
                                    <input type="text" class="form-control col-md-6" v-model="condition.condition">
                                    <select class="form-control col-md-4 offset-1" id="basicSelect" v-model="condition.type">
                                        <option
                                            v-for="(condition_type_value, condition_type_key) in option_condition_types"
                                            :value="condition_type_key">
                                            @{{ condition_type_value }}
                                        </option>
                                    </select>
                                    <div class="invalid-feedback d-block" v-if="error['conditions.' + index + '.condition']?.message">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ error['conditions.' + index + '.condition']?.message }}
                                    </div>
                                    <div class="invalid-feedback d-block" v-if="error['conditions.' + index + '.type']?.message">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ error['conditions.' + index + '.type']?.message }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        {{-- 可否累贈 --}}
                        <td>
                            <div class="custom-control custom-switch custom-control-inline mb-1">
                                <input
                                    type="checkbox"
                                    class="custom-control-input"
                                    :id="'continuous_' + index"
                                    v-model="condition.is_continuous">

                                <label class="custom-control-label mr-1" :for="'continuous_' + index"></label>
                            </div>
                        </td>
                        {{-- 是否啟用 --}}
                        <td>
                            <div class="custom-control custom-switch custom-control-inline mb-1">
                                <input
                                    type="checkbox"
                                    class="custom-control-input"
                                    id="'status_' + index"
                                    v-model="condition.status">

                                <label class="custom-control-label mr-1" for="'status_' + index"></label>
                            </div>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
@endsection

{{--排除條件--}}
@section('except')
    <div class="row">
        <div class="col-md-1">
            <label>排除條件</label>
        </div>

        <div class="col-md-2 form-group">
            <div class="form-group">
                <select2 :options="selectExcepts" :value="JSON.parse(JSON.stringify(excepts))"  :is-multiple="true" custom-select-class="select2" v-model="excepts"></select2>
            </div>
        </div>
    </div>
@endsection

{{--折價條件--}}
@section('discount_amount_conditions')
    <div class="row">
        <div class="col-md-4">
            <label>折價條件</label>
            <div class="invalid-feedback d-block" v-if="error?.conditions?.message">
                <i class="bx bx-radio-circle"></i>
                @{{ error?.conditions?.message }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            <table class="table" id="list_table">
                <thead>
                <tr>
                    <th style="width: 3%">
                        <button type="button" class="btn btn-icon rounded-circle btn-light-success" @click="addCondition()">
                            {{-- 增加一項 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-add-to-queue"></i>
                            </div>
                        </button>
                    </th>
                    <th style="width: 25%">門檻</th>
                    <th style="width: 25%">折價金額</th>
                    <th style="width: 15%">可否累贈</th>
                    <th style="width: 15%">是否啟用</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(condition, index) in conditions">
                    <tr>
                        <td>
                            <button type="button" class="btn btn-icon rounded-circle btn-light-danger" @click="removeCondition(index)">
                                {{-- 去掉一項 --}}
                                <div class="fonticon-wrap">
                                    <i class="bx bx-minus-circle"></i>
                                </div>
                            </button>
                        </td>
                        {{-- 門檻 --}}
                        <td>
                            <div class="input-group">
                                <div class="row">
                                    <input type="text" class="form-control col-md-6" v-model="condition.condition">
                                    <select class="form-control col-md-4 offset-1" id="basicSelect" v-model="condition.type">
                                        <option
                                            v-for="(condition_type_value, condition_type_key) in option_condition_types"
                                            :value="condition_type_key">
                                            @{{ condition_type_value }}
                                        </option>
                                    </select>
                                    <div class="invalid-feedback d-block col-md-6" v-if="error['conditions.' + index + '.condition']?.message">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ error['conditions.' + index + '.condition']?.message }}
                                    </div>
                                    <div class="invalid-feedback d-block col-md-4 offset-1" v-if="error['conditions.' + index + '.type']?.message">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ error['conditions.' + index + '.type']?.message }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        {{-- 折價金額 --}}
                        <td>
                            <div class="input-group">
                                <div class="row">
                                    <input type="text" class="form-control col-md-6" v-model="condition.discount_amount">
                                </div>
                                <div class="invalid-feedback d-block" v-if="error['conditions.' + index + '.discount_amount']?.message">
                                    <i class="bx bx-radio-circle"></i>
                                    @{{ error['conditions.' + index + '.discount_amount']?.message }}
                                </div>
                            </div>
                        </td>
                        {{-- 可否累贈 --}}
                        <td>
                            <div class="custom-control custom-switch custom-control-inline mb-1">
                                <input
                                    type="checkbox"
                                    class="custom-control-input"
                                    :id="'continuous_' + index"
                                    v-model="condition.is_continuous">

                                <label class="custom-control-label mr-1" :for="'continuous_' + index"></label>
                            </div>
                        </td>
                        {{-- 是否啟用 --}}
                        <td>
                            <div class="custom-control custom-switch custom-control-inline mb-1">
                                <input
                                    type="checkbox"
                                    class="custom-control-input"
                                    :id="'status_' + index"
                                    v-model="condition.status">

                                <label class="custom-control-label mr-1" :for="'status_' + index"></label>
                            </div>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
@endsection

{{--免運類型--}}
@section('free_freight_type')
    <div class="row">
        <div class="col-md-1">
            <label>免運類型</label>
        </div>
        <div class="col-md-2 form-group">
            <div class="form-group">
                <select class="form-control" id="freeFreightType" v-model="free_freight_type">
                    <option value="">請選擇</option>
                    <option v-for="option_freight_type in option_freight_types" :value="option_freight_type.type">
                        @{{ option_freight_type.name }}
                    </option>
                </select>

            </div>
        </div>
        <div class="invalid-feedback d-block col-md-4" v-if="error?.free_freight_type?.message">
            <i class="bx bx-radio-circle"></i>
            @{{ error?.free_freight_type?.message }}
        </div>
    </div>
@endsection

{{--免運條件--}}
@section('free_freight_conditions')
    <div class="row">
        <div class="col-md-4">
            <label>免運條件</label>
            <div class="invalid-feedback d-block" v-if="error?.conditions?.message">
                <i class="bx bx-radio-circle"></i>
                @{{ error?.conditions?.message }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            <table class="table" id="list_table">
                <thead>
                <tr>
                    <th style="width: 3%">
                        <button type="button" class="btn btn-icon rounded-circle btn-light-success" @click="addCondition()">
                            {{-- 增加一項 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-add-to-queue"></i>
                            </div>
                        </button>
                    </th>
                    <th style="width: 25%">門檻</th>
                    <th style="width: 15%">是否啟用</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(condition, index) in conditions">
                    <tr>
                        <td>
                            <button type="button" class="btn btn-icon rounded-circle btn-light-danger" @click="removeCondition(index)">
                                {{-- 去掉一項 --}}
                                <div class="fonticon-wrap">
                                    <i class="bx bx-minus-circle"></i>
                                </div>
                            </button>
                        </td>
                        {{-- 門檻 --}}
                        <td>
                            <div class="input-group">
                                <div class="row">
                                    <input type="text" class="form-control col-md-6" v-model="condition.condition">
                                    <select class="form-control col-md-4 offset-1" id="basicSelect" v-model="condition.type">
                                        <option
                                                v-for="(condition_type_value, condition_type_key) in option_condition_types"
                                                :value="condition_type_key">
                                            @{{ condition_type_value }}
                                        </option>
                                    </select>
                                    <div class="invalid-feedback d-block col-md-6" v-if="error['conditions.' + index + '.condition']?.message">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ error['conditions.' + index + '.condition']?.message }}
                                    </div>
                                    <div class="invalid-feedback d-block col-md-4 offset-1" v-if="error['conditions.' + index + '.type']?.message">
                                        <i class="bx bx-radio-circle"></i>
                                        @{{ error['conditions.' + index + '.type']?.message }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        {{-- 是否啟用 --}}
                        <td>
                            <div class="custom-control custom-switch custom-control-inline mb-1">
                                <input
                                        type="checkbox"
                                        class="custom-control-input"
                                        :id="'status_' + index"
                                        v-model="condition.status">

                                <label class="custom-control-label mr-1" :for="'status_' + index"></label>
                            </div>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
@endsection

{{--加購模式--}}
@section('additional_mode')
    <div class="row">
        <div class="col-md-1">
            <label>加購模式</label>
        </div>
        <div class="col-md-6 form-group">
            <ul class="list-unstyled mb-0">
                <li class="d-inline-block mr-2 mb-1">
                    <fieldset>
                        <div class="radio">
                            <input type="radio" name="bsradio" id="radio1" checked value="single" v-model="additional_mode">
                            <label for="radio1">單選</label>
                        </div>
                    </fieldset>
                </li>
                <li class="d-inline-block mr-2 mb-1">
                    <fieldset>
                        <div class="radio">
                            <input type="radio" name="bsradio" id="radio2" value="multiple" v-model="additional_mode">
                            <label for="radio2">多選</label>
                        </div>
                    </fieldset>
                </li>
            </ul>
        </div>
        <div class="invalid-feedback d-block col-md-4" v-if="error?.additional_mode?.message">
            <i class="bx bx-radio-circle"></i>
            @{{ error?.additional_mode?.message }}
        </div>
    </div>
@endsection

{{--購物車金額--}}
@section('additional_cart_amount')
    <div class="row">
        <div class="col-md-1">
            <label>購物車金額</label>
        </div>
        <div class="col-md-2 form-group">
            <div class="input-group">
                <input type="text" class="form-control" v-model="cart_amount">
                <div class="input-group-append">
                    <span class="input-group-text">元</span>
                </div>
            </div>
        </div>
        <div class="invalid-feedback d-block col-md-4" v-if="error?.cart_amount?.message">
            <i class="bx bx-radio-circle"></i>
            @{{ error?.cart_amount?.message }}
        </div>
    </div>
@endsection

{{--加購品--}}
@section('additional_products')
    <div class="row">
        <div class="col-md-4">
            <label>加購品</label>
            <div class="invalid-feedback d-block" v-if="error?.selected_products?.message">
                <i class="bx bx-radio-circle"></i>
                @{{ error?.selected_products?.message }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table" id="list_table">
                <thead>
                <tr>
                    <th style="width: 3%">
                        <button type="button" class="btn btn-icon rounded-circle btn-light-success" @click="addProductSelector()">
                            {{-- 增加一項 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-add-to-queue"></i>
                            </div>
                        </button>
                    </th>
                    <th style="width: 25%">產品</th>
                    <th style="width: 10%">原價</th>
                    <th style="width: 15%">加購價</th>
                    <th style="width: 25%">可加購數量 / 當前庫存</th>
                    <th style="width: 22%">限購數量</th>
                </tr>
                </thead>
                <tbody>
                <template>
                    <tr v-for="(selected_product, index) in selected_products">
                        <td>
                            <button type="button" class="btn btn-icon rounded-circle btn-light-danger" @click="removeProductSelector(index)">
                                {{-- 去掉一項 --}}
                                <div class="fonticon-wrap">
                                    <i class="bx bx-minus-circle"></i>
                                </div>
                            </button>
                        </td>
                        {{-- 產品 --}}
                        <td>
                            <select2
                                :options="selectProd"
                                v-model="selected_product.code"
                                @prod-selected="findProduct(index)"
                            ></select2>
                            <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.code']?.message">
                                <i class="bx bx-radio-circle"></i>
                                @{{ error['selected_products.' + index + '.code']?.message }}
                            </div>
                        </td>
                        {{-- 原價 --}}
                        <td>
                            <p>@{{ selected_product.original_price }}</p>
                        </td>
                        {{-- 加購價 --}}
                        <td>
                            <input type="text" class="form-control" placeholder="加購價" v-model="selected_product.additional_price">
                            <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.additional_price']?.message">
                                <i class="bx bx-radio-circle"></i>
                                @{{ error['selected_products.' + index + '.additional_price']?.message }}
                            </div>
                        </td>
                        {{-- 可加購數量 / 當前庫存 --}}
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control col-md-6" v-model="selected_product.quantity">
                                <div class="input-group-append">
                                    <span class="input-group-text">@{{ selected_product.stocks }}</span>
                                </div>
                            </div>
                            <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.quantity']?.message">
                                <i class="bx bx-radio-circle"></i>
                                @{{ error['selected_products.' + index + '.quantity']?.message }}
                            </div>
                        </td>
                        {{-- 限購數量 --}}
                        <td>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <div class="checkbox">
                                            <input
                                                    type="checkbox"
                                                    class="checkbox-input"
                                                    :id="'isInfinity' + index"
                                                    v-model="selected_product.is_infinity">
                                            <label :for="'isInfinity' + index">無限制</label>
                                        </div>
                                    </span>
                                </div>
                                <input type="text" class="form-control" :id="'limit_qty' + index" :disabled="selected_product.is_infinity" aria-describedby="basic-addon2" v-model="selected_product.limit_quantity">
                                <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.limit_quantity']?.message">
                                    <i class="bx bx-radio-circle"></i>
                                    @{{ error['selected_products.' + index + '.limit_quantity']?.message }}
                                </div>
                                <div class="input-group-append">
                                    <span class="input-group-text">件</span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
@endsection

{{--Coupon代碼--}}
@section('coupon_code')
    <div class="row">
        <div class="col-md-1">
            <label>Coupon代碼</label>
        </div>
        <div class="col-md-4 form-group">
            <input class="form-control" placeholder="Coupon代碼" type="text" v-model="coupon_code">
        </div>
        <div class="invalid-feedback d-block col-md-4" v-if="error?.coupon_code?.message">
            <i class="bx bx-radio-circle"></i>
            @{{ error?.coupon_code?.message }}
        </div>
    </div>
@endsection

{{--Coupon內容--}}
@section('coupon_detail')
    <div class="row">
        <div class="col-md-4">
            <label>COUPON內容</label>
            <div class="invalid-feedback d-block" v-if="error?.coupon_settings?.message">
                <i class="bx bx-radio-circle"></i>
                @{{ error?.coupon_settings?.message }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <table class="table" id="list_table">
                <thead>
                <tr>
                    <th style="width: 3%">
                        <button type="button" class="btn btn-icon rounded-circle btn-light-success" @click="addCouponSetting()">
                            {{-- 增加一項 --}}
                            <div class="fonticon-wrap">
                                <i class="bx bx-add-to-queue"></i>
                            </div>
                        </button>
                    </th>
                    <th style="width: 10%">內容</th>
                    <th style="width: 30%"></th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(coupon_setting, index) in coupon_settings">
                    <tr>
                        <td>
                            <button type="button" class="btn btn-icon rounded-circle btn-light-danger" @click="removeCouponSetting(index)">
                                {{-- 去掉一項 --}}
                                <div class="fonticon-wrap">
                                    <i class="bx bx-minus-circle"></i>
                                </div>
                            </button>
                        </td>
                        {{-- 內容 --}}
                        <td>
                            <div class="input-group">
                                <select class="form-control" id="basicSelect" v-model="coupon_setting.type">
                                    <option
                                            v-for="(coupon_type_value, coupon_type_index) in option_coupon_setting_types"
                                            :value="coupon_type_index">
                                        @{{ coupon_type_value }}
                                    </option>
                                </select>
                                <div class="invalid-feedback d-block" v-if="error['coupon_settings.' + index + '.type']?.message">
                                    <i class="bx bx-radio-circle"></i>
                                    @{{ error['coupon_settings.' + index + '.type']?.message }}
                                </div>
                            </div>
                        </td>
                        <td>
                            {{-- 產品編號 --}}
                            <template v-if="coupon_setting.type === 'product'">
                                <select2 :options="selectProd" :value="coupon_setting.setting" v-model="coupon_setting.setting" @prod-selected="findProduct(index)"></select2>
                                <div class="invalid-feedback d-block" v-if="error['selected_products.' + index + '.code']?.message">
                                    <i class="bx bx-radio-circle"></i>
                                    @{{ error['selected_products.' + index + '.code']?.message }}
                                </div>
                            </template>
                            <template v-if="coupon_setting.type === 'amount'">
                                <input type="text" class="form-control" v-model="coupon_setting.setting">
                                <div class="invalid-feedback d-block col-md-7 offset-1" v-if="error['coupon_settings.' + index + '.setting']?.message">
                                    <i class="bx bx-radio-circle"></i>
                                    @{{ error['coupon_settings.' + index + '.setting']?.message }}
                                </div>
                            </template>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
@endsection

{{--總可使用次數--}}
@section('coupon_limit_use')
    <div class="row">
        <div class="col-md-1">
            <label>總可使用次數</label>
        </div>
        <div class="col-md-3 form-group">
            <input class="form-control" placeholder="總可使用次數" type="text" v-model="coupon_limit">
        </div>
    </div>
@endsection