@extends('system.layouts.app')
@section('title', '違規停車統計清冊')
@section('css')
    @parent
    <!-- DataTable 用於v2的新版-->
    <link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}">

    <style>
        /* 修改 Today 按鈕文字顏色 */
        #datetimepicker .btn-today {
            color: white;
        }

        /* 修改 Clear 按鈕文字顏色 */
        #datetimepicker .btn-clear {
            color: white;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid mt-5" 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 mt-4 mb-2">
                <div class="col-12">
                    <table>
                        <tr>
                            <td class="">資料類型：</td>
                            <td>
                                <select id="statisticstype" class="form-control searchColumns selectpicker"
                                    data-style="btn-dark border" data-container="body" data-width="fit"
                                    data-dropdown-align-right="auto" data-live-search="false">
                                    <option value="99">選擇資料類型</option>
                                    <option value="1">違規件數清冊</option>
                                    <option value="2">違規件數統計</option>
                                    <option value="3">違規時段件數統計</option>

                                </select>

                            </td>
                            <td class="ps-2">審查狀態：</td>
                            <td>
                                <select id="processCheck" class="form-control searchColumns selectpicker"
                                    data-style="btn-dark border" data-container="body" data-width="fit"
                                    data-dropdown-align-right="auto" data-live-search="false">
                                    <option value="">選擇審查狀態</option>
                                    <option value="99">全部</option>
                                    <option value="0">未審查</option>
                                    <option value="1">已審查</option>
                                    <option value="2">不舉發</option>

                                </select>
                                {{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}}
                            </td>
                            <td class="ps-2">起迄時間:</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="violation_type" class="form-control searchColumns selectpicker"
                                    data-style="btn-dark border" data-container="body" data-width="fit"
                                    data-dropdown-align-right="auto" data-live-search="false">
                                    <option value="">選擇違規類型</option>
                                    @isset($violationtype)
                                        @foreach ($violationtype as $item)
                                            <option value="{{ $item }}">{{ $item }}</option>
                                        @endforeach
                                    @endisset
                                </select>
                                {{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}}
                            </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="false">
                                    <option value="">選擇違規地點</option>
                                    @isset($serialNumber)
                                        @foreach ($serialNumber as $item)
                                            <option value="{{ $item->serialnumber }}">{{ $item->serialnumber }}
                                                {{ $item->location }}</option>
                                        @endforeach
                                    @endisset
                                </select>
                                {{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}}
                            </td>

                            <td class="ps-2 d-flex">
                                <input type='button' id="btn_search" class="form-control " value="搜尋">
                                <input type='button' id="btn_clear" class="form-control " value="清除">
                                <input type='button' id="btn_export" class="form-control " value="匯出">
                            </td>
                        </tr>
                        <tr style="display:none">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <input type="checkbox" name="option[showBorder]" value="1">顯示格線

                                <input type="checkbox" name="option[showPN]" value="1">顯示頁次(列印)
                                <br>
                                <input type="radio" name="option[printDef]" value="0">直式(列印)
                                <input type="radio" name="option[printDef]" value="1" checked>橫式(列印)
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12 statisticstype-1" style="display: none">
                    <table id="vpk_statistics_table_1" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                {{-- 設備編號 違規地點 違規類型 違規時間 車牌 --}}
                                <th>ID</th>
                                <th>違規時段</th>
                                <th>設備編號</th>
                                <th>違規地點</th>
                                <th>車號</th>
                                <th>違規類型</th>
                                {{-- <th>違規時間</th> --}}
                                {{-- <th>統計</th> --}}
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="col-12 statisticstype-2" style="display: none">
                    <table id="vpk_statistics_table_2" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                {{-- 設備編號 違規地點 違規類型 違規時段 統計 --}}
                                {{-- 設備編號 違規地點 違規類型 統計 --}}
                                {{-- 設備編號 違規地點 違規類型 違規時間 車牌 --}}
                                <th>ID</th>
                                <th>設備編號</th>
                                <th>違規地點</th>
                                <th>車種</th>
                                <th>違規類型</th>
                                <th>統計</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="col-12 statisticstype-3" style="display: none">
                    <table id="vpk_statistics_table_3" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>設備編號</th>
                                <th>違規地點</th>
                                <th>違規時段</th>
                                <th>違規類型</th>
                                <th>統計</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

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

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        let vpk_statistics_table_1 = $('#vpk_statistics_table_1')
        let vpk_statistics_table_2 = $('#vpk_statistics_table_2')
        let vpk_statistics_table_3 = $('#vpk_statistics_table_3')

        // Get the statisticstype select element
        let statisticstypeSelect = $('#statisticstype');
        let selectedValue = statisticstypeSelect.val();

        $(document).ready(function() {
            $.fn.dataTableExt.sErrMode = 'throw';

            // input 加入時間選擇
            $('input#search_fromdate').datetimepicker({
                format: 'YYYY-MM-DD'
            });
            $('input#search_todate').datetimepicker({
                format: 'YYYY-MM-DD'
            });

            vpk_statistics_table_1 = $('#vpk_statistics_table_1').DataTable({
                "dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>",
                // 語系設定 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,
                // 處理中 是否顯示
                processing: true,
                //
                serverSide: true,
                deferLoading: 0, // here

                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.vpk.statistics') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let to_date = $('#search_todate').val();
                        let location = $('#location').val();
                        let processCheck = $('#processCheck').val();
                        data.processCheck = processCheck;
                        // 放入data 讓ajax送出
                        data.searchByFromdate = from_date;
                        data.searchByTodate = to_date;
                        data.location = location;
                        data.statisticstype = selectedValue;

                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [4]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4]
                    }
                ],
                order: [
                    [1, "desc"]
                ],
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id',
                        visible: false,
                    },
                    {
                        data: 'datatime'
                    },
                    {
                        data: 'serialnumber'
                    },
                    {
                        data: 'location'
                    },
                    {
                        data: 'carnumber'
                    },
                    {
                        data: 'violationtype'
                    },
                ],
            });
            vpk_statistics_table_2 = $('#vpk_statistics_table_2').DataTable({
                "dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>",
                // 語系設定 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,
                // 處理中 是否顯示
                processing: true,
                //
                serverSide: true,
                deferLoading: 0, // here
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.vpk.statistics') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let to_date = $('#search_todate').val();
                        let location = $('#location').val();
                        let processCheck = $('#processCheck').val();
                        data.processCheck = processCheck;
                        // 放入data 讓ajax送出
                        data.searchByFromdate = from_date;
                        data.searchByTodate = to_date;
                        data.location = location;
                        data.statisticstype = selectedValue;

                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: [4]
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: [0, 1, 2, 3, 4]
                    }
                ],
                order: [
                    [1, "desc"]
                ],
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id',
                        visible: false,
                    },
                    {
                        data: 'serialnumber'
                    },
                    {
                        data: 'location'
                    },
                    {
                        data: 'cartype',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.carkind}`
                        }
                    },
                    {
                        data: 'violationtype'
                    },
                    {
                        data: 'count'
                    },
                ],
            });

            vpk_statistics_table_3 = $('#vpk_statistics_table_3').DataTable({
                "dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>",
                // 語系設定 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,
                processing: true,
                //
                serverSide: true,
                deferLoading: 0, // here
                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.vpk.statistics') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let to_date = $('#search_todate').val();
                        let location = $('#location').val();
                        let processCheck = $('#processCheck').val();
                        data.processCheck = processCheck;
                        // 放入data 讓ajax送出
                        data.searchByFromdate = from_date;
                        data.searchByTodate = to_date;
                        data.location = location;
                        data.statisticstype = selectedValue;

                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: []
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: []
                    }
                ],
                order: [
                    [1, "desc"]
                ],
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'id',
                        visible: false,
                    },
                    {
                        data: 'serialnumber'
                    },
                    {
                        data: 'location'
                    },
                    {
                        data: 'period',
                        render: function(data, type, JsonResultRow, meta) {
                            return `${JsonResultRow.period}`
                        }
                    },
                    {
                        data: 'violationtype'
                    },
                    {
                        data: 'count'
                    },

                ],
            });




            // Add an onchange event listener to the select element
            statisticstypeSelect.on('change', function() {
                // Get the selected value
                selectedValue = $(this).val();

                // Show/hide the appropriate elements based on the selected value
                if (selectedValue == 1) {
                    $('.statisticstype-1').show();
                    $('.statisticstype-2, .statisticstype-3').hide();
                } else if (selectedValue == 2) {
                    $('.statisticstype-2').show();
                    $('.statisticstype-1, .statisticstype-3').hide();
                } else if (selectedValue == 3) {
                    $('.statisticstype-3').show();
                    $('.statisticstype-1, .statisticstype-2').hide();
                }
            });



            // Search button
            $('#btn_search').click(function() {
                console.log($('#processCheck').val())
                if (selectedValue == 1) {
                    vpk_statistics_table_1.draw();
                } else if (selectedValue == 2) {
                    vpk_statistics_table_2.draw();
                } else if (selectedValue == 3) {
                    vpk_statistics_table_3.draw();
                }

            });
            $('#btn_clear').click(function() {
                $('input.searchColumns').val("");
                $('select.searchColumns').val("");
                if (selectedValue == 1) {
                    vpk_statistics_table_1.draw();
                } else if (selectedValue == 2) {
                    vpk_statistics_table_2.draw();
                } else if (selectedValue == 3) {
                    vpk_statistics_table_3.draw();
                }
            });

            $('#btn_export').click(function() {
                let typeVal = $('#statisticstype').val()
                let showBorder = $('input[name="option[showBorder]"]:checked').val()
                let showPN = $('input[name="option[showPN]"]:checked').val()
                let printDef = $('input[name="option[printDef]"]:checked').val()

                if (typeVal != 99) {
                    // console.log($('#processCheck').val())
                    let processCheck = $('#processCheck').val();
                    $.ajax({
                        url: "{{ route('api.vpk.statistics.export') }}",
                        method: 'post',
                        data: {
                            searchByFromdate: $('#search_fromdate').val(),
                            searchByTodate: $('#search_todate').val(),
                            location: $('#location').val(),
                            statisticstype: selectedValue,
                            export: 1,
                            processCheck: processCheck,
                            showBorder: showBorder,
                            showPN: showPN,
                            printDef: printDef
                        },
                        success: function(res) {
                            // console.log(res)
                            if (res.status == 0) {
                                alert(res.msg)
                            } else {
                                window.location.href = res.url
                            }
                        },
                        error: function(res) {
                            console.log(res)
                        }
                    })
                }


            });


            // input 加入時間選擇 today按鈕 以及清除按鈕
            $('input#search_fromdate').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
            $('input#search_todate').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
        })
    </script>
@endsection