@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->patientsCountAsDna()}}<th>  
                                        <th class="pl-2">
                                            <a class="font-weight-normal" href="{{route('dna.my-patients')}}" native target="_blank" open-in-stag-popup popup-style="tall" title="Patients ">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->getNextPaymentDateAsDna(), 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->getProcessingAmountAsDna())}}</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">
                    <div class="row mcp-theme-1">
                        <div class="col-md-6 mcp-theme-1">
                          

                            <!-- 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.dna.dashboard.encounters_pending_my_review_dashboard')
                                </div>
                            </div>

                          

                        </div>
                        <div class="col-md-6 mcp-theme-1">
                            <div class="card mb-4">
                                <div class="card-header pl-2">
                                    <strong>
                                        Messages
                                    </strong>
                                </div>
                                <div class="card-body p-0">
                                    @include('app.dna.dashboard.messages')
                                </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 () {

            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