@extends('backend.layouts.app')

@section('meta_description', 'Caritsan Statistici')

@section('header-scripts')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        var payments = ;
        var userType = ;
        var statsObj = ;
        var stats = Object.values(statsObj);
        var range = ;


        var period = payments.pop();
        var performance = ;
        var workpoints = ;
        var statsTotal = 0;
        for (let i = 1; i < stats.length; i++) {
            statsTotal += Number(stats[i][1]);
        }

        google.charts.load('current', {'packages': ['corechart']});
        google.charts.setOnLoadCallback(function () {
            drawColumnChart(stats, "stats", "Status programari in aceasta perioada")
        });
        google.charts.setOnLoadCallback(function () {
            drawPieChart(stats, "statsPie", "Status programari in aceasta perioada (Total Programari: " + statsTotal + ")")
        });
        google.charts.setOnLoadCallback(function () {
            drawColumnChart(performance, "performance", "Top 5 doctori in functie de numarul de consultatii efectuate in aceata perioada")
        });
        google.charts.setOnLoadCallback(function () {
            drawColumnChart(workpoints, "workpoints", "Performanta puncte de lucru in aceasta perioada (nr. programari)")
        });
//        google.charts.setOnLoadCallback(function () {
//            drawBarChart(payments, "payments", "Top 5 pacienti in functie de platile efectuate in aceasta perioada")
//        });
        google.charts.setOnLoadCallback(function () {
            drawColumnChart(range, "range", "Pacienti pe grupe de varsta inregistrati in aceasta perioada")
        });
        google.charts.setOnLoadCallback(function () {
            drawColumnChart(userType, "userType", "Pacientii inregistrati in functie de sex in aceasta perioada")
        });

        function drawBarChart(data, element, title) {
            var displayData = google.visualization.arrayToDataTable(data);
            var options = {
                title: title,
                curveType: 'function',
                legend: {position: 'top'}
            };
            var barChart = new google.visualization.BarChart(document.getElementById(element));
            barChart.draw(displayData, options);
        }

        function drawColumnChart(data, element, title) {
            var displayData = google.visualization.arrayToDataTable(data);
            var options = {
                title: title,
                curveType: 'function',
                legend: {position: 'top'}
            };
            var barChart = new google.visualization.ColumnChart(document.getElementById(element));
            barChart.draw(displayData, options);
        }

        function drawPieChart(data, element, title) {
            var displayData = google.visualization.arrayToDataTable(data);
            var options = {
                title: title,
                curveType: 'function',
                legend: {position: 'right'}
            };
            var barChart = new google.visualization.PieChart(document.getElementById(element));
            barChart.draw(displayData, options);
        }
    </script>
@endsection

@section('content')
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 col-md-8 col-md-offset-3 col-lg-6 col-lg-offset-4">
            <form action="{{ route('admin.charts') }}" method="post" class="form-horizontal" role="form">
                {{ csrf_field() }}
                <div class="col-xs-5">
                    <input type="date" id="fromDate" name="from_date" class="form-control" min="2017-08-14">
                </div>
                <div class="col-xs-5">
                    <input type="date" id="toDate" name="to_date" class="form-control" min="2017-08-15">
                </div>
                <div class="col-xs-2">
                    <input type="submit" class="btn btn-info" value="Show">
                </div>
            </form>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="clo-xs-12">
            <h2 class="text-center">Chart-uri periodice</h2>
            <h3 class="text-center"><span id="fromDateSpan"></span> - <span id="toDateSpan"></span></h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="stats" style="width: auto; height: 500px"></div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="statsPie" style="width: auto; height: 500px"></div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="performance" style="width: auto; height: 500px"></div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="workpoints" style="width: auto; height: 500px"></div>
        </div>
    </div>
    <hr>
    {{--<div class="row">--}}
        {{--<div class="col-md-8 col-md-offset-2">--}}
            {{--<div id="payments" style="width: auto; height: 500px"></div>--}}
        {{--</div>--}}
    {{--</div>--}}
    <hr>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="range" style="width: auto; height: 500px"></div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="userType" style="width: auto; height: 500px"></div>
        </div>
    </div>
@endsection
@section('after-scripts')
    <script>
        document.getElementById("fromDateSpan").innerHTML = period[0];
        document.getElementById("toDateSpan").innerHTML = period[1];
    </script>
@endsection