@extends('admin.layouts.app')

@section('header_extra')
    <style>
        .ajax-overlay {
            z-index: 9 !important;
        }
        canvas{
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
    @endsection

    @section('content')

            <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Goals Report
            </h1>

            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="#">Admin</li>
                <li class="#">Reports</li>
                <li class="active">Goals</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- SELECT2 EXAMPLE -->
            <div class="box box-default">
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">

                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Select Account</label>
                                <select class="form-control select2 select-account" style="width: 100%;">
                                    <option value="" disabled selected>Select Account</option>
                                    @foreach($accounts as $account)
                                        <option value="{{$account->id}}">{{$account->account_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!-- /.col -->

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <button class="btn btn-flat btn-primary btn-block" id="reportSubmit">Submit</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">Active Goals Recap Report</h3>

                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-12">

                                    <div class="chart">

                                        <div id="graph-container">
                                            <canvas id="canvas"></canvas>
                                        </div>

                                    </div>
                                    <!-- /.chart-responsive -->
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->
                        </div>

                        <!-- Loading (remove the following to stop the loading)-->
                        <div class="overlay ajax-overlay hide">
                            <i class="fa fa-refresh fa-spin"></i>
                        </div>
                        <!-- end loading -->

                        <!-- ./box-body -->
                        <div class="box-footer">

                        </div>
                        <!-- /.box-footer -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->


        </section>
        <!-- /.content -->
    </div>

    @endsection

    @section('footer_extra')

    <!-- select2 -->
    <script src="{{URL::asset('assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>

    <!-- ChartJS -->
    <script src="{{URL::asset('assets/bower_components/chart.js/chart.js-new/dist/Chart.min.js')}}"></script>
    <script src="{{URL::asset('assets/bower_components/chart.js/chart.js-new/samples/utils.js')}}"></script>

    <script>
        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2()

            //Date picker
            $('.datepicker').datepicker({
                autoclose: true,
                dateFormat: "dd/mm/yy"
            })
        });
    </script>

    <script>
        /**
         * Ajax Post
         **/
        (function (window) {
            $("#reportSubmit").click(function(){

                var chartData = {
                    labels: [], // currently empty will contain all the labels for the data points
                    datasets: []
                };

                $.ajax({
                    /* the route pointing to the post function */
                    url: '{{route('admin_report_all_goal_data_by_account_ajax')}}',
                    type: 'POST',
                    /* send the csrf-token and the input to the controller */
                    data: {
                        _token: "{{ csrf_token() }}",
                        account_id: $(".select-account").val()
                    },
                    dataType: 'JSON',
                    /* remind that 'data' is the response of the AjaxController */
                    success: function (data) {
                        //renderGraph(data.labels, data.points, ctx);

                        console.log(data);

                        var i = 0;

                        var colors = [
                            'rgb(255, 99, 132)',
                            'rgb(255, 159, 64)',
                            'rgb(255, 205, 86)',
                            'rgb(75, 192, 192)',
                            'rgb(54, 162, 235)',
                            'rgb(153, 102, 255)',
                            'rgb(201, 203, 207)'
                        ];

                        $.each( data, function( key, value ) {

                            var dataset_arr = {
                                label: value.goal_name,
                                backgroundColor: colors[i],
                                borderColor: colors[i],
                                fill: false,
                                data: []
                            };

                            $.each( value.goal_counts, function( key, chartDetail ) {

                                    // You should probably format that
                                    if(jQuery.inArray(chartDetail.tracking_date, chartData.labels) == -1){
                                        chartData.labels.push(chartDetail.tracking_date);
                                    }

                                // add the totalBills and totalAmount to the dataset
                                dataset_arr.data.push(chartDetail.total);
                            });

                            i++;

                            chartData.datasets.push(dataset_arr);

                        });

                        $("canvas#canvas").remove();
                        $("#graph-container").append('<canvas id="canvas" class="animated fadeIn"></canvas>');

                        var ctx = document.getElementById("canvas").getContext("2d");

                        var myNewChart = new Chart(ctx , {
                            type: "line",
                            data: chartData,
                            options: {
                                responsive: true,
                                title: {
                                    display: true,
                                    text: 'Chart.js Line Chart'
                                },
                                tooltips: {
                                    mode: 'index',
                                    intersect: false,
                                },
                                hover: {
                                    mode: 'nearest',
                                    intersect: true
                                },
                                scales: {
                                    x: {
                                        display: true,
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Month'
                                        }
                                    },
                                    y: {
                                        display: true,
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Value'
                                        }
                                    }
                                }
                            }
                        });

                    }
                });
                return false;
            });
        }(this));
    </script>

    <script>
        var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: "",
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [5,10,15,20,30],
                    fill: false,
                }, {
                    label: 'My Second dataset',
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [2,4,6,8,10],
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    x: {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    },
                    y: {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            config.data.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return randomScalingFactor();
                });

            });

            window.myLine.update();
        });

        var colorNames = Object.keys(window.chartColors);
        document.getElementById('addDataset').addEventListener('click', function() {
            var colorName = colorNames[config.data.datasets.length % colorNames.length];
            var newColor = window.chartColors[colorName];
            var newDataset = {
                label: 'Dataset ' + config.data.datasets.length,
                backgroundColor: newColor,
                borderColor: newColor,
                data: [],
                fill: false
            };

            for (var index = 0; index < config.data.labels.length; ++index) {
                newDataset.data.push(randomScalingFactor());
            }

            config.data.datasets.push(newDataset);
            window.myLine.update();
        });

        document.getElementById('addData').addEventListener('click', function() {
            if (config.data.datasets.length > 0) {
                var month = MONTHS[config.data.labels.length % MONTHS.length];
                config.data.labels.push(month);

                config.data.datasets.forEach(function(dataset) {
                    dataset.data.push(randomScalingFactor());
                });

                window.myLine.update();
            }
        });

        document.getElementById('removeDataset').addEventListener('click', function() {
            config.data.datasets.splice(0, 1);
            window.myLine.update();
        });

        document.getElementById('removeData').addEventListener('click', function() {
            config.data.labels.splice(-1, 1); // remove the label first

            config.data.datasets.forEach(function(dataset) {
                dataset.data.pop();
            });

            window.myLine.update();
        });
    </script>

@endsection