@extends('layouts.main')

@section('pageTitle', '商辦大樓區域移動紀錄')

@section('content')
    <div class="container-fluid">
        <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="token">
            </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="vehicleType">
                    @inject('vehicleTypesRepository', 'App\Repositories\VehicleTypesRepository')
                    <option value="">全部</option>
                    @foreach ($vehicleTypesRepository->getListByPluck('id', 'name', [['id', '<', 3]]) 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="memo">
                    <option value="">全部</option>
                    <option value="需繳費">需繳費</option>
                </select>
            </div>
        </div>
        <button type='button' class='btn btn-danger' style="margin-bottom:10px;" id="monthlyAreaMovementSearch">查詢紀錄</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>
                                    <th>車號</th>
                                    <th class="unsortable">車種</th>
                                    <th class="unsortable">區域移動紀錄</th>
                                    <th class="unsortable">進入區域時間</th>
                                    <th class="unsortable">離開區域時間</th>
                                    <th class="unsortable">備註</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        @can('monthlyAreaMovement.export')
            <span class="btn btn-danger" id="monthlyAreaMovementExport">匯出</span>
            <br>※ 匯出限制 {{ $globalVariable['exportLimit'] }} 筆資料
        @endcan

        <!-- /.row -->
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var url = "{{ route('monthlyAreaMovement.datatableList') }}";
            var columns = [
                {
                    data: 'token',
                    name: 'token'
                },
                {
                    data: 'vehicle_type',
                    name: 'vehicle_type'
                },
                {
                    data: 'area_movement',
                    name: 'area_movement'
                },
                {
                    data: 'entry_time',
                    name: 'entry_time'
                },
                {
                    data: 'exit_time',
                    name: 'exit_time'
                },
                {
                    data: 'memo',
                    name: 'memo'
                },
            ];
            var fieldArr = ['token', 'vehicleType', 'memo'];
            var datatable = createDatatable('datatableList', url, columns, fieldArr, 0);
            dataTablePluginPagejump(datatable);

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

            $('#monthlyAreaMovementExport').click(function(e) {
                var exportUrl = "{{ route('monthlyAreaMovement.export') }}";
                var getParameter = $.param(createObjectData(fieldArr));
                location.href = exportUrl + '?' + getParameter;
            });
        });
    </script>
@endsection