<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}"
>


<head></head>

<div layout:fragment="content">
    <!-- Page Heading -->
    <h1 class="h3 mb-4 text-gray-800">주문</h1>

    <form id="search-form" class="mb-4">
        <div class="form-row align-items-center">
            <div class="col-auto my-1">
                <input type="date" name="orderDate" class="form-control" id="date-picker" />
            </div>
            <div class="col-auto my-1">
                <input type="button" class="form-control" id="submit-button" value="검색" />
            </div>
            <input type="hidden" id="last-order-id" name="lastOrderId"/>
        </div>
    </form>

    <!-- Card Section -->
    <div class="row row-cols-md-3" id="order-card"></div>

    <div class="d-flex justify-content-center mb-4">
        <div class="spinner-border" id="spinner" role="status" style="display: none">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <button type="button" class="btn btn-outline-secondary btn-lg btn-block" id="more-button">더 보기</button>

    <script type="text/javascript">
        let lastOrderIdTag = null;
        let datePicker = null;

        function init() {
            lastOrderIdTag = document.querySelector("#last-order-id");
            datePicker = document.querySelector("#date-picker");

            setToday();
            initDrawOrderData();
        }

        function setEvent() {
            $("#submit-button").click(function () {
                lastOrderIdTag.value = null;
                initDrawOrderData();
            })

            $("#more-button").click((event) => {
                moreDrawOrderDate();
            });
        }

        function setToday() {
            datePicker.valueAsDate = new Date();
        }

        function initDrawOrderData() {
            $("#spinner").show();

            getOrderMainData()
                .then((response) => response.json())
                .then((myJson) => {
                    $("#spinner").hide();

                    if (myJson.code == "ERROR") {
                        alert(myJson.message);
                        return;
                    }

                    if (myJson.code == "SUCCESS") {
                        if (myJson.data.length == 0) {
                            $("#order-card").html("<span>주문이 없습니다.</span>");
                            return;
                        }

                        lastOrderIdTag.value = myJson.data[myJson.data.length - 1].orderId;
                        const tags = getOrderHtml(myJson.data);

                        $("#order-card").html(tags);
                    }
                });
        }

        function moreDrawOrderDate() {
            $("#spinner").show();

            getOrderMainData()
                .then((response) => response.json())
                .then((myJson) => {
                    $("#spinner").hide();

                    if (myJson.code == "ERROR") {
                        alert(myJson.message);
                        return;
                    }

                    if (myJson.code == "SUCCESS") {
                        if (myJson.data.length == 0) {
                            alert("주문 결과가 더 존재 하지 않습니다.");
                            return;
                        }

                        lastOrderIdTag.value = myJson.data[myJson.data.length - 1].orderId;
                        const tags = getOrderHtml(myJson.data);

                        $("#order-card").append(tags);
                    }
                });
        }

        function getOrderMainData() {
            let params = $("#search-form").serialize();
            return fetch(url.orderService + "/orderMain?" + params);
        }

        function getOrderHtml(orderDataList) {
            let html = "";

            orderDataList.forEach(orderData => {
                html += "<div class=\"col mb-4\">\n" +
                    "            <div class=\"card\">\n" +
                    "                <div class=\"card-header text-center font-weight-bold\">";
                html += orderData.userName;
                html += "            </div>";
                html += "            <div class=\"card-body\">\n" +
                    "                    <h5 class=\"card-title\">\n" +
                    "                        <span class=\"d-inline-block text-truncate\" style=\"max-width: 80%;\">";

                let orderItemNames = [];
                orderData.orderItemResponses.forEach(orderItemResponse => {
                    orderItemNames.push(orderItemResponse.itemName);
                });

                html += orderItemNames.join(", ");
                html += "                    </span>\n" +
                    "                    </h5>";
                html += "                <p class=\"card-text\">\n" +
                    "                        <small class=\"text-muted\">";
                html += orderData.orderTime;
                html += "                    </small>\n" +
                    "                    </p>\n" +
                    "                    <a href=\"#\" class=\"btn btn-outline-dark btn-sm\">상세보기</a>\n" +
                    "               </div>";
                if (orderData.orderStatus == "PLACED") {
                    html += "       <div class=\"card-footer rounded bg-primary text-white text-center\" role=\"button\">";
                    html += "주문접수하기"
                }
                else if (orderData.orderStatus == "CANCELED") {
                    html += "       <div class=\"card-footer rounded bg-danger text-white text-center\" role=\"button\">";
                    html += "주문취소"
                }
                html += "           </div>\n" +
                    "       </div>\n" +
                    " </div>";
            });

            return html;
        }

    </script>
</div>

</html>