{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <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('material_requisition') }}">Material Requisition</a></li>
                    <li>
                        <span class="show-for-sr">Current: </span> Items
                    </li>
                </ul>
            </nav>
            {#<div class="row small-up-1 medium-up-2 max-width-initial">
                <div class="column">
                    <div class="info-group">
                        <label>MR No.</label>
                        <div>{{ materialRequisition.materialrequisitionno }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Reference No.</label>
                        <div>{{ materialRequisition.referenceno }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Title</label>
                        <div>{{ materialRequisition.title }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Request Date</label>
                        <div>{{ materialRequisition.requestdateasstring }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Required Date</label>
                        <div>{{ materialRequisition.requireddateasstring }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Branch</label>
                        <div>{{ materialRequisition.branch.description }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Department</label>
                        <div>{{ materialRequisition.department.description }}</div>
                    </div>
                </div>
                <div class="column">
                    <div class="info-group">
                        <label>Requested By</label>
                        <div>{{ materialRequisition.user.fullname }}</div>
                    </div>
                </div>
            </div>#}
            <div class="content-detail-container">
                <div class="row max-width-initial">
                    <div class="large-4 columns">
                        <div class="page-detail-header">Material Requisition Details</div>
                        <div class="page-detail">Control No.: <span>{{ materialRequisition.materialrequisitionno|default('N/A') }}</span></div>
                        <div class="page-detail">Request Date: <span>{{ materialRequisition.requestdateasstring|default('N/A') }}</span></div>
                        <div class="page-detail">Branch: <span>{{ materialRequisition.healthFacility.description|default('N/A') }}</span></div>
                        {#<div class="page-detail">Department: <span>{{ materialRequisition.department.description }}</span></div>#}
                        <div class="page-detail">Requested By: <span>{{ materialRequisition.accountUser.fullname|default('N/A') }}</span></div>
                        <div class="page-detail">Status: <span>{{ materialRequisition.status }}</span></div>
                    </div>
                    <div class="large-8 columns">
                        <div class="page-detail-header">&nbsp;</div>
                        <div class="page-detail">Purpose: <span>{{ materialRequisition.purpose.description|default('N/A') }}</span></div>
                        {#<div class="page-detail">Specific Purpose: <span>{{ materialRequisition.specificpurpose }}</span></div>#}
                        <div class="page-detail">Notes: <span>{{ materialRequisition.note }}</span></div>
                    </div>
                </div>
            </div>
            <div class="content-container has-loading">
                <div class="content-container-content hide">
                    <div class="text-right button-container">
                        {% if userData.type == 'Super Admin' or 'Admin Material Requisition Item New' in userData.accesses %}
                            <a href="javascript:void(0)" class="button small secondary href-materialRequisitionItem-form" data-action="n" data-id="0" style="margin: 0 0 10px 10px;">Add Item</a>
                        {% endif %}
                        {% if userData.type == 'Super Admin' or 'Admin Material Requisition Send' in userData.accesses %}
                            <a href="javascript:void(0)" class="button small" id="href-materialRequisition-send" data-open="send-ask-modal" style="margin: 0 0 10px 10px;">Send</a>
                        {% endif %}
                     {#   {% if materialRequisition.isvoidable and (userData.type == 'Super Admin' or 'Admin Material Requisition Void' in userData.accesses) %}
                            <a href="javascript:void(0)" class="button small alert" id="href-materialRequisition-void"  style="margin: 0 0 10px 10px;">Void</a>
                        {% endif %}#}
                    </div>
                    <table class="display responsive" id="materialRequisitionItem-datalist" width="100%">
                        <thead>
                        <tr>
                            <th>Item</th>
                            {#<th>Location</th>#}
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Tax</th>
                            <th>Total Price</th>
                            {#<th>ControlNo</th>#}
                            <th>Notes</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="reveal large" id="modal" data-reveal data-close-on-esc="false" data-close-on-click="false">
        <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 small" id="send-ask-modal" data-reveal>
        <h4>Are you sure you want to continue?</h4>
        <hr class="max-width-initial">
        <div class="button-container text-right">
            <a href="javascript:void(0);" id="btn-send-ask-modal-continue" data-action="" class="button">&nbsp;&nbsp;Yes&nbsp;&nbsp;</a>
            <a href="javascript:void(0);" class="button secondary no-margin-right" data-close>Cancel</a>
        </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[
        jQ(document).ready(function(){
            materialRequisitionItem.settings.materialRequisition_id = '{{ materialRequisition_id }}';
            materialRequisitionItem.settings.branch_id = '{{ materialRequisition.branch.idencoded }}';
            materialRequisitionItem.settings.indexUrl = '{{ path('material_requisition') }}';
            materialRequisitionItem.settings.viewUrl = '{{ path('material_requisition_view') }}';
            materialRequisitionItem.settings.ajaxUrl = '{{ path('material_requisition_item_ajax_list') }}';
            materialRequisitionItem.settings.formUrl = '{{ path('material_requisition_item_form') }}';
            materialRequisitionItem.settings.formActionUrl = '{{ path('material_requisition_item_form_action') }}';
            materialRequisitionItem.settings.sendUrl = '{{ path('material_requisition_send') }}';
            materialRequisitionItem.settings.voidUrl = '{{ path('material_requisition_void') }}';
            materialRequisitionItem.settings.item_autocomplete_url = '{{ path('item_autocomplete') }}';
            materialRequisitionItem.settings.location_autocomplete_url = '{{ path('location_autocomplete') }}';
            materialRequisitionItem.settings.item_ajax_list_material_requisition_url = '{{ path('item_ajax_list_material_requisition') }}';
            materialRequisitionItem.settings.removeItem_url = '{{ path('material_requisition_item_remove') }}';
            materialRequisitionItem.settings.item_category_autocomplete_url = '{{ path('item_category_autocomplete') }}';
            materialRequisitionItem.init();
        });
        //]]>
    </script>
{% endblock %}