{% set materialRequisition = purchaseOrder.materialRequisition %}
{% 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_purchase_order') }}">Purchase Order</a></li>
                    <li>
                        <span class="show-for-sr">Current: </span> Purchase Order Info
                    </li>
                </ul>
            </nav>
            <div class="content-detail-container">
                <div class="row max-width-initial">
                    <div class="large-4 columns">
                        <div class="page-detail-header">P.O. Details</div>
                        {#<div class="page-detail">Batch No.: <span>{{ purchaseOrder.batchno }}</span></div>#}
                        <div class="page-detail">Supplier: <span>{{ purchaseOrder.supplier.description|default('N/A') }}</span></div>
                        {#<div class="page-detail">Status: <span>{{ purchaseOrder.status }}</span></div>#}
                        {#<div class="page-detail">Approver(s): <span>{{ statusApproval.approvalUsers(materialRequisition.branch.id, materialRequisition.department.id)|default('')|raw }}</span></div>#}
                    </div>
                    <div class="large-4 columns">
                        <div class="page-detail-header">&nbsp;</div>
                        {#<div class="page-detail">Currency: <span>{{ purchaseOrder.currency.code|default('') }}</span></div>#}
                        <div class="page-detail">Payment Mode: <span>{{ purchaseOrder.paymentMode|default('N/A') }}</span></div>
                        <div class="page-detail">Term: <span>{{ purchaseOrder.term|default('N/A') }}</span></div>
                        {#<div class="page-detail">W/Tax Rate: <span>{{ purchaseOrder.withholdingTaxRate.descriptionAndRate|default('') }}</span></div>#}
                    </div>
                    <div class="large-4 columns">
                        <div class="page-detail-header">Purchase Request 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>
                    {#<div class="large-4 columns">
                        <div class="page-detail-header">&nbsp;</div>
                        <div class="page-detail">Purpose: <span>{{ materialRequisition.purpose.description }}</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 purchaseOrder.status == 'Approved' %}
                            {#{% if userData.type == 'Super Admin' or 'Admin Purchase Order New' in userData.accesses %}
                                <a href="javascript:void(0)" class="button small secondary href-purchaseOrderBreakdown-form" data-action="n" data-id="0" style="margin: 0 0 10px 10px;">Add PO</a>
                            {% endif %}#}
                            {% if userData.type == 'Super Admin' or 'Admin Purchase Order Send' in userData.accesses %}
                                <a href="javascript:void(0)" class="button small" id="href-purchaseOrder-send" data-id="{{ purchaseOrder.idencoded }}" data-open="send-ask-modal" style="margin: 0 0 10px 10px;">Send P.O.</a>
                            {% endif %}
                            {#{% if userData.type == 'Super Admin' or 'Admin Purchase Order Add Quantity' in userData.accesses %}
                                <a href="javascript:void(0)" class="button small success" id="href-purchaseOrder-addQuantity"  style="margin: 0 0 10px 10px;">Add Quantity</a>
                            {% endif %}#}
                        {% endif %}
                        {#{% if purchaseOrder.isvoidable and (userData.type == 'Super Admin' or 'Admin Purchase Order Void' in userData.accesses) %}
                            <a href="javascript:void(0)" class="button small alert" id="href-purchaseOrder-void"  style="margin: 0 0 10px 10px;">Void</a>
                        {% endif %}#}
                        {% if userData.type == 'Super Admin' or 'Admin Purchase Order Cancel' in userData.accesses %}
                            <a href="javascript:void(0)" class="button small alert" id="href-purchaseOrder-cancel" data-id="{{ purchaseOrder.idencoded }}" style="margin: 0 0 10px 10px;">Cancel</a>
                        {% endif %}
                    </div>
                    <ul class="tabs custom-tabs" data-tabs id="tabs-1">
                        <li class="tabs-title is-active"><a href="#panel-1-breakdown" aria-selected="true">Breakdown</a></li>
                        {#<li class="tabs-title"><a href="#panel-1-approval" aria-selected="false">Approval</a></li>#}
                    </ul>
                    <div class="tabs-content custom-tabs-content" data-tabs-content="tabs-1">
                        <div class="tabs-panel is-active" id="panel-1-breakdown">
                            <table class="display responsive" id="purchaseOrderBreakdown-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>P.O. No.</th>
                                    <th>P.O. Date</th>
                                    <th>Status</th>
                                    {#<th>Payment Method</th>#}
                                    <th>No. of Items</th>
                                    {#<th>Quantity</th>#}
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        {#<div class="tabs-panel" id="panel-1-approval">#}
                            {#{% if canApproveByUser %}#}
                                {#<form method="POST" action="{{ path('material_requisition_purchase_order_status_approval') }}">#}
                                    {#<input type="hidden" name="purchaseOrder_id" value="{{ purchaseOrder_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="purchaseOrderStatusHistory-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 purchaseOrder.approvalbatchno..0 %}#}
                                    {#{% for purchaseOrderStatus in purchaseOrder.purchaseOrderStatuses %}#}
                                        {#{% if purchaseOrderStatus.batchno == ctr and (purchaseOrderStatus.approvaldescription == 'Approved' or purchaseOrderStatus.approvaldescription == 'Rejected') %}#}
                                            {#<tr>#}
                                                {#<td>{{ purchaseOrderStatus.updatedat|date('m/d/Y h:i:s A') }}</td>#}
                                                {#<td>{{ purchaseOrderStatus.status }}</td>#}
                                                {#<td>{{ purchaseOrderStatus.approvaldescription }}</td>#}
                                                {#<td>{{ purchaseOrderStatus.user.fullname }} - {{ purchaseOrderStatus.user.type }}</td>#}
                                                {#<td>{{ purchaseOrderStatus.note }}</td>#}
                                            {#</tr>#}
                                        {#{% endif %}#}
                                    {#{% endfor %}#}
                                {#{% endfor %}#}
                                {#</tbody>#}
                            {#</table>#}
                        {#</div>#}
                    </div>
                </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 large" id="modal-large" data-reveal data-close-on-esc="false" data-close-on-click="false">
        <div id="modal-content-large"></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 data-close-on-esc="false" data-close-on-click="false">
        <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-id="{{ purchaseOrder.idencoded }}" 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[
        purchaseOrder_view.settings.purchaseOrder_id = '{{ purchaseOrder_id }}';
        purchaseOrder_view.settings.ajaxUrl = '{{ path('material_requisition_purchase_order_breakdown_ajax_list') }}';
        purchaseOrder_view.settings.voidUrl = '{{ path('material_requisition_purchase_order_void') }}';
        purchaseOrder_view.settings.addQuantityUrl = '{{ path('material_requisition_purchase_order_add_quantity') }}';
        purchaseOrder_view.settings.addQuantityActionUrl = '{{ path('material_requisition_purchase_order_add_quantity_action') }}';
        purchaseOrder_view.settings.cancelActionUrl = '{{ path('material_requisition_purchase_order_cancel') }}';
        purchaseOrder_view.settings.voidActionUrl = '{{ path('material_requisition_purchase_order_void_action') }}';
        purchaseOrder_view.settings.purchaseOrderSend_url = '{{ path('material_requisition_purchase_order_send') }}';
        purchaseOrder_view.settings.purchaseOrderBreakdownDetails_url = '{{ path('material_requisition_purchase_order_breakdown_details') }}';
        purchaseOrder_view.settings.purchaseOrderBreakdownSend_url = '{{ path('material_requisition_purchase_order_breakdown_send') }}';
        purchaseOrder_view.settings.purchaseOrderBreakdownForm_url = '{{ path('material_requisition_purchase_order_breakdown_form') }}';
        purchaseOrder_view.settings.purchaseOrderBreakdownFormAction_url = '{{ path('material_requisition_purchase_order_breakdown_form_action') }}';
        jQ(document).ready(purchaseOrder_view.init);
        //]]>
    </script>
{% endblock %}