@extends('layout.basic.main')
@section('title', 'ホーム（友だち数推移）')
@push('css')
    <style>
        .c822__main * {
            font-weight: bold;
        }

        .c822__header {
            padding: 15px;
            background: #96ADB2;
            border-radius: 5px;
            color: white;
        }

        .main__setting_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #columnchart_material {
            width: 1000px;
            height: 500px;
            margin-top: 20px;
        }

        .main__setting_item label {
            width: 100px;
        }

        .ht8__text-desc-chart {
            position: absolute;
            left: 1070px;
            bottom: 25px;
        }

        @media only screen and (max-width: 1367px) {
            #columnchart_material {
                width: 880px;
            }

            .main__setting_item label {
                width: auto;
            }

            .ht8__text-desc-chart {
                left: 950px;
            }
        }
    </style>
@endpush
@section('content')
    <div class="c822__main" id="vue-app">
        <div class="c822__header">
            友だち数推移グラフ
        </div>
        <div class="row" style="margin-top: 15px;">
            <div class="main__setting_item col-sm-4">
                <label>縦軸</label>
                <select class="form-control" style="width: 80%; appearance: auto" v-model="condition.type">
                    <option value="0">日別友だち追加数</option>
                    <option value="1">ブロック数</option>
                    <option value="2">有効友だち数</option>
                    <option value="3">友だち追加総数</option>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 15px;">
            <div class="main__setting_item col-sm-4">
                <label>横軸</label>
                <div style="display: flex;align-items: center;width: 80%">
                    {{--                    <input type="date" class="form-control" v-model="condition.start_date">--}}
                    <div style="position:relative;">
                        <i class="fa fa-calendar" aria-hidden="true"
                           style="position: absolute;top: 9px;left: 6px;"></i>
                        <input type="text" class="datetimepicker" name="start_date" readonly
                               style="padding: 0 0 0 23px; font-weight: bold" :value="condition.start_date">
                    </div>
                    <span style="margin: 0 5px">~</span>
                    {{--                    <input type="date" class="form-control" v-model="condition.end_date">--}}
                    <div style="position:relative;">
                        <i class="fa fa-calendar" aria-hidden="true"
                           style="position: absolute;top: 9px;left: 6px;"></i>
                        <input type="text" class="datetimepicker" name="end_date" readonly
                               style="padding: 0 0 0 23px; font-weight: bold" :value="condition.end_date">
                    </div>
                </div>
            </div>
            <div class="main__setting_item col-sm-4" style="height: 30px; padding-left: 0">
                ※最長6ヶ月間まで設定可能です
            </div>
        </div>


        <div style="position: relative">
            <div id="columnchart_material"></div>
            <div class="ht8__text-desc-chart">期間</div>
        </div>
    </div>
@endsection
@push('js')
    <script src="/js/axios.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script>
        const get_data_chart_overview = '{{ route('ajax.get_data_chart_overview') }}';
        google.charts.load('current', {'packages': ['bar']});

        $(function () {
            $.datepicker.setDefaults($.datepicker.regional["ja"]);
            $('.datetimepicker').datepicker({
                dateFormat: "yy-mm-dd",
                theme: 'dark',
            }).on('change', function (e) {
                var name = e.target.name;
                var date = e.target.value;
                let start_date = vueApp.condition.start_date;
                let end_date = vueApp.condition.end_date;
                let set_date = date;
                let flag = true;
                if (name == 'start_date') {
                    console.log(date)
                    if (moment(date).diff(moment(end_date).format(vueApp.format_date), 'days') > 0) {
                        set_date = start_date;
                    } else if (moment(end_date).diff(moment(date).format(vueApp.format_date), 'months') > 5) {
                        flag = false;
                    } else {
                        set_date = date;
                    }
                    if (flag) {
                        $("input[name=start_date]").val(set_date);
                        vueApp.condition.start_date = set_date;
                    }
                } else {
                    if (moment(date).diff(moment(start_date).format(vueApp.format_date), 'days') < 0) {
                        set_date = end_date;
                    } else if (moment(date).diff(moment().format(vueApp.format_date), 'days') > 0) {
                        set_date = moment().format(vueApp.format_date);
                    } else if (moment(date).diff(moment(start_date).format(vueApp.format_date), 'months') > 5) {
                        flag = false;
                    } else {
                        set_date = date;
                    }
                    if (flag) {
                        $("input[name=end_date]").val(set_date);
                        vueApp.condition.end_date = set_date;
                    }
                }
                if (flag) {
                    vueApp.drawChart();
                } else {
                    alert("表示できる期間は最長6ヶ月間です");
                }
            });
        });

        const vueApp = new Vue({
            el: '#vue-app',
            data: {
                condition: {
                    type: 0,
                    start_date: moment().subtract(1, 'months').format('YYYY-MM-DD'),
                    end_date: moment().format('YYYY-MM-DD'),
                },
                options: {
                    chart: {
                        title: '',
                        subtitle: '',
                    },
                    vAxis: {
                        viewWindow: {
                            max: 12,
                            min: 0
                        }
                    }
                },
                format_date: 'YYYY-MM-DD',
                status: ['日別友だち追加数', 'ブロック数', '有効友だち数', '友だち追加総数']
            },
            created: function () {
                google.charts.setOnLoadCallback(this.drawChart);
            },
            watch: {
                'condition.type': function (type) {
                    this.drawChart()
                }
            },
            methods: {
                drawChart: function () {
                    $.LoadingOverlay('show');
                    let self = this;
                    let heading = ['', self.status[self.condition.type]];
                    axios.post(get_data_chart_overview, {
                        data: JSON.stringify(this.condition)
                    })
                        .then(response => {
                            let arrDate = [];
                            let max = 10;
                            for (const item in response.data.dates) {
                                let followed = response.data.dates[item].followed;
                                let blocked = response.data.dates[item].blocked;
                                let active_friend = response.data.dates[item].active_friend;
                                let total_friend = response.data.dates[item].total_friend;
                                let type = self.condition.type;
                                let point = 0;
                                if (type == 0) {
                                    point = followed;
                                }
                                if (type == 1) {
                                    point = blocked;
                                }
                                if (type == 2) {
                                    point = active_friend;
                                }
                                if (type == 3) {
                                    point = total_friend;
                                }
                                arrDate.push([item, point])
                                max = point > max ? point : max;
                            }
                            var data = google.visualization.arrayToDataTable([
                                heading,
                                ...arrDate
                            ]);
                            var formattedData = data.clone();
                            for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
                                var dataPoint = formattedData.getValue(i, 1);
                                formattedData.setValue(i, 1, dataPoint / 1000);
                                formattedData.setFormattedValue(i, 1, dataPoint.toString());
                            }
                            var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
                            chart.draw(data, google.charts.Bar.convertOptions({
                                legend: {position: 'none'},
                                vAxis: {
                                    format: "#,###",
                                    viewWindow: {
                                        max: max < 10 ? 10 : max,
                                        min: 0
                                    }
                                }
                            }));
                            $.LoadingOverlay('hide');
                        }).catch(err => {
                        $.LoadingOverlay('hide');
                        console.log(err)
                    })

                }
            }
        })


    </script>
@endpush