@extends ('layouts/template')

@section('content')
<style>
    #managementStatsComponent h5 {
        font-size: 19px;
        font-weight: bold;
        color: #a7a7a7;
    }

    #managementStatsComponent span.count {
        font-size: 47px;
        font-weight: bold;
    }
    #managementStatsComponent .card .card-header {
        font-size: 15px;
        font-weight: bold;
    }
</style>
<div class="p-3 mcp-theme-1" id="patients-list">
    <div class="card">

        <div class="card-header px-3 py-2 d-flex align-items-center">
            <strong class="mr-4">
                <i class="fas fa-user"></i>
                Management Stats
            </strong>
        </div>
        <div class="p-3">
            @include('app.admin.management-stats.filters')
        </div>
        <div id="managementStatsComponent" v-cloak>
            <div class="row">
                <div class="col-md-12 mb-2">
                    <div class="card">
                        <div class="card-header">Overview</div>
                        <div class="card-body bg-light">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="bg-white p-3 border rounded">
                                        <div class="d-flex flex-column">
                                            <h5>Acquired Clients</h5>
                                            <span class="count">@{{ resultMap.AcquiredClients.length }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="bg-white p-3 border rounded">
                                        <div class="d-flex flex-column">
                                            <h5>Total Billed Amount</h5>
                                            <span class="count">@{{ formatAmount(resultMap.TotalBilledAmount[0].sum) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    @include("app.admin.management-stats.active-clients")
                </div>
                <div class="col-6">
                    @include("app.admin.management-stats.active-pros")
                </div>
                <div class="col-6">
                    @include("app.admin.management-stats.note-count-by-month")
                </div>
                <div class="col-6">
                    @include("app.admin.management-stats.cpt-codes-billed")
                </div>
                <div class="col-12">
                    @include("app.admin.management-stats.cpt-codes-billed-by-month")
                </div>



            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        const formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
        });

        function init() {
            new Vue({
                el: '#managementStatsComponent',
                delimiters: ['@{{', '}}'],
                data: {
                    view: 'CHARTS',
                    resultMap: <?= json_encode($resultMap) ?>
                },
                methods: {
                    formatAmount: function(amount){
                        if(!amount) return 0;
                        return formatter.format(amount);
                    },
                    drawDateValueBarGraph: function(data, date_prop, value_prop, canvasID, datasetLabel, dateFormat, barColor) {
                        var xAxisValues = [];
                        var yAxisValues = [];
                        for (var i = 0; i < data.length; i++) {
                            var d = data[i];
                            var xAxisValue = d[date_prop];
                            if (dateFormat) {
                                xAxisValue = moment(xAxisValue, 'YYYY-MM-DD').format(dateFormat);
                            }
                            xAxisValues.push(xAxisValue);
                            yAxisValues.push(d[value_prop]);
                        }
                        const ctx = document.getElementById(canvasID);
                        new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: xAxisValues,
                                datasets: [{
                                    label: datasetLabel,
                                    data: yAxisValues,
                                    borderWidth: 1,
                                    borderColor: barColor,
                                    backgroundColor: barColor
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    },
                    initNoteCountByMonthGraph: function() {
                        var data = this.resultMap.NoteCountByMonth;
                        this.drawDateValueBarGraph(data, 'date_trunc', 'count', 'NoteCountByMonth', 'Note count by month', 'MMM/YYYY', '#17a2b8');
                    },
                    initActiveClientsByMonth: function() {
                        var data = this.resultMap.ActiveClientsByMonth;
                        this.drawDateValueBarGraph(data, 'date_trunc', 'count', 'ActiveClientsByMonth', 'Active Clients by month', 'MMM/YYYY');
                    },
                    initActiveProsByMonth: function() {
                        var data = this.resultMap.ActiveProsByMonth;
                        this.drawDateValueBarGraph(data, 'date_trunc', 'count', 'ActiveProsByMonth', 'Active Pros by month', 'MMM/YYYY', '#65BF7A');
                    },
                    initCptCodesBilled: function() {
                        var data = this.resultMap.CptCodesBilled;
                        this.drawDateValueBarGraph(data, 'cpt', 'count', 'CptCodesBilled', 'Cpt Codes Billed', null, '#ffc107');
                    },
                    initCptCodesBilledByMonth: function() {
                        var data = this.resultMap.CptCodesBilledByMonth;
                        var dateMap = {};
                        for (var i = 0; i < data.length; i++) {
                            var d = data[i];
                            if (!dateMap[d.date_trunc]) {
                                dateMap[d.date_trunc] = {
                                    date: moment(d.date_trunc, 'YYYY-MM-DD').format('MMM/YYYY'),
                                    cpts: {}
                                };
                            }
                            if (!dateMap[d.date_trunc].cpts[d.cpt]) {
                                dateMap[d.date_trunc].cpts[d.cpt] = null
                            }
                            dateMap[d.date_trunc].cpts[d.cpt] = d.count;
                        }

                        console.log({
                            dateMap
                        });
                        const LABELS = [];
                        const CPTS = {};
                        for (f in dateMap) {
                            var date = dateMap[f].date;
                            LABELS.push(date);
                            for (var c in dateMap[f].cpts) {
                                var cptValue = dateMap[f].cpts[c];
                                if (!CPTS[c]) {
                                    CPTS[c] = [];
                                }
                                CPTS[c].push(cptValue);
                            }
                        }

                        var CPT_DATASETS = [];
                        for (cpt in CPTS) {
                            var cptArray = CPTS[cpt];
                            CPT_DATASETS.push({
                                label: cpt,
                                backgroundColor: null,
                                data: cptArray
                            });
                        }


                        console.log({
                            LABELS,
                            CPTS,
                            CPT_DATASETS
                        });
                        var ctx = document.getElementById('CptCodesBilledByMonth');
                        var data = {
                            labels: LABELS,
                            datasets: CPT_DATASETS
                        };

                        var myBarChart = new Chart(ctx, {
                            type: 'bar',
                            data: data,
                            options: {
                                barValueSpacing: 20,
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            min: 0,
                                        }
                                    }]
                                }
                            }
                        });
                    },
                    init: function() {
                        console.log({
                            map: this.resultMap
                        });
                        this.initActiveClientsByMonth();
                        this.initActiveProsByMonth();
                        this.initNoteCountByMonthGraph();
                        this.initCptCodesBilled();
                        this.initCptCodesBilledByMonth();
                    },
                },
                mounted: function() {
                    this.init();
                },
            });


        }
        addMCInitializer('managementStats', init, '#managementStatsComponent');
    })();
</script>

@endsection