<!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('Production Dashboard')">

</head>

<body class="m-0 p-2">
<div class="container-fluid px-0">
    <header class="header shadow py-2 bg-black text-white" style="background-color: black !important;">
        <div class="container-fluid d-flex flex-wrap align-items-center justify-content-between">
            <img width="200" class="logo img-fluid" th:src="@{/img/utopia-industries-white.png}"
                 alt="Utopia Industries">
            <div class="d-flex flex-wrap justify-content-end">
                <h1 class="px-2 fw-bold text-uppercase m-0" th:text="${{day}}"></h1>
                <h1 class="px-2 fw-bold text-uppercase m-0" th:text="${{date}}"></h1>
            </div>
        </div>
    </header>

    <main id="main1" class="container-fluid main-content">
        <div class="row page-main g-4 p-3">
            <div class="col-lg-6">
                <!-- Title Row -->
                <div class="mb-4 d-flex justify-content-between align-items-center">
                    <h1 class="fw-bold text-uppercase m-0" th:text="${detail.get('line')}"></h1>
                    <div class="text-end">
                        <h3 class="fw-bold m-0 text-end "
                            th:text=" 'Total Machines:  '+ ${detail.get('Total Machine')} ">0</h3>
                        <h3 class="fw-bold m-0 text-end" th:text="'Article: ' + ${detail.get('articleName')}">
                            0</h3>
                    </div>
                </div>

                <div class="row g-2">
                    <div class="col-lg-6 border border-black-50 p-4 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                         style="background-color: #516ec4; height: 100%; ">
                        <h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;" th:text="${detail.get('Shift Target')}">
                            %</h1>
                        <h1 class="fw-bold m-0 text-start pb-5 pt-2" style="font-size: 4rem;">Shift Target</h1>
                    </div>

                    <div class="col-lg-6 border border-black-50 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                         style="background-color: #72788a;">
                        <h1 class="fw-bold  pt-5 pb-2" style="font-size: 6rem;"
                            th:text="${phases.get('packaging')?.intValue() ?: 0}"></h1>
                        <h1 class="fw-bold m-0 text-start  pb-5 pt-2" style="font-size: 4rem;">Achieved</h1>
                    </div>
                </div>
            </div>

            <!-- Card 1: Stitching -->
            <div class="col-lg-6 d-flex">
                <div class="card w-100 h-100">
                    <div class="container-fluid d-flex p-3 align-items-center">
                        <img style="width:337px" th:src="@{/img/stitchingImage.jpg}" class="card-img-top"
                             alt="Stitching">
                        <div class="ps-4 text-center">
                            <h1 class="fw-bold m-0" style="font-size: 4rem;"
                                th:text="${(phases.get('Stitching') != null ? phases.get('Stitching').intValue() : 0) + ' Pcs'}"></h1>
                            <h4 class="pt-2 fw-bold text-uppercase m-0" style="font-size: 2rem;">Stitching Offline</h4>
                        </div>
                    </div>
                    <div class="card-body text-center d-flex justify-content-center">
                        <div class="px-4 border-right" style="height: 150px">
                            <h1 class="card-text" style="font-size: 4rem;"
                                th:text="${(phases.get('totalWips') != null ? phases.get('totalWips').intValue() : 0) + ' Pcs'}"></h1>
                            <h2 class="card-title" style="font-size: 3rem;">WIP QTY</h2>
                        </div>
                        <div class="px-4" style="height: 150px">
                            <h1 class="card-text text-danger fw-bold blink" style="font-size: 4rem;"
                                th:text="${(phases.get('Alteration') != null ? phases.get('Alteration').intValue() : 0) + ' Pcs'}"></h1>
                            <h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">
                                ALTERATION</h2>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Second Row -->
        <div class="row g-4 p-3">
            <!-- Chart -->
            <div class="col-lg-6 d-flex flex-column" style="height: 100%;">
                <div class="row g-3 flex-grow-2" style="height: 100%;">
                    <div class="col-lg-6 border border-black-50 p-5 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                         style="background-color: #516ec4; height: 100%; ">
                        <h1 class="fw-bold pl-3 pr-3 pt-5 pb-2" style="font-size: 6rem;"
                            th:text="${#numbers.formatDecimal(phases.get('Efficiency'), 1, 2) + ' %'}">0%</h1>
                        <h1 class="fw-bold m-0 text-start pl-3 pr-3 pb-5 pt-2" style="font-size: 5rem;">Efficiency</h1>
                    </div>

                    <div class="col-lg-6 border border-black-50 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                         style="background-color: #72788a;">
                        <h1 class="fw-bold pl-3 pr-3 pt-5 pb-2" style="font-size: 6rem;"
                            th:text="${detail.get('Hourly Target') }"></h1>
                        <h1 class="fw-bold m-0 text-start  pb-5 pt-2" style="font-size: 4rem;">Hourly Target</h1>
                    </div>
                </div>
            </div>

            <!-- Card 3: Finishing -->
            <div class="col-lg-3 d-flex">
                <div class="card w-100 h-100">
                    <div class="container-fluid d-flex p-3 align-items-center">
                        <img style="width:200px" th:src="@{/img/finishing.jfif}" class="card-img-top" alt="Finishing">
                        <div class="ps-2 text-center">
                            <h1 class="fw-bold m-0"
                                th:text="${phases.get('finishing')?.intValue() ?: 0} + ' Pcs'"></h1>
                            <h4 class="pt-2 fw-bold text-uppercase m-0">Finishing</h4>
                        </div>
                    </div>
                    <div class="card-body p-0 text-center d-flex justify-content-center">
                        <div class="pr-2 border-right">
                            <h1 class="card-text" th:text="${phases.get('Reject')?.intValue() ?: 0} + ' Pcs'"></h1>
                            <h2 class="card-title">REJECTION</h2>
                        </div>
                        <div class="pl-2">
                            <h1 class="card-text blink  text-danger fw-bold "
                                th:text="${phases.get('ALTER')?.intValue() ?: 0} + ' Pcs'"></h1>
                            <h2 class="card-title blink  text-danger fw-bold ">ALTERATION</h2>
                        </div>
                    </div>
                    <div class="card-body p-0 text-center d-flex justify-content-center">
                        <div class="px-2 ">
                            <h1 class="card-text" th:text="${phases.get('wash')?.intValue() ?: 0} + ' Pcs'"></h1>
                            <h2 class="card-title">WASH/STAIN</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 4: Packaging -->
            <div class="col-lg-3 d-flex">
                <div class="card w-100 h-100">
                    <div class="container-fluid d-flex p-3 align-items-center">
                        <img style="width:200px" th:src="@{/img/packaging.jfif}" class="card-img-top" alt="Packaging">
                        <div class="ps-4 text-center">
                            <h1 class="fw-bold text-uppercase m-0"
                                th:text="${phases.get('packaging')?.intValue() ?: 0}"></h1>
                            <h4 class="pt-2 fw-bold text-uppercase m-0">Packaging</h4>
                        </div>
                    </div>
                    <div class="card-body text-center d-flex justify-content-center p-4">
                    </div>
                </div>
            </div>
        </div>
    </main>
    <main id="main2" class="container-fluid main-content" style="display: none;">
        <div class="row page-main g-4 p-3">
            <div class="col-lg-12 d-flex border border-black-50">
                <div id="dashboardBarChart" class="dashboardBarChart w-100"
                     style="min-height: 476px;"
                     th:data-title="${detail.get('articleName')} + ' (' + ${date} + ')'"
                     th:data-dates="${date}"
                     th:data-stitching="${phases.get('Stitching')?.intValue() ?: 0}"
                     th:data-finishing="${phases.get('finishingValueForBarChart')?.intValue() ?: 0}"
                     th:data-packaging="${phases.get('packaging')?.intValue() ?: 0}"
                     th:data-totalProduction="${detail.get('Shift Target')}"
                     th:data-fontSize="35">
                </div>
            </div>
        </div>

        <div class="row page-main g-4 p-3">
            <div class="col-lg-4">
                <div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                     style="background-color: #516ec4;">
                    <h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
                        th:text="${phases.get('remainingQCAlter')?.intValue()}">0%</h1>
                    <h4 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining QC Alter Pcs</h4>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                     style="background-color: #72788a;">
                    <h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
                        th:text="${phases.get('remainingFinishAlter')?.intValue()}">0</h1>
                    <h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining Finish Alter Pcs </h1>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="h-100 border border-black-50 p-5 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
                     style="background-color: #4bb85f;">
                    <h1 class="fw-bold pt-5 pb-2" style="font-size: 7rem;"
                        th:text="${phases.get('totalPackaging')?.intValue()}">0</h1>
                    <h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">OverAll Packing</h1>
                </div>
            </div>
        </div>
    </main>
</div>
<script>
    setTimeout(function () {
        document.getElementById("main1").style.display = "none";
        document.getElementById("main2").style.display = "block";
    }, 30000);
</script>
<script th:src="@{/js/charts.js}"></script>
</body>
</html>
