@extends('system.layouts.app')

@section('title', '區間測速資料管理')
@section('name', 'interval.manage')

@section('css')
@parent
<link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/bootstrap-select.min.css') }}">

<style>
    .searchTable {
        text-align: right;
    }

    .table>tbody>tr>td {
        vertical-align: middle;
        text-align: -moz-center;
    }

    .btn.disabled,
    .btn:disabled {
        cursor: not-allowed;
    }

    .selectpicker {
        background-color: #212529;
        color: #dee2e6;
    }

    .table {
        --bs-table-bg: none;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, .05);
    }
</style>
@stop

@section('content')
<div class="container-fluid mt-2" style="min-height:calc(100vh-60px) !important">
    <div class="w-100 text-start">
        <h2 class="title">區間測速案件審查-已審 </h2>
    </div>

    <div>
        <!-- Date Filter -->
        <div class="row justify-content-center">
            <div class="col-10">
                <table>
                    <tr>
                        <td>日期：</td>

                        <td style="position: relative;">
                            <input type='text' id='search_fromdate' class="form-control date searchColumns" placeholder='起' value="">
                        </td>

                        <td style="position: relative;">
                            <input type='text' id='search_todate' class="form-control date searchColumns" placeholder='訖' value="">
                        </td>

                        <td class="ps-2">地點：</td>
                        <td>
                            <select id="location" class="form-control searchColumns selectpicker" data-style="btn-dark border" data-container="body" data-width="fit" data-dropdown-align-right="auto" data-live-search="true">
                                <option value="">選擇設備編號</option>
                                @foreach ($location as $item)
                                <option value="{{ $item->start_serialnumber.'-'.$item->end_serialnumber }}">{{ $item->location }}</option>
                                @endforeach
                            </select>
                        </td>

                        <td class="ps-2">車牌：</td>
                        <td>
                            <input type='text' id='carnumber' class="form-control searchColumns" placeholder='車牌'>
                        </td>
                        <td class="ps-2">
                            <input type='button' id="btn_search" class="form-control " value="搜尋">
                        </td>
                        <td class="ps-2">
                            <input type='button' id="btn_clear" class="form-control " value="清除">
                        </td>
                    </tr>

                </table>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12">
                <table id="intervalTable" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>
<!-- 圖片(image)彈出視窗 -->
@include('system/popup/imagePop')
<!-- 圖片(image)彈出視窗 -->

<!-- 影像(video)彈出視窗 -->
@include('system/popup/videoPop')
<!-- 影像(video)彈出視窗 -->
@endsection


