@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-dna table.appointments tr td {
            vertical-align: middle;
        }
    </style>

    <div id="dashboard-dna">
        <div class="p-3">
            <div class="">
                <div class="row mcp-theme-1" id="pro-dashboard-container">
                    <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" stag-collapsible-card="dna-key-numbers">
                            <div class="card-header pl-2">
                                <strong>
                                    Key Numbers
                                </strong>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-sm mb-0">
                                    <tbody>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->patientsCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal" href="{{ route('rd.dashboard-patients') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Patients ">Patients </a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->patientsAwaitingMcpVisitCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.patients_awaiting_mcp_visit') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Patients Awaiting MCP Visit">Patients Awaiting MCP Visit</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->patientsWithoutAppointmentCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.patients_without_appointment') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Patients w/o Appointment ">Patients w/o Appointment </a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->encountersPendingMyReviewCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.encounters_pending_my_review') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Encounters Pending My Review ">Encounters Pending My Review </a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->encountersInProgressCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.encounters_in_progress') }}" native target="_blank"
                                                    open-in-stag-popup popup-style="tall"
                                                    title="Encounters In Progress">Encounters In Progress</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">
                                                {{ $pro->appointmentsPendingConfirmationCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.appointments_pending_confirmation') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Appointments Pending Confirmation">Appointments Pending
                                                    Confirmation</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">
                                                {{ $pro->cancelledAppointmentsPendingAckCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.cancelled_appointments_pending_ack') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Cancelled Appointments Pending Ack.">Cancelled Appointments
                                                    Pending Ack.</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->reportsPendingAckCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal" href="{{ route('rd.reports_pending_ack') }}"
                                                    native target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Reports Pending Ack.">Reports Pending Ack.</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->supplyOrdersPendingMyAckCountAsRd() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.supply_orders_pending_my_ack') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Supply Orders Pending My Ack.">Supply Orders Pending My Ack.</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">
                                                {{ $pro->supplyOrdersPendingHcpApprovalCountAsDna() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.supply_orders_pending_hcp_approval') }}" native
                                                    target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Supply Orders Pending HCP Approval">Supply Orders Pending HCP
                                                    Approval</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="px-2 text-center">{{ $pro->activeClientReviewRequests->count() }}
                                            <th>
                                            <th class="pl-2">
                                                <a class="font-weight-normal"
                                                    href="{{ route('rd.client-review-requests', ['hideTitle' => true]) }}"
                                                    native target="_blank" open-in-stag-popup popup-style="tall"
                                                    title="Charts Pending My Review">Charts Pending My Review </a>
                                            </th>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="card mb-4" stag-collapsible-card="dna-practice-management" collapsed>
                            <div class="card-header pl-2">
                                <strong>
                                    Practice Management
                                </strong>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-sm mb-0">
                                    <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($performer->pro->getNextPaymentDateAsRd(), 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($performer->pro->balance) }}</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($performer->pro->getProcessingAmountAsRd()) }}</th>
                                            <th class="font-weight-normal pl-2"><a
                                                    href="/practice-management/bills-under-processing">Processing</a></th>
                                        </tr>


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 pl-1">
                        <div class="row mcp-theme-1">
                            <div class="col-md-6 mcp-theme-1">
                                <!-- APPOINTMENTS -->
                                <div id="dna-dashboard-appointments" class="mb-4">

                                </div>

                                <!-- ENCOUNTERS PENDING MY REVIEW -->
                                <div class="card mb-4">
                                    <div class="card-header pl-2">
                                        <strong>
                                            Charts Pending My Review
                                        </strong>
                                    </div>
                                    <div class="card-body p-0">
                                        @include('app.rd.dashboard.client-charts-pending-my-review')
                                    </div>
                                </div>
                                <div class="card mb-4">
                                    <div class="card-header pl-2">
                                        <strong>
                                            Messages
                                        </strong>
                                    </div>
                                    <div class="card-body p-0">
                                        @include('app.rd.dashboard.messages')
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mcp-theme-1">
                                @include('app.rd.dashboard.notifications')
                            </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() {

            let datesWithEvents = [],
                selectedDate = '{{ date('Y-m-d') }}',
                calendarElem = null,
                currentMonth = null,
                currentYear = null,
                appointmentsLoaded = false;

            function formatDate(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('-');
            }

            function onDateChange(_newDate) {
                // ajax load appts list as markup directly from server
                selectedDate = _newDate;
                $.get('/pro-dashboard-events-display/' + selectedDate + '/' + selectedDate, function(_data) {
                    let apptscontainer = $('#dna-dashboard-appointments');
                    apptscontainer.html(_data);
                    initFastLoad(apptscontainer);
                    initMoes();
                });
            }

            function loadEventDates(_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);
                selectedDate = null;
                $('td.day.active').removeClass('active');
                $.get('/pro-dashboard-event-dates/' +
                    formatDate(firstOfMonth) + '/' +
                    formatDate(lastOfMonth), (_data) => {
                        datesWithEvents = _data;
                        calendarElem.datepicker('refresh');
                        currentMonth = firstOfMonth.getMonth();
                        currentYear = firstOfMonth.getFullYear();
                        if (!_refDate && $('td.day[data-date="{{ $milliseconds }}"]:visible').length) {
                            $('td.day[data-date="{{ $milliseconds }}"]:visible').first().click();
                        }
                        appointmentsLoaded = true;
                    }, 'json');
            }

            function getFormattedCurrentDate() {
                let date = new Date();
                let day = date.getDate();
                day = day < 10 ? '0' + day : day;
                return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + day;
            }

            function init(_target = null) {

                if (_target && _target !== '.stag-content') return;

                calendarElem = $('.pro-dashboard-inline-calendar');
                calendarElem.datepicker({
                    dateFormat: 'yy-mm-dd',
                    onSelect: function(_date) {
                        onDateChange(_date);
                    },
                    onChangeMonthYear: function(_year, _month) {
                        let date = _year + '-' + (_month < 10 ? '0' : '') + _month + '-05';
                        loadEventDates(date);
                    },
                    beforeShowDay: function(d) {
                        if (datesWithEvents && datesWithEvents.indexOf(formatDate(d)) !== -1) {
                            return [true, 'has-events'];
                        }
                        return [true, 'no-events'];
                    },
                    defaultDate: 0
                });

                let date = new Date();
                let day = date.getDate();
                day = day < 10 ? '0' + day : day;
                let mon = parseInt(date.getMonth() + 1);
                mon = mon < 10 ? '0' + mon : mon;
                let dateStr = date.getFullYear() + '-' + mon + '-' + day;
                loadEventDates(dateStr);

                onDateChange(getFormattedCurrentDate());
                selectedDate = getFormattedCurrentDate();

                $(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;
                    });

                addMCHook('refreshDashboardAppointments', function() {
                    onDateChange(selectedDate);
                });
            }

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