@extends('layouts.main')

@section('pageTitle', '開放進場名單')

@section('content')
    <div class="container-fluid">
        <p>
            如果有建立並且啟用"開放進場名單"內之車號規則<br>
            此時可以進場的車輛只有以下四種： <b>管理車、月租車、白名單、開放進場名單</b><br>
            <span class="text-danger">※ 其它的車輛都<b>禁止入場</b>。</span>
        </p>
        <div class="row">
            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                <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-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                <div class="input-group-prepend">
                    <span class="input-group-text">{{ __('parking.vehicle_type') }}</span>
                </div>
                <select class="form-control" id="vehicleType">
                    <option value="">全部</option>
                    @foreach ($vehicleTypes as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
                <div class="input-group-prepend">
                    <span class="input-group-text">是否啟用</span>
                </div>
                <select class="form-control" id="enabled">
                    <option value="">全部</option>
                    @foreach (config('webCommonData.enableDropdown') as $value => $name)
                        <option value="{{ $value }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <button type='button' class='btn btn-danger' style="margin-bottom:10px;" id="allowEntryListSearch">查詢紀錄</button>

        <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>
                                    @if (auth()->user()->can('allowEntryList.destroyBatch'))
                                        <th class="unsortable"><input type="checkbox" id="checkAll"></th>
                                    @endif
                                    <th>車號規則</th>
                                    <th>車種</th>
                                    <th>是否啟用</th>
                                    @if (auth()->user()->can('allowEntryList.edit'))
                                        <th class="unsortable">修改</th>
                                    @endif
                                    @if (auth()->user()->can('allowEntryList.destroy'))
                                        <th class="unsortable">刪除</th>
                                    @endif
                                    <th>備註</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        @can('allowEntryList.create')
            <a class="btn btn-danger" href="{{ route('allowEntryList.create') }}">新增名單</a>
        @endcan
        @can('allowEntryList.destroyBatch')
            <span class="btn btn-danger" id="allowEntryListDestroyBatch">批次刪除</span>
        @endcan
        <!-- /.row -->
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var url = "{{ route('allowEntryList.datatableList') }}";
            var columns = [
                @if (auth()->user()->can('allowEntryList.destroyBatch'))
                    {
                        data: 'destroyBatch',
                        name: 'destroyBatch'
                    },
                @endif
                {
                    data: 'rule_name',
                    name: 'rule_name'
                },
                {
                    data: 'vehicle_type',
                    name: 'vehicle_type'
                },
                {
                    data: 'enabled',
                    name: 'enabled'
                },
                @if (auth()->user()->can('allowEntryList.edit'))
                    {
                        data: 'edit',
                        name: 'edit'
                    },
                @endif
                @if (auth()->user()->can('allowEntryList.destroy'))
                    {
                        data: 'delete',
                        name: 'delete'
                    },
                @endif
                {
                    data: 'note',
                    name: 'note'
                },
            ];
            var fieldArr = ['ruleName', 'vehicleType', 'enabled'];
            var datatable = createDatatable('datatableList', url, columns, fieldArr, 0);
            dataTablePluginPagejump(datatable);

            $('#allowEntryListSearch').click(function(e) {
                dataTableReload(datatable);
            });

            $(document).on('click', 'button[behavior=delete]', function(event) {
                var deleteUrl = '{{ route('allowEntryList.destroy', ':id') }}';
                datatableDeleteAjax(datatable, deleteUrl.replace(':id', $(this).attr('targetId')));
            });

            $('#allowEntryListDestroyBatch').click(function(e) {
                datatableDeleteBatchAjax(datatable, "{{ route('allowEntryList.destroyBatch') }}");
            });
        });
    </script>
@endsection