<template>
    <div class="bg-pic">
        <!-- analytics dshboarrd creation -->
        <h4 class="text-uppercase mb-4">Analytics</h4>
        <section class="my-5">
            <div class="d-flex flex-wrap justify-content-between">
                <div class="card">
                    <!-- <div class="card-body">
                        <h4>Avarage Marks: {{avarageMarks}}</h4>
                    </div> -->
                </div>
            </div>
        </section>
        <section class="my-5">
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="card"><!-- centiment dshboarrd creation -->
                        <div class="card-header"><div class="card-title">Sentimental for Maths</div></div>
                        <div class="card-body"><canvas id="sentimentalChart"></canvas></div>
                    </div>
                    </div>
                <div class="col-12 col-md-6">  <div class="card">
                        <div class="card-header"><div class="card-title">Sentimental for Science</div></div>
                        <div class="card-body"><canvas id="sentimentalChart2"></canvas></div>
                    </div></div>
            </div>
            
        </section>
        <hr>
        <section>
            <b-tabs pills content-class="mt-3">
                <b-tab title="Student Mark Growth" active>
                    <div class="row">
                        <div class="col-8 offset-2">
                            <div class="card">
                                <div class="card-body">
                                    <canvas id="yearlyChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-tab>
                <!-- <b-tab title="Month">
                    <div class="row">
                        <div class="col-8 offset-2">
                            <div class="card">
                                <div class="card-body">
                                    <canvas id="monthlyChart"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                        <div class="card">
                            
                        </div>
                    </div>
                    </div>
                </b-tab> -->
                <!--<b-tab title="Week">
                    <div class="row">
                        <div class="col-8 offset-2">
                            <div class="card">
                                <div class="card-body">
                                    <canvas id="myChart"></canvas>
                                </div>
                            </div>
                        </div>
                         <div class="col-4">
                        <div class="card">
                            <div class="card-body">
                                <b-form-input placeholder="Search..."></b-form-input>

                            </div>
                        </div>
                    </div> 
                    </div>
                </b-tab>-->
            </b-tabs>
        </section>
    </div>


</template>
<script>
    import Chart from 'chart.js';
    import ApiService from '@/services/api.service';

    export default {
        data() {
            return {
                chartData: [],
                chartLabels: [],
                avarageMarks: [],
                weeklyData: [10, 15],
                monthlyData: [25, 30],
                annualyData: [75, 60],
            }
        },
        created() {
            // Api call
        },
        mounted() {
            // this.createChart()
            this.createYearlyChart()
            // this.createMonthlyChart()
            this.getAVGMarks()
            this.createSentimentalChart();
            this.createSentimentalChart2();
        },
        methods: {
            getAVGMarks() {
                ApiService.get('/get-avg-time').then(({
                    data
                }) => {
                    console.log(data)
                    this.avarageMarks = data;

                }).catch(e => {
                    console.log(e);
                })
            },
            createSentimentalChart() {
                ApiService.get('/feedbacks/1').then(({
                    data
                }) => {
                    let yAxis =[]
                    data.results.forEach(element => {
                        yAxis.push(element.count)
                    });
                    var ctx = document.getElementById('sentimentalChart');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: ['NEGATIVE', 'NEUTRAL', 'POSITIVE'],
                        datasets: [{
                            label: 'Subjects',
                            data: yAxis,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    // options: {
                    //     scales: {
                    //         yAxes: [{
                    //             ticks: {
                    //                 beginAtZero: true
                    //             }
                    //         }]
                    //     }
                    // }
                });

                }).catch(e => {
                    console.log(e);
                })
                
            },
            createSentimentalChart2() {
                ApiService.get('/feedbacks/2').then(({
                    data
                }) => {
                    let yAxis =[]
                    data.results.forEach(element => {
                        yAxis.push(element.count)
                    });
                    var ctx = document.getElementById('sentimentalChart2');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: ['NEGTIVE', 'NEUTRAL', 'POSITIVE'],
                        datasets: [{
                            label: 'Subjects',
                            data: yAxis,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    // options: {
                    //     scales: {
                    //         yAxes: [{
                    //             ticks: {
                    //                 beginAtZero: true
                    //             }
                    //         }]
                    //     }
                    // }
                });

                }).catch(e => {
                    console.log(e);
                })
            },
            createChart() {
                var ctx = document.getElementById('myChart');
                const data = this.weeklyData;
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Maths', 'Science'],
                        datasets: [{
                            label: 'Subjects',
                            data: data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            },
            createYearlyChart() {
                const user = JSON.parse(window.localStorage.getItem('user'));
                ApiService.get('/students/getmarks/'+ user.student_id).then(({data}) => {
                    let xAxisS1 = [];
                    let xAxisS2 = [];

                    let yAxisS1 = [];
                    let yAxisS2 = [];

                    data.summary.forEach(element => {
                        if(element.subject == "maths"){
                            xAxisS1.push(element.added_date)
                            yAxisS1.push(element.marks)
                        }else{
                            xAxisS2.push(element.added_date)
                            yAxisS2.push(element.marks)
                        }
                    });



                    var ctx = document.getElementById('yearlyChart');
                //const data = this.annualyData;
                new Chart(ctx, {
                type: 'line',
                data: {
                  labels: xAxisS1,
                  datasets: [{
                    label: ['Maths'],
                    fill: false,
                    data: yAxisS1,
                    backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',
                      'rgba(153, 102, 255, 0.2)',
                      'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                  },
                  {
                    label: ['Science'],
                    fill: false,
                    data: yAxisS2,
                    backgroundColor: [
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',
                      'rgba(153, 102, 255, 0.2)',
                      'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 99, 132, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                  }
                  ]
                },
                options: {
                  scales: {
                    yAxes: [{
                      ticks: {
                        beginAtZero: true
                      }
                    }]
                  }
                }
              });

                }).catch(e => {
                    console.log(e);
                })

                
            },
            createMonthlyChart() {
                var ctx = document.getElementById('monthlyChart');
                const data = this.monthlyData;
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Maths', 'Science'],
                        datasets: [{
                            label: 'Subjects',
                            data: data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            }
        },
    }
</script>