{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    {% set userData = app.session.get('userData') %}
    <div id="dashboard-counter" class="max-width-initial">
        <div class="row">
            {% if userData.type == "Clinician" %}
                <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>#}
                            {#<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-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>
            {% else %}
                <div class="medium-12 columns">
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="large-3 medium-6 columns">
                            <div style="border:solid 2px #BDB76B; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-tasks fa-5x float-right" style="color:#0004; font-size: 55px"></i>
                                    <h1 id="dashboard-counter-my-task">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">My Tasks</p>
                                </div>
                                <a href="{{ path('my_task') }}" target="_blank" style="">
                                    <div style="background:#BDB76B; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div class="" style="border:solid 2px #1cc7ff; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-user-circle fa-5x float-right" style="color:#0004; font-size: 55px"></i>
                                    <h1 id="dashboard-counter-endorsed">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Endorsement</p>
                                </div>
                                <a href="{{ path('endorsed') }}" target="_blank" style="">
                                    <div style="background: #1cc7ff; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div style="border:solid 2px #34495e; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-fax fa-5x float-right" style="color:#0004; font-size: 55px"></i>
                                    <h1 id="dashboard-counter-new-faxes">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">New Faxes</p>
                                </div>
                                <a href="{{ path('fax') }}" target="_blank" style="">
                                    <div style="background:#34495e; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div style="border:solid 2px #DC6A6A; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-mail-reply-all fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-letters">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Letters</p>
                                </div>
                                <a href="{{ path('dashboard_letters') }}" target="_blank">
                                    <div style="background:#DC6A6A; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="large-3 medium-6 columns">
                            <div style="border:solid 2px #DC6A6A; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-clock-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-with-fax-no-encounter">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Fax w/o Encounter</p>
                                </div>
                                <a href="{{ path('with_fax_no_encounter_preview') }}" target="_blank">
                                    <div style="background:#DC6A6A; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div style="border:solid 2px #dc8c08; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-clock-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-with-referral-no-encounter">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Referral w/o Encounter</p>
                                </div>
                                <a href="{{ path('with_referral_no_encounter_preview') }}" target="_blank">
                                    <div style="background:#dc8c08; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #d35400; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-pencil-square-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-initial-encounter">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Patient w/o Encounter</p>
                                </div>
                                <a href="{{ path('patient_initial_encounter_preview') }}" target="_blank" style="">
                                    <div style="background:#d35400; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #4daf7c; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-calendar-plus-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-appointment-notice">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Appointment Notice</p>
                                </div>
                                <a href="{{ path('dashboard_appointment_notice_preview') }}" target="_blank" style="">
                                    <div style="background:#4daf7c; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #336e7b; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-phone fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-encounter-call">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Reminder Call</p>
                                </div>
                                <a href="{{ path('patient_encounter_call') }}" target="_blank" style="">
                                    <div style="background:#336e7b; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #1ba39c; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-calendar fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-for-rebook">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">For Rebooking</p>
                                </div>
                                <a href="{{ path('patient_for_rebooking') }}" target="_blank" style="">
                                    <div style="background:#1ba39c; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #eb9532; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-calendar-check-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-seventy-two-hour-follow-up">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">72 Hour(s) Follow-up</p>
                                </div>
                                <a href="{{ path('patient_72_hours_follow_up') }}" target="_blank" style="">
                                    <div style="background: #eb9532; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #0f74a8; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-calendar-check-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-three-month-follow-up">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">3 Month Follow-up</p>
                                </div>
                                <a href="{{ path('patient_3_months_follow_up') }}" target="_blank" style="">
                                    <div style="background: #0f74a8; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-3 medium-6 columns">
                            <div class=""  style="border:solid 2px #4d9200; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-calendar-check-o fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-6-month-follow-up">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">6 Month Follow-up</p>
                                </div>
                                <a href="{{ path('patient_6_months_follow_up') }}" target="_blank" style="">
                                    <div style="background: #4d9200; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="large-3 medium-3 columns">
                            <div class=""  style="border:solid 2px #0f74a8; border-radius: 5px ; overflow: hidden;">
                                <div style=" padding: 15px;">
                                    <i class="fa fa-medkit fa-5x float-right" style="color:#0004; font-size: 55px;"></i>
                                    <h1 id="dashboard-counter-ar">
                                        <i class="fa fa-spinner fa-spin"></i>
                                    </h1>
                                    <p style="margin: 0px;">Accounts Receivable</p>
                                </div>
                                <a href="{{ path('report_ar') }}" target="_blank" style="">
                                    <div style="background: #0f74a8; color: #fff;padding: 5px 15px 5px 15px;">
                                        <p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <!-- INSURANCE PACKAGE -->
                        {#<div class="large-3 medium-3 columns">#}
                            {#<div class=""  style="border:solid 2px #9ea845; border-radius: 5px ; overflow: hidden;">#}
                                {#<div style=" padding: 15px;">#}
                                    {#<i class="fa fa-upload fa-5x float-right" style="color:#0004; font-size: 55px;"></i>#}
                                    {#<h1 id="dashboard-counter-ar">#}
                                        {#<i class="fa fa-spinner fa-spin"></i>#}
                                    {#</h1>#}
                                    {#<p style="margin: 0px;">Insurance Package</p>#}
                                {#</div>#}
                                {#<a href="{{ path('report_ar') }}" target="_blank" style="">#}
                                    {#<div style="background: #9ea845; color: #fff;padding: 5px 15px 5px 15px;">#}
                                        {#<p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>#}
                                    {#</div>#}
                                {#</a>#}
                            {#</div>#}
                        {#</div>#}
                        {#<div class="large-3 medium-3 columns">#}
                            {#<div class=""  style="border:solid 2px #a83e91; border-radius: 5px ; overflow: hidden;">#}
                                {#<div style=" padding: 15px;">#}
                                    {#<i class="fa fa-sticky-note fa-5x float-right" style="color:#0004; font-size: 55px;"></i>#}
                                    {#<h1 id="dashboard-counter-reminder">#}
                                        {#<i class="fa fa-spinner fa-spin"></i>#}
                                    {#</h1>#}
                                    {#<p style="margin: 0px;">Reminders</p>#}
                                {#</div>#}
                                {#<a href="{{ path('account_user_reminder') }}" target="_blank" style="">#}
                                    {#<div style="background: #a83e91; color: #fff;padding: 5px 15px 5px 15px;">#}
                                        {#<p style="margin: 0px;">More info<i class="fa fa-arrow-circle-right float-right" style="margin-top: 3px;"></i></p>#}
                                    {#</div>#}
                                {#</a>#}
                            {#</div>#}
                        {#</div>#}
                        <div class="large-3 medium-3 columns">

                        </div>
                        <div class="large-3 medium-3 columns">

                        </div>
                    </div>
                </div>
            {% endif %}

            {#<div class="medium-4 columns">
                <div style="border:solid 2px #1cc7ff; border-radius: 5px ; overflow: hidden;margin-bottom: 15px;">
                    <div style="background:#1cc7ff; color: #fff;padding: 5px 15px 5px 15px;">
                        <p style="margin: 0px;"><i class="fa fa-ticket" ></i> Ticket</p>
                    </div>
                    <div style="padding: 15px;">
                        <ul style="list-style: none;margin: 0">
                            <li><a href="" target="_blank">08/01/2019 Patient Laura</a></li>
                            <li><a href="" target="_blank">08/01/2019 Patient Laura</a></li>
                            <li><a href="" target="_blank">08/01/2019 Patient Laura</a></li>
                            <li><a href="" target="_blank">08/01/2019 Patient Laura</a></li>
                        </ul>
                    </div>
                </div>
                <div style="border:solid 2px #34495e; border-radius: 5px ; overflow: hidden;margin-bottom: 15px;">
                    <div style="background:#34495e; color: #fff;padding: 5px 15px 5px 15px;">
                        <p style="margin: 0px;"><i class="fa fa-ticket" ></i> Others</p>
                    </div>
                    <div style="padding: 15px;">
                        <ul style="list-style: none;margin: 0">
                            <li><a href="" target="_blank">..</a></li>
                        </ul>
                    </div>
                </div>
            </div>#}
        </div>
        {#<div class="row" style="margin-bottom: 15px;">#}

        {#</div>#}
    </div>
    {#<div class="large-6 columns">#}
    {#<canvas id="stats-chart" width="100%"></canvas>#}
    {#</div>#}
    {#<div class="large-6 columns">#}
    {#<canvas id="stats-chart-2" width="100%"></canvas>#}
    {#</div>#}
    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script>
        //<![CDATA[


        index.settings.userType = '{{ userData.type }}';
        index.settings.dashboardCount_url = '{{ path('main_dashboard_count') }}';
        jQ(document).ready(function(){
            /* NOTE: I DISABLED DASHBOARD ON MY DEV ENVIRONMENT - waeil */
            {% if global_title != 'ZapConexion:dev-waeil' %}
            index.init();
            {% elseif userData.type == "Clinician" %}
            index.init();
            {% endif %}
        });
        //]]>
    </script>

{% endblock %}