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 mcp-theme-1" id="pro-dashboard-container" v-cloak>
            <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 target="_top" href="/mc/patients">Total patients</a></th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$keyNumbers['patientsNotSeenYet']}}</th>
                                    <th class="pl-2"><a target="_top" href="/mc/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 target="_top" href="/mc/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 target="_top" href="/mc/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">${{friendly_money($reimbursement['currentBalance'])}}</th>
                                    <th class="pl-2"><a target="_top" href="/mc/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">${{friendly_money($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 class="d-flex align-items-end mb-3">
                    <b class="large">@{{ selectedDate }}</b>
                    <div class="ml-auto">
                        <label class="text-secondary mb-1">Filter by status:</label>
                        <select v-model="filterStatus"
                                class="form-control form-control-sm"
                                v-on:change="updateNumEventsForDate()">
                            <option value="">ALL</option>
                            <option value="CREATED">CREATED</option>
                            <option value="CONFIRMED">CONFIRMED</option>
                            <option value="CANCELLED">CANCELLED</option>
                            <option value="COMPLETED">COMPLETED</option>
                            <option value="ABANDONED">ABANDONED</option>
                        </select>
                    </div>
                </div>
                <div v-for="event in events" class="align-items-end p-3 border rounded mb-3"
                     :class="event.dateYMD === selectedDate && (filterStatus === '' || filterStatus === event.status) ? 'd-flex' : 'd-none'">
                    <div class="patient-avatar mr-3 align-self-center">@{{ event.proInitials }}</div>
                    <div>
                        <div class="pb-1">
                            <b class="text-info">@{{ event.proName }}</b>
                            &nbsp;/&nbsp;
                            @{{ event.friendlyStartTime }} - @{{ event.friendlyEndTime }} <span class="text-secondary">@{{ event.timezone }}</span>
                            &nbsp;/&nbsp;
                            <span class="d-inline-block ml- 2 text-secondary font-weight-bold">@{{ event.title }}</span>
                        </div>
                        <div class="pb-1">
                            <a target="_top" :href="'/mc/patients/view/' + event.clientUid" class="font-weight-bold">@{{ event.clientName }}</a>
                            <span class="small d-inline-block pl-2 text-secondary font-weight-normal">@{{ event.clientSummary }}</span>
                        </div>
                        <div>
                            Status: <b class="text-secondary">@{{ event.status }}</b>
                            &nbsp;/&nbsp;
                            <a target="_top" :href="'/patients/view/' + event.clientUid + '/calendar/' + event.uid">
                                <i class="fa fa-edit"></i>
                                Edit Appointment
                            </a>
                            {{--<span relative class="ml-1" moe>
                                <a start show v-on:click.prevent="return showEditForm($event.target)">
                                    <i class="fa fa-edit"></i>
                                    Edit Appointment
                                </a>
                                <form url="/api/appointment/update" right>
                                    <input type="hidden" name="uid" :value="event.uid">
                                    <div class="mb-2">
                                        <label class="text-secondary text-sm mb-1">Pro</label>
                                        <select name="proUid" class="form-control form-control-sm">
                                            <option value=""> --select-- </option>
                                            @foreach($pros as $iPro)
                                                <option :selected="event.proUid === '{{$iPro->uid}}'" value="{{$iPro->uid}}">{{$iPro->displayName()}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-2">
                                        <label class="text-secondary text-sm mb-1">Date</label>
                                        <input autofocus type="date" name="date" min="{{ date('Y-m-d') }}"
                                               :value="event.dateYMD" class="form-control form-control-sm">
                                    </div>
                                    <div class="mb-2">
                                        <label class="text-secondary text-sm mb-1">Start Time</label>
                                        <input type="time" name="startTime" class="form-control form-control-sm"
                                               :value="event.raw_start_time ? event.raw_start_time.substr(0, 5) : ''">
                                    </div>
                                    <div class="mb-2">
                                        <label class="text-secondary text-sm mb-1">End Time</label>
                                        <input type="time" name="endTime" class="form-control form-control-sm"
                                               :value="event.raw_end_time ? event.raw_end_time.substr(0, 5) : ''">
                                    </div>
                                    <div class="mb-2">
                                        <label class="text-secondary text-sm mb-1">Timezone *</label>
                                        <select name="timeZone" class="form-control form-control-sm"
                                                :value="event.timezone" required>
                                            <option value=""> --select-- </option>
                                            <option value="EASTERN">Eastern</option>
                                            <option value="CENTRAL">Central</option>
                                            <option value="MOUNTAIN">Mountain</option>
                                            <option value="PACIFIC">Pacific</option>
                                            <option value="ALASKA">Alaska</option>
                                            <option value="HAWAII">Hawaii</option>
                                            <option value="PUERTO_RICO">Puerto Rico</option>
                                        </select>
                                    </div>
                                    <div>
                                        <button submit class="btn btn-sm btn-primary mr-1"
                                                v-on:click.prevent="return submitEditForm($event.target)">Submit</button>
                                        <button cancel class="btn btn-sm btn-default border"
                                                v-on:click.prevent="return cancelEditForm($event.target)">Cancel</button>
                                    </div>
                                </form>
                            </span>--}}
                        </div>
                    </div>
                    <div class="ml-auto">
                        <select v-model="event.newStatus"
                                class="form-control form-control-sm bg-light"
                                v-on:change="updateStatus(event)">
                            <option value="CREATED">CREATED</option>
                            <option value="CONFIRMED">CONFIRMED</option>
                            <option value="CANCELLED">CANCELLED</option>
                            <option value="COMPLETED">COMPLETED</option>
                            <option value="ABANDONED">ABANDONED</option>
                        </select>
                        <div v-if="selectedDate === '{{ date('Y-m-d') }}'"
                             class="pt-1 text-right" :class="event.started ? 'text-danger': 'text-secondary'">
                            @{{ event.inHowManyHours }}
                        </div>
                    </div>
                </div>
                <div v-if="numEventsForDate === 0" class="bg-light p-3 text-secondary border bounded">
                    <span v-if="filterStatus === ''">You have no appointments on <b>@{{ selectedDate }}</b></span>
                    <span v-if="filterStatus !== ''">You have no appointments on <b>@{{ selectedDate }}</b> with status <b>@{{ filterStatus }}</b></span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    addMCInitializer('pro-dashboard', function () {
        window.apapp = new Vue({
            el: '#pro-dashboard-container',
            delimiters: ['@{{', '}}'],
            data: {
                selectedDate: '{{ date('Y-m-d') }}',
                selectedStatus: 'CREATED',
                events: [],
                numEventsForDate: 0,
                filterStatus: '',
                calendarElem: null,
                currentMonth: null,
                currentYear: null,
            },
            methods: {
                formatDate: function (date) {
                    let d = new Date(date),
                        month = '' + (d.getMonth() + 1),
                        day = '' + d.getDate(),
                        year = d.getFullYear();

                    if (month.length < 2)
                        month = '0' + month;
                    if (day.length < 2)
                        day = '0' + day;

                    return [year, month, day].join('-');
                },
                onDateChange: function (_newDate) {
                    // this.loadEvents();

                    let self = this;
                    self.selectedDate = _newDate;
                    this.loadEvents(function() {
                        self.highlightDatesWithEvents();
                        self.updateNumEventsForDate();
                    });
                },
                selectToday: function () {
                    $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
                    $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
                        .addClass('active');
                    // this.onDateChange('{{ date('Y-m-d') }}');
                },
                highlightDatesWithEvents: function () {
                    $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
                    for (let i = 0; i < this.events.length; i++) {
                        $('.pro-dashboard-inline-calendar table td[data-date="' + this.events[i].milliseconds + '"]')
                            .attr('has-events', 1);
                    }
                },
                updateNumEventsForDate: function() {
                    this.numEventsForDate = 0;
                    for (let i = 0; i < this.events.length; i++) {
                        if(this.events[i].dateYMD === this.selectedDate &&
                            (this.filterStatus === '' || this.filterStatus === this.events[i].status)) {
                            this.numEventsForDate++;
                        }
                    }
                },
                updateStatus: function(_event) {
                    $.post('/api/appointment/updateStatus', {
                        uid: _event.uid,
                        status: _event.newStatus
                    }, function(_data) {
                        if(!_data) {
                            toastr.error('Unable to update appointment status!');
                        }
                        else {
                            if(!_data.success) {
                                toastr.error(_data.message);
                            }
                            else {
                                _event.status = _event.newStatus;
                                toastr.success('The appointment has been updated');
                            }
                        }
                    }, 'json')
                },
                showEditForm: function(_trigger) {
                    let form = $(_trigger).closest('[moe]').find('form').first();
                    showMoeFormMask();
                    form.show();
                    setTimeout(function() {
                        initPrimaryForm(form);
                    }, 0);
                },
                submitEditForm: function(_trigger) {
                    let form = $(_trigger).closest('[moe]').find('form').first();
                    if(!form[0].checkValidity()) {
                        form[0].reportValidity();
                        return;
                    }
                    $.post(form.attr('url'), form.serialize(), function(_data) {
                        if(_data && _data.success) {
                            fastReload();
                        }
                        else {
                            if(_data.message) {
                                toastr.error(_data.message);
                            }
                            else {
                                toastr.error('Unable to update the appointment');
                            }
                        }
                    });
                },
                cancelEditForm: function(_trigger) {
                    let form = $(_trigger).closest('[moe]').find('form').first();
                    hideMoeFormMask();
                    form.hide();
                },
                loadEvents: function(_callback) {
                    let today = this.calendarElem.datepicker('getDate'),
                        firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
                        lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0),
                        self = this;
                    if(this.currentMonth === today.getMonth() && this.currentYear === today.getFullYear()) {
                        _callback.call(self);
                    }
                    else {
                        $.get('/pro-dashboard-events/' +
                            this.formatDate(firstOfMonth) + '/' +
                            this.formatDate(lastOfMonth), function(_data) {
                            self.events = _data;
                            self.currentMonth = firstOfMonth.getMonth();
                            self.currentYear = firstOfMonth.getFullYear();
                            _callback.call(self);
                        }, 'json');
                    }
                }
            },
            mounted: function () {
                let self = this;
                this.calendarElem = $('.pro-dashboard-inline-calendar');
                this.calendarElem.datepicker({
                    format: 'yyyy-mm-dd'
                });
                this.calendarElem.on('changeDate', function () {
                    self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
                });
                this.selectToday();
                this.updateNumEventsForDate();

                // this.loadEvents();
                $('.datepicker-days .day.active').trigger('click');
            }
        });
    });
</script>
@endsection