@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            {{$hospital->name}} Statistics
        </h1>
        <ol class="breadcrumb">
            <li><a target="_blank" href="{{route('daily.sale')}}"><i class="fa fa-print"></i> Print</a>
            </li>
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <div class="row">

            <div class="col-md-4">

                <!-- solid sales graph -->
                <div class="box box-solid bg-teal-gradient">
                    <div class="box-header">
                        <i class="fa fa-th"></i>
                        <h3 class="box-title">Sales Graph</h3>
                    </div>
                    <div class="box-body border-radius-none">
                        <div class="chart" id="line-chart" style="height: 250px;"></div>
                    </div>
                </div>
                <!-- /.box -->

            </div>

            <div class="col-md-4 hide">
                <!-- AREA CHART -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Annual Income vs Expense - {{\Carbon\Carbon::now()->year}}</h3>
                    </div>
                    <div class="box-body">
                        <div class="chart">
                            <canvas id="areaChart" style="height:250px"></canvas>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>

            <div class="col-md-4">
                <!-- DONUT CHART -->

                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">Patient Fee Summery - {{\Carbon\Carbon::now()->year}}</h3>
                    </div>
                    <div class="box-body">
                        <div class="chart">
                            <canvas id="barChart" style="height:250px"></canvas>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>

            <div class="col-md-4">
                <div class="box box-danger">
                    <div class="box-header with-border">
                        <h3 class="box-title">Appointment Status - {{\Carbon\Carbon::now()->year}}</h3>
                    </div>
                    <div class="box-body">
                        <canvas id="pieChart" style="height:250px"></canvas>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>

        </div>

        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">

                <div class="row">

                    <div class="col-md-3 col-sm-6  col-xs-12">
                        <!-- small box -->
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-user"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Total Patients</span>
                                <span class="info-box-number">{{$totalPatients}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>

                    </div>
                    <!-- ./col -->
                    <div class="col-md-3 col-sm-6  col-xs-12">
                        <!-- small box -->

                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-user"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Patients</span>
                                <span class="info-box-number">{{$todaysPatients}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>

                    </div>
                    <!-- ./col -->
                    <div class="col-md-3 col-sm-6  col-xs-12">
                        <!-- small box -->
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-user-md"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Total Doctors</span>
                                <span class="info-box-number">{{$totalDoctors}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>

                    </div>

                </div>

                <div class="row">

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-money"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Sale</span>
                                <span class="info-box-number">{{$todaysSales}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-cart-arrow-down"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Paid</span>
                                <span class="info-box-number">{{$todaysPaid}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="ion ion-ios-cart-outline"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Dues</span>
                                <span class="info-box-number">{{$todaysDues}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-credit-card"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Sale Discount</span>
                                <span class="info-box-number">{{$todaysSaleDiscount}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                </div>
                <div class="row">
                    <!-- /.col -->
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-money"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Doctor Commission</span>
                                <span class="info-box-number">{{$totalDoctorCommission}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-dollar"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Today's Refund</span>
                                <span
                                    class="info-box-number">{{$todaysRefund}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="ion ion-ios-cart-outline"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Total Expense</span>
                                <span class="info-box-number">{{$todaysExpense}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="fa fa-dollar"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Total Income</span>
                                <span
                                    class="info-box-number">{{$todaysPaid - $todaysExpense}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12" style="display: none;">
                        <div class="info-box">
                            <span class="info-box-icon bg-{{randomSmallBoxHeaderColor()}}"><i
                                    class="ion ion-ios-cart-outline"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Balance</span>
                                <span class="info-box-number">{{$todaysSales-$todaysSaleDiscount- $todaysExpense}}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </section>
    <!-- /.content -->
@endsection

@section('extra-css')
    {{ Html::style('assets/bower_components/morris.js/morris.css') }}
    <style>
        .info-box-text {
            text-transform: none;
        }
    </style>
@stop

@section('extra-js')
    {{ Html::script('assets/bower_components/chart.js/Chart.js') }}
    {{ Html::script('assets/bower_components/raphael/raphael.min.js') }}
    {{ Html::script('assets/bower_components/morris.js/morris.min.js') }}

    <script>
        $(function () {

            //--------------
            //- AREA CHART -
            //--------------

            // Get context with jQuery - using jQuery's .get() method.
            var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
            // This will get the first returned node in the jQuery collection.
            var areaChart = new Chart(areaChartCanvas)

            var areaChartData = {
                labels: [{!! "'" . implode ( "','", array_keys($yearlyIncome) ) . "'" !!}],
                datasets: [
                    {
                        label: 'Expense',
                        fillColor: '{{rand_color()}}',
                        strokeColor: '{{rand_color()}}',
                        pointColor: '{{rand_color()}}',
                        pointStrokeColor: '{{rand_color()}}',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(220,220,220,1)',
                        data: [{!! "'" . implode ( "','", array_values($yearlyExpense) ) . "'" !!}]
                    },
                    {
                        label: 'Income',
                        fillColor: '{{rand_color()}}',
                        strokeColor: '{{rand_color()}}',
                        pointColor: '{{rand_color()}}',
                        pointStrokeColor: '{{rand_color()}}',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: '{{rand_color()}}',
                        data: [{!! "'" . implode ( "','", array_values($yearlyIncome) ) . "'" !!}]
                    }
                ]
            }

            var areaChartOptions = {
                //Boolean - If we should show the scale at all
                showScale: true,
                //Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: false,
                //String - Colour of the grid lines
                scaleGridLineColor: 'rgba(0,0,0,.05)',
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - Whether the line is curved between points
                bezierCurve: true,
                //Number - Tension of the bezier curve between points
                bezierCurveTension: 0.3,
                //Boolean - Whether to show a dot for each point
                pointDot: false,
                //Number - Radius of each point dot in pixels
                pointDotRadius: 4,
                //Number - Pixel width of point dot stroke
                pointDotStrokeWidth: 1,
                //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                pointHitDetectionRadius: 20,
                //Boolean - Whether to show a stroke for datasets
                datasetStroke: true,
                //Number - Pixel width of dataset stroke
                datasetStrokeWidth: 2,
                //Boolean - Whether to fill the dataset with a color
                datasetFill: true,
                //String - A legend template
                legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
                //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                maintainAspectRatio: true,
                //Boolean - whether to make the chart responsive to window resizing
                responsive: true
            }

            //Create the line chart
            areaChart.Line(areaChartData, areaChartOptions)

            //-------------
            //- PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
            var pieChart = new Chart(pieChartCanvas)
            var PieData = [
                    @foreach($yearlyDoctorAppointment as $monthName => $monthOfPatient)
                {
                    value: {{$monthOfPatient}},
                    color: '{{rand_color()}}',
                    highlight: '{{rand_color()}}',
                    label: '{{$monthName}}'
                },
                @endforeach
            ]
            var pieOptions = {
                //Boolean - Whether we should show a stroke on each segment
                segmentShowStroke: true,
                //String - The colour of each segment stroke
                segmentStrokeColor: '#fff',
                //Number - The width of each segment stroke
                segmentStrokeWidth: 2,
                //Number - The percentage of the chart that we cut out of the middle
                percentageInnerCutout: 50, // This is 0 for Pie charts
                //Number - Amount of animation steps
                animationSteps: 100,
                //String - Animation easing effect
                animationEasing: 'easeOutBounce',
                //Boolean - Whether we animate the rotation of the Doughnut
                animateRotate: true,
                //Boolean - Whether we animate scaling the Doughnut from the centre
                animateScale: false,
                //Boolean - whether to make the chart responsive to window resizing
                responsive: true,
                // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                maintainAspectRatio: true,
                //String - A legend template
                legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            pieChart.Doughnut(PieData, pieOptions)

            //------------
            //- BAR CHART -
            //-------------
            var barChartCanvas = $('#barChart').get(0).getContext('2d')
            var barChart = new Chart(barChartCanvas)
            var barChartData = areaChartData
            barChartData.datasets[1].fillColor = '{{rand_color()}}'
            barChartData.datasets[1].strokeColor = '{{rand_color()}}'
            barChartData.datasets[1].pointColor = '{{rand_color()}}'
            var barChartOptions = {
                //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
                scaleBeginAtZero: true,
                //Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: true,
                //String - Colour of the grid lines
                scaleGridLineColor: 'rgba(0,0,0,.05)',
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - If there is a stroke on each bar
                barShowStroke: true,
                //Number - Pixel width of the bar stroke
                barStrokeWidth: 2,
                //Number - Spacing between each of the X value sets
                barValueSpacing: 5,
                //Number - Spacing between data sets within X values
                barDatasetSpacing: 1,
                //String - A legend template
                legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
                //Boolean - whether to make the chart responsive
                responsive: true,
                maintainAspectRatio: true
            }

            barChartOptions.datasetFill = false
            barChart.Bar(barChartData, barChartOptions)

            var line = new Morris.Line({
                element: 'line-chart',
                resize: true,
                data: [
                    {!! $income_expense_graph_view !!}
                ],
                xLabels: 'month',
                xkey: 'y',
                ykeys: ['income', 'expense'],
                labels: ['Income', 'Expense'],
                gridTextColor: '#efefef',
                lineColors: ['{{rand_color()}}', '{{rand_color()}}'],
                pointStrokeColors: ['{{rand_color()}}'],
                gridLineColor: '#fff',
                gridTextFamily: 'Open Sans',
                gridTextSize: 10
            });

        })

    </script>

@stop