@extends('system.layouts.app')
@section('title', '數據分析')
@section('css')
    @parent
    <!-- DataTable 用於v2的新版-->
    <link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}">
    <!-- Styles -->
    <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="ps-2">違規類型：</td>
                            <td>
                                <select id="violation_type1" 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="location1" 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">起迄時間:</td>
                            <td style="position: relative;">
                                <input type='text' id='search_fromdate1' class="form-control date searchColumns"
                                    placeholder='起' value="">
                            </td>
                            <td style="position: relative;">
                                <input type='text' id='search_todate1' class="form-control date searchColumns"
                                    placeholder='訖' value="">
                            </td>


                            <td class="ps-2">
                                <input type='button' id="btn_search_analysis1" class="form-control " value="搜尋">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pb-0 pt-2">
                            <h5 class="card-title text-center">違規類型數量分析-依違規類型</h5>
                        </div>
                        <div id="chartViolation" style="height: 580px"></div>
                    </div>
                </div>
            </div>

            <!-- Date Filter -->
            <div class="row justify-content-center mt-4 mb-2">
                <div class="col-12">
                    <table>
                        <tr>

                            <td class="ps-2">違規地點：</td>
                            <td>
                                <select id="location2" 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">起迄時間:</td>
                            <td style="position: relative;">
                                <input type='text' id='search_fromdate2' class="form-control date searchColumns"
                                    placeholder='起' value="">
                            </td>
                            <td style="position: relative;">
                                <input type='text' id='search_todate2' class="form-control date searchColumns"
                                    placeholder='訖' value="">
                            </td>


                            <td class="ps-2">
                                <input type='button' id="btn_search_analysis2" class="form-control " value="搜尋">
                            </td>
                            {{-- <td class="ps-2">
                                <input type='button' id="btn_clear_analysis2" class="form-control " value="清除">
                            </td> --}}
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pb-0 pt-2">
                            <h5 class="card-title text-center">違規類型數量分析-依違規地點</h5>
                        </div>
                        <div id="chartViolation2" style="height: 580px"></div>
                    </div>
                </div>
            </div>

            <!-- Date Filter -->
            <div class="row justify-content-center mt-4 mb-2">
                <div class="col-12">
                    <table>
                        <tr>
                            <td class="ps-2">違規類型：</td>
                            <td>
                                <select id="violation_type3" 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="location3" 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">起迄時間:</td>
                            <td style="position: relative;">
                                <input type='text' id='search_fromdate3' class="form-control date searchColumns"
                                    placeholder='起' value="">
                            </td>
                            <td style="position: relative;">
                                <input type='text' id='search_todate3' class="form-control date searchColumns"
                                    placeholder='訖' value="">
                            </td>


                            <td class="ps-2">
                                <input type='button' id="btn_search_analysis3" class="form-control " value="搜尋">
                            </td>
                            {{-- <td class="ps-2">
                                <input type='button' id="btn_clear_analysis3" class="form-control " value="清除">
                            </td> --}}
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pb-0 pt-2">
                            <h5 class="card-title text-center">違規類型數量分析-依違規地點</h5>
                        </div>
                        <div id="chartViolation3" style="height: 700px"></div>
                    </div>
                </div>
            </div>


        </div>
    </div>

@endsection

@section('js')
    @parent
    <!-- DataTable 用於v2的新版-->
    <script src="{{ asset('js/v2/datatables.min.js') }}"></script>
    <!-- amChart -->
    <script src="{{ asset('amcharts_4.10.38/core.js') }}"></script>
    <script src="{{ asset('amcharts_4.10.38/charts.js') }}"></script>
    <script src="{{ asset('amcharts_4.10.38/themes/dark.js') }}"></script>
    <script src="{{ asset('amcharts_4.10.38/themes/animated.js') }}"></script>



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

        $(document).ready(function() {
            $.fn.dataTableExt.sErrMode = 'throw'
            // input 加入時間選擇 today按鈕 以及清除按鈕
            $('input#search_fromdate1').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
            $('input#search_todate1').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
            });
            $('input#search_fromdate3').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
            $('input#search_todate3').datetimepicker({
                format: 'YYYY-MM-DD',
                // showTodayButton: true,
                // showClear: true
            });
        })
    </script>
    <script src="{{ asset('js/v2/multisys/pieChart.js') }}"></script>
    <script>
        //  #btn_search_analysis1 onclick
        $('#btn_search_analysis1').on('click', function() {
            loadAnalysisData(1);
        });
        //  #btn_search_analysis2 onclick
        $('#btn_search_analysis2').on('click', function() {
            loadAnalysisData(2);
        });
        $('#btn_search_analysis3').on('click', function() {
            loadAnalysisData(3);
        });
        function loadAnalysisData(tid){
            let violation_type = $(`#violation_type${tid}`).val();
            let location = $(`#location${tid}`).val();
            let search_fromdate = $(`#search_fromdate${tid}`).val();
            let search_todate = $(`#search_todate${tid}`).val();

            let data = {
                violation_type: violation_type,
                location: location,
                search_fromdate: search_fromdate,
                search_todate: search_todate,
                chart_type:tid,
            };
            $.ajax({
                type: "GET",
                url: "{{ route('api.ms.analysis') }}",
                data: data,
                dataType: "json",
                success: function(response) {
                    // 將 response.data 轉陣列
                    // console.log(response.data);
                    if(tid==1){
                        drawPie(response.data)
                    }else if(tid==2){
                        drawPie2(response.data)
                    }
                    else if(tid==3){
                        drawBar(response.data, response.violationtype)
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("error occurred: " + textStatus, errorThrown);
                }
            });
        }
        $(function() {
            loadAnalysisData(1);
            loadAnalysisData(2);
            loadAnalysisData(3);
        });
    </script>

@endsection