@section('js')
@parent
<script src="{{ asset('js/v2/datatables.min.js') }}"></script>
<!-- Latest compiled and minified JavaScript -->
{{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script> --}}
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script>

    // DataTable 初始化
    $(document).ready(function() {
        $.fn.dataTableExt.sErrMode = 'throw';
        // input 加入時間選擇
        $('input#search_fromdate').datetimepicker({
            format: 'YYYY-MM-DD'
        });
        $('input#search_todate').datetimepicker({
            format: 'YYYY-MM-DD'
        });


        intervalTable = $('#intervalTable').DataTable({
            "dom": `<'row'<'col-sm-12't>>`,
            // 語系設定 UI介面中文化
            "language": {
                "processing": "處理中...",
                "loadingRecords": "載入中...",
                "lengthMenu": "顯示 _MENU_ 項結果",
                "zeroRecords": "沒有符合的結果",
                "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                "infoPostFix": "",
                "search": "搜尋:",
                "paginate": {
                    "first": "第一頁",
                    "previous": "上一頁",
                    "next": "下一頁",
                    "last": "最後一頁"
                },
                "aria": {
                    "sortAscending": ": 升冪排列",
                    "sortDescending": ": 降冪排列"
                }
            },
            // 搜尋欄位 是否顯示
            searching: false,
            // searching: true,
            // 處理中 是否顯示
            processing: true,
            //
            serverSide: true,
            // Ajax 取資料
            ajax: {
                //processcheckStatus =0 未審
                'url': "{{ route('api.itl.index') }}",
                'data': function(data) {
                    data.searchByFromdate = $('#search_fromdate').val();
                    data.searchByTodate = $('#search_todate').val();
                    data.serialnumber = $('#location').val();
                    data.carnumber = $('#carnumber').val();
                    data.processcheckStatus = 1;
                },
                'error': function() {
                    // violationparkingTable.draw();
                },
            },
            // 設定不提供排序條件的欄位(例如圖片)
            columnDefs: [{
                orderable: false,
                    targets: [0, 1, 2, 3, 4, 5, ]
                }, {
                    visible: false,
                    targets: []
                },
                {
                    className: "dt-center",
                    targets: [0,4]
                },
                {
                    className: "dt-start",
                    targets: [1, 2, 3,]
                },

            ],
            order: [
                [0, 'desc']
            ],
            // 設定 顯示在Table上的欄位
            columns: [
                // 格式 data: 後端傳遞過來的 欄位名稱
                {
                    data: 'intervalnumber',
                    title: '案號',
                    width: '80px',
                },
                {
                    data: 'start_time',
                    title: '起迄時間',
                    width: '100px',
                    render: function(data, type, row) {
                        return `進入時間： <br/> ${row.start_time}  <br/><br/>  離開時間： <br/>${row.end_time}`;
                    }
                },
                {
                    data: 'start_location',
                    title: '起訖地點',
                    width: '300px',
                    render: function(data, type, row) {
                        return `進入地點： <br/> [${row.start_serialnumber}] ${row.start_location}  <br/><br/>  離開地點： <br/>[${row.end_serialnumber}] ${row.end_location}`;
                    }
                },

                {
                    data: 'speed',
                    title: '案件數據',
                    width: '150px',
                    render: function(data, type, row) {
                        return `車號：${row.carnumber} <br/><br/> 車速：${row.speed} km/h  <br/>  時間：${row.diff} <br/> 距離：${row.distance}`;
                    }
                },
                {
                    data: 'merge_picture',
                    title: '違規照片',

                    "render": function(data, type, JsonResultRow, meta) {
                        let vdo_1 = `<button onclick="videoPopUp(this)"
                                    data-bs-toggle="modal" data-bs-target="#vdoPop"
                                    data-vdopath="/getViolationVideo/ParsingFiles*interval*data*${JsonResultRow.start_video}" type="button"
                                    style="font-size: 200%" class="btn btn-lg btn-danger">
                                    <i class="fa-brands fa-youtube"></i>
                                    </button>`;
                        let vdo_2 = `<button onclick="videoPopUp(this)"
                                    data-bs-toggle="modal" data-bs-target="#vdoPop"
                                    data-vdopath="/getViolationVideo/ParsingFiles*interval*data*${JsonResultRow.end_video}" type="button"
                                    style="font-size: 200%" class="btn btn-lg btn-danger">
                                    <i class="fa-brands fa-youtube"></i>
                                    </button>`;
                        let merge_picture = `<img onclick="imagePopUp(this)"
                                    data-bs-toggle="modal" data-bs-target="#imgPop" width="100%"
                                    src="/${JsonResultRow.merge_picture}" alt=""/>`
                        return `${merge_picture} <br/> ${vdo_1} ${vdo_2}`;
                    }
                },
                {
                    data: 'id',
                    title: '操作',
                    width: '50px',
                    "render": function(data, type, JsonResultRow, meta) {
                        return ``;
                    }
                },

            ],
            initComplete: function() {
                $('.selectpicker').selectpicker();

            },
            drawCallback: function(settings) {
                $('.selectpicker').selectpicker();
                let api = this.api();
                api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                    let data = this.data();
                    if (data.faildata == 1) { // 获取隐藏列的数据
                        $(this.node()).find('td').css('color', 'red');
                    }
                });
            }
            // stripeClasses:['striped-odd','striped-even']
        });
        // Search button
        $('#btn_search').click(function() {
            intervalTable.draw();
        });
        $('#btn_clear').click(function() {
            $('input.searchColumns').val("");
            $('select.searchColumns').val("");
            intervalTable.draw();
        });

    });
</script>
@stop