{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <style>
        ul.branchTarget {
            list-style-type: circle;
        }
    </style>
    <div id="dashboard-counter" class="max-width-initial">
        <div class="row max-width-initial">
            <div class="large-6 columns">
                <div class="input-group">
                    <label class="input-group-label">Clinician</label>
                    <input class="input-group-field" type="text" id="provider_fullName">
                    <input class="input-group-field" type="hidden" id="provider_id">
                </div>
            </div>
        </div>
        <div class="row max-width-initial">
            <div class="medium-4 columns">
                {#<div class="dashboard-item-container border2">#}
                    {#<div class="dashboard-item-header bg2">#}
                        {#<p style="margin: 0;"><i class="fa fa-calendar"></i> Appointment: Today {{  "now"|date("m/d/Y") }} (<span id="appointment-today-ctr">0</span>)</p>#}
                    {#</div>#}
                    {#<div class="dashboard-item-content dashboard-item-content-50">#}
                        {#<small><b>Today {{  "now"|date("m/d/Y") }}</b> (<span id="appointment-today-ctr">0</span>)</small>#}
                        {#<ul id="dashboard-appointment-list" class="dashboard-item-list has-loading"></ul>#}
                            {#</ul>#}
                            {#<small><b>Pending Update</b> (<span id="appointment-pending-update-ctr">0</span>)</small>#}
                            {#<ul id="dashboard-appointment-pending-update-list" class="dashboard-item-list has-loading">#}
                            {#</ul>#}
                    {#</div>#}
                {#</div>#}
                <div class="dashboard-item-container border1">
                    <div class="dashboard-item-header bg1">
                        <p style="margin: 0;"><i class="fa fa-calendar-times-o" ></i> Appointment: Pending Update (<span id="appointment-pending-update-ctr">0</span>)</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-appointment-pending-update-list" class="dashboard-item-list has-loading">
                        </ul>
                    </div>
                </div>
                <div class="dashboard-item-container border5">
                    <div class="dashboard-item-header bg5">
                        <p style="margin: 0;"><i class="fa fa-clock-o" ></i> Encounter Overdue(s) {#(<span id="encounter-overdue-ctr">0</span>) #}</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-encounter-overdue-list" class="dashboard-item-list has-loading">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="medium-4 columns">
                <div class="dashboard-item-container border2">
                    <div class="dashboard-item-header bg2">
                        <p style="margin: 0;"><i class="fa fa-file" ></i> Insurance Package (<span id="insurance-package-ctr">0</span>)</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-clinician-insurance-package-list" class="dashboard-item-list has-loading">
                        </ul>
                    </div>
                </div>
                <div class="dashboard-item-container border6">
                    <div class="dashboard-item-header bg6">
                        <p style="margin: 0;"><i class="fa fa-envelope" ></i> Letter(s) (<span id="letter-ctr">0</span>)</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-clinician-letter-list" class="dashboard-item-list has-loading">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="medium-4 columns">
                <div class="dashboard-item-container border3">
                    <div class="dashboard-item-header bg3">
                        <p style="margin: 0;"><i class="fa fa-bell" ></i> Reminders (<span id="reminder-ctr">0</span>)</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-reminder-list" class="dashboard-item-list has-loading">
                        </ul>
                    </div>
                </div>
                <div class="dashboard-item-container border4">
                    <div class="dashboard-item-header bg4">
                        <p style="margin: 0;"><i class="fa fa-ticket" ></i> Endorsement (<span id="ticket-ctr">0</span>)</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-ticket-list" class="dashboard-item-list has-loading">
                        </ul>
                    </div>
                </div>
                {#<div class="dashboard-item-container border4">
                    <div class="dashboard-item-header bg4">
                        <p style="margin: 0;"><i class="fa fa-bullhorn" ></i> Announcments (<span id="announcement-ctr">0</span>)</p>
                    </div>
                    <div class="dashboard-item-content dashboard-item-content-50">
                        <ul id="dashboard-announcements-list" class="dashboard-item-list">
                            <li><small style="color:grey; margin-left: 6px">No Announcements for now.</small></li>
                        </ul>
                    </div>
                </div>#}
            </div>
        </div>
    </div>

    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script language="javascript">
        //<![CDATA[

        let autoCompleteUrl = '{{ path('provider_autocomplete') }}' ;
        global.autocomplete.bind(autoCompleteUrl, '#provider_fullName', '#provider_id', {
            onSelect: function (d) {
                clinicianDashboard.dashboardContents(d.id);
            }
        });

        jQ(document).ready(function(){
            clinicianDashboard.dashboardContents(null);
            clinicianDashboard.init();
        });
        //]]>
    </script>
{% endblock %}