<!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('Stitching Report')"></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/cutting-report-sidebar :: sidebar"></aside>
        <div class="col-lg-10">
            <div th:if="${stitching.get('Date Wise Stitching') != 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="${stitching.get('Date Wise Stitching').keySet()}"
                         th:data-barData="${stitching.get('Date Wise Stitching').values()}"
                         th:data-barHeading="'Stitching'"
                         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="${stitching.get('stitchingAccount') != null && stitching.get('jobCardItemsStitchingDetailsMap').get(stitchingAccount.id) != null}"
                 th:each="stitchingAccount, index : ${stitching.get('stitchingAccount')}">
                <div class="bg-dark text-white py-2 px-3 fs-5 fw-bold text-center mb-2"
                     th:text="${stitchingAccount.title}"></div>

                <table class="table table-striped " data-account-table th:data-account-id="${stitchingAccount.id}">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Job Card</th>
                        <th>PO Number</th>
                        <th>SKU</th>
                        <th>Article Name</th>
                        <th>Stitching Operator Name</th>
                        <th>Total Stitching</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="wrap, index : ${stitching.get('jobCardItemsStitchingDetailsMap').get(stitchingAccount.id)}">
                        <td data-show-dropdown-transactions
                            th:data-account-id="${stitchingAccount.id}"
                            th:data-jobcardid="${wrap.jobCardId}"
                            th:data-sku="${wrap.sku}"
                            th:data-start-date="${param['start-date'] ?: startDate}"
                            th:data-end-date="${param['end-date'] ?: endDate}"
                            title="Transactions">
                            <span data-dropdown-icon-transactions class="bi bi-caret-right-fill"></span>
                        </td>
                        <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.operatorName}"></td>
                        <td th:text="${stitching.get('totalStitchingBasedOnAccountID').get(wrap.jobCardId+wrap.sku)}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
<script>
    const $body = $('body');

    // Initialize DataTables for each individual table
    $('table[data-account-table]').each(function () {
        $(this).DataTable({
            paging: false,
            pageLength: 100,
            searching: false,
            lengthChange: false,
            processing: false,
            dom: `
               <'row'<'col-sm-5'B><'col-sm-7'f>>
               <'row'<'col-sm-12't>>
               <'row'<'col-sm-5'i><'col-sm-7'p>>`,
            buttons: [{
                extend: 'excel',
                text: '',
                className: 'bi bi-file-earmark-spreadsheet btn-sm d-none'
            }]
        });
    });

    // Dropdown transactions toggle
    $body.on('click', '[data-show-dropdown-transactions]', function (e) {
        e.preventDefault();

        const $this = $(this);
        const $tr = $this.closest('tr');
        const $table = $this.closest('table');
        const dataTable = $table.DataTable();
        const $row = dataTable.row($tr);
        const $spanDropdown = $this.find('[data-dropdown-icon-transactions]');
        const accountId = $this.data('account-id');
        const jobCardId = $this.data('jobcardid');
        const sku = $this.data('sku');
        const startDate = $this.data('start-date');
        const endDate = $this.data('end-date');

        $spanDropdown.toggleClass('bi-caret-right-fill bi-caret-down-fill');

        if ($row.child.isShown()) {
            $row.child.hide();
        } else {
            $row.child(`<span class="spinner-border text-center spinner-border-md" role="status"></span>`).show();

            $.ajax({
                url: `/ctp/reporting/inventory-transactions?account-id=${accountId}&jobCard-id=${jobCardId}&sku=${sku}&startDate=${startDate}&endDate=${endDate}`,
                success: function (data) {
                    $row.child(data).show();
                }
            });
        }
    });
</script>

<!-- Load JavaScript file -->
<script th:src="@{/js/charts.js}"></script>

</body>
</html>
