IMMREX7

@extends('schools.school_layout')
@section('content')
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-lg-4 col-md-6">
            <div class="card l-blue">
                <div class="body">
                    <h4 class="m-t-0 m-b-0" style="color:white;">{{$data['stotal']}}</h4>
                    <p class="m-b-0" style="color:white;">Total Students</p>
                </div>
                <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                     data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                     data-offset="90" data-width="100%" data-height="40px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                     data-fill-Color="rgba(255, 255, 255, 0.3)"> 7,6,7,8,5,9,8,6,7 </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6">
            <div class="card l-seagreen">
                <div class="body">
                    <h4 class="m-t-0 m-b-0" style="color:green;">{{$data['spresent']}}</h4>
                    <p class="m-b-0 " style="color:green;">Total Present</p>
                </div>
                <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                     data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                     data-offset="90" data-width="100%" data-height="45px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                     data-fill-Color="rgba(255, 255, 255, 0.3)"> 8,7,7,5,5,4,8,7,5 </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card l-pink">
                <div class="body">
                    <h4 class="m-t-0 m-b-0" style="color:black;">{{$data['stotal'] - $data['spresent']}}</h4>
                    <p class="m-b-0" style="color:black;">Total Absent</p>
                </div>
                <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                     data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                     data-offset="90" data-width="100%" data-height="45px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                     data-fill-Color="rgba(255, 255, 255, 0.3)"> 7,6,7,8,5,9,8,6,7 </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card l-blue">
                <div class="body">
                    <h4 class="m-t-0 m-b-0" style="color:white;">{{$data['etotal']}}</h4>
                    <p class="m-b-0" style="color:white;">Total Employees</p>
                </div>
                <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                     data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                     data-offset="90" data-width="100%" data-height="40px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                     data-fill-Color="rgba(255, 255, 255, 0.3)"> 7,6,7,8,5,9,8,6,7 </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6">
            <div class="card l-seagreen">
                <div class="body">
                    <h4 class="m-t-0 m-b-0" style="color:green;">{{$data['epresent']}}</h4>
                    <p class="m-b-0 " style="color:green;">Total Present</p>
                </div>
                <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                     data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                     data-offset="90" data-width="100%" data-height="45px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                     data-fill-Color="rgba(255, 255, 255, 0.3)"> 8,7,7,5,5,4,8,7,5 </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card l-pink">
                <div class="body">
                    <h4 class="m-t-0 m-b-0" style="color:black;">{{$data['etotal'] - $data['epresent']}}</h4>
                    <p class="m-b-0" style="color:black;">Total Absent</p>
                </div>
                <div class="sparkline" data-type="line" data-spot-Radius="1" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#222"
                     data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(0, 150, 136)" data-spot-Color="rgb(0, 188, 212)"
                     data-offset="90" data-width="100%" data-height="45px" data-line-Width="2" data-line-Color="rgba(255, 255, 255, 0.2)"
                     data-fill-Color="rgba(255, 255, 255, 0.3)"> 7,6,7,8,5,9,8,6,7 </div>
            </div>
        </div>
        
    </div>
    <div class="row clearfix">
            <div class="col-lg-4 col-md-12">
                <div class="card tasks_report">
                    <div class="header">
                        <h2><strong>Employee</strong> Attendance</h2>                        
                        <ul class="header-dropdown">
                            <li class="remove">
                                <a role="button" class="boxs-close"><i class="zmdi zmdi-close"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="body text-center">
                        <h4 class="m-t-0">Percentage</h4>
                        @php $emp =round(($data['epresent'] / $data['etotal']) * 100); @endphp
                        <input type="text" class="knob dial1" value="{{$emp}}" data-width="140" data-height="140" data-thickness="0.1" data-fgColor="#000" readonly>
                        <small class="displayblock">{{$emp}}% Attendance <i class="zmdi zmdi-trending-up"></i></small>
                        <div class="sparkline m-t-20" data-type="bar" data-width="97%" data-height="45px" data-bar-Width="2" data-bar-Spacing="8" data-bar-Color="#000">3,2,6,5,9,8,7,8,4,5,1,2,9,5,1,3,5,7,4,6</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <div class="header">
                        <h2><strong>Late</strong> Employee</h2>                        
                    </div>
                    <div class="body">
                        <h3 class="m-b-0">{{$data['late']}}</h3>
                        @php $emp =round(($data['late'] / $data['etotal']) * 100); @endphp
                        <small class="displayblock">{{$emp}}% Employee <i class="zmdi zmdi-trending-down"></i></small>                      
                    </div>
                </div>
                <div class="card">
                    <div class="header">
                        <h2><strong>Early </strong> Employee</h2>                        
                    </div>
                    <div class="body">
                        <h3 class="m-b-0">{{$data['early']}}</h3>
                        @php $emp =round(($data['early'] / $data['etotal']) * 100); @endphp
                        <small class="displayblock">{{$emp}}% Employee <i class="zmdi zmdi-trending-up"></i></small>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <div class="header">
                        <h2><strong>Unapproved</strong> Leave</h2>                        
                    </div>
                    <div class="body">
                        <h3 class="m-b-0">{{$data['unapprove']}}</h3>
                        @php $emp =round(($data['unapprove'] / $data['etotal']) * 100); @endphp
                        <small class="displayblock">{{$emp}}% Leaves <i class="zmdi zmdi-trending-down"></i></small>
                    </div>
                </div>
                <div class="card">
                    <div class="header">
                        <h2><strong>On </strong> Leave</h2>                        
                    </div>
                    <div class="body">
                        <h3 class="m-b-0">{{$data['leave']}}</h3>
                        @php $emp =round(($data['leave'] / $data['etotal']) * 100); @endphp
                        <small class="displayblock">{{$emp}}% Employee <i class="zmdi zmdi-trending-up"></i></small>
                    </div>
                </div>
            </div>                
        </div>   
    <div class="row clearfix">
        <div class="card col-lg-5 col-md-12">
             <div class="header">
                <h2><strong>Top 5 employee in this month </strong></h2>
            </div>
            <div class="body">
                <table class="table m-b-0">
                    <tbody>
                        @foreach($data['top_emp'] as $var)
                        @php 
                        $emp = DB::table('employees')->where('idSchool',auth()->user()->idSchool)->where('enrollmentNo',$var->ecNo)->first(); 
                        $working = ($var->total / 24) * 100
                        @endphp
                        <tr>
                            <td>{{$emp->firstName}} {{$emp->middleName}} {{$emp->lastName}} 
                                <div class="progress">
                                    <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:{{$working}}%;">
                                        <span class="sr-only">{{$working}}% Complete</span>
                                    </div>
                                </div>
                                <div class="float-right">{{$var->total}} days
                                    <i class="fa fa-level-up text-success"></i>
                                </div>
                            </td>
                        </tr>
                        @endforeach                             
                    </tbody>
                </table>
            </div>
        </div> 
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="header">
                    <h2><strong>Today Class Wise Attendance Percentage</strong> </h2>
                    <ul class="header-dropdown">
                        <li class="remove">
                            <a role="button" class="boxs-close"><i class="zmdi zmdi-close"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="body"><iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; inset: 0px;"></iframe>
                    <canvas id="bar_chart" height="250" width="500" style="display: block; width: 555px; height: 277px;"></canvas>
                </div>
            </div>
        </div>       
    </div>    
