{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <div id="dashboard-counter" class="row max-width-initial">
        <div class="large-4 columns">
            <div class="dashboard-item-container border3">
                <div class="dashboard-item-header bg3">
                    <p style="margin: 0;"><i class="fa fa-pencil" ></i> Pending Encoding (<span id="encoding-ctr">0</span>)</p>
                </div>
                <div class="dashboard-item-content dashboard-item-content-50">
                    <ul id="dashboard-pending-encode-list" class="dashboard-item-list has-loading">
                    </ul>
                </div>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="dashboard-item-container border2">
                <div class="dashboard-item-header bg2">
                    <p style="margin: 0;"><i class="fa fa-pencil" ></i> Pending Audit (<span id="audit-ctr">0</span>)</p>
                </div>
                <div class="dashboard-item-content dashboard-item-content-50">
                    <ul id="dashboard-pending-audit-list" class="dashboard-item-list has-loading">
                    </ul>
                </div>
            </div>
        </div>
        <div class="large-4 columns">
        </div>
    </div>
    <div class="row max-width-initial">
        <div class="large-4 columns">
            <div class="dashboard-item-container border6">
                <div class="dashboard-item-header bg6">
                    <div style="margin: 0;">
                       <i class="fa fa-paperclip-o"></i> Invoice
                    </div>
                </div>
                <div class="dashboard-item-content dashboard-item-content-50" style="font-size: 15px;">
                    <div id="invoice-dashboard-data-container" class="has-loading">
                        <div id="invoice-report-data-loading" class="text-center"></div>
                        <div class="invoice-dashboard">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="dashboard-item-container border1">
                <div class="dashboard-item-header bg1">
                    <div style="margin: 0;">
                        <i class="fa fa-dollar"></i> Payment
                    </div>
                </div>
                <div class="dashboard-item-content dashboard-item-content-50" style="font-size: 15px;">
                    <div id="payment-dashboard-data-container" class="has-loading">
                        <div id="payment-report-data-loading" class="text-center"></div>
                        <div class="payment-dashboard">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="dashboard-item-container border3">
                <div class="dashboard-item-header bg3">
                    <div style="margin: 0;">
                        <i class="fa fa-fast-backward"></i> Refund
                    </div>
                </div>
                <div class="dashboard-item-content dashboard-item-content-50" style="font-size: 15px;">
                    <div id="refund-dashboard-data-container" class="has-loading">
                        <div id="refund-report-data-loading" class="text-center"></div>
                        <div class="refund-dashboard">

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

    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script language="javascript">
        //<![CDATA[
        accounting.settings.dashboardUrl = '{{ path('accounting_dashboard_data') }}';
        jQ(document).ready(function () {
           accounting.init();
        });
        //]]>
    </script>
{% endblock %}