{% 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> Material Requisition Info
                    </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 class="column">
                    <div class="info-group">
                        <label>Status</label>
                        <div>{{ materialRequisition.status }}</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 class="page-detail">Approver(s): <span>{{ statusApproval.approvalUsers|default('')|raw }}</span></div>#}
                        {#<div class="page-detail">Approver(s): <span>{{ statusApproval.approvalUsers(materialRequisition.branch.id, materialRequisition.department.id)|default('')|raw }}</span></div>#}
                    </div>
                </div>
            </div>
            <div class="content-container has-loading">
                <div class="content-container-content hide">
                    {% if materialRequisition.isvoidable and (userData.type == 'Super Admin' or 'Admin Material Requisition Void' in userData.accesses) %}
                        <div class="text-right button-container">
                            <a href="javascript:void(0)" class="button small alert" id="href-materialRequisition-void"  style="margin: 0 0 10px 10px;">Void</a>
                        </div>
                    {% endif %}
                    <ul class="tabs custom-tabs" data-tabs id="tabs-1">
                        <li class="tabs-title is-active"><a href="#panel-1-item" aria-selected="true">Items</a></li>
                        {#<li class="tabs-title"><a href="#panel-1-approval" aria-selected="false">Approval</a></li>#}
                        {% if materialRequisition.status == 'Active' or materialRequisition.status == 'Closed' or materialRequisition.status == 'Voided' %}
                            {% if userData.type == 'Super Admin' or 'Admin Canvass' in userData.accesses %}
                                <li class="tabs-title hide"><a href="#panel-1-canvass" aria-selected="false">Supplier Canvassing</a></li>
                            {% endif %}
                            {% if userData.type == 'Super Admin' or 'Admin Purchase Order' in userData.accesses %}
                                <li class="tabs-title"><a href="#panel-1-purchase-order" aria-selected="false">Purchase Order</a></li>
                            {% endif %}
                            {% if userData.type == 'Super Admin' or 'Admin Purchase Order Receive' in userData.accesses %}
                                <li class="tabs-title"><a href="#panel-1-purchase-order-receive" aria-selected="false">Receive Order</a></li>
                            {% endif %}
                            {#{% if materialRequisition.canvassType == 'Main' and (userData.type == 'Super Admin' or 'Admin Transmittal' in userData.accesses) %}#}
                                {#<li class="tabs-title"><a href="#panel-1-purchase-order-receive" aria-selected="false">Transmittal</a></li>#}
                            {#{% endif %}#}
                        {% endif %}
                        <li class="tabs-title"><a href="#panel-1-notes" aria-selected="false">Notes</a></li>
                    </ul>
                    <div class="tabs-content custom-tabs-content" data-tabs-content="tabs-1">
                        <div class="tabs-panel is-active" id="panel-1-item">
                            <table class="display responsive" id="materialRequisitionItem-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>Item</th>
                                    <th class="text-right">Qty</th>
                                    <th class="text-right">Voided Qty</th>
                                    <th class="text-right">Canvassed Qty</th>
                                    <th class="text-right">P.O. Qty</th>
                                    <th class="text-right">Received Qty</th>
                                    <th>Notes</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for materialRequisitionItem in materialRequisition.materialrequisitionitems %}
                                    <tr>
                                        <td>{{ materialRequisitionItem.item.description }}</td>
                                        <td class="text-right">{{ materialRequisitionItem.quantity|number_format(0, '.', ',') }} </td>
                                        <td class="text-right">{{ materialRequisitionItem.quantityvoided|number_format(0, '.', ',') }} </td>
                                        <td class="text-right">{{ materialRequisitionItem.quantitycanvassed|number_format(0, '.', ',') }} </td>
                                        <td class="text-right">{{ materialRequisitionItem.quantitypo|number_format(0, '.', ',') }} </td>
                                        <td class="text-right">{{ materialRequisitionItem.quantityreceived|number_format(0, '.', ',') }} </td>
                                        <td>{{ materialRequisitionItem.note }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {#<div class="tabs-panel" id="panel-1-approval">#}
                            {#{% if canApproveByUser %}#}
                                {#<form method="POST" action="{{ path('material_requisition_status_approval') }}">#}
                                    {#<input type="hidden" name="materialRequisition_id" value="{{ materialRequisition_id }}" />#}
                                    {#<input type="hidden" class="form-action" name="action" />#}
                                    {#<div class="row max-width-initial">#}
                                        {#<div class="small-12 columns">#}
                                            {#<label>Notes</label>#}
                                            {#<textarea name="notes" placeholder="Enter your notes here"></textarea>#}
                                        {#</div>#}
                                        {#<div class="small-12 columns">#}
                                            {#<div class="button-container">#}
                                                {#<button type="submit" class="button ask-continue no-margin-bottom" name="action" value="approve"#}
                                                        {#data-message="Are you sure you want to approve this request?"#}
                                                {#>Approve</button>#}
                                                {#<button type="submit" class="button alert ask-continue no-margin-bottom" name="action" value="reject"#}
                                                        {#data-message="Are you sure you want to reject this request?"#}
                                                {#>Reject</button>#}
                                            {#</div>#}
                                        {#</div>#}
                                    {#</div>#}
                                {#</form>#}
                                {#<hr class="max-width-initial">#}
                            {#{% endif %}#}
                            {#<h5>History</h5>#}
                            {#<table class="display response" id="materialRequisitionStatusHistory-datalist" width="100%">#}
                                {#<thead>#}
                                {#<tr>#}
                                    {#<th>Date / Time</th>#}
                                    {#<th>Status</th>#}
                                    {#<th>Approval</th>#}
                                    {#<th>User</th>#}
                                    {#<th>Notes</th>#}
                                {#</tr>#}
                                {#</thead>#}
                                {#<tbody>#}
                                {#{% for ctr in materialRequisition.approvalbatchno..0 %}#}
                                    {#{% for materialRequisitionStatus in materialRequisition.materialrequisitionstatuses %}#}
                                        {#{% if materialRequisitionStatus.batchno == ctr and (materialRequisitionStatus.approvaldescription == 'Approved' or materialRequisitionStatus.approvaldescription == 'Rejected') %}#}
                                            {#<tr>#}
                                                {#<td>{{ materialRequisitionStatus.updatedat|date('m/d/Y h:i:s A') }}</td>#}
                                                {#<td>{{ materialRequisitionStatus.status }}</td>#}
                                                {#<td>{{ materialRequisitionStatus.approvaldescription }}</td>#}
                                                {#<td>{{ materialRequisitionStatus.user.fullname }} - {{ materialRequisitionStatus.user.type }}</td>#}
                                                {#<td>{{ materialRequisitionStatus.note }}</td>#}
                                            {#</tr>#}
                                        {#{% endif %}#}
                                    {#{% endfor %}#}
                                {#{% endfor %}#}
                                {#</tbody>#}
                            {#</table>#}
                        {#</div>#}
                        {% if materialRequisition.status == 'Active' or materialRequisition.status == 'Closed' or materialRequisition.status == 'Voided' %}
                            {% if userData.type == 'Super Admin' or 'Admin Canvass' in userData.accesses %}
                                <div class="tabs-panel hide" id="panel-1-canvass">
                                    <table class="display response" id="canvass-datalist" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Canvass No.</th>
                                            <th>Status</th>
                                            <th>No. of Items</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for canvass in materialRequisition.canvasses %}
                                            <tr>
                                                <td>{{ canvass.canvassno }}</td>
                                                <td>{{ canvass.status }}</td>
                                                <td>{{ canvass.canvassitems|length }}</td>
                                                <td>
                                                    <a class="action-button-style" href="{{ path('material_requisition_canvass_view', {canvass_id: canvass.idencoded}) }}">View</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                            {% if userData.type == 'Super Admin' or 'Admin Purchase Order' in userData.accesses %}
                                <div class="tabs-panel" id="panel-1-purchase-order">
                                    <table class="display response" id="purchaseOrder-datalist" width="100%">
                                        <thead>
                                        <tr>
                                            {#<th>Batch No.</th>#}
                                            <th>Supplier</th>
                                            {#<th>Currency</th>#}
                                            {#<th>Payment Mode</th>#}
                                            {#<th>Term</th>#}
                                            {#<th>W/Tax Rate</th>#}
                                            {#<th>Status</th>#}
                                            <th>No. of Items</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for purchaseOrder in materialRequisition.purchaseorders %}
                                            <tr>
                                                {#<td>{{ purchaseOrder.batchno }}</td>#}
                                                <td>{{ purchaseOrder.supplier.description|default('') }}</td>
                                                {#<td>{{ purchaseOrder.currency.code|default('') }}</td>#}
                                                {#<td>{{ purchaseOrder.paymentMode }}</td>#}
                                                {#<td>{{ purchaseOrder.term }}</td>#}
                                                {#<td>{{ purchaseOrder.withholdingTaxRate.descriptionAndRate|default('') }}</td>#}
                                                {#<td>{{ purchaseOrder.status }}</td>#}
                                                <td>{{ purchaseOrder.purchaseorderitems|length }}</td>
                                                <td>
                                                    <a target="_blank" class="action-button-style" href="{{ path('material_requisition_purchase_order_view', {purchaseOrder_id: purchaseOrder.idencoded}) }}">View</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                            {% if userData.type == 'Super Admin' or 'Admin Purchase Order Receive' in userData.accesses %}
                                <div class="tabs-panel" id="panel-1-purchase-order-receive">
                                    <table class="display response" id="purchaseOrderReceive-datalist" width="100%">
                                        <thead>
                                        <tr>

                                            {#<th>Batch No.</th>#}
                                            <th>PO No.</th>
                                            <th>Supplier</th>
                                            <th>No. of Items</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for purchaseOrder in materialRequisition.purchaseorders %}
                                            {% if purchaseOrder.status == 'Sent' %}
                                                {% for purchaseOrderBreakdown in purchaseOrder.purchaseorderbreakdowns %}
                                                    <tr>

                                                        {#<td>{{ purchaseOrder.batchno }}</td>#}
                                                        <td>{{ purchaseOrderBreakdown.pono }}</td>
                                                        <td>{{ purchaseOrder.supplier.description|default('') }}</td>
                                                        <td>{{ purchaseOrderBreakdown.purchaseorderbreakdownitems|length }}</td>
                                                        <td>
                                                            <a target="_blank" class="action-button-style" href="{{ path('material_requisition_purchase_order_breakdown_item_delivery_view', {purchaseOrderBreakdown_id: purchaseOrderBreakdown.idencoded}) }}">View</a>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                            {#{% if materialRequisition.canvassType == 'Main' and (userData.type == 'Super Admin' or 'Admin Transmittal' in userData.accesses) %}
                                <div class="tabs-panel" id="panel-1-transmittal">
                                    <table class="display response" id="transmittal-datalist" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Delivery No.</th>
                                            <th>Delivery Date</th>
                                            <th>Delivery Type</th>
                                            <th>Destination</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for transmittal in materialRequisition.transmittals %}
                                            <tr>
                                                <td>{{ transmittal.deliveryno }}</td>
                                                <td>{{ transmittal.deliverydateasstring }}</td>
                                                <td>{{ transmittal.deliverytype ? transmittal.deliverytype.description : '' }}</td>
                                                <td>{{ transmittal.branchto.description }}</td>
                                                <td>{{ transmittal.status }}</td>
                                                <td>
                                                    <a class="action-button-style" href="{{ path('material_requisition_transmittal_item', {transmittal_id: transmittal.idencoded}) }}">Items</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}#}
                        {% endif %}
                        <div class="tabs-panel" id="panel-1-notes">
                            <div class="text-right">
                                <a class="href-new-action href-materialRequisitionNote-form" href="javascript:void(0);" data-action="n">Add Notes</a>
                            </div>
                            <div class="row max-width-initial">
                                <div class="large-12 columns">
                                    <table class="display responsive" id="materialRequisitionNote-datalist" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Subject</th>
                                            <th>Details</th>
                                            <th>Note By</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for materialRequisitionNote in materialRequisition.materialrequisitionnotes %}
                                            <tr>
                                                <td>{{ materialRequisitionNote.subject }}</td>
                                                <td>{{ materialRequisitionNote.details }} </td>
                                                <td>{{ materialRequisitionNote.createdby }}</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="reveal small" id="modal" data-reveal data-close-on-click="false" data-close-on-esc="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(){
            materialRequisition_view.settings.materialRequisition_id = '{{ materialRequisition_id }}';
            materialRequisition_view.settings.materialRequisitionNoteFormUrl = "{{ path('material_requisition_note_form') }}";
            materialRequisition_view.settings.materialRequisitionNoteFormActionUrl = "{{ path('material_requisition_note_form_action') }}";
            materialRequisition_view.settings.voidUrl = '{{ path('material_requisition_void') }}';
            materialRequisition_view.init();
        });
        //]]>
    </script>
{% endblock %}