<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- Add category button -->
<div class="address-element-padding">
    <a href="#billing_address_column" class="trans_200" data-toggle="collapse">
        <div class="billingAddress">
            <div class="product_content">
                <div style="align-items: center; justify-content: center"
                     class="row order - row ">
                    <div class="add-address">Add New Subcategory</div>
                    <i style="padding-left: 5px" class="fa fa-plus"></i>
                </div>
            </div>
        </div>
    </a>
</div>

<!-- Category form -->
<div id="billing_address_column" class="collapse">

    <div class="address-container">
        <div class="billingAddress">
            <div class="checkout_form_container">
                <form action="#" id="billing_address_form" class="checkout_form">

                    <!-- Name -->
                    <div>
                        <div class="login-text p-b-10" style="color: black;">
                            Subcategory Name
                        </div>

                        <input type="text" id="subcategory_name"
                               class="checkout_input form-control"
                               pattern="[A-Za-z ]+" title="Category name cannot have digits."
                               placeholder="Subcategory Name" required="required">
                    </div>

                    <div><!--ERROR--></div>

                    <!-- Button -->
                    <input name=submit id="addSubcategory" type="submit" value="ADD SUBCATEGORY"
                           class="login_button trans_200">

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

<!-- Sort subcategories -->
<span th:if="${subcategoryPage.totalPages > 0}">
    <div class="products_bar_side d-flex flex-row align-items-end justify-content-end ml-lg-auto">
        <div class="products_dropdown product_dropdown_sorting">
            <div class="isotope_sorting_text"><span>Sort</span><i
                    class="fa fa-caret-down" aria-hidden="true"></i></div>
            <ul>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'ID-desc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Decreasing by ID'"
                       th:style="${sort == 'ID-desc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'ID-asc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Increasing by ID'"
                       th:style="${sort == 'ID-asc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'name-asc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'A - Z'"
                       th:style="${sort == 'name-asc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'name-desc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Z - A'"
                       th:style="${sort == 'name-desc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'total-desc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Decreasing by Total'"
                       th:style="${sort == 'total-desc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'total-asc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Increasing by Total'"
                       th:style="${sort == 'total-asc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'subcategory-desc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Decreasing by Subcategory'"
                       th:style="${sort == 'subcategory-desc'} ? 'color:#1f5b70'">
                    </a>
                </li>
                <li class="item_sorting_btn">
                    <a th:href="@{/subcategory-details/{id}#subcategory(id=${subcategory.getId()}, sort=${'subcategory-asc'}, size=${subcategoryPage.size}, page=${1})}"
                       th:text="'Increasing by Subcategory'"
                       th:style="${sort == 'subcategory-asc'} ? 'color:#1f5b70'">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</span>

