@extends('layouts.main')

@section('pageTitle', '觸發優惠規則 - 優惠券發放規則')

@section('content')
<div class="col-12 col-sm-12">
    <div class="card card-primary card-outline card-outline-tabs">
        <div class="card-header p-0 border-bottom-0">
            @inject('thidLevel', 'App\Presenters\ThirdLevelPresenter')
            {!! $thidLevel->createThirdLevel($globalVariable['pathMain'], 'triggerDiscountRule', 'triggerCouponRule.index') !!}
        </div>
        <div class="card-body">
            <div class="tab-content" id="thirdLevel-tabContent">
                <div class="tab-pane fade show active" id="" role="tabpanel">
                    <div class="container-fluid">
                        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-3">
                            <div class="input-group col mb-2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">發放業主</span>
                                </div>
                                <input type="text" class="form-control" placeholder="請輸入發放業主" id="distributionMerchantName">
                            </div>
                            <div class="input-group col mb-2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">車種</span>
                                </div>
                                <select class="form-control" id="carType">
                                    <option value="">請選擇</option>
                                    <option value="car">汽車</option>
                                    <option value="moto">機車</option>
                                    <option value="large">大型車</option>
                                </select>
                            </div>
                            <div class="input-group col mb-2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">規則名稱</span>
                                </div>
                                <input type="text" class="form-control" placeholder="請輸入規則名稱" id="ruleName">
                            </div>
                            <div class="input-group col mb-2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">觸發情境</span>
                                </div>
                                <select class="form-control" id="triggerScene">
                                    <option value="">請選擇</option>
                                    <option value="entry">車輛入場時</option>
                                    <option value="exit">車輛出場時</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 mb-2">
                                <button type="button" class="btn btn-danger" id="triggerCouponRuleSearch">查詢</button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body table-responsive p-3">
                                        <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
                                            <thead>
                                                <tr>
                                                    <th>發放業主</th>
                                                    <th class="unsortable">規則名稱</th>
                                                    <th>車種</th>
                                                    <th class="unsortable">觸發情境</th>
                                                    <th class="unsortable">贈送優惠</th>
                                                    <th>規則開始日</th>
                                                    <th>規則到期日</th>
                                                    <th>更新時間</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
    var url = "{{ route('triggerCouponRule.datatableList') }}";
    var columns = [
        {data: 'distribution_operator', name: 'distribution_merchant_name'},
        {data: 'name', name: 'name'},
        {data: 'car_type_display', name: 'car_type'},
        {data: 'trigger_scene_show', name: 'trigger_scene'},
        {data: 'coupon_benefit', name: 'discount_value'},
        {data: 'start_date', name: 'start_at'},
        {data: 'expire_date', name: 'end_at'},
        {data: 'updated_at', name: 'update_time'}
    ];

    var fieldArr = [];
    var datatable = createDatatable('datatableList', url, columns, fieldArr, 0);

    datatable.settings()[0].ajax = {
        url: url,
        data: function (d) {
            d.distribution_merchant_name = $('#distributionMerchantName').val();
            d.car_type = $('#carType').val();
            d.rule_name = $('#ruleName').val();
            d.trigger_scene = $('#triggerScene').val();
        }
    };

    $('#triggerCouponRuleSearch').click(function () {
        datatable.ajax.reload();
    });
});
</script>
@endsection