@extends('system.layouts.app')

@section('title', '區間測速系統')
@section('name', 'interval')

@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">
            <h2 class="title text-start">區間測速案件審查-未審 </h2>
            @if(env('INTERVAL_VER', false))
                <h6 class="text-end">區間系統版本：{{ env('INTERVAL_VER', false) }}</h6>
            @endif
        </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>
                        <tr>
                            <td>
                                <input type="checkbox" name="ez" id="ez">速審模式
                            </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>
        function changeUnreport(element) {
            // $('.slide-link[data-slide="0"]').addClass('active'); 範例 取data-value
            let id = element.getAttribute("data-vioId");
            let unreportreason = $('#handleunreport_' + id).val();
            let btn_report = $('.btn-update-photo[data-vioId="' + id + '"]');
            let btn_unreport = $('.btn-delete-photo[data-vioId="' + id + '"]');
            // console.log(btn_report,btn_unreport);
            if (unreportreason === "") {
                btn_report.removeClass("disabled");
                btn_unreport.addClass("disabled");
            } else {
                btn_report.addClass("disabled");
                btn_unreport.removeClass("disabled");
            }

            const otherReasonInput = document.getElementById('otherReason_' + element.dataset.vioid);
            if (element.value === '其他') {
                otherReasonInput.style.display = 'block';
            } else {
                otherReasonInput.style.display = 'none';
            }
        }
        //點按 編輯的ajax
        function editViolation(element) {
            let id = element.getAttribute("data-vioId");
            let editCartype = $('#handleCartype_' + id).val();
            let editCarnumber = $('#handleCarnumber_' + id).val();
            let viocode = $('#viotype_' + id).val();
            // console.log(editViolationtype,editCartype,editCarnumber);
            $.ajax({
                type: "PUT",
                url: "/api/itl/" + id,
                data: {
                    "id": id,
                    "viocode": viocode,
                    "cartype": editCartype,
                    "carnumber": editCarnumber,
                    "processcheck": 0
                },
                dataType: "json",
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: '修改成功。'
                    }).then(() => {});
                    intervalTable.ajax.reload(null, false);
                },
                error: function() {
                    //debugger
                    Swal.fire({
                        icon: 'error',
                        title: '修改失敗。'
                    });
                }
            });
        }

        //點按 舉發的ajax
        function checkViolation(element) {
            let id = element.getAttribute("data-vioId");
            let unreportreason = $('#handleunreport_' + id).val();
            // console.log(id);
            let editCartype = $('#handleCartype_' + id).val();
            let editCarnumber = $('#handleCarnumber_' + id).val();
            let viocode = $('#viotype_' + id).val();
            if (editCarnumber === "" || editCarnumber === null) {
                Swal.fire({
                    icon: 'error',
                    title: '請輸入車號。'
                });
                return;
            }
            if (viocode === null || viocode === "") {
                Swal.fire({
                    icon: 'error',
                    title: '請選擇法條。'
                });
                return;
            }
            if (unreportreason === "") {
                $.ajax({
                    type: "PUT",
                    url: "/api/itl/" + id,
                    data: {
                        "id": id,
                        "viocode": viocode,
                        "cartype": editCartype,
                        "carnumber": editCarnumber,
                        "processcheck": 1
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.success !== undefined) {
                            Swal.fire({
                                icon: 'success',
                                title: '舉發成功。'
                            }).then(() => {});
                        }
                        intervalTable.ajax.reload(null, false);
                    },
                    error: function() {
                        //debugger
                        Swal.fire({
                            icon: 'error',
                            title: '舉發失敗。'
                        });
                    }
                });
            }
        }
        //點按 不舉發的ajax
        function unReportViolation(element) {
            let id = element.getAttribute("data-vioId");
            // console.log(id);
            let editViolationtype = $('#handleViolationtype_' + id).val();
            let editCartype = $('#handleCartype_' + id).val();
            let editCarnumber = $('#handleCarnumber_' + id).val();
            let unreportreason = $('#handleunreport_' + id).val();
            // Check if "其他" is selected and use the input value if so
            if (unreportreason === '其他') {
                unreportreason = $('#otherReason_' + id).val();
            }
            if (unreportreason !== "") {
                // console.log(editViolationtype,editCartype,editCarnumber);
                $.ajax({
                    type: "PUT",
                    url: "/api/itl/" + id,
                    data: {
                        "id": id,
                        "cartype": editCartype,
                        "carnumber": editCarnumber,
                        "violationtype": editViolationtype,
                        "processcheck": 2,
                        "unreportreason": unreportreason
                    },
                    dataType: "json",
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: '不舉發成功。'
                        }).then(() => {});
                        intervalTable.ajax.reload(null, false);
                    },
                    error: function() {
                        //debugger
                        Swal.fire({
                            icon: 'error',
                            title: '不舉發失敗。'
                        });
                    }
                });
            }
        }
        // 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 col-md-6'li><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'p>>",
                // 語系設定 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 = 0;
                    },
                    'error': function() {
                        // intervalTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 3]
                    },
                    {
                        className: "dt-start",
                        targets: [1, 2, 4, ]
                    },

                ],
                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: 'merge_picture',
                        title: '違規照片',
                        orderable: false,
                        "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: 'speed',
                        title: '案件數據',
                        width: '150px',
                        render: function(data, type, row) {
                            return `車號：${row.carnumber} <br/><br/> 速限：${row.limit_speed} km/h<br/> 車速：${row.speed} km/h  <br/>  時間：${row.diff} 秒 <br/> 距離：${row.distance}`;
                        }
                    },
                    {
                        data: 'id',
                        title: '操作',
                        width: '250px',
                        orderable: false,
                        "render": function(data, type, JsonResultRow, meta) {
                            let viocode_html = ``
                            let vio_arr = JsonResultRow.lawType;
                            for (let key in JsonResultRow.lawType) {
                                if (JsonResultRow.violationcode == undefined) {
                                    viocode_html = viocode_html +
                                        `<option value="${key}"> ${vio_arr[key]}</option>`
                                } else {
                                    if (JsonResultRow.violationcode == key) {
                                        viocode_html = viocode_html +
                                            `<option value="${key}" selected> ${vio_arr[key]}</option>`
                                    } else {
                                        viocode_html = viocode_html +
                                            `<option value="${key}"> ${vio_arr[key]}</option>`
                                    }
                                }
                            }
                            let check_btn = `
                            <button type="button" onclick="editViolation(this)" data-vioId="${JsonResultRow.id}"
                                        class="btn-edit-photo btn btn-sm btn-warning"><i class='fas fa-edit pr-1'></i> 修改</button>
                                    <button type="button" onclick="checkViolation(this)" data-vioId="${JsonResultRow.id}"
                                        class="btn-update-photo btn btn-sm btn-info"><i class='fas fa-save pr-1'></i> 舉發</button>
                                    <button type="button" onclick="unReportViolation(this)" data-vioId="${JsonResultRow.id}"
                                        class='btn-delete-photo btn btn-sm btn-danger disabled'><i class='fas fa-trash-alt pr-1'></i> 不舉發</button>
                                        `
                            // check_btn = ``
                            let normal = `
                            <div class="row ml-2">
                                <div class="col-12 col-lg-6 mt-1">
                                    <span class="handleTitle col-form-label">車號：</span>
                                    <input class="form-control" id="handleCarnumber_${JsonResultRow.id}"
                                        value="${JsonResultRow.carnumber}">
                                </div>
                                <div class="col-12 col-lg-6 mt-1">

                                    <span class="handleTitle col-form-label">車種：</span>
                                    <select id="handleCartype_${JsonResultRow.id}" name="car_type" class="form-control">
                                        <option value="${JsonResultRow.cartype}"> ${JsonResultRow.carkind}</option>
                                        <option value="1">汽車</option>
                                        <option value="3">重型機車</option>
                                        <option value="4">輕型機車</option>
                                        <option value="8">微型電動二輪車</option>

                                    </select>
                                </div>
                                <div class="col-12 col-lg-12 mt-1" style="max-width:347px">
                                    <span class="handleTitle col-form-label">法條：</span>
                                    <select id="viotype_${JsonResultRow.id}" class="form-control selectpicker" title="請選擇法條"
                                    style="/*display: none*/" data-container="body" data-style="btn-dark border text-truncate w-100"
                                        data-dropdown-align-right="auto" data-live-search="true" data-vioId="${JsonResultRow.id}">
                                        ${viocode_html}
                                    </select>
                                </div>

                                <div class="col-12 col-lg-12 mt-2">
                                    <span class="handleTitle col-form-label">不舉發理由：</span>
                                    <select id="handleunreport_${JsonResultRow.id}" onchange="changeUnreport(this)" class="form-control"
                                        data-vioId="${JsonResultRow.id}">
                                        <option> ${JsonResultRow.unreportreason}</option>
                                        @foreach (\App\Class\StaticData::$reason as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                        @foreach (\App\Class\StaticData::$reason_itl as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach

                                        <option>其他</option>
                                    </select>
                                    <input type="text" id="otherReason_${JsonResultRow.id}" class="form-control mt-2" style="display:none;" placeholder="請輸入其他理由">
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    ${check_btn}
                                </div>
                            </div>`;

                            if (JsonResultRow.faildata == 1) {
                                let fail_btn =  `
                                 <div class="col-12 col-lg-12 mt-2">
                                    <span class="handleTitle col-form-label">不舉發理由：</span>
                                    <select id="handleunreport_${JsonResultRow.id}" onchange="changeUnreport(this)" class="form-control"
                                        data-vioId="${JsonResultRow.id}">
                                        <option>校時異常</option>
                                    </select>
                                </div>
                            <div class="d-flex justify-content-between mt-1">
                                    <button type="button" onclick="unReportViolation(this)" data-vioId="${JsonResultRow.id}"
                                        class='btn-delete-photo btn btn-sm btn-danger'><i class='fas fa-trash-alt pr-1'></i> 不舉發</button>
                                </div>
                                `
                                return `${fail_btn}`
                            } else {
                                return normal;
                            }
                        }
                    },

                ],
                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();
            });
            // if #ez is checked then hide some columns
            $('#ez').click(function() {
                if ($(this).is(':checked')) {
                    intervalTable.columns([0, 1, 2, ]).visible(false);
                } else {
                    intervalTable.columns([0, 1, 2, ]).visible(true);
                }
            });

        });
    </script>
@stop