<!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('Job Card 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/job-card-report-sidebar :: sidebar"></aside>
        <div class="col-lg-10">
            <div th:if="${jobCardProgress == null}" class="text-center my-5">
                <h2 class="fs-1">Please Select Job Card</h2>
            </div>

            <div th:if="${jobCardProgress != null}">
                <div class="border rounded-3 pt-4 ">
                    <h1 class="text-center mb-5">Job Card Report</h1>

                    <div class="row justify-content-center align-items-start">
                        <div class="text-center">
                            <div class="gauge-chart2"
                                 th:id="'gauge-chart2'"
                                 th:data-progress="${jobCardProgress.get('Job Card Progress')}"
                                 th:data-title="'Job Card Progress'"
                                 th:data-width="350"
                                 th:data-height="350"
                                 th:data-totalProduction="${totalProduction}"
                                 th:data-actualProduction="${completeProduction.get('Job Card Progress')}"
                                 th:data-fontSize="30"
                                 th:data-fontColor="'#17202a'"
                                 th:data-color="'#566573'">
                            </div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center gap-2 " style="margin-top: 70px;">
                            <div th:each="title, index : ${jobCardProgress.keySet()}"
                                 th:if="${title != 'Job Card Progress'}" class="text-center">
                                <div class="gauge-chart"
                                     th:id="'gauge-chart-' + ${index}"
                                     th:data-progress="${jobCardProgress.get(title)}"
                                     th:data-totalProduction="${totalProduction}"
                                     th:data-actualProduction="${completeProduction.get(title)}"
                                     th:data-title="${title}"
                                     th:data-width="230"
                                     th:data-height="230"
                                     th:data-fontSize="20"
                                     th:data-aGrade="${segregateItems.get('A GRADE') == null ? 0 : segregateItems.get('A GRADE')}"
                                     th:data-bGrade="${segregateItems.get('B GRADE') == null ? 0 : segregateItems.get('B GRADE')}"
                                     th:data-cGrade="${segregateItems.get('C GRADE') == null ? 0 : segregateItems.get('C GRADE')}"
                                     th:data-fontColor="'#17202a'"
                                     th:data-color="'#95a5a6'">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div th:if="${phasesTimes != null}" class="d-flex flex-column align-items-center my-2">
                    <div class="d-flex flex-wrap gap-3">
                        <div th:each="phase, index : ${phasesTimes.keySet()}"
                             class="border rounded-3 text-center p-3 mr-3">
                            <h6 th:text="${phase}"></h6>
                            <h6 th:text="${phasesTimes.get(phase)}"></h6>
                            <h6 th:if="${pendingStatus.get(phase) != null}" th:text="${pendingStatus.get(phase)}"></h6>
                        </div>
                    </div>
                </div>

                <div class="my-5">
                    <div class="row g-4">
                        <div class="col-md-6"
                             th:if="${cuttingDetails != null && cuttingDetails.get('accounts') != null}">
                            <div class="bg-dark text-white text-center py-2 rounded-3 mb-3">
                                Cutting Detail
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle">
                                    <thead class="table-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>Cutting</th>
                                        <th>Cutting Date</th>
                                        <th>Descriptions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="detail, index : ${cuttingDetails.get('accounts').keySet()}">
                                        <td th:text="${cuttingDetails.get('accounts').get(detail).id}"></td>
                                        <td th:text="${cuttingDetails.get('accounts').get(detail).title}"></td>
                                        <td th:text="${cuttingDetails.get('personName').get(detail)}"></td>
                                        <td>
                                            <span th:text="${#temporals.format(cuttingDetails.get('date').get(detail), 'E')}"></span>
                                            <span ctp:formatdate="${cuttingDetails.get('date').get(detail)}"></span>
                                        </td>
                                        <td th:text="${cuttingDetails.get('accounts').get(detail).notes}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-6"
                             th:if="${stitchingDetails != null && stitchingDetails.get('accounts') != null}">
                            <div class="bg-dark text-white text-center py-2 rounded-3 mb-3">
                                Stitching Detail
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle">
                                    <thead class="table-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>Stitching</th>
                                        <th>Stitching Day</th>
                                        <th>Descriptions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="detail : ${stitchingDetails.get('accounts').keySet()}">
                                        <td th:text="${stitchingDetails.get('accounts').get(detail).id}"></td>
                                        <td th:text="${stitchingDetails.get('accounts').get(detail).title}"></td>
                                        <td th:text="${stitchingDetails.get('personName') != null ? stitchingDetails.get('personName').get(detail) : ''}"></td>
                                        <td>
                                            <span th:if="${stitchingDetails.get('date') != null and stitchingDetails.get('date').get(detail) != null}"
                                                  th:text="${#temporals.format(stitchingDetails.get('date').get(detail), 'E')}"></span>
                                            <span th:if="${stitchingDetails.get('date') != null and stitchingDetails.get('date').get(detail) != null}"
                                                  ctp:formatdate="${stitchingDetails.get('date').get(detail)}"></span>
                                        </td>
                                        <td th:text="${stitchingDetails.get('accounts').get(detail).notes}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div th:if="${dailyProgress != null}" class="d-flex justify-content-center my-5">
                    <div class="border rounded-3 p-3 w-75 overflow-auto" style="height: 560px;">
                        <div id="barChart" class="barChart" style="height: 500px; width: 1600px;"
                             th:data-width="1600"
                             th:data-height="500"
                             th:data-title="'Days Wise Progress'"
                             th:data-dates="${dailyProgress.get('dates')}"
                             th:data-cutting="${dailyProgress.get('cutting')}"
                             th:data-stitching="${dailyProgress.get('stitching')}"
                             th:data-quality="${dailyProgress.get('quality')}"
                             th:data-finishing="${dailyProgress.get('finishing')}"
                             th:data-totalProduction="${completeProduction.get('Cutting Progress')}"
                             th:data-fontSize="30">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

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