<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ctp="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Job Card</title>
    <link rel="stylesheet" type="text/css" th:href="@{|${baseUrl}/css/print.css|}">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Open+Sans:400,400i" rel="stylesheet">

    <style type="text/css">
        @page {
            size: landscape;
            margin: 10mm;
        }
        @media print {
            body {
                transform: rotate(0deg); /* Not needed for @page landscape */
                width: 100%;
            }
        }
        .td-value{
            text-align: center;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <table>
        <tr>
            <td width="50%">
                <img width="200" th:src="@{|${baseUrl}/img/utopia-industries.png|}" alt="Utopia Industries">
            </td>
            <td width="50%">
                <table class="bordered">
                    <tr class="tr-header">
                        <td colspan="2" style="text-align: center" th:text="'PO Online Status'"></td>
                    </tr>
                    <tbody>
                    <tr>
                        <td style="width: 40%;"><i>PO Code</i></td>
                        <td style="width: 60%;">
                            <a class="text-reset" target="_blank" th:text="${poDetail.getPoNumber()}"></a>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 40%;"><i>Article Name</i></td>
                        <td style="width: 60%;">
                            <a class="text-reset" target="_blank" th:text="${poDetail.getArticleTitle()}"></a>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-middle"><i>PO Quantity</i></td>
                        <td><span th:text="${poDetail.getPoQuantity()}"></span></td>
                    </tr>
                    <tr>
                        <td class="align-middle"><i>PO Status</i></td>
                        <td>
                            <span th:if="*{poDetail.isPoStatus}" th:text="'CLOSE'"></span>
                            <span th:if="*{!poDetail.isPoStatus}" th:text="'OPEN'"></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>

    <table style="margin-top: 10px;">

        <h5 class="no-margin-top no-margin-bottom" style="margin-top: 10px;">PO Details</h5>
        <h5 class="no-margin-top no-margin-bottom" style="margin-top: 10px;" ctp:formatdatetime="${date}"></h5>
        <thead>
        <tr class="tr-header">
            <td style="width: 90px; text-align: center"></td>
            <td style="width: 60px; text-align: center">Cutting Insp.</td>
            <td style="width: 140px; text-align: center">Stitching</td>
            <td style="width: 65px; text-align: center">Finished</td>
            <td style="width: 90px; text-align: center; padding-left: 40px">Rej. Store</td>
            <td style="width: 100px; text-align: center">Packaging</td>
            <td style="width: 80px; text-align: center">Shipped</td>
        </tr>
        </thead>
    </table>

    <table >
        <thead>
        <tr class="tr-header">
            <td style="width: 50px; text-align: center" >Req.+ Excess</td>
            <td style="width: 50px; text-align: center" >Actual Cut</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">Bal.To Cut</td>
            <td style="width: 50px; text-align: center;">Rcvd.</td>
            <td style="width: 50px; text-align: center">Ok</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">Rej.</td>
            <td style="width: 50px; text-align: center">In</td>
            <td style="width: 50px; text-align: center">WIP</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">Out</td>
            <td style="width: 50px; text-align: center">In</td>
            <td style="width: 50px; text-align: center">Rej</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">QA Approv.</td>
            <td style="width: 50px; text-align: center">Rcvd.</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">waiting</td>
            <td style="width: 50px; text-align: center">In</td>
            <td style="width: 50px; text-align: center">Out</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">Stock</td>
            <td style="width: 50px; text-align: center">Scan</td>
            <td style="width: 50px; text-align: center; border-right: 1px solid white;">Net</td>
        </tr>
        </thead>
        <tbody>
        <tr >
            <td th:text="${poDetail.getPoRequiredQuantity()}" class="td-value"></td>
            <td th:text="${poDetail.getActualCutting()}" class="td-value"></td>
            <td th:text="${poDetail.getBalanceToCutting()}" class="td-value"></td>
            <td th:text="${poDetail.getCuttingReceived()}" class="td-value"></td>
            <td th:text="${poDetail.getCuttingOki()}" class="td-value"></td>
            <td th:text="${poDetail.getCuttingReject()}" class="td-value"></td>
            <td th:text="${poDetail.getStitchingIn()}" class="td-value"></td>
            <td th:text="${poDetail.getStitchingWips()}" class="td-value"></td>
            <td th:text="${poDetail.getStitchingOut()}" class="td-value"></td>
            <td th:text="${poDetail.getFinishIn()}" class="td-value"></td>
            <td th:text="${poDetail.getFinishRej()}" class="td-value"></td>
            <td th:text="${poDetail.getFinishQaApproved()}" class="td-value"></td>
            <td th:text="${poDetail.getStoreReceived()}" class="td-value"></td>
            <td th:text="${poDetail.getStoreWaiting()}" class="td-value"></td>
            <td th:text="${poDetail.getPackagingIn()}" class="td-value"></td>
            <td th:text="${poDetail.getPackagingOut()}" class="td-value"></td>
            <td th:text="${poDetail.getPackagingStock()}" class="td-value"></td>
            <td th:text="${poDetail.getShippedScan()}" class="td-value"></td>
            <td th:text="${poDetail.getShippedNet()}" class="td-value"></td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
            <td style="width: 50%; margin-top: 20px;" th:if="${showStore}">
                <table class="bordered" style="margin-top: 10px;">
                    <tr class="tr-header">
                        <td colspan="2" style="text-align: center" th:text="'Reject Items In Store'"></td>
                    </tr>
                    <tbody>
                    <tr th:each="heading : ${store.keySet()}"
                        th:if="${store != null and not store.isEmpty()}">
                        <td style="width: 40%;"><i th:text="${heading}"></i></td>
                        <td style="width: 60%;">
                            <a class="text-reset" target="_blank" th:text="${store.get(heading)}"></a>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </td>
            <td style="width: 50%; margin-top: 20px;" th:if="${showItems && poItems.values() != null and not poItems.values().isEmpty() }">
                <table class="bordered" style="margin-top: 10px;">
                    <thead>
                    <tr class="tr-header">
                        <td>Sku</td>
                        <td>Color</td>
                        <td>Size</td>
                        <td>Expected Production</td>
                        <td>Total Cutting</td>
                    </tr>
                    </thead>
                    <tbody>
                        <tr th:each="items : ${poItems.values()}" th:object="${items}">
                            <td th:text="*{sku}"></td>
                            <td th:text="*{color}"></td>
                            <td th:text="*{size}"></td>
                            <td th:text="*{totalProduction}"></td>
                            <td th:text="*{totalCutting}"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>
</html>