</div>
@stop
@section('script')

<script>
$(function () {
    "use strict";
    new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
    initCharts();
    $('.knob').knob({
        draw: function () {
            // "tron" case
            if (this.$.data('skin') == 'tron') {

                var a = this.angle(this.cv)  // Angle
                    , sa = this.startAngle          // Previous start angle
                    , sat = this.startAngle         // Start angle
                    , ea                            // Previous end angle
                    , eat = sat + a                 // End angle
                    , r = true;

                this.g.lineWidth = this.lineWidth;

                this.o.cursor
                    && (sat = eat - 0.3)
                    && (eat = eat + 0.3);

                if (this.o.displayPrevious) {
                    ea = this.startAngle + this.angle(this.value);
                    this.o.cursor
                        && (sa = ea - 0.3)
                        && (ea = ea + 0.3);
                    this.g.beginPath();
                    this.g.strokeStyle = this.previousColor;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                    this.g.stroke();
                }

                this.g.beginPath();
                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                this.g.stroke();

                this.g.lineWidth = 2;
                this.g.beginPath();
                this.g.strokeStyle = this.o.fgColor;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                this.g.stroke();

                return false;
            }
        }
    });
});

function getChartJs(type) {
    var config = null;
    if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($classes);?>,
                datasets: [{
                    label: "Classwise Attendance Percentage",
                    data: <?php echo json_encode($classwise);?>,
                    backgroundColor: '#26c6da',
                    strokeColor: "rgba(255,118,118,0.1)",
                }]
            },
            options: {
                responsive: true,
                legend: false
            }
        }
    }
    return config;
}
//Charts
function initCharts() {
    //Chart Bar
    $('.chart.chart-bar').sparkline(undefined, {
        type: 'bar',
        barColor: '#fff',
        negBarColor: '#fff',
        barWidth: '4px',
        height: '34px'
    });

    //Chart Pie
    $('.chart.chart-pie').sparkline(undefined, {
        type: 'pie',
        height: '50px',
        sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
    });

    //Chart Line
    $('.chart.chart-line').sparkline(undefined, {
        type: 'line',
        width: '60px',
        height: '45px',
        lineColor: '#fff',
        lineWidth: 1.3,
        fillColor: 'rgba(0,0,0,0)',
        spotColor: 'rgba(255,255,255,0.40)',
        maxSpotColor: 'rgba(255,255,255,0.40)',
        minSpotColor: 'rgba(255,255,255,0.40)',
        spotRadius: 3,
        highlightSpotColor: '#fff'
    });
}
</script>
@stop