IMMREX7

@extends('schools.school_layout')
@section('content')
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-lg-12">
            <div class="card">
                <ul class="row profile_state list-unstyled">
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book" style="color: #9C27B0 !important;"></i>
                            <h4>{{$data['total']}}</h4>
                            <span>Total Book</span>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book col-blue"></i>
                            <h4>{{$data['issue']}}</h4>
                            <span>Book Issued</span>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book col-red"></i>
                            <h4>{{$data['return']}}</h4>
                            <span>Book Returned</span>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book text-success"></i>
                            <h4>{{$data['not-return']}}</h4>
                            <span>Book Not Returned</span>
                        </div>
                    </li>                      
                </ul>
            </div>
        </div>
    </div>
   <div class="row clearfix">
       <div class="col-lg-12"><h4 style="margin-top: 0px;">Monthly Report</h4></div>
        <div class="col-lg-12">
            <div class="card">
                <ul class="row profile_state list-unstyled">
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book" style="color: #9C27B0 !important;"></i>
                            <h4>{{$data['new-book']}}</h4>
                            <span>New Book Added</span>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book col-blue"></i>
                            <h4>{{$data['lost-book']}}</h4>
                            <span>Book Lost</span>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book col-red"></i>
                            <h4>₹{{$data['total-fine']}}</h4>
                            <span>Total Fine Collected</span>
                        </div>
                    </li>
                    <li class="col-lg-3 col-md-3 col-6">
                        <div class="body">
                            <i class="zmdi zmdi-book text-success"></i>
                            <h4>{{$data['e-book']}}</h4>
                            <span>Total E-book</span>
                        </div>
                    </li>                      
                </ul>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="header">
                    <h2><strong>Issued vs Returned </strong> Graph</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">
                    <canvas id="line_chart" height="150"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="header">
                    <h2><strong>Books Type</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">
                     <div id="m_donut_chart"></div>
                </div>
            </div>
        </div>            
    </div>
    
</div>
@stop
@section('script')
<script>
$(function () {
    "use strict";
    new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
    MorrisDonutChart();   
});
function getChartJs(type) {
    var config = null;

    if (type === 'line') {
        config = {
            type: 'line',
            data: {
                labels: ['January','February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                datasets: [{
                    label: "Issued",
                    data: <?php echo json_encode($issued);?>,
                    borderColor: 'rgba(24, 206, 15, 0.2)',
                    backgroundColor: 'rgba(24, 206, 15, 0.5)',
                    pointBorderColor: 'rgba(24, 206, 15, 0.3)',
                    pointBackgroundColor: 'rgba(24, 206, 15, 0.2)',
                    pointBorderWidth: 1
                }, {
                    label: "Returned",
                    data: <?php echo json_encode($returned);?>,                    
                    borderColor: 'rgba(236, 59, 87, 0.2)',
                    backgroundColor: 'rgba(236, 59, 87, 0.2)',
                    pointBorderColor: 'rgba(236, 59, 87, 0)',
                    pointBackgroundColor: 'rgba(236, 59, 87, 0.9)',
                    pointBorderWidth: 1
                }]
            },
            options: {
                responsive: true,
                legend: false,
                
            }
        }
    }   
    return config;
}
// Morris donut chart
function MorrisDonutChart() {
    Morris.Donut({
        element: 'm_donut_chart',
        data: [
            @foreach($types as $key => $value)    
            {
                label: "{{$key}}",
                value: {{$value}},
            },
            @endforeach
        ],
        resize: true,
        colors: ['#ffd97f', '#fab2c0', '#80dad8', '#a1abb8']
    });
    $("#m_donut_chart tspan").css("font-size","13px");
    $( "#m_donut_chart" ).mouseover(function() {
        $("#m_donut_chart tspan").css("font-size","13px");
    });
}
</script>
@stop