{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <style>
        .select2-selection {
            min-height: 2.4375rem !important;
            border-radius: 0 !important;
            border: 1px solid #cacaca !important;
            box-shadow: 0 0 black !important;

        }
        .select2-container--default .select2-selection--multiple{
            min-height: 2.4375rem !important;
        }
        .select2-search__field {
            margin: 0px !important;
        }
    </style>
    <div class="row max-width-initial">
        <div class="small-12 columns">
            <div class="content-container">
                <div class="content-container-content">
                    <div class="row max-width-initial">
                        <div class="large-12 columns">
                            <div class="row max-width-initial">
                                <div class="large-6 medium-6 small-12 columns">
                                    <label for="intervalDate">Date Interval</label>
                                    <select name="" id="intervalDate">
                                        <option value="All">All</option>
                                        <option value="Current">Current</option>
                                        <option value="30Days">30 Days</option>
                                        <option value="60Days">60 Days</option>
                                        <option value="90Days">90 Days</option>
                                        <option value="120Days">120 or More Days</option>
                                    </select>
                                </div>
                                <div class="large-6 medium-6 small-12 columns">
                                    <label for="form-patient-fullName">Patient</label>
                                    <input type="text" id="form-patient-fullName" />
                                    <input type="hidden" id="form-patient-id" />
                                </div>
                            </div>
                            <div class="row max-width-initial">
                                <div class="large-6 medium-6 small-12 columns">
                                    <label>Billing Branch</label>
                                    <select class="js-multiple-billingBranches" name="" id="billingBranches" multiple="multiple" style="">
                                        {% for branches in branch %}
                                            <option value="{{ branches.id }}">{{ branches.description }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" id="form-branch-id" />
                                </div>
                                <div class="large-6 medium-6 small-12 columns">
                                    <label>Billing Branch Address</label>
                                    <select class="js-multiple-billingBranchAddress" name="" id="billingBranchAddress" multiple="multiple" style="">
                                        {% for branches in branch %}
                                            <option value="{{ branches.id }}">{{ branches.description }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" id="form-branch-address-id" />
                                </div>
                            </div>
                            <div class="row max-width-initial">
                                <div class="large-6 medium-6 small-12 columns">
                                    <label>Company</label>
                                    <select class="js-multiple-company" name="" id="companies" multiple="multiple" style="">
                                        {% for companies in company %}
                                            <option value="{{ companies.id }}">{{ companies.description }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" id="form-company-id" />
                                </div>
                                <div class="large-6 medium-6 small-12 columns">
                                </div>
                            </div>
                        </div>
                    </div>
                    {%
                        include '@RxConnexion/Report/buttons.html.twig'
                        with {
                        'preview_url': 'main/report/ar/preview',
                        'export_to_pdf_url': 'main/report/ar/export_to_pdf',
                        'export_to_excel_url': 'main/report/ar/export_to_excel',
                        'paramsIds': 'intervalDate|form-branch-id|form-patient-id|form-branch-address-id|form-company-id'
                    }
                    %}
                </div>
            </div>
        </div>
    </div>
    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script language="javascript">
        //<![CDATA[
        jQ('.js-multiple-billingBranches, .js-multiple-billingBranchAddress, .js-multiple-company').select2();
        accountsReceivable.settings.patient_autocompleteUrl = '{{ path('patient_autocomplete') }}';
        accountsReceivable.settings.health_facility_autocomplete_url = '{{ path('health_facility_autocomplete') }}';
        accountsReceivable.settings.company_autocomplete_url = '{{ path('company_autocomplete') }}';
        jQ(document).ready(function(){
            report.init('{{ app.environment }}');
            accountsReceivable.init();
        });
        //]]>
    </script>
{% endblock %}