{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <style>
        ul.branchTarget {
            list-style-type: circle;
        }
    </style>
    <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 style="float: left">
                <button type="button" style="margin: 0; text-align: center; width: 120px; background-color: #3e6b98; border-radius: 3px;" class="button apply_filter">Apply Filter</button>
            </div>
            <div style="float: right">
                <button type="button" style="margin: 0; text-align: center; width: 120px; background-color: #3e6b98; border-radius: 3px;" class="button reset_filter">Reset</button>
            </div>
        </div>
    </div>
    <div class="row max-width-initial">
        <div class="large-6 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;">
                    <div class="row max-width-initial">
                        <div style="margin-left: 12px !important; width: 43%; float: left;">
                            <input type="text" class="date daily_date daily_date_from" id="daily_date_from" value="{{ 'now' | date('m-d-Y') }}" style="font-size: 15px;" />
                        </div>
                    </div>
                    <div id="daily-management-dashboard-cbt-data-container" class="has-loading">
                        <div id="daily-management-dashboard-cbt-data-loading" class="text-center"></div>
                        <div class="daily-management-dashboard-cbt" style="display: none;">
                            <div class="flat-scroll">
                                <div><strong>Appointments</strong></div>
                                <div>
                                    <ul class="dailyCbtCount">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <div class="dashboard-item-container border2">
                <div class="dashboard-item-header bg2">
                    <p style="margin: 0;"><i class="fa fa-clock-o" ></i> Monthly</p>
                </div>
                <div class="dashboard-item-content" style="font-size: 15px;">
                    <div class="row max-width-initial">
                        <div style="margin-left: 12px !important; width: 47%; 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: 47%; 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-cbt-data-container" class="has-loading">
                        <div id="monthly-management-dashboard-cbt-data-loading" class="text-center"></div>
                        <div class="monthly-management-dashboard-cbt" style="display: none;">
                            <div class="flat-scroll">
                                <div><strong>Appointments</strong></div>
                                <div>
                                    <ul class="monthlyCbtCount">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

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

        jQ('.apply_filter').on('click', function () {
            var daily_date_from = jQ('#daily_date_from').val().replace(/\//g, '-');

            var company = jQ('#prod-company-id').val();
            var branch = jQ('#prod-branch-id').val();
            var clinician = jQ('#prod-clinician-id').val();

            var monthly_date_from = jQ('#monthly_date_from').val().replace(/\//g, '-');
            var monthly_date_to = jQ('#monthly_date_to').val().replace(/\//g, '-');

            managementDashboardCbt.initDailyCount(daily_date_from, company, branch, clinician);
            managementDashboardCbt.initMonthlyCount(monthly_date_from, monthly_date_to, company, branch, clinician);
        });

        jQ('.reset_filter').on('click', function () {

            //RESET FILTERS
            jQ('#prod-company-desc').val('');
            jQ('#prod-company-id').val('');

            jQ('#prod-clinician-desc').val('');
            jQ('#prod-clinician-id').val('');

            jQ('#prod-branch-desc').val('');
            jQ('#prod-branch-id').val('');

            var daily_dateFrom = jQ('#daily_date_from').val();

            var monthly_dateFrom = jQ('#monthly_date_from').val();
            var monthly_dateTo = jQ('#monthly_date_to').val();

            managementDashboardCbt.initDailyCount(daily_dateFrom, null, null, null);
            managementDashboardCbt.initMonthlyCount(monthly_dateFrom, monthly_dateTo, null, null, null);
        });

        managementDashboardCbt.settings.dailyManagementCbtDashboardUrl = '{{ path('management_dashboard_cbt_daily_count') }}';
        managementDashboardCbt.settings.monthlyManagementCbtDashboardUrl = '{{ path('management_dashboard_cbt_monthly_count') }}';
        managementDashboardCbt.settings.company_autocomplete_url = '{{ path('company_autocomplete') }}';
        managementDashboardCbt.settings.branch_autocomplete_url = '{{ path('health_facility_autocomplete') }}';
        managementDashboardCbt.settings.provider_autocomplete_url = '{{ path('provider_autocomplete') }}';
        jQ(document).ready(function(){
            managementDashboardCbt.init();
        });
        //]]>
    </script>
{% endblock %}