<span th:if="${subcategoryPage.totalPages > 0}">

    <br>

    <div>
        <div class="row order - row">

            <div class="col-lg-3 col-md-3 col-xs-6">
                <div class="profile-order-title">ID</div>
            </div>

            <div class="col-lg-3 col-md-3 col-xs-6">
                <div class="profile-order-title">Name</div>
            </div>

            <div class="col-lg-3 col-md-3 col-xs-6">
                <div class="profile-order-title">Total Product</div>
            </div>
            <div class="col-lg-3 col-md-3 col-xs-6">
                <div class="profile-order-title">Total Subcategory</div>
            </div>
        </div>
        <br>
        <div class="container">
            <div class="orderDetailBox">

                <div th:if="${allSubcategories != null}">
                    <tr th:each="subcategory: ${subcategoryPage.content}">

                        <!-- User -->
                        <div class="address-element-padding">
                            <a th:href="@{'/subcategory-details/' + ${subcategory.id}}">
                                <div class="category-element">
                                    <div class="product_content">
                                        <div class="row order - row collapsible">
                                            <div class="col-lg-3 col-md-3 col-xs-6">
                                                <div class="profile-order-text vertical_center">
                                                    <td th:text="${subcategory.id}"></td>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-xs-6">
                                                <div class="profile-order-text vertical_center">
                                                    <td th:text="${subcategory.name}"></td>
                                                </div>
                                            </div>

                                            <div class="col-lg-3 col-md-3 col-xs-6">
                                                <div class="profile-order-text vertical_center">
                                                    <td th:text="${subcategory.itemNum}"></td>
                                                </div>
                                            </div>

                                            <div class="col-lg-3 col-md-3 col-xs-6">
                                                <div class="profile-order-text vertical_center">
                                                    <td th:text="${subcategory.subcategories.size()}"></td>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </tr>
                </div>
                <div th:if="${allSubcategories == null}">
                    <div class="warning-text" style="display: none">There are no subcategories.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row page_nav_row">
        <div class="col">
            <div class="page_nav">
                <ul class="d-flex flex-row align-items-start justify-content-center">
                    <!-- Previous button -->
                    <li th:style="${currentPage == 1} ? 'display:none'">
                        <a th:href="@{/subcategory-details/{id}/#subcategory(id=${subcategory.getId()}, size=${subcategoryPage.size}, page=${currentPage - 1})}"
                           aria-label="Previous" title="Previous Page" rel="tooltip">
                            <i class="pagination_arrow fa fa-angle-left"></i>
                        </a>
                    </li>

                    <!-- First page -->
                    <li th:if="${subcategoryPage.totalPages > 0}"
                        th:class="${currentPage == 1} ? 'active'">
                        <a th:href="@{/subcategory-details/{id}/#subcategory(id=${subcategory.getId()}, size=${subcategoryPage.size}, page=${1})}"
                           th:title="${'Page '+ 1}"
                           th:text="${1}" style="color: #fbaa1d;">
                        </a>
                    </li>

                    <li th:if="${currentPage - 3 > 1}" class="pagination_dots">...</li>

                    <!-- Pages -->
                    <li th:if="${subcategoryPage.totalPages > 2}"
                        th:each="i : ${#numbers.sequence(currentPage - 2 > 1 ? currentPage - 2 : 2
                                        , subcategoryPage.totalPages > 2 + currentPage ? currentPage + 2 : subcategoryPage.totalPages - 1, 1)}"
                        th:class="${currentPage == i} ? 'active'">
                        <a th:href="@{/subcategory-details/{id}/#subcategory(id=${subcategory.getId()}, size=${subcategoryPage.size}, page=${i})}"
                           th:text="${i}" th:title="${'Page '+ i}" style="color: #fbaa1d;"></a>
                    </li>

                    <li th:if="${currentPage + 3 < subcategoryPage.totalPages}" class="pagination_dots">...</li>

                    <!-- Last page -->
                    <li th:if="${subcategoryPage.totalPages > 1}"
                        th:class="${currentPage == subcategoryPage.totalPages} ? 'active'">
                        <a th:href="@{/subcategory-details/{id}/#subcategory(id=${subcategory.getId()}, size=${subcategoryPage.size}, page=${subcategoryPage.totalPages})}"
                           th:text="${subcategoryPage.totalPages}" style="color: #fbaa1d;"
                           th:title="${'Page '+ subcategoryPage.totalPages}">
                        </a>
                    </li>

                    <!-- Next button -->
                    <li th:style="${currentPage == subcategoryPage.totalPages} ? 'display:none'">
                        <a th:href="@{/subcategory-details/{id}/#subcategory(id=${subcategory.getId()}, size=${subcategoryPage.size}, page=${currentPage + 1})}"
                           aria-label="Next" title="Next Page" rel="tooltip">
                            <i class="pagination_arrow fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</span>

<!-- No subcategory -->
<span th:unless="${subcategoryPage.totalPages > 0}">
    <div class="warning-text">There are no subcategories.</div>
    <div style="text-align: center; padding-bottom: 30px">
        <img th:src="@{/static/images/no_data.png}">
    </div>
</span>


<script th:inline="javascript">
    /*<![CDATA[*/
    $('#addSubcategory').click(function (event) {
        var name = $('#subcategory_name').val();
        var categoryId = /*[[${subcategory.getId()}]]*/ 'default';
        var categoryName = /*[[${subcategory.getName()}]]*/ 'default';
        var ret = {
            name: name
        };

        if (validation_check(["subcategory_name"])) {
            event.preventDefault();
            $.post("/subcategory-details/subcategory/" + categoryId, ret, function (data) {
                iziToast.show({
                    title: 'Success',
                    message: 'Subcategory ' + name + ' added successfully to ' + categoryName + ' category.',
                    position: 'topRight',
                    color: 'green'
                });
                window.location.href = "/subcategory-details/" + categoryId + "#subcategory";
                setTimeout(function () {
                    history.pushState(null, null, ' ');
                }, 100);
            }).fail(function (data) {
                iziToast.show({
                    title: 'Fail',
                    message: data.responseText,
                    position: 'topRight',
                    color: 'red'
                });
            })
        }
    });

    function validation_check(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (!document.getElementById(arr[i]).checkValidity()) {
                return false;
            }
        }
        return true;
    }

    /*]]>*/
</script>

</html>