<?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:uind="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Job Card</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Open+Sans:400,400i&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{|${baseUrl}/css/print.css|}">
</head>
<body>
<div class="container-fluid">
    <table>
        <tr>
            <td width="400">
                <img width="200" th:src="@{|${baseUrl}/img/utopia-industries.png|}" alt="Utopia Industries">
            </td>
            <td >
                <table class="bordered">
                    <tr class="tr-header">
                        <td colspan="2" th:text="'JOB CARD DETAIL'"></td>
                    </tr>
                    <tbody>
                    <tr>
                        <td style="width: 40%; border: 1px solid black;"><i>Job Card ID</i></td>
                        <td style="width: 60%; border: 1px solid black;">
                            <a class="text-reset" target="_blank" th:text="${card.getCode()}"></a>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 40%; border: 1px solid black;"><i>Job Order ID</i></td>
                        <td style="width: 60%; border: 1px solid black;">
                            <a class="text-reset" target="_blank" th:text="${card.getJobOrderId()}"></a>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-middle" style="border: 1px solid black;"><i>Card Status</i></td>
                        <td style="border: 1px solid black;"><span th:text="${card.getStatus()}"></span></td>
                    </tr>
                    <tr>
                        <td class="align-middle" style="border: 1px solid black;"><i>Inventory Status</i></td>
                        <td style="border: 1px solid black;"><span th:text="${card.getInventoryStatus()}"></span></td>
                    </tr>
                    <tr>
                        <td class="align-middle" style="border: 1px solid black;"><i>Customer</i></td>
                        <td style="border: 1px solid black;"><span th:text="${card.getCustomer()}"></span></td>
                    </tr>
                    <tr>
                        <td class="align-middle" style="border: 1px solid black;"><i>Lot Number</i></td>
                        <td style="border: 1px solid black;"><span th:text="${card.getLotNumber()}"></span></td>
                    </tr>
                    <tr>
                        <td class="align-middle" style="border: 1px solid black;"><i>Purchase Order ID</i></td>
                        <td style="border: 1px solid black;"><span th:text="${card.getPurchaseOrderId()}"></span></td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>

    <table class="bordered" style="width: 100%; margin-top: 20px; border-collapse: collapse; ">
        <h5 class="no-margin-top no-margin-bottom" style="margin-top: 20px;">CUTTING DETAILS</h5>
        <thead >
        <tr class="tr-header">
            <td th:text="'Sku'"></td>
            <td th:text="'Length'"></td>
            <td th:text="'Width'"></td>
            <td th:text="'Gsm'"></td>
            <td th:text="'WT_Ply'"></td>
            <td th:text="'Ply'"></td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="cardItem : ${jobCardItems}">
            <td style="border: 1px solid black;" th:text="${cardItem.getSku()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getLength()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getWidth()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getGsm()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getWtPly()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getPly()}"></td>
        </tr>
        </tbody>
    </table>

    <table class="bordered" style="width: 100%; margin-top: 20px; border-collapse: collapse; ">
        <h5 class="no-margin-top no-margin-bottom" style="margin-top: 20px;">ITEMS</h5>
        <thead >
        <tr class="tr-header">
            <td th:text="'ID'"></td>
            <td th:text="'Item ID'"></td>
            <td th:text="'Sku'"></td>
            <td th:text="'Expected Production'"></td>
            <td th:text="'Actual Production'"></td>
            <td th:text="'Total Production'"></td>
            <td th:text="'Cut Piece Items'"></td>
        </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
        <tr th:each="cardItem : ${jobCardItems}">
            <td style="border: 1px solid black;" th:text="${cardItem.getId()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getItemId()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getSku()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getExpectedProduction()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getActualProduction()}"></td>
            <td style="border: 1px solid black;" th:text="${cardItem.getTotalProduction()}"></td>
            <td style="border: 1px solid black;" th:text="${totalStitchingItem.get(cardItem.getItemId())}"></td>
            <td style="border: 1px solid black;" th:text="${totalFinishItem.get(cardItem.getItemId())}"></td>
            <td style="margin:0px; padding:0px">
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>