IMMREX7

@extends('students.student_layout')
@section('content')
<div class="row clearfix">
    <div class="col-sm-12" >
        <div class="card">
            <div class="header">
                <h2><strong>Exam Result</strong></h2>
            </div>
            <h4 style="text-align:center"><strong>{{$exam->name}}</strong></h4>
            <span class="countdown" style="display:none;">{{Carbon\Carbon::parse($exam->publish_date)->format('d-M-Y H:i:s')}}</span>
            <div class="body table-responsive" style="display:none;" id="parent">
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Result Publish Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{Carbon\Carbon::parse($exam->from_date)->format('d-M-Y')}}</td>
                            <td>{{Carbon\Carbon::parse($exam->to_date)->format('d-M-Y')}}</td>
                            <td>{{Carbon\Carbon::parse($exam->publish_date)->format('d-M-Y H:i:s')}}</td>
                        </tr>
                    </tbody>
                </table>

                <div class="row" style="margin:40px;">
                    <div class="col-sm-12">
                        <h5 style="text-align:center"><strong>AI Statistics</strong></h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <canvas id="bar_chart" height="150"></canvas>
                    </div>
                    <div class="col-sm-6">
                         <canvas id="pie_chart" height="150"></canvas>
                         
                    </div>
                </div>
                <div class="row justify-content-md-center">
                    <div class="col-sm-6">
                        <canvas id="line_chart" height="150"></canvas>
                        <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th style="background: #fe9507;color: white;text-align:center;">Lowest Score (%)</th>
                                <th style="background: #6aa786;color: white;text-align:center;">My Score  (%)</th>
                                <th style="background: #35c2d1;color: white;text-align:center;">Top Score  (%)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="background: #fe9507;color: white;text-align:center;">{{str_replace(".00","",number_format((float)( ($lowestScore / $top["totalMarks"]) * 100 ), 2, '.', ''))}}%</td>
                                <td style="background: #6aa786;color: white;text-align:center;">{{str_replace(".00","",number_format((float)( ($mine["total"] / $top["totalMarks"]) * 100 ), 2, '.', ''))}}%</td>
                                <td style="background: #35c2d1;color: white;text-align:center;">{{str_replace(".00","",number_format((float)( ($top["total"] / $top["totalMarks"]) * 100 ), 2, '.', ''))}}%</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" style="margin:40px;">
                    <div class="col-sm-12">
                        <h5 style="text-align:center"><strong>MarkSheet</strong></h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <a class="btn btn-warning" style="color:#fff;" href="{{url('/api/marks-file').'/'.$exam->idType.'?idStudent='.$student->idStudent}}">Download Result </a>
                    </div>
                </div>
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                           <th>Subject Name</th>
                            <th>Full Marks</th>
                            <th>Theory</th>
                            <th>Practical</th>
                            <th>Total</th>
                            <th>Grade</th>
                            <th>Percentage</th>
                        </tr>
                    </thead>
                   <tbody>
                    @foreach($mine["result"] as $result)
                        <tr>
                            <td>{{$result["subject"]}}</td>
                            <td>{{$result["full_marks"]}}</td>
                            @if($result["status"] == "A")
                            <td style="background: red;color: white;">Absent</td>
                            <td style="background: red;color: white;">Absent</td>
                            <td style="background: red;color: white;">Absent</td>
                            <td style="background: red;color: white;">Absent</td>
                            <td style="background: red;color: white;">Absent</td>
                            @else
                            <td>{{$result["theory"]}}</td>
                            <td>{{$result["practical"]}}</td>
                            <td>{{$result["total"]}}</td>
                            <td>{{$result["grade"]}}</td>
                            <td>@if($result["percentage"] != "") {{str_replace(".00","",$result["percentage"])}}% @else {{""}} @endif</td>
                            @endif
                        </tr>
                    @endforeach  
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><b>Total Marks</b></td>
                            <td>{{$mine["totalMarks"]}}</td>
                            <td></td>
                            <td></td>
                        </tr>  
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><b>Marks Obtained</b></td>
                            <td>{{$mine["total"]}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><b>Overall Grade</b></td>
                            <td>{{$mine["grade"]}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-sm-12">
                        <a class="btn btn-success" style="color:#fff;" onclick="showTopScorer()">Click Here To View Top Scorer Details </a>
                    </div>
                </div>
                <div id='topscorer' style="display:none">
                    <div class="row">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Topper Name</th>
                                <th>Class & Section</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{$topper->firstName.' '. $topper->middleName.' '. $topper->lastName}}</td>
                                <td>{{$topper->className.'-'.$topper->sectionName}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                           <th>Subject Name</th>
                            <th>Full Marks</th>
                            <th>Theory</th>
                            <th>Practical</th>
                            <th>Total</th>
                            <th>Grade</th>
                            <th>Percentage</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($top["result"] as $result)
                            <tr>
                                <td>{{$result["subject"]}}</td>
                                <td>{{$result["full_marks"]}}</td>
                                @if($result["status"] == "A")
                                <td style="background: red;color: white;">Absent</td>
                                <td style="background: red;color: white;">Absent</td>
                                <td style="background: red;color: white;">Absent</td>
                                <td style="background: red;color: white;">Absent</td>
                                <td style="background: red;color: white;">Absent</td>
                                @else
                                <td>{{$result["theory"]}}</td>
                                <td>{{$result["practical"]}}</td>
                                <td>{{$result["total"]}}</td>
                                <td>{{$result["grade"]}}</td>
                                <td>@if($result["percentage"] != "") {{str_replace(".00","",$result["percentage"])}}% @else {{""}} @endif</td>
                                @endif
                            </tr>
                        @endforeach   
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td><b>Total Marks</b></td>
                                <td>{{$top["totalMarks"]}}</td>
                                <td></td>
                                <td></td>
                            </tr>  
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td><b>Marks Obtained</b></td>
                                <td>{{$top["total"]}}</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td><b>Overall Grade</b></td>
                                <td>{{$top["grade"]}}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop
@section('script')
<script>
function showTopScorer(){
    var x = document.getElementById("topscorer");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
document.querySelectorAll(".countdown").forEach(cd => {
  setupCountdown(cd)
})
function setupCountdown(field){
    var countDownDate = new Date(field.innerHTML).getTime();
    console.log(countDownDate)
    var x = setInterval(function() {
      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result 
      field.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

      // If the count down is finished, write some text
      if (distance > 0) {
        clearInterval(x);
        window.location.href = "{{url('student/marks')}}";
      }else {
        var x = document.getElementById("parent");
        x.style.display = "block";
      }
    }, 1000);
}

$(function () {
    new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
    new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie')); 
    new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line')); 
});

@php
$labels = [];
$barData = [];
foreach($examByPerformance as $performance){
    array_push($labels,$performance["name"]);  
    array_push($barData,$performance["marks"]);
}
$sizeOf = sizeof($labels);

$subjects = [];
$pieData = [];
foreach($mine["result"] as $result){
    array_push($subjects,$result["subject"]);  
    array_push($pieData,$result["total"]);
}

if(sizeof($labels) < sizeof($subjects) )
$sizeOf = sizeof($subjects);
$scores = [];
array_push($scores,$lowestScore);
array_push($scores,$mine["total"]);
array_push($scores,$top["total"]);
@endphp
function getChartJs(type){
    var config = null;
    var coloR = [];
    var dynamicColors = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
    };
    if(<?php echo $sizeOf; ?> > 7){
        //loop and color generate
        for (let i = 0; i < <?php echo $sizeOf; ?>; i++) { 
            coloR.push(dynamicColors());
        }
    }else{
        coloR = [
                        'rgba(255, 99, 132)',
                        'rgba(255, 159, 64)',
                        'rgba(255, 205, 86)',
                        'rgba(75, 192, 192)',
                        'rgba(54, 162, 235)',
                        'rgba(153, 102, 255)',
                        'rgba(201, 203, 207)'
                ];
    }
    
    if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($labels); ?>,
                datasets: [{
                    label: "Exam Wise",
                    data: <?php echo json_encode($barData); ?>,
                    backgroundColor: coloR,
                    strokeColor: coloR,
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true,
                    }
                }
            }
        }
    }else if(type === 'pie'){
        config = {
            type: 'pie',
            data: {
                labels: <?php echo json_encode($subjects); ?>,
                datasets: [{
                    data: <?php echo json_encode($pieData); ?>,
                    backgroundColor: coloR,
                }],
            },
            options: {
                plugins: {
                    legend: {
                        display: true,
                    }
                }
            }
        }
    }else if(type === 'line'){
        config = {
            type: 'line',
            data: {
                labels: ["Lowest", "My Score", "Top Score"],
                datasets: [{
                    axis: 'y',
                    label: 'Class Wise Performance',
                    data:  <?php echo json_encode($scores); ?>,
                    fill: false,
                    backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    ],
                    borderColor: [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    ],
                    borderWidth: 5
                }]
            },
            options: {
                indexAxis: 'y',
                scales: {
                x: {
                    beginAtZero: true
                }
                }
            }
        }
    }
    return config;
}
</script>
@stop