@extends('system.layouts.app')

@section('title', '闖紅違規案件審查')
@section('name', 'red.index')

@section('css')
    @parent
    <link rel="stylesheet" href="{{ asset('css/v2/datatables.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">闖紅違規案件審查-未審 </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 ($serialNumber as $item)
                                        <option value="{{ $item->serialnumber }}">{{ $item->serialnumber }}
                                            {{ $item->location }}</option>
                                    @endforeach
                                </select>
                                {{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}}
                            </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="violationparkingTable" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th width='50'>案號</th>
                                <th width='80'>時間</th>
                                <th width='90'>攝影機編號</th>
                                <th width='120'>設置地點</th>
                                <th width='100'>車號</th>
                                <th>違規照片1</th>
                                <th>違規照片2</th>
                                <th class="text-center" width='50'>影片</th>
                                <th width='300'>處理狀態</th>
                            </tr>
                        </thead>
                        <tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 圖片(image)彈出視窗 -->
    @include('system/popup/imagePop')
    @include('system/popup/imagePopWithCut2')
    <!-- 圖片(image)彈出視窗 -->

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


@section('js')
    @parent
    <script src="{{ asset('js/v2/datatables.min.js') }}"></script>
    <script>
        let violationparkingTable = $('#violationparkingTable')
        let vio_arr = [];
        @foreach ($vio_arr as $item)
            vio_arr["{{ $item['violationcode'] }}"] = "{{ $item['display_name'] }}"
        @endforeach

        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 editViolationtype = $('#handleViolationtype_' + id).val();
            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/red/" + id,
                data: {
                    "id": id,
                    "viocode": viocode,
                    "cartype": editCartype,
                    "carnumber": editCarnumber,
                    "violationtype": editViolationtype,
                    "processcheck": 0
                },
                dataType: "json",
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: '修改成功。'
                    }).then(() => {});
                    violationparkingTable.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 editViolationtype = $('#handleViolationtype_' + id).val();
            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/red/" + id,
                    data: {
                        "id": id,
                        "viocode": viocode,
                        "cartype": editCartype,
                        "carnumber": editCarnumber,
                        "violationtype": editViolationtype,
                        "processcheck": 1
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.success !== undefined) {
                            Swal.fire({
                                icon: 'success',
                                title: '舉發成功。'
                            }).then(() => {});
                        }
                        violationparkingTable.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/red/" + 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(() => {});
                        violationparkingTable.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'
            });


            violationparkingTable = $('#violationparkingTable').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.red.index') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let to_date = $('#search_todate').val();
                        let location = $('#location').val();
                        let carnumber = $('#carnumber').val();
                        let processcheckStatus = 0;
                        // 放入data 讓ajax送出
                        data.searchByFromdate = from_date;
                        data.searchByTodate = to_date;
                        data.location = location;
                        data.carnumber = carnumber;
                        data.processcheckStatus = processcheckStatus;
                        // console.log(data);
                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [4, 5, 6, 7]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4, 5, 6]
                    }
                ],
                order: [
                    [1, "desc"]
                ],
                // 設定 顯示在Table上的欄位
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id'
                    },
                    {
                        data: 'datatime'
                    },
                    {
                        data: 'serialnumber'
                    },
                    {
                        data: 'location'
                    },
                    {
                        data: 'carnumber'
                    },
                    // 特殊格式 除了單純的資料 可能還需要其他HTML TAG去搭配使用 例如img video 之類的
                    {
                        "render": function(data, type, JsonResultRow, meta) {
                            path = JsonResultRow.picture
                            if (JsonResultRow.mergepic != 0) {
                                return `<img onclick="imagePopUpCut(this,'${path}')"
                                                        data-bs-toggle="modal" data-bs-target="#imgPop2" width="100%"
                                                        src="/${JsonResultRow.mergepic}?time=${new Date()}" alt=""/>`;
                            }
                            return `<img onclick="imagePopUpCut(this,'${path}')"
                                        data-bs-toggle="modal" data-bs-target="#imgPop2" width="100%"
                                        src="/getViolationImage/ParsingFiles*${JsonResultRow.picture}" alt=""/>`;
                        }
                    },
                    {
                        "render": function(data, type, JsonResultRow, meta) {
                            return `<img onclick="imagePopUp(this)"
                                    data-bs-toggle="modal" data-bs-target="#imgPop" width="100%"
                                    src="/getViolationImage/ParsingFiles*${JsonResultRow.picture2}" alt=""/>`;
                        }
                    },
                    {
                        "render": function(data, type, JsonResultRow, meta) {
                            return `<button onclick="videoPopUp(this)"
                                    data-bs-toggle="modal" data-bs-target="#vdoPop"
                                    data-vdopath="/getViolationVideo/ParsingFiles*${JsonResultRow.video}" type="button"
                                    style="font-size: 200%" class="btn btn-lg btn-danger">
                                    <i class="fa-brands fa-youtube"></i>
                                    </button>`;
                        }
                    },
                    {
                        "render": function(data, type, JsonResultRow, meta) {
                            let viocode_html = ``
                            for (let key in vio_arr) {
                                if (JsonResultRow.violationcode == undefined) {
                                    if (key == '5601010120' && JsonResultRow.violationtype ==
                                        '違規停車') {
                                        viocode_html = viocode_html +
                                            `<option value="${key}" selected>[${key}] ${vio_arr[key]}</option>`
                                    } else {
                                        viocode_html = viocode_html +
                                            `<option value="${key}">[${key}] ${vio_arr[key]}</option>`
                                    }
                                } else {
                                    if (JsonResultRow.violationcode == key) {
                                        viocode_html = viocode_html +
                                            `<option value="${key}" selected>[${key}] ${vio_arr[key]}</option>`
                                    } else {
                                        viocode_html = viocode_html +
                                            `<option value="${key}">[${key}] ${vio_arr[key]}</option>`
                                    }
                                }
                            }
                            return `
                            <div class="row ml-2">
                                <div class="col-12 col-lg-6 mt-1">
                                    <span class="handleTitle col-form-label">違規類型：</span>
                                    <select id="handleViolationtype_${JsonResultRow.id}" class="form-control">
                                        <option> ${JsonResultRow.violationtype}</option>
                                        <option>違規停車</option>
                                        <option>佔用公車停靠區</option>
                                        <option>併排停車</option>
                                        <option>紅線路口多功能</option>
                                    </select>
                                </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-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="handleunreport_${JsonResultRow.id}" onchange="changeUnreport(this)" class="form-control"
                                        data-vioId="${JsonResultRow.id}">
                                        <option>${JsonResultRow.unreportreason}</option>
                                        @foreach (\App\Class\StaticData::$reason_red 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-1">
                                    <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>
                                </div>
                            </div>`;
                        }
                    },
                ],
                initComplete: function() {
                    $('.selectpicker').selectpicker();

                },
                drawCallback: function(settings) {
                    $('.selectpicker').selectpicker();
                }
                // stripeClasses:['striped-odd','striped-even']
            });

            // Search button
            $('#btn_search').click(function() {
                violationparkingTable.draw();
            });
            $('#btn_clear').click(function() {
                $('input.searchColumns').val("");
                $('select.searchColumns').val("");
                violationparkingTable.draw();
            });

        });
        // if #ez is checked then hide some columns
        $('#ez').click(function() {
            if ($(this).is(':checked')) {
                violationparkingTable.columns([0, 1, 2, 3, 4]).visible(false);
            } else {
                violationparkingTable.columns([0, 1, 2, 3, 4]).visible(true);
            }
        });
    </script>
@stop