@extends ('layouts.template')

@section('content')
<div class="p-3">
    <div class="container m-0 mt-4">
        <div class="row">
            <div class="col-md-4 mcp-theme-1">
                <div class="card">
                    <div class="card-header">
                        <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>{{$keyNumbers['totalPatients']}}</th>
                                    <th><a href="/patients">Total patients</a></th>
                                </tr>
                                <tr>
                                    <th>{{$keyNumbers['patientsNotSeenYet']}}</th>
                                    <th><a href="/patients/not-yet-seen">Patients I have not seen yet</a></th>
                                </tr>
                                <tr>
                                    <th>{{$keyNumbers['pendingBillsToSign']}}</th>
                                    <th><a href="/practice-management/bills/not-yet-signed">Pending bills to sign</a></th>
                                </tr>
                                <tr>
                                    <th>{{$keyNumbers['pendingNotesToSign']}}</th>
                                    <th><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>{{$reimbursement['currentBalance']}}</th>
                                    <th>Current balance</th>
                                </tr>
                                <tr>
                                    <th>{{$reimbursement['nextPaymentDate']}}</th>
                                    <th>Next Payment Date</th>
                                </tr>
                                <tr>
                                    <th>{{$reimbursement['nextPaymentAmount']}}</th>
                                    <th>Next Payment Amount</th>
                                </tr>
                                <tr>
                                    <th>{{$reimbursement['lastPayment']}}</th>
                                    <th>Last payment</th>
                                </tr>
                                <tr>
                                    <th>{{$reimbursement['lastPaymentDate']}}</th>
                                    <th>Last payment date</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</div>

<script>
    var events = JSON.parse('{!! json_encode($appointments) !!}')
    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