@extends ('layouts/template')

@section('content')
    <style>
        #admin-table-rm-matrix_wrapper {
            padding-top: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <style>
        #table-rm-matrix_length, #table-rm-matrix_info {
            padding-left: 0.5rem;
        }
        #table-rm-matrix_filter {
            padding-right: 0.5rem;
        }
        #table-rm-matrix_paginate {
            padding: 0.5rem;
        }
    </style>
    <div class="p-3 mcp-theme-1" id="practice-remote-monitoring" v-cloak>

        <div class="card">

            <div class="card-header px-2 py-2 d-flex align-items-baseline">
                <span class="mr-4">
                    <span class="font-size-14">Remote Monitoring</span>
                    <i class="fas fa-arrow-right text-sm mx-1"></i>
                    <b class="font-size-14">{{friendly_month(date((request()->input('y') ?: 'Y') . '-' . (request()->input('m') ?: 'm') . '-d'))}}</b>
                </span>
                <?php

                $mStr = request()->input('m') ? request()->input('m') : date('m');
                $yStr = request()->input('y') ? request()->input('y') : date('Y');
                $rcmStartDate = $yStr . '-' . $mStr . '-' . '01';
                $m = +$mStr;
                $y = +$yStr;
                ?>
                <a href="{{ route('practice-management.rpm_work_matrix') }}?m={{$mStr}}&y={{$yStr}}"
                   native target="_blank"
                   open-in-stag-popup
                   update-parent
                   popup-style="tall overflow-visible"
                   class="ml-2 font-weight-bold"
                   mc-initer="rpm-work-matrix"
                   title="RPM Work Matrix">
                    RPM Work Matrix
                </a>
                <form class="ml-auto d-inline-flex flex-nowrap align-items-center" action="" method="GET">
                    <span class="mr-2">Month</span>
                    <select class="form-control form-control-sm min-width-unset width-100px mr-3" name="m"
                            onchange="fastLoad('{{route('practice-management.remote-monitoring')}}?' + $(this).closest('form').serialize())">
                        <option value="01" {{$m === 1 ? 'selected' : ''}}>Jan</option>
                        <option value="02" {{$m === 2 ? 'selected' : ''}}>Feb</option>
                        <option value="03" {{$m === 3 ? 'selected' : ''}}>Mar</option>
                        <option value="04" {{$m === 4 ? 'selected' : ''}}>Apr</option>
                        <option value="05" {{$m === 5 ? 'selected' : ''}}>May</option>
                        <option value="06" {{$m === 6 ? 'selected' : ''}}>Jun</option>
                        <option value="07" {{$m === 7 ? 'selected' : ''}}>Jul</option>
                        <option value="08" {{$m === 8 ? 'selected' : ''}}>Aug</option>
                        <option value="09" {{$m === 9 ? 'selected' : ''}}>Sep</option>
                        <option value="10" {{$m === 10 ? 'selected' : ''}}>Oct</option>
                        <option value="11" {{$m === 11 ? 'selected' : ''}}>Nov</option>
                        <option value="12" {{$m === 12 ? 'selected' : ''}}>Dec</option>
                    </select>
                    <span class="mr-2">Year</span>
                    <select class="form-control form-control-sm min-width-unset width-100px" name="y"
                            onchange="fastLoad('{{route('practice-management.remote-monitoring')}}?' + $(this).closest('form').serialize())">
                        <option value="2020" {{$y === 2020 ? 'selected' : ''}}>2020</option>
                        <option value="2021" {{$y === 2021 ? 'selected' : ''}}>2021</option>
                        <option value="2022" {{$y === 2022 ? 'selected' : ''}}>2022</option>
                        <option value="2023" {{$y === 2023 ? 'selected' : ''}}>2023</option>
                    </select>
                </form>
            </div>

            <?php $rc = request()->input('rc') ? request()->input('rc') : 1; ?>

            <div class="card-body p-0">
                <div class="d-flex align-items-start m-0">
                    <div class="flex-grow-1 px-0 pt-2">
                        <?php $trIndex = 0; ?>
                        @foreach ($patients as $iPatient)
                            <script>
                                addMCHook(
                                    'refresh-rpm-row-{{$trIndex}}',
                                    function () {
                                        refreshRpmRow({{$trIndex}});
                                    }
                                );
                            </script>
                            <?php $trIndex++; ?>
                        @endforeach
                        <table class="table table-sm table-striped table-hover p-0 m-0 border-top" id="table-rm-matrix">
                            <thead class="bg-light">
                            <tr stag-title="Click to sort. Shift+Click to multi-sort.">
                                <th class="border-0 pl-2">Name</th>
                                <th class="border-0">DOB</th>
                                <th class="border-0">RPM?</th>
                                <th class="border-0">Cell. BP?</th>
                                <th class="border-0">Cell. Scale?</th>
                                <th class="border-0">Last BP</th>
                                <th class="border-0">Last Wt</th>
                                <th class="border-0">Days Since Last Visit</th>
                                <th class="border-0">Interacted?</th>
                                <th class="border-0">#Meas. Days</th>
                                <th class="border-0">#Unstamped</th>
                                <th class="border-0">#RPM Mins.</th>
                                <th class="border-0">Billable</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php $trIndex = 0; ?>
                            @foreach ($patients as $iPatient)
                                <?php

                                $daysDiff = -1;
                                if($iPatient->most_recent_completed_mcp_note_date) {
                                    $careMonthLastDay = date_add(date_create($rcmStartDate), date_interval_create_from_date_string("1 month"));
                                    $careMonthLastDay = date_sub($careMonthLastDay, date_interval_create_from_date_string("1 day"));
                                    $daysDiff = date_diff($careMonthLastDay, date_create($iPatient->most_recent_completed_mcp_note_date))->days;
                                }
                                $lastVisitWithinDays = ($iPatient->days_between_most_recent_mcp_note_date_and_end_of_care_month <= config('app.maxDaysSinceLastVisit'));

                                $performerRole = false;
                                if ($pro->pro_type === 'ADMIN') {
                                    $performerRole = 'ADMIN';
                                } else if ($iPatient->care_month_mcp_pro_id === $pro->id) {
                                    $performerRole = 'MCP';
                                } else if ($iPatient->care_month_rmm_pro_id === $pro->id) {
                                    $performerRole = 'RMM';
                                }

                                ?>
                                @include('app.practice-management.remote-monitoring-row-markup')
                                <?php $trIndex++; ?>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function() {
            let dataTableInst = null;
            window.refreshRpmRow = function(_index) {
                let tr = $('#table-rm-matrix tbody tr:eq(' + _index + ')');
                if(!tr.length) return;
                let clientUid = tr.attr('data-client-uid'), careMonthUid = tr.attr('data-care-month-uid');
                $.get('/rpm-matrix-row?m={{$mStr}}&y={{$yStr}}&clientUid=' + clientUid + '&careMonthUid=' + careMonthUid + '&trIndex=' + _index, _data => {
                    let row = $(_data);
                    row.find('>td').each(function(_columnIndex) {
                        dataTableInst.cell(_index, _columnIndex).data(this.innerHTML); //.draw();
                    });
                    $('#practice-remote-monitoring [moe][initialized]').removeAttr('initialized');
                    initMoes();
                    tr.addClass('post-refresh-highlight');
                    setTimeout(function() {
                        tr.removeClass('post-refresh-highlight');
                    }, 1000);
                });
            }
            function init() {
                dataTableInst = $('#table-rm-matrix').DataTable({
                    paging: false,
                    columnDefs: [
                        {
                            targets: 0,
                            type: 'string',
                            render: function (data, type, row, meta) {
                                if(type === 'sort') {
                                    return $(data).find('.sort-data').first().text();
                                }
                                return data;
                            },
                        },
                        {targets: 1, type: 'date'},
                        {
                            targets: 7,
                            type: 'date',
                            render: function (data, type, row, meta) {
                                if(type === 'sort') {
                                    return $(data).find('.sort-data').first().text();
                                }
                                return data;
                            },
                        },
                        {
                            targets: [5, 6, 8, 10, 11, 12],
                            type: 'num',
                            render: function (data, type, row, meta) {
                                if(type === 'sort') {
                                    return +($(data).find('.sort-data').first().text());
                                }
                                return data;
                            },
                        },
                    ]
                });
                $('#practice-remote-monitoring').removeAttr('v-cloak');
                $('#practice-remote-monitoring [moe][initialized]').removeAttr('initialized');
                initMoes();
            }
            addMCInitializer('practice-remote-monitoring', init, '#practice-remote-monitoring');
        }).call(window);
    </script>
@endsection
