{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <div id="flash-messages-container">
    </div>
    <div class="row max-width-initial">
        <div class="small-12 columns">
            <nav aria-label="You are here:" role="navigation">
                <ul class="breadcrumbs">
                    <li><a href="{{ path('item') }}">Item List</a></li>
                    <li>
                        <span class="show-for-sr">Current: </span> Item Details
                    </li>
                </ul>
            </nav>
            {% include '@RxConnexion/Item/overview.html.twig' with {item: item} %}
            <br/>
            <div class="content-container has-loading">
                <div class="content-container-content hide">
                    <ul class="tabs custom-tabs" data-tabs id="item-tabs">
                        {% if userData.type == 'Super Admin' or 'Admin Items Price' in userData.accesses %}
                            <li class="tabs-title {{ tab is null or tab is empty or tab == 'ip' ? 'is-active' : '' }}"><a href="#panel-item-price" aria-selected="true">Price</a></li>
                        {% endif %}
                        {% if item.isPackage and (userData.type == 'Super Admin' or 'Admin Items Item' in userData.accesses) %}
                            <li class="tabs-title {{ tab == 'it' ? 'is-active' : '' }}"><a href="#panel-item" aria-selected="true">Item</a></li>
                        {% endif %}
                        {% if userData.type == 'Super Admin' or 'Admin Items Tax Code' in userData.accesses %}
                            <li class="tabs-title {{ tab == 'tc' ? 'is-active' : '' }}"><a href="#panel-tax" aria-selected="true">Tax Code</a></li>
                        {% endif %}
                        {% if userData.type == 'Super Admin' or 'Admin Items Ave Cost' in userData.accesses %}
                            <li class="tabs-title {{ tab == 'c' ? 'is-active' : '' }}"><a href="#panel-cost" aria-selected="true">Ave Cost</a></li>
                        {% endif %}
                    </ul>
                    <div class="tabs-content custom-tabs-content" data-tabs-content="item-tabs">
                        <div class="tabs-panel {{ tab is null or tab is empty or tab == 'ip' ? 'is-active' : '' }}" id="panel-item-price">
                            <div class="text-right">
                                {% if userData.type == 'Super Admin' or 'Admin Items Price New' in userData.accesses %}
                                    <a href="javascript:void(0)" class="href-item-price-form href-new-action" data-action="n" data-id="0">Add Price</a>
                                {% endif %}
                            </div>
                            <table class="display responsive" id="itemPrice-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>Price</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tabs-panel {{ tab == 'it' ? 'is-active' : '' }}" id="panel-item">
                            <div class="text-right">
                                {% if userData.type == 'Super Admin' or 'Admin Items Item New' in userData.accesses %}
                                    <a href="javascript:void(0)" class="href-item-form href-new-item" data-action="n" data-id="0">Add Item</a>
                                {% endif %}
                            </div>
                            <table class="display responsive" id="item-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Qty</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tabs-panel {{ tab == 'tc' ? 'is-active' : '' }}" id="panel-tax">
                            <div class="text-right">
                                {% if userData.type == 'Super Admin' or 'Admin Items Tax Code New' in userData.accesses %}
                                    <a href="javascript:void(0)" class="href-tax-form" data-action="n" data-id="0">Add Tax Code</a>
                                {% endif %}
                            </div>
                            <table class="display responsive" id="tax-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>Branch</th>
                                    <th>Percent</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tabs-panel {{ tab == 'c' ? 'is-active' : '' }}" id="panel-cost">
                            <div class="text-right">
                                {% if userData.type == 'Super Admin' or 'Admin Items Cost New' in userData.accesses %}
                                    <a href="javascript:void(0)" class="href-cost-form" data-action="n" data-id="0">Add Ave Cost</a>
                                {% endif %}
                            </div>
                            <table class="display responsive" id="cost-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>Branch</th>
                                    <th>Ave Cost</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="reveal small" id="modal" data-reveal>
        <div id="modal-content"></div>
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="reveal large" id="large-modal" data-reveal>
        <div id="large-modal-content"></div>
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script language="javascript">
        //<![CDATA[
        item_detail.settings.item_id = '{{ item_id }}';
        item_detail.settings.itemPrice_ajaxUrl = '{{ path('item_price_ajax_list') }}';
        item_detail.settings.itemPrice_formUrl = '{{ path('item_price_form', {item_id:item_id}) }}';
        item_detail.settings.itemPrice_formActionUrl = '{{ path('item_price_save') }}';
        item_detail.settings.item_ajaxUrl = '{{ path('item_item_ajax_list') }}';
        item_detail.settings.item_formUrl = '{{ path('item_item_form', {item_id: item_id}) }}';
        item_detail.settings.item_autocomplete_url = '{{ path('item_autocomplete') }}';
        item_detail.settings.tax_ajaxUrl = '{{ path('item_tax_code_ajax_list') }}';
        item_detail.settings.ave_cost_ajaxUrl = '{{ path('item_ave_cost_ajax_list') }}';
        item_detail.settings.tax_formUrl = '{{ path('item_tax_code_form', {item_id: item_id}) }}';
        item_detail.settings.ave_cost_formUrl = '{{ path('item_ave_cost_form', {item_id: item_id}) }}';
        item_detail.settings.branch_autocomplete_url = '{{ path('health_facility_autocomplete', {item_id: item_id}) }}';
        jQ(document).ready(item_detail.init);
        //]]>
    </script>
{% endblock %}