IMMREX7

@extends('schools.school_layout')
@section('content')
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="card">
                <div class="body text-center">
                <div class="sparkline m-b-20" data-type="bar" data-width="97%" data-height="40px" data-bar-Width="3" data-bar-Spacing="5" data-bar-Color="#00ced1">1,2,2,3,3,4,4,5,5,6,6,5,5,4,4,3,3,2,2,1</div>
                    <h3 class="m-b-0">{{$data['enquiry']}}</h3>
                    <small class="displayblock">Total Enquiry<i class="zmdi zmdi-trending-up"></i></small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="card">
                <div class="body text-center">
                <div class="sparkline m-b-20" data-type="bar" data-width="97%" data-height="40px" data-bar-Width="3" data-bar-Spacing="5" data-bar-Color="#7cb5ec">1,2,3,4,5,4,3,2,1,2,3,4,5,6,7,8,7,6,5,4</div>
                    <h3 class="m-b-0">{{$data['registration']}}</h3>
                    <small class="displayblock">Total Registration<i class="zmdi zmdi-trending-up"></i></small>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="card ">
                    <div class="header">
                        <h2><strong>Admission</strong> Overview</h2>                        
                    </div>
                    <div class="body" style="padding-top: 0px;">
                        <div class="row">
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Admitted</span>
                                <h5 class="m-b-0">{{$data['registration-admitted']}}</h5>
                                <span><i class="zmdi zmdi-caret-up text-success"></i> +0%</span>
                            </div>
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Pending</span>
                                <h5 class="m-b-0">{{$data['registration-pending']}}</h5>
                                <span><i class="zmdi zmdi-caret-up text-success"></i> +0%</span>
                            </div>
                            <div class="col-sm-4 col-4 m-b-10">
                                <span class="text-muted">Rejected</span>
                                <h5 class="m-b-0">{{$data['registration-rejected']}}</h5>
                                <span><i class="zmdi zmdi-caret-up text-success"></i> +0%</span>
                            </div>
                        </div>                        
                    </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="header">
                    <h2><strong>Enquiry Vs Registration</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">
                    <div id="m_area_chart"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="header">
                    <h2><strong>Clas Wise Registration & Equiry Graph</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="693" 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'));
    MorrisArea();   
});

function getChartJs(type) {
    var config = null;
    if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($classes); ?>,
                datasets: [{
                    label: "Enquiry",
                    data: <?php echo json_encode($enquiryClass); ?>,
                    backgroundColor: '#00ced1',
                    strokeColor: "rgba(255,118,118,0.1)",
                }, {
                        label: "Registration",
                        data: <?php echo json_encode($registrationClass); ?>,
                        backgroundColor: '#7cb5ec',
                        strokeColor: "rgba(255,118,118,0.1)",
                    }]
            },
            options: {
                responsive: true,
                legend: false
            }
        }
    }
    return config;
}
// Morris-chart
function MorrisArea() {
    Morris.Area({
        element: 'm_area_chart',
        data: [
            @foreach($enquiry as $at)
            {
                period: "{{$at['period']}}",
                enquiry: {{$at['enquiry']}},
                registration: {{$at['registration']}}
            },
            @endforeach
        ],
        xkey: 'period',
        ykeys: ['enquiry', 'registration'],
        labels: ['Enquiry', 'Registration'],
        pointSize: 3,
        fillOpacity: 0,
        pointStrokeColors: [ '#00ced1', '#7cb5ec'],
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        lineWidth: 2,
        hideHover: 'auto',
        lineColors: ['#00ced1', '#7cb5ec'],
        resize: true

    });
}
</script>
@stop