@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 mt-5" style="min-height:calc(100vh-60px) !important">
        <div class="w-100">
            <h2 class="title">舉發件數差異表</h2>
        </div>
        <div class="col-12">
            <!-- Date Filter -->
            <div class="row justify-content-center mt-4 mb-2">
                <div class="col-12">
                    <div class="row justify-content-start">
                        <!-- Radio Btn x 3 -->
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="group_at" id="inlineRadio2"
                                    value="分局" checked>
                                <label class="form-check-label" for="inlineRadio2">分局</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="group_at" id="inlineRadio1"
                                    value="使用單位">
                                <label class="form-check-label" for="inlineRadio1">使用單位</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="group_at" id="inlineRadio3"
                                    value="路口">
                                <label class="form-check-label" for="inlineRadio3">路口</label>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center mt-2">
                        <div class="col-12">
                            <div class="row justify-content-center">
                                <div class="col-12 col-md-12">
                                    <div class="input-group mb-3" id='s1-g'>
                                        <span class="input-group-text" id="basic-s1">分局</span>
                                        <select id="s1" class="form-control selectpicker searchColumns"
                                            title="選擇分局" data-style="btn-dark border" data-container="body"
                                            data-dropdown-align-right="auto" multiple>
                                            @foreach ($precinct as $item)
                                                <option value="{{ $item }}">{{ $item }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="input-group mb-3" id='s2-g' style="display: none;">
                                        <span class="input-group-text" id="basic-s2">使用單位</span>
                                        <select id="s2" class="form-control selectpicker searchColumns"
                                            title="選擇使用單位" data-style="btn-dark border" data-container="body"
                                            data-dropdown-align-right="auto" multiple>
                                            @foreach ($station as $item)
                                                <option value="{{ $item }}">{{ $item }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="input-group mb-3" id='s3-g' style="display: none;">
                                        <span class="input-group-text" id="basic-s3">路口</span>
                                        <select id="s3" class="form-control selectpicker searchColumns"
                                            title="選擇路口" data-style="btn-dark border" data-container="body"
                                            data-dropdown-align-right="auto" multiple>
                                            @foreach ($location as $item)
                                                <option value="{{ $item }}">{{ $item }}
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center mt-2">
                        <div class="col-12">
                            <div class="row justify-content-center">
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="basic-addon1">起始日期</span>
                                        <input type="text" class="form-control searchColumns" id="search_fromdate"
                                            aria-describedby="basic-addon1" required>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="basic-addon1">結束日期</span>
                                        <input type="text" class="form-control searchColumns" id="search_todate"
                                            aria-describedby="basic-addon1" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center mt-2">
                        <div class="col-12">
                            <div class="row justify-content-center">
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="basic-addon1">起始日期2</span>
                                        <input type="text" class="form-control searchColumns" id="search_fromdate2"
                                            aria-describedby="basic-addon1" required>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="basic-addon1">結束日期2</span>
                                        <input type="text" class="form-control searchColumns" id="search_todate2"
                                            aria-describedby="basic-addon1" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center mt-2">
                        <div class="col-12 col-md-12">
                            <div class="row justify-content-center">
                                <div class="col-12 col-md-4">
                                    <button type="button" class="btn btn-primary w-100" id="btn_search">搜尋</button>
                                </div>
                                <div class="col-12 col-md-4">
                                    <button type="button" class="btn btn-primary w-100" id="btn_clear">清除</button>
                                </div>
                                <div class="col-12 col-md-4">
                                    <button type="button" class="btn btn-primary w-100" id="btn_export">匯出</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 pt-2">
                            <div class="row justify-content-end">
                                <div class="col-auto">
                                    <input type="checkbox" name="option[showBorder]" value="1">顯示格線
                                </div>
                                <div class="col-auto">
                                    <input type="checkbox" name="option[showPN]" value="1">顯示頁次(列印)
                                </div>
                                <div class="col-auto">
                                    <input type="radio" name="option[printDef]" value="0">直式(列印)
                                    <input type="radio" name="option[printDef]" value="1" checked>橫式(列印)
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-12 statisticstype-1">
            <table id="statistics_table_1" class="table table-striped table-bordered" style="width:100%">
                <thead>
                </thead>
                <tbody></tbody>
            </table>
        </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 statistics_table_1 = $('#statistics_table_1')

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

        $(document).ready(function() {
            $.fn.dataTableExt.sErrMode = 'throw';
            let group_at = $('input[name="group_at"]:checked').val();
            // 預設分局 radio btn 設定 column

            // console.log(group_at)


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

            statistics_table_1 = $('#statistics_table_1').DataTable({
                "dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' l>>" +
                    "<'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: true,
                // 處理中 是否顯示
                processing: true,
                //
                serverSide: true,
                deferLoading: 0, // here

                ajax: {
                    //processcheckStatus =0 未審
                    'url': "{{ route('api.global.statistics') }}",
                    'data': function(data) {
                        // 讀取搜尋值
                        let from_date = $('#search_fromdate').val();
                        let to_date = $('#search_todate').val();
                        let from_date2 = $('#search_fromdate2').val();
                        let to_date2 = $('#search_todate2').val();

                        let group_at = $('input[name="group_at"]:checked').val();
                        let s1 = $('#s1').val();
                        let s2 = $('#s2').val();
                        let s3 = $('#s3').val();
                        // 放入data 讓ajax送出
                        data.searchByFromdate = from_date;
                        data.searchByTodate = to_date;
                        data.searchByFromdate2 = from_date2;
                        data.searchByTodate2 = to_date2;
                        data.group_at = group_at;
                        data.s1 = s1;
                        data.s2 = s2;
                        data.s3 = s3;
                        data.reportType = 3;
                    },
                    'error': function() {
                        // violationparkingTable.draw();
                    },
                },
                // 設定不提供排序條件的欄位(例如圖片)
                columnDefs: [{
                        orderable: false,
                        targets: []
                    }, {
                        visible: false,
                        targets: []
                    },
                    {
                        className: "dt-center",
                        targets: []
                    },
                ],
                order: [
                    [0, "desc"]
                ],
                columns: [
                    // 格式 data: 後端傳遞過來的 欄位名稱
                    {
                        data: 'group_location',
                        title: '分局',
                        visible: true

                    },
                    {
                        data: 'group_location',
                        title: '使用單位',
                        visible: false
                    },
                    {
                        data: 'group_location',
                        title: '路口',
                        visible: false
                    },
                    @foreach ($titles as $title)
                    {
                        data: '{{$title}}',
                        title: '{{$title}}',
                        @if($title == '未處理比例')
                        render: function(data, type, row) {
                            console.log(data,row)
                            // data = 40.00% 判斷> 75% 顯示紅色
                            if (parseFloat(data) > 75) {
                                return '<span style="color:red">' + data + '</span>'
                            } else {
                                return data
                            }
                        }
                        @endif
                    },
                    @endforeach


                ],
                drawCallback: function(settings) {
                    let groupValue = $('input[name="group_at"]:checked').val();
                    let dataTable = this.api();
                    if (groupValue == '分局') {
                        dataTable.column(0).visible(true);
                        dataTable.column(1).visible(false);
                        dataTable.column(2).visible(false);
                    } else if (groupValue == '使用單位') {
                        dataTable.column(0).visible(false);
                        dataTable.column(1).visible(true);
                        dataTable.column(2).visible(false);
                    } else if (groupValue == '路口') {
                        dataTable.column(0).visible(false);
                        dataTable.column(1).visible(false);
                        dataTable.column(2).visible(true);
                    }
                }
            });


            // Search button
            $('#btn_search').click(function() {
                // 如果日期為空值
                if ($('#search_fromdate').val() == '' || $('#search_todate').val() == '' || $('#search_fromdate2').val() == '' || $('#search_todate2').val() == ''){
                    Swal.fire({
                        icon: 'error',
                        title: '請填寫完整的時間區間'
                    });
                    return
                }
                statistics_table_1.draw();
            });
            $('#btn_clear').click(function() {
                $('input.searchColumns').val("");
                $('select.searchColumns').val("");
                // statistics_table_1.draw();

            });

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

                $.ajax({
                    url: "{{ route('api.global.statistics.export') }}",
                    method: 'post',
                    data: {
                        searchByFromdate: $('#search_fromdate').val(),
                        searchByTodate: $('#search_todate').val(),
                        searchByFromdate2: $('#search_fromdate2').val(),
                        searchByTodate2: $('#search_todate2').val(),
                        group_at: $('input[name="group_at"]:checked').val(),
                        s1: $('#s1').val(),
                        s2: $('#s2').val(),
                        s3: $('#s3').val(),
                        reportType: 3,
                        export: 1,
                        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[name="group_at"] on change
            $('input[name="group_at"]').on('change', function() {
                group_at = $(this).val()
                if (group_at == '分局') {
                    $('#s1-g').show()
                    $('#s2-g').hide()
                    $('#s3-g').hide()
                } else if (group_at == '使用單位') {
                    $('#s1-g').hide()
                    $('#s2-g').show()
                    $('#s3-g').hide()
                } else if (group_at == '路口') {
                    $('#s1-g').hide()
                    $('#s2-g').hide()
                    $('#s3-g').show()
                }
            });
            // 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
            });
            $('input#search_fromdate2').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
            $('input#search_todate2').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
        })
    </script>
@endsection