@extends('layouts.main')

@section('pageTitle', '快捷優惠設定')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/jquery.fancybox.min.css') }}?v={{ filemtime(public_path('css/jquery.fancybox.min.css')) }}">
    <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('stationParametersRepository', 'App\Repositories\StationParametersRepository')
                @inject('thidLevel', 'App\Presenters\ThirdLevelPresenter')
                {!! $thidLevel->createThirdLevel(
                    $globalVariable['pathMain'],
                    $globalVariable['pathSub'],
                    'insideVehicles.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">
                                <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>優惠模式</th>
                                                        <th class="unsortable">優惠內容</th>
                                                        <th class="unsortable">備註</th>
                                                        @can('quickDiscount.edit')
                                                            <th class="unsortable">修改</th>
                                                        @endcan
                                                        @can('quickDiscount.destroy')
                                                            <th class="unsortable">刪除</th>
                                                        @endcan
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- /.card-body -->
                                    </div>
                                    <!-- /.card -->
                                </div>
                                <!-- /.col -->
                            </div>
                            @can('quickDiscount.create')
                                <button type='button' class='btn btn-danger' behavior='addBtn' disabled="disabled">新增快捷優惠</button>
                            @endcan
                            <!-- /.row -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card -->
        </div>
    </div>

    <!-- edit quick discount modal -->
    <div class="modal fade" id="editQuickDiscountModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="width: 100%; text-align: center;">修改優惠設定</h4>
                </div>
                <div class="modal-body" style="text-align:center;font-size: 18px;" align="center">
                    {{-- 自訂優惠顯示畫面 --}}
                    <input class="hide" type="text" id="editDiscountId">
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠名稱：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <input type="text" id="editDiscountName">
                        </div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠模式：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <select id="editAmountType">
                                @foreach (config('webCommonData.disabledDiscountTypeDropdown') as $value => $name)
                                    @if ($value == 1)
                                        <option value="{{ $value }}" selected>{{ $name }}</option>
                                    @else
                                        <option value="{{ $value }}">{{ $name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class='row col-sm-8 amountType1' style="margin: 30px auto;">
                        <div class="col-sm-12" style="line-height: 40px;">
                            <input type="text" id="editDiscountHour" size="5" style="height:30px;"> 小時前免費，
                            之後 <input type="text" id="editDiscountRateAfter" size="5" style="height:30px;"
                                placeholder="0~99"> 折扣百分比
                        </div>
                        <div class="col-sm-12" style="font-size: 15px; margin: 10px 0 10px 23px; text-align: left;">
                            範例： <br>
                            輸入20，等同8折優惠。<br>
                            輸入80，等同2折優惠。<br>
                            輸入25，等同75折優惠。<br>
                            輸入0，等同無折扣。
                        </div>
                    </div>
                    <div class='row amountType2'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠金額：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'><input type="text"
                                id="editDisabledDiscountAmount"></div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>備註：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'><input type="text"
                                id="editDiscountRemark"></div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>
                            <input type="checkbox" id="editDisabled" class="disabledCheckbox">
                        </div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <label for="editDisabled" style="font-weight: normal;">身障優惠註記</label>
                        </div>
                    </div>
                    <input type="hidden" id="editDiscountTransactionId">
                    @if ($stationParametersRepository->getFieldValue('electric_bike_entry_enable'))
                        <div style='text-align:center; color:red;'>
                            <div>※[電動自行車]車牌屬於特殊車牌，無法使用優惠設定功能。</div>
                            <div>請改成自定義英數字組成車牌，並人工放行離場。</div>
                        </div>
                    @endif
                </div>
                <div class="modal-footer justify-content-between" style="text-align:center;">
                    <button type="button" class="btn btn-primary" style="margin: 0 auto;" id="editDiscountSave" behavior="edit">確定</button>
                    <button type="button" class="btn btn-primary" style="margin: 0 auto;" data-dismiss="modal"
                        id="editDiscountCancel">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- add quick discount modal -->
    <div class="modal fade" id="addQuickDiscountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" style="width: 100%;">新增快捷優惠</h4>
                </div>
                <div class="modal-body" style="text-align:center;font-size: 18px;" align="center">
                    {{-- 自訂優惠顯示畫面 --}}
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠名稱：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <input type="text" id="addDiscountName">
                        </div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠模式：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <select id="addAmountType">
                                @foreach (config('webCommonData.disabledDiscountTypeDropdown') as $value => $name)
                                    @if ($value == 1)
                                        <option value="{{ $value }}" selected>{{ $name }}</option>
                                    @else
                                        <option value="{{ $value }}">{{ $name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class='row col-sm-8 amountType1' style="margin: 30px auto;">
                        <div class="col-sm-12" style="line-height: 40px;">
                            <input type="text" id="addDiscountHour" size="5" style="height:30px;"> 小時前免費，
                            之後 <input type="text" id="addDiscountRateAfter" size="5" style="height:30px;"
                                placeholder="0~99"> 折扣百分比
                        </div>
                        <div class="col-sm-12" style="font-size: 15px; margin: 10px 0 10px 23px; text-align: left;">
                            範例： <br>
                            輸入20，等同8折優惠。<br>
                            輸入80，等同2折優惠。<br>
                            輸入25，等同75折優惠。<br>
                            輸入0，等同無折扣。
                        </div>
                    </div>
                    <div class='row amountType2'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>優惠金額：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'><input type="text"
                                id="addDisabledDiscountAmount"></div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>備註：</div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'><input type="text"
                                id="addDiscountRemark"></div>
                    </div>
                    <div class='row'>
                        <div class='col-sm-6' style='text-align:right; font-size: 22px;'>
                            <input type="checkbox" id="addDisabled" class="disabledCheckbox">
                        </div>
                        <div class='col-sm-6' style='text-align:left; font-size: 22px;'>
                            <label for="addDisabled" style="font-weight: normal;">身障優惠註記</label>
                        </div>
                    </div>
                    <input type="hidden" id="addDiscountTransactionId">
                    @if ($stationParametersRepository->getFieldValue('electric_bike_entry_enable'))
                        <div style='text-align:center; color:red;'>
                            <div>※[電動自行車]車牌屬於特殊車牌，無法使用優惠設定功能。</div>
                            <div>請改成自定義英數字組成車牌，並人工放行離場。</div>
                        </div>
                    @endif
                </div>
                <div class="modal-footer justify-content-between" style="text-align:center;">
                    <button type="button" class="btn btn-primary" style="margin: 0 auto;" id="addDiscountSave" behavior="add">確定</button>
                    <button type="button" class="btn btn-primary" style="margin: 0 auto;" data-dismiss="modal"
                        id="addDiscountCancel">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@section('js')
@include('include.fancybox')
<script>
var datatable;
$(function() {
    var url = "{{ route('quickDiscount.datatableList') }}";
    var columns = [{
            data: 'discount_name',
            name: 'discount_name'
        },
        {
            data: 'discount_type',
            name: 'discount_type'
        },
        {
            data: 'discount_content',
            name: 'discount_content'
        },
        {
            data: 'remark',
            name: 'remark'
        },
        @can('quickDiscount.edit')
        {
            data: 'edit',
            name: 'edit',
            render: function (data, type, row, meta) {
                return '<button type="button" class="btn btn-sm btn-primary" behavior="editBtn" targetId="' + row.id + '" ><i class="fas fa-edit"></i>修改</button>';
            }
        },
        @endcan
        @can('quickDiscount.destroy')
        {
            data: 'delete',
            name: 'delete',
            render: function (data, type, row, meta) {
                return '<button type="button" class="btn btn-sm btn-danger" behavior="deleteBtn" targetId="' + row.id + '" ><i class="fas fa-trash"></i>刪除</button>';
            }
        },
        @endcan
    ];

    // create datatable
    datatable = createDatatable('datatableList', url, columns, [], 1);

    // add page jump
    dataTablePluginPagejump(datatable);
});
</script>
@include('stationManagement.quickDiscount.discountSection')
@endsection