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

@extends ('layouts.template')

@section('content')

    <style>
        #dashboard-mcp tr.thin th,
        #dashboard-mcp tr.thin td,
        #dashboard-mcp .dashboard-stats-table tr td,
        #dashboard-mcp .dashboard-stats-table tr th {
            padding: 0.25em;
            font-weight: normal;
        }

        #dashboard-mcp table.appointments tr td {
            vertical-align: middle;
        }
    </style>

    <div id="dashboard-mcp">
    <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">
                        <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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="Patients w/o 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_for_visit') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="Patients Overdue for Visit">
                                            Patients Overdue for Visit
                                        </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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="Cancelled Appts. 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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="ERx & 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') }}"
                                           native target="_blank"
                                           open-in-stag-popup
                                           popup-style="tall"
                                           title="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 class="thin">
                                    <th colspan="2" class="font-weight-normal px-2 pl-2">Billing & Reimbursement</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 mcp-theme-1" id="pro-dashboard-container" v-cloak>
                        <div class="col-md-6 mcp-theme-1">
                            <div class="card mb-4">
                                <div class="card-header pl-2">
                                    <strong>
                                        Appointments @{{ formatSelectedDate(selectedDate) }}
                                    </strong>
                                </div>
                                <div class="card-body p-0">
                                    @include('app.mcp.dashboard.appointments')
                                </div>
                            </div>
                            <div class="card mb-4">
                                <div class="card-header pl-2">
                                    <strong>
                                        Measurements
                                    </strong>
                                </div>
                                <div class="card-body">
                                    @include('app.mcp.dashboard.measurements')
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mcp-theme-1">
                            <div class="card mb-4">
                                <div class="card-header pl-2">
                                    <strong>
                                        Notifications
                                    </strong>
                                </div>
                                <div class="card-body">
                                    @include('app.mcp.dashboard.notifications')
                                </div>
                            </div>
                            <div class="card mb-4">
                                <div class="card-header pl-2">
                                    <strong>
                                        Messages
                                    </strong>
                                </div>
                                <div class="card-body">
                                    @include('app.mcp.dashboard.messages')
                                </div>
                            </div>
                            <div class="card mb-4">
                                <div class="card-header pl-2">
                                    <strong>
                                        Phone Calls & Memos
                                    </strong>
                                </div>
                                <div class="card-body">
                                    @include('app.mcp.dashboard.calls_memos')
                                </div>
                            </div>
                        </div>
                    </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'));
                            });
                        },
                        getFormattedCurrentDate: function () {
                            let date = new Date();
                            let day = date.getDate();
                            day = day < 10 ? '0' + day : day;

                            return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + day;
                        },
                        formatSelectedDate: function (_date, _format) {
                            _format = _format || 'MM/DD/YYYY';
                            if (_date) {
                                return moment(_date).format(_format);
                            }
                        },
                        formatTimeZone: function (_tz) {
                            switch (_tz) {
                                case 'EASTERN':
                                    return 'EST'
                                    break;
                                case 'CENTRAL':
                                    return 'CST'
                                    break;
                                case 'MOUNTAIN':
                                    return 'MST'
                                    break;
                                case 'PACIFIC':
                                    return 'PST'
                                    break;
                                case 'ALASKA':
                                    return 'Alaska'
                                    break;
                                case 'HAWAII':
                                    return 'Hawaii'
                                    break;
                                case 'PUERTO_RICO':
                                    return 'Puerto Rico'
                                    break;
                                default:
                                    return 'N/A';
                            }
                        }
                    },
                    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'];
                            },
                            defaultDate: 0
                        });
                        // 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();
                        this.initLoadAppointments();
                        this.onDateChange(this.getFormattedCurrentDate());
                        this.selectedDate = this.getFormattedCurrentDate();
                    }
                });
                /*// 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