@extends('layouts.master')


@section('page_header')
    Home
@endsection


@section('content')

    @can('view','App\Payment')
        <div class="row">
            {{--Patient Info--}}
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>{{$clinic->patients()->count()}}</h3>
                        <p>Patients Registered</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="{{route('patients')}}" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            {{--Prescription Info--}}
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>
                            {{$prescriptionCount}}
                        </h3>
                        <p>Prescriptions Issued</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-clipboard"></i>
                    </div>
                    <a href="{{route('issueMedicine')}}" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            {{--Payments--}}
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>$ {{$payments}}</h3>
                        <p>Total Payments</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a href="{{route('payments')}}" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            {{--Stocks--}}
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>{{$clinic->drugs()->where('quantity','<',100)->count()}}</h3>
                        <p>Stocks Running Low</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <a href="{{route('stocksRunningLow')}}" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    @endcan

    <div class="row container-fluid">
        <div class="box box-primary">
            <div class="box-header">
                <h4 class="box-title">Patient Visits - Last 6 months</h4>
            </div>
            <div class="box-body">
                @if(count($stats['visits']['m'])<2)
                    {{-- When no stats available to be shown --}}
                    <div class="callout callout-info">
                        <h4>Not Enough Records Found!</h4>
                        <p>
                            There are no enough records to show statistic of the clinic. This will be available once
                            you start inserting prescriptions.
                        </p>
                    </div>
                @else
                    <div class="chart">
                        <canvas id="patientChart" style="height: 350px;"></canvas>
                        <div id="legend"></div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if(count($stats['visits']['m'])>=2)
        <script src="{{asset('plugins/chartjs/Chart.min.js')}}"></script>
        <script>
            $(document).ready(function () {
                // Get context with jQuery - using jQuery's .get() method.
                var areaChartCanvas = $("#patientChart").get(0).getContext("2d");
                // This will get the first returned node in the jQuery collection.
                var areaChart = new Chart(areaChartCanvas);

                var areaChartData = {
                    labels: {!! json_encode($stats['visits']['m']) !!},
                    datasets: [
                        {
                            label: "Digital Goods",
                            fillColor: "rgba(60,141,188,0.9)",
                            strokeColor: "rgba(60,141,188,0.8)",
                            pointColor: "#3b8bba",
                            pointStrokeColor: "rgba(60,141,188,1)",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(60,141,188,1)",
                            data:  {!! json_encode($stats['visits']['c']) !!}
                        }
                    ]
                };

                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
                    legend: {
                        display: true
                    },
                    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
                var chart = areaChart.Line(areaChartData, areaChartOptions);

            });
        </script>
    @endif
@endsection