<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:uind="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head('Job Card Detail')"></head>
<body>
<div class="container-fluid">
    <header class="row page-header" th:replace="_fragments :: page-header"></header>
    <main class="row page-main">
        <div class="col-sm">
            <table class="table table-bordered" >
                <thead class="thead-dark">
                <tr>
                    <th colspan="2" class="text-center">
                        <span th:text="${card.getCode()}"></span>
                    </th>
                </tr>
                </thead>
                    <tbody>
                        <tr>
                            <td><i>Job Order ID</i></td>
                            <td>
                                <span >
                                    <a class="text-reset" target="_blank" th:text="${card.getJobOrderId()}" ></a>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Card Status</i></td>
                            <td>
                                <span th:text="${card.getStatus()}"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Inventory Status</i></td>
                            <td>
                                <span th:text="${card.getInventoryStatus()}"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Customer</i></td>
                            <td>
                                <span th:text="${card.getCustomer()}"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Lot Number</i></td>
                            <td>
                                <span th:text="${card.getLotNumber()}"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Purchase Order ID</i></td>
                            <td>
                                <span th:text="${card.getPurchaseOrderId()}"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Items</i></td>
                            <td class="m-0 p-0">
                                <table class="table mb-0 text-center">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Item ID</th>
                                        <th>Sku</th>
                                        <th>Expected Production</th>
                                        <th>Actual Production</th>
                                        <th>Total Production</th>
                                        <th>Total Stitching Item</th>
                                        <th>Total Finish Item</th>
                                        <th class="text-center font-lg">Cut Piece Items</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="cardItem : ${jobCardItems}">
                                        <td th:text="${cardItem.getId()}"></td>
                                        <td th:text="${cardItem.getItemId()}"></td>
                                        <td th:text="${cardItem.getSku()}"></td>
                                        <td th:text="${cardItem.getExpectedProduction()}"></td>
                                        <td th:text="${cardItem.getActualProduction()}"></td>
                                        <td th:text="${cardItem.getTotalProduction()}"></td>
                                        <td th:text="${totalStitchingItem.get(cardItem.getItemId())}"></td>
                                        <td th:text="${totalFinishItem.get(cardItem.getItemId())}"></td>
                                        <td class="m-0 p-0">
                                            <table class="table m-0 p-0">
                                                <tbody>
                                                <tr th:if="*{cardItem.getId() == cutPieceItem.getJobCardItemId()}" th:each="cutPieceItem : ${cutPiece}">
                                                    <td th:text="${cutPieceItem.getType()}"></td>
                                                    <td th:text="${cutPieceItem.getQuantity()}"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Stitching Offline Items</i> <i ></i></td>
                            <td class="m-0 p-0 text-center">

                                <table th:if="${!stitchingItem.isEmpty() }" class="table">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Item ID</th>
                                        <th>Sku</th>
                                        <th>Bar Code</th>
                                        <th>QA Status</th>
                                        <th>QA Remarks</th>
                                        <th>Created At</th>
                                        <th>Created By</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="cardStitchingItem : ${stitchingItem}">
                                        <td th:text="${cardStitchingItem.getId()}"></td>
                                        <td th:text="${cardStitchingItem.getItemId()}">ad</td>
                                        <td th:text="${cardStitchingItem.getSku()}"></td>
                                        <td th:text="${cardStitchingItem.getBarcode()}"></td>
                                        <td>
                                            <span th:if="${cardStitchingItem.getQaStatus() == 'APPROVED'}" th:text="${cardStitchingItem.getQaStatus()}" class="badge badge-APPROVED font-sm"></span>
                                            <span th:if="${cardStitchingItem.getQaStatus() == 'REJECT'}" th:text="${cardStitchingItem.getQaStatus()}" class="badge badge-warning font-sm"></span>
                                        </td>
                                        <td th:text="${cardStitchingItem.getQaRemarks()}"></td>
                                        <td ctp:formatdatetime="${cardStitchingItem.getCreatedAt()}"></td>
                                        <td th:text="${cardStitchingItem.getCreatedBy()}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <span th:if="${stitchingItem.isEmpty() }" class="p-5 text-center font-lg font-weight-bold" > No Data Available</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="align-middle"><i>Finish Items</i></td>
                            <td class="m-0 p-0 text-center">
                                <table th:if="${!finishItem.isEmpty() }" class="table mb-0">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Item ID</th>
                                        <th>Sku</th>
                                        <th>Bar Code</th>
                                        <th>Status</th>
                                        <th>Created At</th>
                                        <th>Created By</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="cardfinishItem : ${finishItem}">
                                        <td th:text="${cardfinishItem.getId()}"></td>
                                        <td th:text="${cardfinishItem.getItemId()}">ad</td>
                                        <td th:text="${cardfinishItem.getSku()}"></td>
                                        <td th:text="${cardfinishItem.getBarcode()}"></td>
                                        <td>
                                            <span th:if="${cardfinishItem.getQaStatus() == 'APPROVED'}" th:text="${cardfinishItem.getQaStatus()}" class="badge badge-APPROVED font-sm"></span>
                                            <span th:if="${cardfinishItem.getQaStatus() == 'WASHED'}" th:text="${cardfinishItem.getQaStatus()}" class="badge badge-danger font-sm"></span>
                                            <span th:if="${cardfinishItem.getQaStatus() == 'ALTER'}" th:text="${cardfinishItem.getQaStatus()}" class="badge badge-warning font-sm"></span>
                                        </td>
                                        <td ctp:formatdatetime="${cardfinishItem.getCreatedAt()}"></td>
                                        <td th:text="${cardfinishItem.getCreatedBy()}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <span th:if="${finishItem.isEmpty() }" class="p-5 text-center font-lg font-weight-bold" > No Data Available</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </main>
</div>

<div th:replace="_fragments :: page-footer-scripts"></div>
</body>
</html>