IMMREX7

@extends('schools.school_layout')
@section('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><u>Collection Summary</u></b><br>
            <small>* Approx value without fine and based on choosen structure</small>
        </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">₹{{$data['estimated_fees']}}</h3>
                <p class="displayblock" style="font-weight: bold;">Total Estimated Fees</p>
            </div>
            <div class="m-t-10 text-center" style="background:#3ba8d5;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">More
                    Details &#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">₹{{$data['total_collection']}}</h3>
                <p class="displayblock" style="font-weight: bold;">Total Collections Till</p>
            </div>
            <div class="m-t-10 text-center" style="background:green;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:4px;font-size: 13px;">More
                    Details &#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">₹{{$data['estimated_fees'] - $data['total_collection']}}</h3>
                <p class="displayblock" style="font-weight: bold;">Total Outstanding</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;">More
                    Details &#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">₹{{$data['overdue_fees']}}</h3>
                <p class="displayblock" style="font-weight: bold;">Total Overdue</p>
            </div>
            <div class="m-t-10 text-center" style="background:red;">
                <a href="#" class="displayblock" style="color:white;font-weight: bold;padding:5px;font-size: 13px;">More
                    Details &#8594;</a>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 col-lg-12">
        <div class="card">
            <div class="header">
                <h2><strong>Collection</strong> Chart</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_chart2"></div>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b><u>Collection Details</u></b></p>
    </div>
    <div class="col-sm-6 row">
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="body text-center" style="padding-bottom: 0px;">
                    <h3 class="m-b-0">₹{{$data['cash']}}</h3>
                    <p class="displayblock" style="font-weight: bold;">Cash Collection</p>
                </div>
                <div class="m-t-10 text-center" style="background:#3ba8d5;">
                    <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-md-6 col-sm-12">
            <div class="card">
                <div class="body text-center" style="padding-bottom: 0px;">
                    <h3 class="m-b-0">₹{{$data['online']}}</h3>
                    <p class="displayblock" style="font-weight: bold;">Online Collection</p>
                </div>
                <div class="m-t-10 text-center" style="background:green;">
                    <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-md-6 col-sm-12">
            <div class="card">
                <div class="body text-center" style="padding-bottom: 0px;">
                    <h3 class="m-b-0">₹{{$data['cheque']}}</h3>
                    <p class="displayblock" style="font-weight: bold;">Cheque 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>
    <div class="col-sm-6">
        <div class="card">
            <div class="body">
                <canvas id="chart-area" height="150"></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b><u>Cheque Summary</u></b></p>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="header">
                <h2><strong>Cheque</strong> Report</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 class="row text-center">
                    <div class="col-sm-3 col-6">
                        <h4 class="margin-0">₹{{$data['tcheque']}} <i class="zmdi zmdi-trending-up col-blue"></i></h4>
                        <p class="text-muted">Total Cheque Collection</p>
                    </div>
                    <div class="col-sm-3 col-6">
                        <h4 class="margin-0">₹{{$data['cheque']}} <i class="zmdi zmdi-trending-up col-green"></i></h4>
                        <p class="text-muted">Inprogress + Cleared</p>
                    </div>
                    <div class="col-sm-3 col-6">
                        <h4 class="margin-0">₹{{$data['bounced']}} <i class="zmdi zmdi-trending-down col-red"></i></h4>
                        <p class="text-muted">Bounced</p>
                    </div>
                </div>
                <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><u>Month Wise Collection</u></b></p>
    </div>
    <div class="col-sm-12 row">


        @php 
        $prevDate = \Carbon\Carbon::parse($financialYear->startDate);
        $prevDate->subMonth();
        $startDate = \Carbon\Carbon::parse($financialYear->startDate);
        $endDate = \Carbon\Carbon::parse($financialYear->endDate);
        $diff = $startDate->diffInMonths($endDate);
        $currentDate = $startDate;
        @endphp

        <div class="card col-sm-4">
            <div class="header">
                <h2><strong>Advance</strong> Collection</h2>
            </div>
            <div class="body">
                @php
                    $main = \Carbon\Carbon::parse("01-".$prevDate->format('m')."-".$prevDate->format('Y'))->daysInMonth;
                    $amount = getAdvanceCollection($prevDate->format('m'),$prevDate->format('Y'),$idSchool,$idFinancialYear);
                    $avg = round($amount/$main);
                    $plot = getGraph($prevDate->format('m'),$prevDate->format('Y'),$idSchool,$idFinancialYear);
                @endphp
               <h3 class="m-b-0">₹{{$amount}}</h3>
                <small class="displayblock">₹{{$avg}} Average <i class="zmdi zmdi-trending-up"></i></small>
                <div class="sparkline" data-type="line" data-spot-Radius="1"
                    data-highlight-Spot-Color="rgb(63, 81, 181)" data-highlight-Line-Color="#222"
                    data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(63, 81, 181)"
                    data-spot-Color="rgb(63, 81, 181, 0.7)" data-offset="90" data-width="100%" data-height="60px"
                    data-line-Width="1" data-line-Color="rgb(63, 81, 181, 0.7)" data-fill-Color="rgba(221,94,137, 0.2)">
                    @foreach($plot as $key=>$value) {{$value}}, @endforeach 0 </div>
            </div>
        </div>

        @php $graphMonth = [] @endphp
        @for ($i = 0; $i <= $diff; $i++)
        @php if($i > 0) $currentDate->addMonth(); @endphp
        <div class="card col-sm-4">
            <div class="header">
                <h2><strong>Month </strong>{{$currentDate->format('M Y')}}</h2>
            </div>
            <div class="body">
                @php
                    $main = \Carbon\Carbon::parse("01-".$currentDate->format('m')."-".$currentDate->format('Y'))->daysInMonth;
                    $amount = getMonthCollection($currentDate->format('m'),$currentDate->format('Y'),$idSchool,$idFinancialYear);
                    $avg = round($amount/$main);
                    $plot = getGraph($currentDate->format('m'),$currentDate->format('Y'),$idSchool,$idFinancialYear);
                    $graphMonth[$currentDate->format('M')] = $amount;
                @endphp
                <h3 class="m-b-0">₹{{$amount}}</h3>
                <small class="displayblock">₹{{$avg}} Average <i class="zmdi zmdi-trending-up"></i></small>
                <div class="sparkline" data-type="line" data-spot-Radius="1"
                    data-highlight-Spot-Color="rgb(63, 81, 181)" data-highlight-Line-Color="#222"
                    data-min-Spot-Color="rgb(233, 30, 99)" data-max-Spot-Color="rgb(120, 184, 62)"
                    data-spot-Color="rgb(63, 81, 181, 0.7)" data-offset="90" data-width="100%" data-height="60px"
                    data-line-Width="1" data-line-Color="rgb(63, 81, 181, 0.7)"
                    data-fill-Color="rgba(128,133,233, 0.2)"> @foreach($plot as $key=>$value) {{$value}}, @endforeach 0</div>
            </div>
        </div>
        @endfor

    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 col-lg-12">
        <div class="card">
            <div class="header">
                <h2><strong>Month Wise</strong> Chart</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="bar_chart" height="100"></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-sm-12">
        <p style="font-size:18px;"><b><u>Class Wise Report</u></b></p>
    </div>
    @php $collectionCw = []; @endphp
    @foreach($classes as $var)
    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="header">
                <h2><strong>Class </strong> {{$var->className}}</h2>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-sm-4 col-4 m-b-10">
                        <small class="text-muted">Collected</small>
                        @php $collectionCw[$var->idClass] = getClassCollection($var->idClass,$idSchool,$idFinancialYear); @endphp
                        <h5 class="m-b-0">₹{{$collectionCw[$var->idClass]}}</h5>
                    </div>
                    <div class="col-sm-4 col-4 m-b-10">
                        <small class="text-muted">Due</small>
                        <h5 class="m-b-0">₹{{$data['class_'.$var->idClass] - $collectionCw[$var->idClass]}}</h5>
                    </div>
                    <div class="col-sm-4 col-4 m-b-10">
                        <small class="text-muted">Overdue</small>
                        <h5 class="m-b-0">₹{{$data['overdue_class_'.$var->idClass]}}</h5>
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar l-turquoise" role="progressbar" aria-valuenow="87" aria-valuemin="0"
                        aria-valuemax="100" style="width: 87%;"></div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
<div class="row clearfix">
    <div class="col-lg-12 col-md-12">
        <div class="card">
            <div class="header">
                <h2><strong>Class Wise 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">
                <div id="m_bar_chart"></div>
            </div>
        </div>
    </div>
</div>
@stop
@section('script')

<script>
    $(function () {
        "use strict";
        MorrisArea();
        MorrisBarChart();
        new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs());
        
    });
    // Morris-chart
    function MorrisBarChart() {
        Morris.Bar({
            element: 'm_bar_chart',
            data: [
                @foreach($classes as $var)
            {
                y: '{{$var->className}}',
                collected: {{$collectionCw[$var->idClass]}},
                due: {{$data['class_'.$var->idClass] - $collectionCw[$var->idClass]}},
                overdue: 0
            },
            @endforeach
            ],
            xkey: 'y',
            ykeys: ['collected', 'due', 'overdue'],
            labels: ['Collected', 'Due', 'OVerdue'],
            barColors: ['#238000', '#f40103', '#f5a540'],
            hideHover: 'auto',
            gridLineColor: '#eef0f2',
            resize: true
        });
    }      
    @php 
        $startDate = \Carbon\Carbon::parse($financialYear->startDate);
        $currentDate = $startDate;
    @endphp                        
    function MorrisArea() {
        Morris.Area({
            element: 'area_chart',
            data: [
            @for ($i = 0; $i <= $diff; $i++)
            @php 
            if($i > 0) $currentDate->addMonth(); 
            $dataCheque = getChequeGraph($currentDate->format('m'),$currentDate->format('Y'),$idSchool,$idFinancialYear);
            @endphp
            {
                period: '{{$dataCheque['period']}}',
                collection: {{$dataCheque['collection']}},
                inprogress: {{$dataCheque['inprogress']}},
                bounced: {{$dataCheque['collection'] - $dataCheque['inprogress']}}
            },
            @endfor
        ],
        lineColors: ['#3ba8d5', '#238000', '#f40103'],
        xkey: 'period',
        ykeys: ['collection', 'inprogress', 'bounced'],
        labels: ['Total Collection', 'Inprogress + Cleared', 'Bounced'],
        pointSize: 0,
        lineWidth: 0,
        resize: true,
        fillOpacity: 0.5,
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        hideHover: 'auto'
        });

        Morris.Area({
            element: 'm_area_chart2',
            data: [
                {
                    period: '{{$financialYear->startDate}}',
                    estimate: 0,
                    collection: 0,
                    outstanding: 0,
                    due: 0,
                },
                {
                    period: '{{$financialYear->endDate}}',
                    estimate: 0,
                    collection: {{$data['total_collection']}},
                    outstanding: 0,
                    due: 0,
                }
            ],
            xkey: 'period',
            ykeys: ['estimate', 'collection','outstanding','due'],
            labels: ['Estimated Fee', 'Collections','Outstanding','Due'],
            pointSize: 0,
            fillOpacity: 0.4,
            pointStrokeColors: ['#9e9e9e','#238000','#457fca',  '#f40103'],
            behaveLikeLine: true,
            gridLineColor: '#e0e0e0',
            lineWidth: 0,
            smooth: false,
            hideHover: 'auto',
            lineColors: ['#9e9e9e','#238000','#457fca',  '#f40103'],
            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: [
                    {{$data['cash']}},
                    {{$data['online']}},
                    {{$data['cheque']}},
                ],
                backgroundColor: [
                    color(chartColors.blue).rgbString(),
                    color(chartColors.green).rgbString(),
                    color(chartColors.orange).rgbString(),
                ],
                label: 'My dataset' // for legend
            }],
            labels: [
                "Cash Collection",
                "Online Collection",
                "Cheque Collection"
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'right',
            },
            title: {
                display: true,
                text: 'Collection Details'
            },
            scale: {
                ticks: {
                    beginAtZero: true
                },
                reverse: false
            },
            animation: {
                animateRotate: false,
                animateScale: true
            }
        }
    };

    window.onload = function () {
        var ctx = document.getElementById("chart-area");
        window.myPolarArea = Chart.Doughnut(ctx, config);
    };

   
    function getChartJs(type) {
    @php 
        $mn = [];
        $mv = [];
        foreach($graphMonth as $key => $value){
            array_push($mn,$key);
            array_push($mv,$value);
        }
    @endphp
    var config = {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($mn) ?>,
                datasets: [{
                    label: "Month wise collection",
                    data: <?php echo json_encode($mv)?>,
                    backgroundColor: '#3ba8d5',
                    strokeColor: "rgba(255,118,118,0.1)",
                }]
            },
            options: {
                responsive: true,
                legend: false
            }
    }
    return config;
}
</script>
@stop