<!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('Summary')"></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/inventory-summary-sidebar :: sidebar"></aside>

        <div class="col-lg-10">
            <h3>Summary</h3>

            <!-- Scrollable wrapper to prevent overflow -->
            <div class="table-responsive">
                <table th:if="${tableData != null}"
                       class="table table-striped table-bordered table-hover font-sm"
                       data-table
                       data-order="[[ 0, &quot;asc&quot; ]]"
                       style="min-width: 1000px;">
                    <thead>
                    <tr>
                        <th colspan="1">SKU / Date</th>
                        <th class="text-center" th:each="date: ${dateLimits}">
                        <span class="d-block" style="width: 100px !important; padding-left: 70px;"
                              th:text="${#temporals.format(date, 'E')}"></span>
                            <span class="d-block pl-4" style="width: 150px !important;"
                                  ctp:formatdate="${date}"></span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="sku : ${tableData.keySet()}">
                        <!-- SKU Column -->
                        <td th:rowspan="${#lists.size(sku)}"
                            th:text="${sku}"
                            class="align-middle"
                            rowspan="3"></td>
                        <td th:each="dates: ${dateLimits}" class="p-0">
                            <table th:each="data : ${tableData.get(sku)}"
                                   class="table table-striped table-bordered table-hover font-sm m-0">
                                <thead th:if="${data.getKey() == dates.toString()}">
                                <tr>
                                    <th>ID</th>
                                    <th>IN</th>
                                    <th>OUT</th>
                                    <th>BALANCE</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="reportSummary : ${data.getValue()}" rowspan="3">
                                    <td th:if="${data.getKey() == dates.toString()}">
                                        <span th:text="${reportSummary.getParentDocumentType()} + ' ' + ${reportSummary.getParentDocumentPieceType()}"></span>
                                    </td>
                                    <td th:if="${data.getKey() == dates.toString()}" class="w-25 text-center">
                                        <span th:text="${reportSummary.getTotalIn()}"></span>
                                    </td>
                                    <td th:if="${data.getKey() == dates.toString()}" class="w-25 text-center">
                                        <span th:text="${reportSummary.getTotalOut()}"></span>
                                    </td>
                                    <td th:if="${data.getKey() == dates.toString()}" class="w-25 text-center">
                                        <span th:text="${reportSummary.getTotalIn() - reportSummary.getTotalOut()}"></span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <h4 th:if="${tableData == null}"> No data found </h4>
        </div>

    </main>
</div>

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