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

@extends ('layouts.template')

@section('content')

    <style>
        tr.thin th, tr.thin td, .dashboard-stats-table tr td, .dashboard-stats-table tr th {
            padding: 0.25em;
            font-weight: normal;
        }
        table.appointments tr td {
            vertical-align: middle;
        }
    </style>

    <div class="p-3">
        <div class="">
            <div class="row mcp-theme-1" id="pro-dashboard-container" v-cloak>
                <div class="col-md-3 mcp-theme-1">
                    <div class="mb-4" v-show="tab==='appointments'">
                        <div class="pro-dashboard-inline-calendar"></div>
                    </div>
                    <div class="card mb-4">
                        <div class="card-header pl-2">
                            <strong>
                                Key Numbers
                            </strong>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-sm mb-0 dashboard-stats-table">
                                <tbody>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_patients_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.patients') }}">Patients</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_new_patients_awaiting_visit_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.new_patients_awaiting_visit') }}">New Patients Awaiting Visit</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_notes_pending_signature_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.notes_pending_signature') }}">Notes Pending Signature</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_notes_pending_billing_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.notes_pending_billing') }}">Notes Pending Billing</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_incoming_reports_pending_signature_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.reports_pending_signature') }}">Reports Pending Signature</a>
                                    </th>
                                </tr>

                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_patients_without_appointment_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.patients_without_appointments') }}">Patients w/o Appointments</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_patients_overdue_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.patients_overdue') }}">Patients Overdue</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_cancelled_appointments_pending_acknowledgement_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.cancelled_appointments_pending_review') }}">Cancelled Appts. Pending Review</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_cancelled_bills_awaiting_review_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.cancelled_bills_pending_review') }}">Cancelled Bills Pending Review</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_cancelled_supply_orders_awaiting_review_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.cancelled_supply_orders_pending_review') }}">Cancelled Supply Orders Pending Review</a>
                                    </th>
                                </tr>

                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_erx_and_orders_awaiting_signature_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.erx_and_orders_pending_signature') }}">ERx & Orders Pending Signature</a>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="px-2 text-center">{{$pro->get_supply_orders_awaiting_signature_count_as_mcp()}}</th>
                                    <th class="pl-2">
                                        <a href="{{ route('mcp.supply_orders_pending_signature') }}">Supply Orders Pending Signature</a>
                                    </th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card mb-4">
                        <div class="card-header pl-2">
                            <strong>
                                Remote Monitoring: {{friendly_month(date('Y-m-d'))}}
                            </strong>
                        </div>
                        <div class="card-body p-0">
                            <table class="table mb-0 dashboard-stats-table">
                                <tbody>
                                <tr class="thin">
                                    <th class="px-2 text-center">{{$pro->get_measurements_awaiting_review_count_as_mcp() ?? '-'}}</th>
                                    <th class="pl-2">Measurements Pending Review</th>
                                </tr>
                                <tr class="thin">
                                    <th class="px-2 text-center">{{$pro->get_patients_without_remote_measurement_in_48_hours_count_as_mcp() ?? '-'}}</th>
                                    <th class="pl-2">Patients w/o Measurement in 48 hrs.</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card mb-4">
                        <div class="card-header pl-2">
                            <strong>
                                Practice Management
                            </strong>
                        </div>
                        <div class="card-body p-0">
                            <table class="table mb-0 dashboard-stats-table">
                                <tbody>
                                <tr>
                                    <th colspan="2">Revenue Cycle Management</th>
                                </tr>
                                <tr class="thin">
                                    <th class="font-weight-normal px-2 pl-4">{{friendly_date_time($reimbursement['nextPaymentDate'], false)}}</th>
                                    <th class="font-weight-normal pl-2">Next Payment Date</th>
                                </tr>
                                <tr class="thin">
                                    <th class="font-weight-normal px-2 pl-4">
                                        ${{friendly_money($reimbursement['currentBalance'])}}</th>
                                    <th class="font-weight-normal pl-2 w-100"><a
                                            href="/practice-management/financial-transactions">Current balance</a></th>
                                </tr>
                                <tr class="thin">
                                    <th class="font-weight-normal px-2 pl-4">
                                        ${{friendly_money($reimbursement['nextPaymentAmount'])}}</th>
                                    <th class="font-weight-normal pl-2"><a
                                            href="/practice-management/bills-under-processing">Processing</a></th>
                                </tr>
                                <tr class="thin">
                                    <th class="font-weight-normal px-2 pl-5">
                                        ${{friendly_money($reimbursement['nextPaymentAmount'])}}</th>
                                    <th class="font-weight-normal pl-2"><a
                                            href="/practice-management/bills-under-processing">Treatment Services</a>
                                    </th>
                                </tr>
                                <tr class="thin">
                                    <th class="font-weight-normal px-2 pl-5">
                                        ${{friendly_money($reimbursement['nextPaymentAmount'])}}</th>
                                    <th class="font-weight-normal pl-2"><a
                                            href="/practice-management/bills-under-processing">Remote Monitoring</a>
                                    </th>
                                </tr>
                                <tr class="thin">
                                    <th class="font-weight-normal px-2 pl-5">
                                        ${{friendly_money($reimbursement['nextPaymentAmount'])}}</th>
                                    <th class="font-weight-normal pl-2"><a
                                            href="/practice-management/bills-under-processing">Other Services</a></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="row">
                        <div class="col-6">

                            <!-- Appointment Updates -->

                            @if(count($proApptUpdates))
                            <div class="card mb-4 ack-container">
                                <div class="card-header pl-2">
                                    <strong>
                                        Appointment Updates
                                    </strong>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-sm mb-0 table-bordered">
                                        <tbody>
                                        <tr>
                                            <th>Client</th>
                                            <th>Appt. Date/Time</th>
                                            <th>Status</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($proApptUpdates as $update)
                                            <tr>
                                                <td>{{$update->name_first}} {{$update->name_last}}</td>
                                                <td>{{friendlier_date_time($update->start_time)}}</td>
                                                <td>{{$update->status}}</td>
                                                <td>
                                                    <a href="#" class="ack-pro-appt-update" data-uid="{{$update->uid}}">Acknowledge</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @endif

                        <!-- new associations -->
                            @if(count($newMCPAssociations))
                                <div class="mb-3 border rounded px-3 py-2 ack-container">
                                    <p class="pt-1 mb-2"><b>New Patients</b></p>
                                    @foreach($newMCPAssociations as $assoc)
                                        <div class="d-flex align-items-start bg-light mb-2 px-2 py-1">
                                            <div class="flex-grow-1">
                                                New Patients
                                                <a href="/patients/view/{{$assoc->patient->uid}}"
                                                   class="">{{$assoc->patient->displayName()}}</a>
                                                <?php $nextAppt = $assoc->patient->nextAppointment(); ?>
                                                @if($nextAppt)
                                                    <div class="font-size-11">
                                                        <span class="text-secondary font-size-11">Appt.</span>
                                                        {{$nextAppt->pro->displayName()}}
                                                        <span class="text-secondary font-size-11">on</span>
                                                        {{friendlier_date_time($nextAppt->raw_date . ' ' . $nextAppt->raw_start_time)}}
                                                    </div>
                                                    @if($nextAppt->status === 'CREATED')
                                                        <div
                                                            class="text-warning-mellow font-weight-bold font-size-11 mt-1">
                                                            <i class="fa fa-exclamation-triangle"></i>
                                                            Confirmation pending
                                                        </div>
                                                    @endif
                                                    @if($nextAppt->status === 'CONFIRMED')
                                                        <div class="text-success font-weight-bold font-size-11 mt-1">
                                                            <i class="fa fa-check"></i>
                                                            Confirmed by the patient
                                                        </div>
                                                    @endif
                                                    @if($nextAppt->status === 'REJECTED')
                                                        <div class="text-danger font-weight-bold font-size-11 mt-1">
                                                            <i class="fa fa-stop"></i>
                                                            Rejected by the patient
                                                        </div>
                                                    @endif
                                                @endif
                                            </div>
                                            <a href="#" class="ack-client-pro-change ml-3" data-uid="{{$assoc->uid}}">Stamp</a>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>

                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a native data-tab="appointments" class="nav-link"
                               :class="tab == 'appointments' ? 'active' : ''" href="#"
                               v-on:click.prevent="tab='appointments'; initLoadAppointments();">
                                Appointments
                            </a>
                        </li>
                        <li class="nav-item">
                            <a native data-tab="measurements" class="nav-link"
                               :class="tab == 'measurements' ? 'active' : ''" href="#"
                               v-on:click.prevent="tab='measurements'; loadMeasurements();">
                                Measurements
                            </a>
                        </li>
                        <li class="nav-item">
                            <a native data-tab="incoming_reports"
                               class="nav-link {{count($incomingReports) ? 'text-danger font-weight-bold' : ''}}"
                               :class="tab == 'incoming_reports' ? 'active' : ''" href="#"
                               v-on:click.prevent="tab='incoming_reports'">
                                Reports ({{count($incomingReports)}})
                            </a>
                        </li>
                        <li class="nav-item">
                            <a native data-tab="erx" class="nav-link {{$numERx ? 'text-danger font-weight-bold' : ''}}"
                               :class="tab == 'erx' ? 'active' : ''" href="#"
                               v-on:click.prevent="tab='erx'">
                                ERx & Orders ({{$numERx}})
                            </a>
                        </li>
                        <li class="nav-item">
                            <a native data-tab="supply_orders"
                               class="nav-link {{$numSupplyOrders ? 'text-danger font-weight-bold' : ''}}"
                               :class="tab == 'supply_orders' ? 'active' : ''" href="#"
                               v-on:click.prevent="tab='supply_orders'">
                                Supply Orders ({{$numSupplyOrders}})
                            </a>
                        </li>
                    </ul>

                    <div class="border-left border-right border-bottom p-3">
                        <div v-show="tab==='appointments'" class="appointments-tab">
                            <div v-show="selectedDate">
                                <div class="d-flex align-items-end mb-3">
                                    <b class="large"><span class="text-secondary"></span>@{{ selectedDate }}</b>
                                    <div class="ml-auto d-inline-flex align-items-center">
                                        <label class="text-secondary mr-2 my-0 text-nowrap">Filter by status:</label>
                                        <select v-model="filterStatus"
                                                class="form-control form-control-sm">
                                            <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>

                                <table class="table table-sm table-bordered appointments">
                                    <tr v-for="event in events" class="">
                                        <td>
                                            <a :href="'/patients/view/' + event.clientUid" class="font-weight-bold">@{{
                                                event.clientName }}</a>
                                            <span class="small d-inline-block text-secondary font-weight-normal"> (@{{ event.clientAge }} y.o. @{{event.clientSex}})</span>
                                        </td>
                                        <td>
                                            @{{ event.friendlyStartTime }} - @{{ event.friendlyEndTime }} <span
                                                class="text-secondary">@{{ event.timezone }}</span>
                                            <span v-if="event.title" class="d-inline-block ml- 2 text-secondary font-weight-bold">
                                                        &nbsp;/&nbsp;
                                                    @{{ event.title }}
                                                    </span>
                                            <a :href="'/patients/view/' + event.clientUid + '/calendar/' + event.uid">
                                                <i class="fa fa-edit"></i>
                                                Edit
                                            </a>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-baseline">
                                                <div v-if="event.status === 'CREATED'"
                                                     class="text-warning-mellow font-weight-bold">
                                                    <i class="fa fa-exclamation-triangle"></i>
                                                    Confirmation pending
                                                </div>
                                                <div v-else-if="event.status === 'CONFIRMED'"
                                                     class="text-success font-weight-bold">
                                                    <i class="fa fa-check"></i>
                                                    Confirmed by the patient
                                                </div>
                                                <div v-else-if="event.status === 'REJECTED'"
                                                     class="text-danger font-weight-bold">
                                                    <i class="fa fa-stop"></i>
                                                    Rejected by the patient
                                                </div>
                                                <div v-else class="text-secondary">
                                                    Status: <b>@{{ event.status }}</b>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>

                                                <div class="mt-1"
                                                     :class="event.coverage !== 'YES' ? (event.coverage === 'NO' ? 'text-danger' : 'text-warning-mellow') : 'text-success'">
                                                    Coverage Status: <b>@{{ event.coverage }}</b>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <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>
                                        </td>
                                    </tr>
                                </table>

                                <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 v-show="!selectedDate" class="bg-light p-3 text-secondary border bounded">
                                Please select a date from the calendar on the left
                            </div>
                        </div>
                        <div v-show="tab==='measurements'">
                            <div id="measurements-tab">Loading...</div>
                        </div>
                        <div v-show="tab==='incoming_reports'">
                            @include('app.dashboard.incoming_reports')
                        </div>
                        <div v-show="tab==='erx'">
                            @include('app.dashboard.erx')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="stag-popup stag-popup-md ticket-popup mcp-theme-1" stag-popup-key="ticket-popup"></div>

    <script>
        (function () {
            function init() {
                window.apapp = new Vue({
                    el: '#pro-dashboard-container',
                    delimiters: ['@{{', '}}'],
                    data: {
                        tab: '{{ request()->input('tab') ? request()->input('tab') : 'measurements' }}',
                        datesWithEvents: [],
                        selectedDate: '{{ date('Y-m-d') }}',
                        selectedStatus: 'CREATED',
                        events: [],
                        numEventsForDate: 0,
                        filterStatus: '',
                        calendarElem: null,
                        currentMonth: null,
                        currentYear: null,
                        measurementFilterStatus: 'ALL',
                        measurements: {!! $pro->pro_type === 'ADMIN' ? '[]' : json_encode($pro->getMeasurements()) !!},
                        appointmentsLoaded: false,
                    },
                    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) {
                            let self = this;
                            window.setTimeout(() => {
                                // let dayValue = $('.pro-dashboard-inline-calendar td.day.active').first().text();
                                // if(dayValue.length === 1) dayValue = '0' + dayValue;
                                // self.selectedDate = _newDate.substr(0, 8) + dayValue;
                                self.selectedDate = _newDate;
                                showMask();
                                self.loadEvents(self.selectedDate, function () {
                                    hideMask();
                                    Vue.nextTick(() => {
                                        // self.highlightDatesWithEvents(self.datesWithEvents);
                                        initFastLoad($('.appointments-tab'));
                                    });
                                });
                            }, 25);
                        },
                        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 (_dates) {
                            $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
                            for (let i = 0; i < _dates.length; i++) {
                                $('.pro-dashboard-inline-calendar table td[data-date="' + _dates[i] + '"]')
                                    .attr('has-events', 1);
                            }
                        },
                        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();
                        },
                        loadEventDates: function (_refDate = false) {
                            let today = new Date(_refDate ? _refDate : '{{date('Y-m-d')}}'),
                                firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
                                lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

                            this.selectedDate = null;
                            $('td.day.active').removeClass('active');

                            $.get('/pro-dashboard-event-dates/' +
                                this.formatDate(firstOfMonth) + '/' +
                                this.formatDate(lastOfMonth), (_data) => {
                                this.datesWithEvents = _data;
                                console.log(this.datesWithEvents);
                                this.calendarElem.datepicker('refresh');
                                // this.highlightDatesWithEvents(this.datesWithEvents);

                                this.currentMonth = firstOfMonth.getMonth();
                                this.currentYear = firstOfMonth.getFullYear();

                                if (!_refDate && $('td.day[data-date="{{$milliseconds}}"]:visible').length) {
                                    $('td.day[data-date="{{$milliseconds}}"]:visible').first().click();
                                }

                                this.appointmentsLoaded = true;
                            }, 'json');
                        },
                        loadEvents: function (_date, _callback) {
                            let self = this;
                            $.get('/pro-dashboard-events/' + _date + '/' + _date, function (_data) {
                                self.events = _data;
                                self.numEventsForDate = (_data && _data.length) ? 1 : 0;
                                _callback.call(self);
                            }, 'json');
                        },
                        updateMeasurements: function () {
                            $.get('/pro-dashboard-measurements/' + this.measurementFilterStatus, (_data) => {
                                this.measurements = _data;
                                Vue.nextTick(() => {
                                    // this.initCMRTE();
                                    $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');
                                    initMoes();
                                });
                            }, 'json');
                        },
                        setMeasurementStatus: function (_uid, _status) {
                            $.post('/api/measurement/updateStatus', {
                                uid: _uid,
                                status: _status
                            }, (_data) => {
                                this.updateMeasurements();
                            }, 'json');
                        },
                        initCMRTE: function () {
                            $('#pro-dashboard-container [cm-rte]').each(function () {

                                $(this).wrap(
                                    $('<div class="border-left border-right rte-holder"/>')
                                        .attr('data-shortcuts', '')
                                );

                                // give a unique id to this editor instance
                                var editorID = Math.ceil(Math.random() * 99999), fieldName = $(this).attr('data-name');

                                var el = this;
                                var existingContent = $(el).attr('data-content');
                                var quill = new Quill(el, {
                                    theme: 'snow',
                                    modules: stagQuillConfig
                                });

                                var toolbar = $(quill.container).prev('.ql-toolbar');

                                // add button for new shortcut
                                var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
                                    'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
                                toolbar.append(newSCButton);

                                quill.root.innerHTML = existingContent;

                                $('<input type="hidden" name="' + fieldName + '">').val(existingContent).insertAfter(el);

                                quill.on('text-change', function (delta, oldDelta, source) {
                                    $(el).next('[name="' + fieldName + '"]').val(quill.root.innerHTML);
                                });

                                $(quill.container)
                                    .find('.ql-editor[contenteditable]')
                                    .attr('data-field', fieldName)
                                    .attr('data-editor-id', editorID)
                                    .attr('with-shortcuts', 1);

                            })
                        },
                        initLoadAppointments: function () {
                            if (this.appointmentsLoaded) return false;
                            this.loadEventDates();
                        },
                        loadMeasurements: function () {
                            $('#measurements-tab').load('/pro-dashboard-measurements-tab', () => {
                                initMoes();
                                initFastLoad($('#measurements-tab'));
                            });
                        }
                    },
                    mounted: function () {
                        let self = this;
                        this.calendarElem = $('.pro-dashboard-inline-calendar');
                        this.calendarElem.datepicker({
                            dateFormat: 'yy-mm-dd',
                            onSelect: function (_date) {
                                self.onDateChange(_date);
                            },
                            onChangeMonthYear: function (_year, _month) {
                                let date = _year + '-' + (_month < 10 ? '0' : '') + _month + '-05';
                                self.loadEventDates(date);
                            },
                            beforeShowDay: function (d) {
                                if (self.datesWithEvents && self.datesWithEvents.indexOf(self.formatDate(d)) !== -1) {
                                    return [true, 'has-events'];
                                }
                                return [true, 'no-events'];
                            }
                        });
                        // this.calendarElem
                        //     .on('changeDate', function () {
                        //         self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
                        //     })
                        //     .on('changeMonth', function () {
                        //         window.setTimeout(function() {
                        //             let ts = $('td.day[data-date]').first().closest('tr').find('td.day[data-date]').last().attr('data-date');
                        //             if(ts) {
                        //                 self.loadEventDates(ts);
                        //             }
                        //         }, 10);
                        //     });


                        $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');
                        initMoes();

                        // init fast load
                        initFastLoad($('#pro-dashboard-container'));

                        $(document)
                            .off('click', '.dashboard-measurements.pagination a.page-link')
                            .on('click', '.dashboard-measurements.pagination a.page-link', function () {
                                $('#measurements-tab').text('Loading...').load('/pro-dashboard-measurements-tab/' + $(this).attr('data-target-page'), () => {
                                    initMoes();
                                    initFastLoad($('#measurements-tab'));
                                });
                                return false;
                            });

                        this.loadMeasurements();
                    }
                });
                /*// refresh once ticket popup is closed
                $('body').off('stag-popup-closed')
                $('body').on('stag-popup-closed', function() {
                    if($('#pro-dashboard-container').length) {
                        let activeTab = $('.nav-link.active[data-tab]').attr('data-tab');
                        if(activeTab) {
                            fastLoad('/?tab=' + activeTab);
                        }
                    }
                });*/
                // ticket-popup
                $(document)
                    .off('click', '.ticket-popup-trigger')
                    .on('click', '.ticket-popup-trigger', function () {
                        showMask();
                        window.noMc = true;
                        $.get(this.href, (_data) => {
                            $('.ticket-popup').html(_data);
                            showStagPopup('ticket-popup');
                            $('.ticket-popup .stag-popup.stag-slide').attr('close-all-with-self', 1);
                            runMCInitializer('patient-tickets'); // run specific mc initer
                            hideMask();
                        });
                        return false;
                    });

                $(document)
                    .off('click', '.ack-client-pro-change')
                    .on('click', '.ack-client-pro-change', function () {
                        let trigger = $(this).text('…');
                        $.post('/api/clientProChange/accept', {
                            uid: $(this).attr('data-uid')
                        }, _data => {
                            if (!hasResponseError(_data)) {
                                trigger.hide();
                                let doneElem = $('<i class="text-success fa fa-check"></i>');
                                doneElem.insertAfter(trigger);
                                setTimeout(() => {
                                    let ackContainer = trigger.closest('.ack-container');
                                    trigger.closest('div').slideUp('fast', function () {
                                        $(this).remove();
                                        if (!ackContainer.find('>div').length) {
                                            ackContainer.remove();
                                        }
                                    });
                                }, 500);
                            }
                        }, 'json');
                        return false;
                    });

                $(document)
                    .off('click', '.ack-client-memo')
                    .on('click', '.ack-client-memo', function () {
                        let trigger = $(this).text('…');
                        $.post('/api/clientMemo/stamp', {
                            uid: $(this).attr('data-uid')
                        }, _data => {
                            if (!hasResponseError(_data)) {
                                trigger.hide();
                                let doneElem = $('<i class="text-success fa fa-check"></i>');
                                doneElem.insertAfter(trigger);
                                setTimeout(() => {
                                    let tbody = trigger.closest('tbody');
                                    trigger.closest('tr').remove();
                                    if (!tbody.find('>tr').length) {
                                        tbody.closest('.ack-container').remove();
                                    }
                                }, 500);
                            }
                        }, 'json');
                        return false;
                    });

                $(document)
                    .off('click', '.ack-pro-appt-update')
                    .on('click', '.ack-pro-appt-update', function () {
                        let trigger = $(this).text('…');
                        $.post('/api/appointmentConfirmationDecision/acknowledgeAsAppointmentPro', {
                            uid: $(this).attr('data-uid')
                        }, _data => {
                            if (!hasResponseError(_data)) {
                                trigger.hide();
                                let doneElem = $('<i class="text-success fa fa-check"></i>');
                                doneElem.insertAfter(trigger);
                                setTimeout(() => {
                                    let ackContainer = trigger.closest('tbody');
                                    trigger.closest('tr').slideUp('fast', function () {
                                        $(this).remove();
                                        if (!ackContainer.find('>tr').length) {
                                            ackContainer.remove();
                                        }
                                    });
                                }, 500);
                            }
                        }, 'json');
                        return false;
                    });
            }

            addMCInitializer('pro-dashboard', init, '#pro-dashboard-container');
        })();
    </script>
@endsection