@extends('system.layouts.app')
@section('title', 'Dashboard')
@section('css')
    <!-- Styles -->
    <!-- 儀錶板 -->
    <link rel="stylesheet" href="{{ asset('css/v2/dashboard.css') }}">
    <!-- 下拉式選單套件 -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/v2/bootstrap-select.min.css') }}" />
    {{-- <link rel="stylesheet" href="{{ asset('css/v2/dselect.css') }}"> --}}

    <style>

    </style>
@endsection

@section('content')

    <div class="container-fluid">
        <!-- 地圖 左 / 圓餅圖 右 -->
        <div class="row mt-3 p-2">
            <div class="col-6">
                <!-- 下拉式選單 -->
                <div class="dropdown text-center mt-3">
                    <div class="col-12">
                        <div class="form-group">
                            <select id="location" class="form-control searchColumns selectpicker"
                                data-style="btn-dark border" data-container="body" data-width="100%"
                                data-live-search="true">
                                <option value="">選擇設備編號</option>
                                @if(isset($devices))
                                    @foreach ($devices as $device)
                                        <option value="{{ $device['serialnumber'] }}">{{ $device['serialnumber'] }} {{ $device['location'] }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                </div>
                <!-- 下拉式選單 -->
                <!-- 案件統計區塊 -->
                <div id="case-counter" class="row mt-3"></div>
                <div id="case-counter2" class="row"></div>
                <!-- 案件統計區塊 -->

            </div>
            <div class="col-6">
                <div class="card mb-2">
                    <div class="card-body pb-0 pt-2">
                        <div class="col-12">
                            <div class="form-group">
                                當月違規分析
                                <label class="ms-3" for="yearSelect">年份：</label>
                                <select class="" id="yearSelect">
                                    <!-- 使用迴圈產生選項 -->
                                    @for($i = 2023; $i <= date('Y'); $i++)
                                        <option value="{{ $i }}" @if(\Carbon\Carbon::now()->year == $i) selected @endif>{{ "$i 年" }}</option>
                                    @endfor
                                    <!-- ... 其他年份選項 ... -->
                                </select>

                                <label for="monthSelect"> 月份：</label>
                                <select class="" id="monthSelect">
                                    <!-- 使用迴圈產生選項 -->
                                    <option value="0">全年</option>
                                    @for ($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}" @if(\Carbon\Carbon::now()->month == $i) selected @endif>{{ "$i 月" }}</option>
                                    @endfor
                                    <!-- ... 其他月份選項 ... -->
                                </select>
                            </div>
                            <div id="chartdiv"></div>
                        </div>
                    </div>

                    {{-- <div id="chartdiv"></div> --}}

                </div>

                <div class="card">
                    <div class="card-body pb-0 pt-2">
                        <h5 class="card-title">現場圖</h5>
                    </div>
                    <img id="map" width="100%" height="100%" src="{{ asset('img/equipment/default.png') }}" class="card-img-bottom"
                        alt="地圖">
                </div>
            </div>
        </div>
        <div class="row mt-3 p-2 d-none">
            <div class="col-12">
                <div class="card">
                    <div class="card-body pb-0 pt-2">
                        <h5 class="card-title">圓餅圖</h5>
                    </div>
                    <div id="bottom_pie" class="row">

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    {{-- <script src="{{ asset('js/v2/dselect.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 src="{{ asset('js/v2/dashboard.js') }}"></script>
    <script src="{{ asset('js/v2/dashboard_charts.js') }}"></script>
    <script>
        function loadPieData() {

            let yearSelect = $('#yearSelect').val();
            let monthSelect = $('#monthSelect').val();
            let location = $('#location').val();
            let data = {
                location: location,
                year: yearSelect,
                month: monthSelect,
            };
            $.ajax({
                type: "GET",
                url: "{{ route('api.dashboard.pie') }}",
                data: data,
                dataType: "json",
                success: function(response) {
                    // 將 response.data 轉陣列
                    // console.log(response.data);
                    drawPie(response.data)


                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("error occurred: " + textStatus, errorThrown);
                }
            });
        }

        function loadBarData() {

            let yearSelect = $('#yearSelect').val();
            let monthSelect = $('#monthSelect').val();
            let location = $('#location').val();
            let data = {
                year: yearSelect,
                month: monthSelect,
                location: location,
            };
            $.ajax({
                type: "GET",
                url: "{{ route('api.dashboard.bar') }}",
                data: data,
                dataType: "json",
                success: function(response) {
                    // 將 response.data 轉陣列
                    // console.log(response.data);
                    drawBar(response.data, response.violationtype)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("error occurred: " + textStatus, errorThrown);
                }
            });
        }

        function loadCounterData() {

            let yearSelect = $('#yearSelect').val();
            let monthSelect = $('#monthSelect').val();
            let location = $('#location').val();
            let data = {
                year: yearSelect,
                month: monthSelect,
                location: location,
            };
            $.ajax({
                type: "GET",
                url: "{{ route('api.dashboard') }}",
                data: data,
                dataType: "json",
                success: function(response) {
                    drawCounter(response.data)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("error occurred: " + textStatus, errorThrown);
                }
            });
        }
        function loadMapImg(){
            let location = $('#location').val();
            // /img/equipment/{location}.png
            console.log(location)
            if(location == ''){
                $('#map').attr('src', `/img/equipment/default.png`)
            }else{
                // if file exist
                $.ajax({
                    url: `/img/equipment/${location}.png`,
                    type: 'HEAD',
                    error: function()
                    {
                        $('#map').attr('src', `/img/equipment/default.png`)
                    },
                    success: function()
                    {
                        $('#map').attr('src', `/img/equipment/${location}.png`)
                    }
                });
            }
        }
        // document ready
        $(function() {
            loadCounterData()
            loadPieData()
            loadMapImg()
            // loadBarData()
            $('#yearSelect').change(function() {
                loadCounterData()
                loadPieData()
                // loadBarData()
            });
            $('#monthSelect').change(function() {
                loadCounterData()
                loadPieData()
                // loadBarData()
            });
            $('#location').change(function() {
                loadCounterData()
                loadPieData()
                loadMapImg()
                // loadBarData()
            });

        });
    </script>
@endsection