{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <style>
        ul.branchTarget {
            list-style-type: circle;
        }

        .sidenav {
            height: 100%; /* 100% Full-height */
            width: 0; /* 0 width - change this with JavaScript */
            position: fixed; /* Stay in place */
            z-index: 99999; /* Stay on top */
            top: 0; /* Stay at the top */
            right: 0;
            background-color: #dedede; /* white*/
            overflow-x: hidden; /* Disable horizontal scroll */
            padding-top: 60px; /* Place content 60px from the top */
            transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        }

        /* The navigation menu links */
        .sidenav li {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 11px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #f1f1f1;
        }

        /* Position and style the close button (top right corner) */
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
        #main {
            transition: margin-left .5s;
            padding: 20px;
        }

        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
        }
    </style>
    <div id="mySidenav" class="sidenav">

        <li>
            <h5><i class="fa fa-search"></i> Quick Links</h5>
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        </li>
        <ul>
            {% if userData.type == 'Super Admin' or 'Admin Report Productivity' in userData.accesses %}
            <li>
                Productivity
                <ul>
                    {% if userData.type == 'Super Admin' or 'Admin Report Productivity Clinical' in userData.accesses %}
                        <li><a href="{{ path('report_productivity') }}" target="_blank">Productivity Report (Clinical)</a></li>
                    {% endif %}
                    {#<li><a href="{{ path('report_productivity_billing') }}">Productivity Report (Billing)</a></li>#}
                    {#<li><a href="{{ path('report_clinician_productivity') }}">Clinician Productivity</a></li>#}
                </ul>
            </li>
            {% endif %}
            {% if userData.type == 'Super Admin' or 'Admin Report Billing' in userData.accesses %}
            <li>
                Billing
                <ul>
                    {% if userData.type == 'Super Admin' or 'Admin Report Invoice' in userData.accesses %}
                        <li><a href="{{ path('report_invoice') }}" target="_blank">Invoice</a></li>
                    {% endif %}
                    {#<li><a href="{{ path('report_invoice_itemised') }}">Invoice Itemize</a></li>#}
                    {#<li><a href="{{ path('report_rent_to_own_long_term_rental') }}">Rental</a></li>#}
                    {% if userData.type == 'Super Admin' or 'Admin Report Accounts Receivable' in userData.accesses %}
                        <li><a href="{{ path('report_ar') }}" target="_blank">Accounts Receivable</a></li>
                    {% endif %}
                    {% if userData.type == 'Super Admin' or 'Admin Report AR Summary' in userData.accesses %}
                        <li><a href="{{ path('report_ar_summary') }}" target="_blank">AR Summary</a></li>
                    {% endif %}
                    {#<li><a href="{{ path('report_refund') }}">Refund</a></li>#}
                    {% if userData.type == 'Super Admin' or 'Admin Report Payment' in userData.accesses %}
                        <li><a href="{{ path('report_payment') }}" target="_blank">Payment</a></li>
                    {% endif %}
                    {#<li><a href="{{ path('report_payment_without_invoice') }}">Payment w/o Invoice</a></li>#}
                    {#<li><a href="{{ path('report_patient_billing_file') }}">Patient Billing Files</a></li>#}
                </ul>
            </li>
            {% endif %}
        </ul>
    </div>
    <div class="row max-width-initial">
        <div class="large-3 columns">
            <div>
                <input type="text" class="" id="prod-company-desc" value="" style="font-size: 15px;" placeholder="Company"/>
                <input type="hidden" class="" id="prod-company-id" value="" style="font-size: 15px;"/>
            </div>
        </div>
        <div class="large-3 columns">
            <div>
                <input type="text" class="" id="prod-branch-desc" value="" style="font-size: 15px;" placeholder="Branch"/>
                <input type="hidden" class="" id="prod-branch-id" value="" style="font-size: 15px;"/>
            </div>
        </div>
        <div class="large-3 columns">
            <div>
                <input type="text" class="" id="prod-clinician-desc" value="" style="font-size: 15px;" placeholder="Clinician"/>
                <input type="hidden" class="" id="prod-clinician-id" value="" style="font-size: 15px;"/>
            </div>
        </div>
        <div class="large-3 columns">
            <div>
                <button type="button" style="margin: 0; text-align: center; width: 120px; background-color: #3e6b98; border-radius: 3px;" class="button reset_filter">Reset</button>
                <button type="button" style="margin: 0; text-align: center; width: 120px; background-color: #3e6b98; border-radius: 3px;" class="button" onclick="openNav()">Quick Links</button>
            </div>
        </div>
    </div>
    <div class="row max-width-initial">
        {#<div class="large-3 columns">#}
            {#<div class="dashboard-item-container border1">#}
                {#<div class="dashboard-item-header bg1">#}
                    {#<p style="margin: 0;"><i class="fa fa-clock-o" ></i> Daily</p>#}
                {#</div>#}
                {#<div class="dashboard-item-content" style="font-size: 15px;">#}
                    {#<input type="text" class="date daily_date" id="daily_date_from" value="{{ 'now'|date('m/d/Y') }}" style="font-size: 15px;"/>#}
                    {#<div id="daily-management-dashboard-data-container" class="has-loading">#}
                        {#<div id="daily-management-dashboard-data-loading" class="text-center"></div>#}
                        {#<div class="daily-management-dashboard" style="display: none;">#}
                            {#<div id="dailyBookedCount" style="display: none"></div>#}
                            {#<div id="dailyCallBackCount" style="display: none"></div>#}
                            {#<div id="dailyVoiceMailCount" style="display: none"></div>#}

                            {#<div><strong>Number of Referrals:</strong></div>#}
                            {#<div>#}
                                {#<ul class="dailyReferralCount">#}
                                {#</ul>#}
                            {#</div>#}
                            {#<div style="margin-top: 30px;">#}
                                {#<span class="totalDailyReferral"></span>#}
                            {#</div>#}
                            {#<hr>#}
                            {#<div><strong>Booking</strong></div>#}
                            {#<div>Booked: <strong class="dailyBookedCount">0</strong></div>#}
                            {#<div>Call Back: <strong class="dailyCallBackCount">0</strong></div>#}
                            {#<div>Voice Mail: <strong class="dailyVoiceMailCount">0</strong></div>#}
                            {#<hr>#}
                            {#<div><strong>Appointments</strong></div>#}
                            {#<div style="margin-left: 30px;"><strong><u>Target</u></strong></div>#}
                            {#<div>#}
                                {#<ul class="dailyBranchStatusCount">#}
                                {#</ul>#}
                            {#</div>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
            {#</div>#}
        {#</div>#}
        <div class="large-3 columns">
            <div class="dashboard-item-container border6">
                <div class="dashboard-item-header bg6">
                    <div style="margin: 0;">
                       <i class="fa fa-clock-o"></i> Monthly
                        <a href="javascript:void(0);" class="monthly_filter" style="color: white" title="Apply Filter"><i class="fa fa-refresh" style="float: right;"></i></a>
                    </div>

                </div>
                <div class="dashboard-item-content" style="font-size: 15px;">
                    <div class="row max-width-initial">
                        <div style="margin-left: 12px !important; width: 43%; float: left;">
                            <input type="text" class="date monthly_date monthly_date_from" id="monthly_date_from" value="{{ 'now'| date_modify('first day of this month') | date('m-d-Y') }}" style="font-size: 15px;" />
                        </div>
                        <div style="margin-right: 12px !important;  width: 43%; float: right;">
                            <input type="text" class="date monthly_date monthly_date_to" id="monthly_date_to" value="{{ 'now'|date('m/d/Y') }}" style="font-size: 15px;" />
                        </div>
                    </div>
                    <div id="monthly-management-dashboard-data-container" class="has-loading">
                        <div id="monthly-status-report-data-loading" class="text-center"></div>
                        <div class="monthly-management-dashboard" style="display: none;">
                            <div class="flat-scroll">
                                <div id="monthlyBookedCount" style="display: none"></div>
                                <div id="monthlyCallBackCount" style="display: none"></div>
                                <div id="monthlyVoiceMailCount" style="display: none"></div>

                                <div><strong>Number of Referrals:</strong></div>
                                <div>
                                    <ul class="monthlyReferralCount">
                                    </ul>
                                </div>
                                <div style="margin-top: 30px;">
                                    <span class="totalMonthlyReferral"></span>
                                </div>
                                <hr>
                                <div><strong>Booking</strong></div>
                                <div>Booked: <strong class="monthlyBookedCount">0</strong></div>
                                <div>Call Back: <strong class="monthlyCallBackCount">0</strong></div>
                                <div>Voice Mail: <strong class="monthlyVoiceMailCount">0</strong></div>
                                <hr>
                                <div><strong>Appointments</strong></div>
                                {#<div style="margin-left: 30px;"><strong><u>Target</u></strong></div>#}
                                <div>
                                    <ul class="monthlyBranchStatusCount">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-3 columns">
            <div class="dashboard-item-container border5">
                <div class="dashboard-item-header bg5">
                    <div style="margin: 0;">
                        <i class="fa fa-bar-chart" ></i> Productivity
                        <a href="javascript:void(0);" class="encounter_filter" style="color: white" title="Apply Filter"><i class="fa fa-refresh" style="float: right;"></i></a>
                    </div>
                </div>
                <div class="dashboard-item-content" style="font-size: 15px;">
                    <div class="row">
                        <div style="width: 100%">
                            <div style="margin-left: 12px; width: 43%; float: left;">
                                <input type="text" class="date encounter_date encounter_date_from" id="encounter_date_from" value="{{ 'now'| date_modify('first day of this month') | date('m-d-Y') }}" style="font-size: 15px;"/>
                            </div>
                            <div style="margin-right: 12px;  width: 43%; float: right;">
                                <input type="text" class="date encounter_date encounter_date_to" id="encounter_date_to" value="{{ 'now'|date('m/d/Y') }}" style="font-size: 15px;" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="encounter-management-dashboard-data-container" class="has-loading">
                            <div id="encounter-status-report-data-loading" class="text-center"></div>
                            <div class="encounter-management-dashboard" style="display: none;">
                                <div class="flat-scroll">
                                    <span class="encounter_referral_count"></span>
                                    <ul class="encounter">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-3 columns">
            <div class="dashboard-item-container border7">
                <div class="dashboard-item-header bg7">
                    <div style="margin: 0;">
                        <i class="fa fa-line-chart" ></i> Conversion
                        <a href="javascript:void(0);" class="conversion_filter" style="color: white" title="Apply Filter"><i class="fa fa-refresh" style="float: right;"></i></a>
                    </div>
                </div>
                <div class="dashboard-item-content" style="font-size: 15px;">
                    <div class="row">
                        <div style="width: 100%">
                            <div style="margin-left: 12px; width: 43%; float: left;">
                                <input type="text" class="date conversion_date conversion_date_from" id="conversion_date_from" value="{{ 'now'| date_modify("-73 day") | date('m-d-Y') }}" style="font-size: 15px;"/>
                            </div>
                            <div style="margin-right: 12px;  width: 43%; float: right;">
                                <input type="text" class="date conversion_date conversion_date_to" id="conversion_date_to" value="{{ 'now'| date_modify("-73 day + 30 day") |date('m/d/Y') }}" style="font-size: 15px;" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="conversion-management-dashboard-data-container" class="has-loading">
                            <div id="conversion-status-report-data-loading" class="text-center"></div>
                            <div class="conversion-management-dashboard" style="display: none;">
                                <div class="flat-scroll">
                                    <span class="conversion_referral_count hide"></span>
                                    <ul class="conversion">
                                    </ul>
                                    <div class="invoices"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-3 columns">
            <div class="dashboard-item-container border8">
                <div class="dashboard-item-header bg8">
                    <div style="margin: 0;">
                        <i class="fa fa-calendar" ></i> Cycle Overdue
                        <a href="javascript:void(0);" class="overdue_filter" style="color: white" title="Apply Filter"><i class="fa fa-refresh" style="float: right;"></i></a>
                    </div>
                </div>
                <div class="dashboard-item-content" style="font-size: 15px;">
                    <div class="row max-width-initial">
                        <div style="margin-left: 12px !important; width: 43%; float: left;">
                            <input type="text" class="date cycle_date month_cycle_date_from" id="cycle_date_from" value="{{ 'now'| date_modify("-73 day") | date('m-d-Y') }}" style="font-size: 15px;"/>
                        </div>
                        <div style="margin-right: 12px !important;  width: 43%; float: right;">
                            <input type="text" class="date cycle_date month_cycle_date_to" id="cycle_date_to" value="{{ 'now'| date_modify("-73 day + 30 day") |date('m/d/Y') }}" style="font-size: 15px;"/>
                        </div>
                    </div>
                    <div id="cycle-management-dashboard-data-container" class="has-loading">
                        <div id="cycle-status-report-data-loading" class="text-center"></div>
                        <div class="cycle-management-dashboard" style="display: none;">
                            <div class="flat-scroll">
                                <div>
                                    <form action="">
                                        <input type="radio" name="cycle" value="previous" style="margin-right: 3px;"><label style="font-size: 12px; margin-left: 1px;">Previous Cycle</label>
                                        <input type="radio" name="cycle" value="month" style="margin-right: 3px;"><label style="font-size: 12px; margin-left: 1px;">Month Cycle</label>
                                    </form>
                                </div>
                                <div class="cycle">
                                </div>
                                <div style="margin-top: 30px;">
                                    <span class="cycle_totalReferral"></span>
                                    <span class="totalCycle"></span>
                                </div>
                                <div style="margin-top: 30px; font-size: 12px;">
                                    <div class="cnt1"></div>
                                    <div class="cnt2"></div>
                                    <div class="cnt3"></div>
                                    <div class="cnt4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script language="javascript">
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }

        //<![CDATA[
        managementDashboard.settings.dailyDashboardUrl = '{{ path('management_dashboard_daily_count') }}';
        managementDashboard.settings.reportAppointmentRedirectUrl = '{{ path('report_appointment_redirect_preview') }}';
        managementDashboard.settings.monthlyDashboardUrl = '{{ path('management_dashboard_monthly_count') }}';
        managementDashboard.settings.cycleDashboardUrl = '{{ path('management_dashboard_cycle') }}';
        managementDashboard.settings.chartTypeCyclePatientProgressUrl = '{{ path('report_cycle_redirect_preview') }}';
        managementDashboard.settings.encounterDashboardUrl = '{{ path('management_dashboard_encounter') }}';
        managementDashboard.settings.conversionDashboardUrl = '{{ path('management_dashboard_conversion') }}';
        managementDashboard.settings.chartTypeEncounterReportUrl = '{{ path('report_encounter_redirect_preview') }}';
        managementDashboard.settings.referralManagementDashboardReportUrl = '{{ path('report_referral_redirect_preview') }}';
        managementDashboard.settings.managementDashboardPatientProgress_url = '{{ path('report_management_dashboard_redirect_preview') }}';
        managementDashboard.settings.company_autocomplete_url = '{{ path('company_autocomplete') }}';
        managementDashboard.settings.branch_autocomplete_url = '{{ path('health_facility_autocomplete') }}';
        managementDashboard.settings.provider_autocomplete_url = '{{ path('provider_autocomplete') }}';
        managementDashboard.settings.conversionRedirect_url = '{{ path('report_conversion_redirect_preview') }}';
        {#managementDashboard.settings.referralManagementDashboardReportUrl = '{{ path('report_management_dashboard_referral_redirect_preview') }}';#}
        jQ(document).ready(function(){
            /* NOTE: I DISABLED DASHBOARD ON MY DEV ENVIRONMENT - waeil */
            managementDashboard.init({{ global_title != 'ZapConexion:dev-waeil' ? 'true' : 'false' }});
        });
        //]]>
    </script>
{% endblock %}