<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
      xmlns:ctp="http://www.w3.org/1999/xhtml">

<head th:replace="_fragments :: head('PO Report')"></head>

<body>
<div class="container-fluid">
    <header class="row page-header" th:replace="_fragments :: page-header"></header>
    <main class="row page-main">
        <aside class="col-sm-2" th:replace="/reporting/po-report-sidebar :: sidebar"></aside>
        <div class="col-sm">
            <h3>PO's Report</h3>
            <div th:replace="_notices :: page-notices"></div>
            <div th:replace="_fragments :: table-loading-skeleton"></div>
            <table class="table table-striped font-sm" data-table data-order="[[ 0, &quot;asc&quot; ]]">
                <thead>
                <tr>
                    <th>PO Number</th>
                    <th>PO Article</th>
                    <th>PO Quantity</th>
                    <th>Cutting</th>
                    <th>Cutting Balance</th>
                    <th>Stitching</th>
                    <th>Stitching Balance</th>
                    <th>End Line QC</th>
                    <th>End Line QC Balance</th>
                    <th>Finishing Items</th>
                    <th>Finishing Items Balance</th>
                    <th>A Grade Items</th>
                    <th>B Grade Items</th>
                    <th>C Grade Items</th>
                </tr>
                </thead>
                <tbody>
                <!-- Dummy data for testing purposes -->
                <tr th:each="poDetail : ${allPOs}">
                    <td><a class="text-reset" th:href="@{'/reporting/po-report-view/' + ${poDetail.poNumber}}" th:text="${poDetail.poNumber}"></a></td>
                    <td th:text="${poDetail.articleTitle}"></td>
                    <td th:text="${poDetail.poQuantity}"></td>
                    <td th:text="${poDetail.totalCutting}"></td>
                    <td th:text="${poDetail.remainingCutting}"></td>
                    <td th:text="${poDetail.totalStitching}"></td>
                    <td th:text="${poDetail.remainingStitching}"></td>
                    <td th:text="${poDetail.totalEndLineQC}"></td>
                    <td th:text="${poDetail.remainingEndLineQC}"></td>
                    <td th:text="${poDetail.totalFinishing}"></td>
                    <td th:text="${poDetail.remainingFinishing}"></td>
                    <td th:text="${poDetail.totalAGradeItem}"></td>
                    <td th:text="${poDetail.totalBGradeItem}"></td>
                    <td th:text="${poDetail.totalCGradeItem}"></td>
                </tr>

                </tbody>

            </table>
<!--            <h4 th:if="${#lists.size(cards) ==  0 }">No cards found.</h4>-->
        </div>
    </main>
</div>

<div th:replace="_fragments :: page-footer-scripts"></div>
<script th:src="@{/js/summary.js}"></script>
</body>
</html>