@extends('layouts.main')
@section('content')
<div class="alert alert-custom alert-white alert-shadow fade show gutter-b" role="alert">
    <div class="alert-icon">
        <span class="svg-icon svg-icon-primary svg-icon-2x">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <polygon points="0 0 24 0 24 24 0 24"/>
                    <path d="M18,14 C16.3431458,14 15,12.6568542 15,11 C15,9.34314575 16.3431458,8 18,8 C19.6568542,8 21,9.34314575 21,11 C21,12.6568542 19.6568542,14 18,14 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                    <path d="M17.6011961,15.0006174 C21.0077043,15.0378534 23.7891749,16.7601418 23.9984937,20.4 C24.0069246,20.5466056 23.9984937,21 23.4559499,21 L19.6,21 C19.6,18.7490654 18.8562935,16.6718327 17.6011961,15.0006174 Z M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                </g>
            </svg><!--end::Svg Icon-->
        </span>
    </div>
    <div class="alert-text">
        <div class="row">
            <label class="col-2 col-form-label">Filter By User</label>
            <div class="col-4">
                <select id="user_id" class="form-control">
                    <option value="0">All</option>
                    @foreach ($profiles as $profile)
                        <option value="{{$profile->id}}">{{$profile->profile_first_name}} {{$profile->profile_last_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Engagement Per User</h3>
        </div>        
    </div>
    <div class="card-body">
        <div id="columnchart_material"></div>
    </div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Profile Stats</h3>
        </div>        
    </div>
    <div class="card-body">
        <div id="barchart_values"></div>
    </div>
</div>
<!--end::Card-->
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Communications</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="piechart"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Tasks</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="taskbarchart"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Completed Career Path</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="career_path_percentage"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
</div>


<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Top Engaged Users</h3>
        </div>        
    </div>
    <div class="card-body">
        <div id="most_engaged_users"></div>
    </div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Top Users Engagement in Learning Modules</h3>
        </div>        
    </div>
    <div class="card-body">
        <div id="most_learning_percentage"></div>
    </div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Top Users Engagement in Challenges</h3>
        </div>        
    </div>
    <div class="card-body">
        <div id="most_user_challenge_percentage"></div>
    </div>
</div>
<!--end::Card-->
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Top Engaged Challenges</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="top_challenges"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Least Engaged Challenges</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="least_challenges"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Top Engaged Learnings</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="top_learnings"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon2-zig-zag-line-sign text-primary"></i>
                    </span>
                    <h3 class="card-label">Least Engaged Learnings</h3>
                </div>        
            </div>
            <div class="card-body">
                <div id="least_learnings"></div>
            </div>
        </div>
        <!--end::Card-->
    </div>
</div>


@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Business Intelligence</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">Chart</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')

@endsection

@section('js_file')
<script src="https://www.gstatic.com/charts/loader.js"></script>
@endsection
@section('page_js')
    <script>
        $(document).ready(function() {
            getAllChart();
            $('body').on('change','#user_id', function(){
                var user_id = $(this).val();
                getAllChart(user_id);
            });            
        });

        function getAllChart(user_id) {
            $.ajax({
                url: "{{route('bi.ajax.chart')}}",
                type: 'get',
                dataType: 'json',
                data: {user_id:user_id},                    
                success: function (response) {
                    console.log(response);
                    var parseData = response;
                    
                    /*BAR CHART*/
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawBarChart);

                    parseData.barChart[0][2] = JSON.parse(parseData.barChart[0][2]);
                    function drawBarChart() {
                        var data = google.visualization.arrayToDataTable(parseData.barChart);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, 1,{
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },
                        2]);

                        var options = {
                            title: "",
                            width: 850,
                            height: 600,
                            bar: {groupWidth: "50%"},
                            legend: { position: "none" },
                        };
                        var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
                        chart.draw(view, options);
                    }

                    // COLUMN CHART
                    google.charts.load('current', {'packages':['bar']});
                    google.charts.setOnLoadCallback(drawLineChart);
                    
                    function drawLineChart() {
                        var data = google.visualization.arrayToDataTable(parseData.columnChart);

                        var options = {
                            // chart: {
                           //   title: 'Company Performance',
                           //   subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                            // },
                            bar: {gap: 0},
                        };

                        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

                        chart.draw(data, google.charts.Bar.convertOptions(options));

                    }

                    // PIE CHART
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawPieChart);
                    function drawPieChart() {
                        var data = google.visualization.arrayToDataTable(parseData.pieChart);
                        var options = {
                            'height':300,
                            legend: { position: "bottom" },
                            is3D: true,
                            colors: ['#FFC000', '#4FD2C2', '#9C5AB2']
                        };

                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                        chart.draw(data, options);
                    }

                    // TASK BAR CHART
                    google.charts.load('current', {'packages':['bar']});
                    google.charts.setOnLoadCallback(drawTaskLineChart);
                    parseData.taskChart[0][2] = JSON.parse(parseData.taskChart[0][2]);
                    function drawTaskLineChart() {
                        var data = google.visualization.arrayToDataTable(parseData.taskChart);
                        var options = {
                            height:300,
                            legend: { position: "none" },
                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('taskbarchart'));
                        chart.draw(data, options);

                    }

                    // MOST ENGAGED USERS
                    google.charts.load('current', {'packages':['bar']});
                    google.charts.setOnLoadCallback(drawMostEngagedUsersChart);
                    parseData.mostEngagedUsers[0][2] = JSON.parse(parseData.mostEngagedUsers[0][2]);
                    function drawMostEngagedUsersChart() {
                        var data = google.visualization.arrayToDataTable(parseData.mostEngagedUsers);
                        var options = {
                            width:'auto',
                            height:300,
                            legend: { position: "none" },
                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('most_engaged_users'));
                        chart.draw(data, options);

                    }

                    // TOP 10 ENGAGED USERS IN LEARNING
                    google.charts.load('current', {'packages':['bar']});
                    google.charts.setOnLoadCallback(drawLearningPercentageChart);
                    parseData.mostLearningPercentage[0][2] = JSON.parse(parseData.mostLearningPercentage[0][2]);
                    function drawLearningPercentageChart() {
                        var data = google.visualization.arrayToDataTable(parseData.mostLearningPercentage);
                        var options = {
                            width:'auto',
                            height:300,
                            legend: { position: "none" },
                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('most_learning_percentage'));
                        chart.draw(data, options);
                    }

                    // MOST ENGAGED USERS IN CHALLENGES
                    google.charts.load('current', {'packages':['bar']});
                    google.charts.setOnLoadCallback(drawMostEngagedUsersChallangesChart);
                    parseData.usersChallengePercentage[0][2] = JSON.parse(parseData.usersChallengePercentage[0][2]);
                    function drawMostEngagedUsersChallangesChart() {
                        var data = google.visualization.arrayToDataTable(parseData.usersChallengePercentage);
                        var options = {
                            width:'auto',
                            height:300,
                            legend: { position: "none" },
                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('most_user_challenge_percentage'));
                        chart.draw(data, options);

                    }

                    // PERCENTAGE COMPLETED OF CAREER PATH
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(completedCareerPath);
                    function completedCareerPath() {
                        var data = google.visualization.arrayToDataTable(parseData.percentage_career_path);

                        var options = {
                            pieHole: 0.5,
                            pieSliceTextStyle: {
                                color: 'black',
                            },
                            height:300,
                            legend: 'none'
                        };
                        var chart = new google.visualization.PieChart(document.getElementById('career_path_percentage'));
                        chart.draw(data, options);
                    }

                    // TOP ENGAGED CHALLENGES
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawTopChallengesChart);

                    parseData.engagedTopChallenges[0][2] = JSON.parse(parseData.engagedTopChallenges[0][2]);
                    function drawTopChallengesChart() {
                        var data = google.visualization.arrayToDataTable(parseData.engagedTopChallenges);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, 1,{
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },
                        2]);

                        var options = {
                            title: "",
                            height: 600,
                            bar: {groupWidth: "50%"},
                            legend: { position: "none" },
                        };
                        var chart = new google.visualization.BarChart(document.getElementById("top_challenges"));
                        chart.draw(view, options);
                    }

                    // LEAST ENGAGED CHALLENGES
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawLeastChallengesChart);

                    parseData.engagedLeastChallenges[0][2] = JSON.parse(parseData.engagedLeastChallenges[0][2]);
                    function drawLeastChallengesChart() {
                        var data = google.visualization.arrayToDataTable(parseData.engagedLeastChallenges);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, 1,{
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },
                        2]);

                        var options = {
                            title: "",
                            height: 600,
                            bar: {groupWidth: "50%"},
                            legend: { position: "none" },
                        };
                        var chart = new google.visualization.BarChart(document.getElementById("least_challenges"));
                        chart.draw(view, options);
                    }

                    // TOP ENGAGED LEARNINGS
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawTopLearningsChart);

                    parseData.engagedTopLearnings[0][2] = JSON.parse(parseData.engagedTopLearnings[0][2]);
                    function drawTopLearningsChart() {
                        var data = google.visualization.arrayToDataTable(parseData.engagedTopLearnings);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, 1,{
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },
                        2]);

                        var options = {
                            title: "",
                            height: 600,
                            bar: {groupWidth: "50%"},
                            legend: { position: "none" },
                        };
                        var chart = new google.visualization.BarChart(document.getElementById("top_learnings"));
                        chart.draw(view, options);
                    }

                    // LEAST ENGAGED LEARNINGS
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawLeastLearningsChart);
                    parseData.engagedLeastLearnings[0][2] = JSON.parse(parseData.engagedLeastLearnings[0][2]);
                    function drawLeastLearningsChart() {
                        var data = google.visualization.arrayToDataTable(parseData.engagedLeastLearnings);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, 1,{
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation" },
                        2]);

                        var options = {
                            title: "",
                            height: 600,
                            bar: {groupWidth: "50%"},
                            legend: { position: "none" },
                        };
                        var chart = new google.visualization.BarChart(document.getElementById("least_learnings"));
                        chart.draw(view, options);
                    }

                },
                error: function (response) {
                    toastr.error("An error occurred");
                }
            });
        }
        
    </script>
@endsection