<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
      xmlns:uind="http://www.w3.org/1999/xhtml" xmlns:ctp="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head('Purchase Order')"></head>
<body>
<div class="container-fluid">
    <header class="row page-header" th:replace="_fragments :: page-header"></header>
    <main class="row page-main">
        <!-- sidebar starts -->
        <aside class="col-sm-2" th:replace="/purchaseOrder/purchase-order-sidebar :: sidebar"></aside>
        <!-- sidebar ends -->
        <!--header starts-->
        <div class="col-sm">
            <div th:replace="_notices :: page-notices"></div>
            <div class="mb-4 d-flex justify-content-between">
                <h3>All PO's</h3>
                <a th:href="@{/purchase-order/new}" class="btn btn-primary">Add New</a>
            </div>
            <div th:replace="_fragments :: table-loading-skeleton"></div>
            <!-- Show table if purchaseOrder is not null and not empty -->
            <table th:if="${purchaseOrder != null and !purchaseOrder.isEmpty()}" class="table table-striped font-sm" >
                <thead>
                <tr>
                    <th>PO Code</th>
                    <th>PO Quantity</th>
                    <th>Required Quantity</th>
                    <th>Article Name</th>
                    <th>Created At</th>
                    <th>Created By</th>
                    <th>Status</th>
                    <th>PO Status</th>
                    <th>Action</th>

                </tr>
                </thead>
                <tbody>
                <tr th:each="order : ${purchaseOrder}" th:object="${purchaseOrder}">
                    <td th:text="${order.purchaseOrderCode}"></td>
                    <td th:text="${order.purchaseOrderQuantity}"></td>
                    <td th:text="${order.purchaseOrderQuantityRequired}"></td>
                    <td th:text="${order.articleName}"></td>
                    <td ctp:formatdatetime="${order.createdAt}"></td>
                    <td th:text="${order.createdBy}"></td>
                    <td>
                        <span class="badge font-sm" th:classappend="'badge-' + ${order.status}" th:if="${order.status}" th:text="${order.status}"></span>
                        <span th:unless="${order.status}">-</span>
                    </td>
                    <td>
                        <span th:if="${!order.poStatus}" class="badge badge-APPROVED">OPEN</span>
                        <div th:if="${order.poStatus}">
                            <span class="badge badge-danger" >CLOSE</span>
                        </div>
                    </td>
                    <td>
                        <th:block >
                            <a th:href="@{'/purchase-order/edit/' + ${order.id}}" class="btn btn-sm btn-secondary" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </th:block>
                    </td>
                </tr>
                </tbody>
            </table>
            <!-- Show message if purchaseOrder is null or empty -->
            <h4 th:if="${purchaseOrder == null or purchaseOrder.isEmpty()}">No POs found.</h4>
        </div>
    </main>
</div>
<div th:replace="_fragments :: page-footer-scripts"></div>
</body>
</html>