@extends('system.layouts.app')

@section('title', '違停資料管理')
@section('name', 'violationpark.manage')

@section('css')
    @parent
    <!-- DataTable 用於v2的新版-->
    <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-end">
                <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>地點：</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>
                                <input type='button' id="btn_search" class="form-control " value="搜尋">
                            </td>
                            <td class="ps-2">
                                <input type='button' id="btn_download" class="form-control " value="下載">
                                <input type='button' id="btn_download2" class="form-control disabled" disabled
                                    value="請稍後" style="display: none">
                            </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="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>設置地點</th>
                                <th width='100'>車號</th>
                                <th width='200'>違規照片1</th>
                                <th width='200'>違規照片2</th>
                                <th class="text-center" width='50'>影片</th>
                                <th width='100'>還原</th>
                            </tr>
                        </thead>
                        <tbody>
                    </table>
                </div>
            </div>

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

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


    @section('js')
        @parent

        <!-- DataTable 用於v2的新版-->
        <script src="{{ asset('js/v2/datatables.min.js') }}"></script>
        <script>

            const config = {
                search: true, // Toggle search feature. Default: false
                creatable: false, // Creatable selection. Default: false
                clearable: false, // Clearable selection. Default: false
                maxHeight: '360px', // Max height for showing scrollbar. Default: 360px
                size: '', // Can be "sm" or "lg". Default ''
            }
            let violationparkingTable = $('#violationparkingTable')
            // DataTable 初始化

            //點按 重新審核的ajax
            function resetViolation(element) {
                id = element.getAttribute("data-vioId");
                // console.log(id);
                $.ajax({
                    type: "PUT",
                    url: "/api/vpk/" + id,
                    data: {
                        "id": id,
                        "processcheck": 3
                    },
                    dataType: "text",
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: '送回重審成功。'
                        }).then(() => {});
                        //成功後重新刷頁面
                        violationparkingTable.ajax.reload(null, false);
                    },
                    error: function() {
                        //debugger
                        Swal.fire({
                            icon: 'error',
                            title: '送回重審失敗。'
                        });
                    }
                });
            }

            //點按 下載的ajax
            function DownloadOverSpeedRed() {
                let timerInterval
                let fileNum = $("#violationparkingTable_info").text().split(" ")[5]
                Swal.fire({
                    icon: 'success',
                    title: '檔案壓縮中，請稍後!',
                    html: '您的檔案預計 <b></b> 秒後壓縮完成.',
                    timer: 2000 + 575 * fileNum,
                    timerProgressBar: true,
                    didOpen: () => {
                        Swal.showLoading()
                        const b = Swal.getHtmlContainer().querySelector('b')
                        timerInterval = setInterval(() => {
                            b.textContent = Math.floor(Swal.getTimerLeft() / 1000)
                        }, 100)
                    },
                    willClose: () => {
                        clearInterval(timerInterval)
                    }
                }).then((result) => {
                    /* Read more about handling dismissals below */
                    if (result.dismiss === Swal.DismissReason.timer) {
                        console.log('I was closed by the timer')
                    }
                })
                // 讀取搜尋值
                var from_date = $('#search_fromdate').val();
                var to_date = $('#search_todate').val();
                var location = $('#location').val();
                var carnumber = $('#carnumber').val();
                // console.log(from_date);
                $.ajax({
                    type: "POST",
                    url: "{{route('api.vpk.downloadZipPicture')}}",
                    data: {
                        "searchByFromdate": from_date,
                        "searchByTodate": to_date,
                        "location": location,
                        "carnumber": carnumber,
                    },
                    dataType: "text",
                    success: function(response) {
                        // console.log(response.data);
                        if (response == "沒有檔案") {
                            Swal.fire({
                                icon: 'error',
                                title: '檔案下載失敗 ' + response + '。'
                            });
                        } else {
                            fileName = response;
                            link = response;
                            body = $("body");
                            var a = $("<a />");
                            a.attr("download", fileName);
                            a.attr("href", "/" + link);
                            body.append(a);
                            a[0].click();
                            body.remove(a);
                        }

                    },
                    error: function(response) {
                        //debugger
                        Swal.fire({
                            icon: 'error',
                            title: '檔案下載失敗' + response + '。'
                        });
                    }
                });
            }

            $(document).ready(function() {
                $.fn.dataTableExt.sErrMode = 'throw';
                // input 加入時間選擇
                $('input.date').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 =1 已審
                        'url': "{{ route('api.vpk.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 = 1;
                            // 放入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) {
                                return '<img onclick="imagePopUp(this)" data-bs-toggle="modal" data-bs-target="#imgPop" width="280" 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="280" 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-lg btn-danger"><i class="fab fa-youtube"></i></button>';
                            }
                        },
                        // {
                        //     "render": function(data, type, JsonResultRow, meta) {
                        //         return '';
                        //     }
                        // },
                        {
                            "render": function(data, type, JsonResultRow, meta) {
                                return '<button type="button" onclick="resetViolation(this)" data-vioId="' +
                                    JsonResultRow.id + '" class="btn-reset-photo btn btn-sm btn-danger">\
                                                        <i class="fas fa-undo-alt pr-1"></i>案件重審</button>';
                            }
                        },
                    ]
                });

                // Search button
                $('#btn_search').click(function() {
                    violationparkingTable.draw();
                });
                $('#btn_download').click(function() {
                    violationparkingTable.draw();
                    document.getElementById("btn_download").style.display = "none"; //隱藏
                    document.getElementById("btn_download2").style.display = ""; //顯示


                    DownloadOverSpeedRed();
                    setTimeout(function() {
                        document.getElementById("btn_download").style.display = ""; //顯示
                        document.getElementById("btn_download2").style.display = "none"; //隱藏
                    }, 5000);
                });
                $('#btn_clear').click(function() {
                    $('input.searchColumns').val("");
                    $('select.searchColumns').val("");
                    violationparkingTable.draw();
                });
            });
        </script>
    @stop