<!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('Cutting Report')"></head>
<style>
    div.dataTables_wrapper div.dataTables_filter {
        text-align: left !important;
    }
    div.dataTables_wrapper .dt-buttons {
        text-align: left !important;
    }
    div.dataTables_wrapper div.dataTables_info {
        text-align: left !important;
    }
</style>

<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/cutting-report-sidebar :: sidebar"></aside>
        <div class="col-lg-10">
            <div th:if="${cutting.get('Date Wise Cutting') != null}" class="d-flex justify-content-center">
                <div class="border rounded-3 pt-2 mx-auto overflow-auto" style="height: 560px; width: 80%;">
                    <div id="singleBarChart" class="singleBarChart" style="height: 500px; width: 1600px;"
                         th:data-width="1600"
                         th:data-height="500"
                         th:data-title="'Days Wise Progress'"
                         th:data-dates="${cutting.get('Date Wise Cutting').keySet()}"
                         th:data-barData="${cutting.get('Date Wise Cutting').values()}"
                         th:data-barHeading="'Cutting'"
                         th:data-stitching="''"
                         th:data-quality="''"
                         th:data-finishing="''"
                         th:data-totalProduction="'30000'"
                         th:data-fontSize="30"
                    ></div>
                </div>
            </div>
            <div class="mt-3" th:if="${cutting.get('cuttingAccount') != null}"
                 th:each="cuttingAccount, index : ${cutting.get('cuttingAccount')}">
                <div th:if="${cutting.get('accountWiseCutting').containsKey(cuttingAccount.id)}"
                     class="p-0 text-center">
                    <div class="bg-dark text-white py-2 px-3 fs-5 fw-bold text-center"
                         th:text="${cuttingAccount.title}"></div>
                    <table class="table table-bordered mt-2 datatable">
                        <thead>
                        <tr>
                            <th>Job Card</th>
                            <th>PO Number</th>
                            <th>SKU</th>
                            <th>Article Name</th>
                            <th>Total Cutting</th>
                            <th>Cutting Operator Name</th>
                            <th>Width</th>
                            <th>Length</th>
                            <th>GSM</th>
                            <th>WT PLY</th>
                            <th>PLY</th>
                            <th>Cutting Complete</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="wrap, index : ${cutting.get('accountWiseCutting').get(cuttingAccount.id)}">
                            <td th:text="${wrap.jobCardCode}"></td>
                            <td th:text="${wrap.poName}"></td>
                            <td th:text="${wrap.sku}"></td>
                            <td th:text="${wrap.articleName}"></td>
                            <td th:text="${wrap.total}"></td>
                            <td th:text="${wrap.operatorName}"></td>
                            <td th:text="${wrap.width}"></td>
                            <td th:text="${wrap.length}"></td>
                            <td th:text="${wrap.gsm}"></td>
                            <td th:text="${wrap.wtPly}"></td>
                            <td th:text="${wrap.ply}"></td>
                            <td>
                                <span th:if="${!wrap.Complete}" class="badge badge-danger">Not Complete</span>
                                <div th:if="${wrap.Complete}">
                                    <span class="badge badge-APPROVED">Completed</span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</div>
<!-- Load chart logic -->
<script th:src="@{/js/charts.js}"></script>

<!-- DataTables Initialization -->
<script>
    const dataTableConfig = {
        pageLength: 5,
        searching: true,
        lengthChange: false,
        processing: false,
        info: true,
        paging: true,
        dom: `
           <'row mb-2 mt-2'<'col-sm-6'f><'col-sm-6'B>>
           <'row'<'col-sm-12'tr>>
           <'row mt-2'<'col-sm-6'i><'col-sm-6 text-end'p>>`
        ,
        buttons: []
    };



    $(document).ready(function () {
        $('table.datatable').each(function () {
            const $table = $(this);
            if (!$.fn.DataTable.isDataTable($table)) {
                $table.DataTable(dataTableConfig);
            }
        });
    });
</script>

</body>
</html>
