stagfe2/resources/views/app/dashboard.blade.php

@extends ('layouts.template')

@section('content')
<div class="p-3">
    <div class="m-0 mt-4">
        <div class="row">
            <div class="col-md-3 mcp-theme-1">
                <div class="mb-4">
                    <div class="pro-dashboard-inline-calendar"></div>
                </div>
                <div class="card mb-4">
                    <div class="card-header pl-2">
                        <strong>
                            <i class="fas fa-chart-bar"></i>
                            Key Numbers
                        </strong>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-condensed table-bordered m-0">
                            <tbody>
                                <tr>
                                    <th class="px-2 text-center">{{$keyNumbers['totalPatients']}}</th>
                                    <th class="pl-2"><a href="/patients">Total patients</a></th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$keyNumbers['patientsNotSeenYet']}}</th>
                                    <th class="pl-2"><a href="/patients/not-yet-seen">Patients I have not seen yet</a></th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$keyNumbers['pendingBillsToSign']}}</th>
                                    <th class="pl-2"><a href="/practice-management/bills/not-yet-signed">Pending bills to sign</a></th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$keyNumbers['pendingNotesToSign']}}</th>
                                    <th class="pl-2"><a href="/practice-management/notes/not-yet-signed">Pending notes to sign</a></th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header">
                        <strong>
                            Reimbursement
                        </strong>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-condensed table-bordered m-0">
                            <tbody>
                                <tr>
                                    <th class="px-2">{{$reimbursement['currentBalance']}}</th>
                                    <th class="pl-2"><a href="/practice-management/financial-transactions">Current balance</a></th>
                                </tr>
                                <tr>
                                    <th class="px-2">{{friendly_date_time($reimbursement['nextPaymentDate'], false)}}</th>
                                    <th class="pl-2">Next Payment Date</th>
                                </tr>
                                <tr>
                                    <th class="px-2">{{$reimbursement['nextPaymentAmount']}}</th>
                                    <th class="pl-2">Next Payment Amount</th>
                                </tr>
                                <tr>
                                    <th class="px-2">{{$reimbursement['lastPayment']}}</th>
                                    <th class="pl-2"><a href="/practice-management/financial-transactions">Last payment</a></th>
                                </tr>
                                <tr>
                                    <th class="px-2">{{friendly_date_time($reimbursement['lastPaymentDate'], false)}}</th>
                                    <th class="pl-2"><a href="/practice-management/financial-transactions">Last payment date</a></th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        var events = [];
        function init() {
            events = JSON.parse('{!! json_encode($appointments) !!}')

            var calendarElem = $('.pro-dashboard-inline-calendar');
            calendarElem.datepicker();
            calendarElem.on('changeDate', function() {
                onDateChange(calendarElem.datepicker('getFormattedDate'));
            });

            selectToday();
        }
        function onDateChange(_newDate) {
            highlightDatesWithEvents();
            console.log('Showing events for ' + _newDate);
        }
        function selectToday() {
            $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
            $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
                .addClass('active');
            onDateChange('{{ $milliseconds }}');
        }
        function highlightDatesWithEvents() {
            $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
            for (let i = 0; i < events.length; i++) {
                $('.pro-dashboard-inline-calendar table td[data-date="' + events[i].milliseconds + '"]')
                    .attr('has-events', 1);
            }
        }
        addMCInitializer('pro-dashboard', init);
    })();
    // function initializeCalendar() {
    //     if (!$("#calendar").length)
    //         return;
    //     var calendarEl = document.getElementById("calendar");
    //     var calendar = new FullCalendar.Calendar(calendarEl, {
    //         initialView: "dayGridMonth",
    //         headerToolbar: {
    //             left: "dayGridMonth,timeGridWeek,timeGridDay",
    //             center: "title",
    //             right: "prevYear,prev,next,nextYear"
    //         },
    //         events: events
    //     });
    //     calendar.render();
    // }
    // initializeCalendar();
</script>
@endsection