@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="4">違規件數統計</option>
                                    <option value="5">違規時段件數統計</option>
                                </select>
                            </td>
                            <td class="ps-2">選擇年份:</td>
                            <td style="position: relative;">
                                <input type='text' id='search_fromdate' class="form-control searchColumns" placeholder='年份' value="2024">
                            </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">
                                <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>
                            <td class="ps-2">
                                <input type='button' id="btn_export" class="form-control " value="匯出">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12 statisticstype-4" style="display: none">
                    <table id="ms_statistics_table_4" 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>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="col-12 statisticstype-5" style="display: none">
                    <table id="ms_statistics_table_5" 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 ms_statistics_table_4 = $('#ms_statistics_table_4')
        let ms_statistics_table_5 = $('#ms_statistics_table_5')

        // 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',
            });

            ms_statistics_table_4 = $('#ms_statistics_table_4').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.ms.statistics') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let location = $('#location').val();
                        let processCheck = $('#processCheck').val();
                        data.processCheck = 1;
                        // 放入data 讓ajax送出
                        data.searchByYear = from_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'
                    },
                    {
                        data: 'last_count'
                    }
                ],
            });

            ms_statistics_table_5 = $('#ms_statistics_table_5').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.ms.statistics') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let location = $('#location').val();
                        let processCheck = $('#processCheck').val();
                        // 放入data 讓ajax送出
                        data.searchByYear = from_date;
                        data.location = location;
                        data.statisticstype = selectedValue;
                        data.processCheck = 1;

                    },
                    '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 == 4) {
                    $('.statisticstype-4').show();
                    $('.statisticstype-5').hide();
                    ms_statistics_table_4.draw();
                } else if (selectedValue == 5) {
                    $('.statisticstype-5').show();
                    $('.statisticstype-4').hide();
                    ms_statistics_table_5.draw();
                }
            });



            // Search button
            $('#btn_search').click(function() {
                if (selectedValue == 4) {
                    ms_statistics_table_4.draw();
                } else if (selectedValue == 5) {
                    ms_statistics_table_5.draw();
                }

            });
            $('#btn_clear').click(function() {
                $('input.searchColumns').val("");
                $('select.searchColumns').val("");
                if (selectedValue == 4) {
                    ms_statistics_table_4.draw();
                } else if (selectedValue == 5) {
                    ms_statistics_table_5.draw();
                }
            });

            $('#btn_export').click(function() {
                let typeVal = $('#statisticstype').val()
                if(typeVal != 99){
                    // console.log($('#processCheck').val())
                    let processCheck = $('#processCheck').val();
                    $.ajax({
                        url: "{{ route('api.ms.statistics.export') }}",
                        method: 'post',
                        data: {
                            searchByYear: $('#search_fromdate').val(),
                            location: $('#location').val(),
                            statisticstype: selectedValue,
                            export: 1,
                            processCheck: 1
                        },
                        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