IMMREX7

<?php $__env->startSection('content'); ?>
<style>
    section.content:before{
        height: 86px !important;
    }
</style>
<div class="row clearfix" style="margin-top: 20px;">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b>Collection Details</b></p>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0" >88888888</h3>
                <p class="displayblock" style="font-weight: bold;">Total Estimated Fees</p>
            </div>
            <div class="m-t-10 text-center" style="background:#2b982b;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0">88888888</h3>
                <p class="displayblock" style="font-weight: bold;">Total Collections Till</p>
            </div>
            <div class="m-t-10 text-center" style="background:#f96332;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:4px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0" >88888888</h3>
                <p class="displayblock" style="font-weight: bold;">Total Outstanding</p>
            </div>
            <div class="m-t-10 text-center" style="background:yellowgreen;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0" >88888888</h3>
                <p class="displayblock" style="font-weight: bold;">Total Overdue</p>
            </div>   
            <div class="m-t-10 text-center" style="background:orange;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b>Collection Details</b></p>
    </div>
    
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0" >88888888</h3>
                <p class="displayblock" style="font-weight: bold;">Cash Collection</p>
            </div>   
            <div class="m-t-10 text-center" style="background:#2b982b;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0" >88888888</h3>
                <p class="displayblock" style="font-weight: bold;">Card Collection</p>
            </div>   
            <div class="m-t-10 text-center" style="background:orange;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
            <div class="body text-center" style="padding-bottom: 0px;">
                <h3 class="m-b-0" >88888888</h3>
                <p class="displayblock" style="color:white;font-weight: bold;">Cheque Collection</p>
            </div>   
            <div class="m-t-10 text-center" style="background:#f96332;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">View All &#8594;</a>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
     <div class="col-sm-12">
        <p style="font-size:18px;"><b>Cheque Area</b></p>
    </div>
    
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>Total Cheque Collection</strong> </h2>
                <div id="legend" class="m-t-10"></div>
            </div>
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
         <div class="card">
            <div class="header">
                <h2><strong>Inprogress + Cleared</strong> </h2>
                <div id="legend" class="m-t-10"></div>
            </div>
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>Bounced</strong> </h2>
                <div id="legend" class="m-t-10"></div>
            </div>
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b>Month Wise Collection</b></p>
    </div>
    
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>Advance Collection</strong> </h2>
                <div id="legend" class="m-t-10"></div>
            </div>
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
        
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
       
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
        
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
        
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
       
    </div>
</div>
<div class="row clearfix">
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="header">
                    <h2><strong>Collection Percentage</strong> </h2>
                    <ul class="header-dropdown">
                        <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more"></i> </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Action</a></li>
                                <li><a href="javascript:void(0);">Another action</a></li>
                                <li><a href="javascript:void(0);">Something else</a></li>
                            </ul>
                        </li>
                        <li class="remove">
                            <a role="button" class="boxs-close"><i class="zmdi zmdi-close"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="body">
                     <canvas id="chart-area" height="150"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="header">
                    <h2><strong>Today Class Wise  Percentage</strong> </h2>
                    <ul class="header-dropdown">
                        <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more"></i> </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Action</a></li>
                                <li><a href="javascript:void(0);">Another action</a></li>
                                <li><a href="javascript:void(0);">Something else</a></li>
                            </ul>
                        </li>
                        <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 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="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more"></i> </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Action</a></li>
                                <li><a href="javascript:void(0);">Another action</a></li>
                                <li><a href="javascript:void(0);">Something else</a></li>
                            </ul>
                        </li>
                        <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>Class Wise Registration & Equiry Graph</strong> </h2>
                    <ul class="header-dropdown">
                        <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more"></i> </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Action</a></li>
                                <li><a href="javascript:void(0);">Another action</a></li>
                                <li><a href="javascript:void(0);">Something else</a></li>
                            </ul>
                        </li>
                        <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_one" height="250" width="693" style="display: block; width: 555px; height: 277px;"></canvas>
                </div>
            </div>
        </div>            
    </div>
<div class="row clearfix">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b>Class Wise  Report</b></p>
    </div>
    
    <div class="col-md-6 col-sm-12">
        <div class="card">
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
            <div class="header">
                <h2><strong>Grade 1</strong> </h2>
                <div id="legend" class="m-t-10"></div>
            </div>
        </div>
    </div>
     <div class="col-md-6 col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>Grade 2</strong> </h2>
                <div id="legend" class="m-t-10"></div>
            </div>
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>

<script>
$(function () {
    "use strict";
    new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
    new Chart(document.getElementById("bar_chart_one").getContext("2d"), getChartJsTwo('bar'));
    MorrisArea();  
});

function getChartJsTwo(type) {
    var config = null;
    if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th","8th","9th","10th","11th","12th"],
                datasets: [{
                    label: "My First dataset",
                    data: [28, 48, 40, 19, 86, 27, 90,28, 48, 40, 19,11],
                    backgroundColor: '#26c6da',
                    strokeColor: "rgba(255,118,118,0.1)",
                }, {
                        label: "My Second dataset",
                        data: [40, 30, 80, 61, 26, 75, 40,28, 48, 40, 19,20],
                        backgroundColor: '#8a8a8b',
                        strokeColor: "rgba(255,118,118,0.1)",
                    }]
            },
            options: {
                responsive: true,
                legend: false
            }
        }
    }
    return config;
}

function getChartJs(type) {
    var config = null;
    if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th","8th","9th","10th","11th","12th"],
                datasets: [{
                    label: "My First dataset",
                    data: [28, 48, 40, 19, 86, 27, 90,28, 48, 40, 19,11],
                    backgroundColor: '#26c6da',
                    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: [{
                period: '2011',
                iphone: 45,
                ipad: 75
            }, {
                period: '2012',
                iphone: 130,
                ipad: 110
            }, {
                period: '2013',
                iphone: 80,
                ipad: 60
            }, {
                period: '2014',
                iphone: 78,
                ipad: 205
            }, {
                period: '2015',
                iphone: 180,
                ipad: 124
            }
        ],
        xkey: 'period',
        ykeys: ['iphone', 'ipad'],
        labels: ['iPhone', 'iPad'],
        pointSize: 3,
        fillOpacity: 0,
        pointStrokeColors: [ '#cccccc', '#379c94'],
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        lineWidth: 2,
        hideHover: 'auto',
        lineColors: ['#cccccc', '#379c94'],
        resize: true

    });
}
var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};

var chartColors = window.chartColors;
var color = Chart.helpers.color;
var config = {
    data: {
        datasets: [{
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
            ],
            backgroundColor: [
                color(chartColors.red).alpha(0.5).rgbString(),
                color(chartColors.orange).alpha(0.5).rgbString(),
                color(chartColors.yellow).alpha(0.5).rgbString(),
                color(chartColors.green).alpha(0.5).rgbString(),
                color(chartColors.blue).alpha(0.5).rgbString(),
            ],
            label: 'My dataset' // for legend
        }],
        labels: [
            "Red",
            "Orange",
            "Yellow",
            "Green",
            "Blue"
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'right',
        },
        title: {
            display: true,
            text: 'Chart.js Polar Area Chart'
        },
        scale: {
            ticks: {
                beginAtZero: true
            },
            reverse: false
        },
        animation: {
            animateRotate: false,
            animateScale: true
        }
    }
};

window.onload = function() {
    var ctx = document.getElementById("chart-area");
    window.myPolarArea = Chart.PolarArea(ctx, config);
};
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('schools.school_layout', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>