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

<div class="address-element-padding">
    <div class="billingAddress">
        <div class="product_content">

            <!-- ID -->
            <div class="row">
                <div class="col-lg-3">
                    <div class="tab-title-text align-items-center">
                        ID
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-lg-11 tab-content-text">
                            <h th:text="${category.id}"></h>
                        </div>
                        <!-- Buttons -->
                        <div class="col-lg-1">
                            <div class="row">
                                <!-- Update button -->
                                <a href="#category-info-update"
                                   class="trans_200" data-toggle="collapse"><i
                                        style="font-size: 25px; padding-right: 10px"
                                        class="fa fa-pencil"></i></a>
                                <!-- Delete button -->
                                <button type="submit" value="&#xf014;"
                                        class="trans_200 fa product_text"
                                        id="deleteCategory"
                                        style="font-size: 25px; color: #4a4a4a"
                                        data-toggle="collapse">
                                    &#xf014;
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Type -->
            <div class="row">
                <div class="col-lg-3">
                    <div class="tab-title-text">
                        Product Type
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content-text">
                        <h th:text="#{${'category.' + category.productType}}"></h>
                    </div>
                </div>
            </div>

            <!-- Name -->
            <div class="row">
                <div class="col-lg-3">
                    <div class="tab-title-text">
                        Name
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content-text">
                        <h th:text="${category.name}"></h>
                    </div>
                </div>
            </div>

            <!-- Total Products -->
            <div class="row">
                <div class="col-lg-3">
                    <div class="tab-title-text">
                        Total Products
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content-text">
                        <h th:text="${category.itemNum}"></h>
                    </div>
                </div>
            </div>

            <!-- Total Subcategories -->
            <div class="row">
                <div class="col-lg-3">
                    <div class="tab-title-text">
                        Total Subcategories
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content-text">
                        <h th:text="${category.subcategories.size()}"></h>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Update information form -->
<div id="category-info-update" class="collapse">

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

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

                        <select name="product_type" id="category_product_type"
                                class="dropdown_item_select checkout_input"
                                required="required" th:field="${category.productType}">
                            <option th:each="type : ${T(com.oak.bookyourshelf.model.Category.ProductType).values()}"
                                    th:value="${type}"
                                    th:text="#{${'category.' + type}}">productType
                            </option>
                        </select>
                    </div>

                    <!-- Category Name -->
                    <div>
                        <div class="login-text p-b-10" style="color: black;">
                            Category Name
                        </div>
                        <input type="text" id="category-name-update"
                               class="login_input form-control"
                               required="required" pattern="[A-Za-z ]+" title="Category name cannot have digits."
                               th:value="${category.name}">
                    </div>

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

                    <!-- Button -->
                    <input name=submit id="updateCategory" type="submit" value="UPDATE" class="login_button trans_200">

                </form>
            </div>
        </div>
    </div>
</div>
<br>
<script th:inline="javascript">
    /*<![CDATA[*/
    $('#updateCategory,#deleteCategory').click(function (event) {
        var button = $(this).attr("id");
        var categoryId = /*[[${category.getId()}]]*/ 'default';
        var name = $('#category-name-update').val();
        var productType = $('#category_product_type option:selected').val();
        var ret = {
            name: name,
            button: button,
            productType: productType
        };

        if (button === "updateCategory") {
            if (validation_check(["category-name-update", "category_product_type"])) {
                event.preventDefault();
                $.post("/category-details/information/" + categoryId, ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Category ' + name + ' updated successfully.',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/category-details/" + categoryId + "#information";
                    setTimeout(function () {
                        history.pushState(null, null, ' ');
                    }, 100);
                }).fail(function (data) {
                    iziToast.show({
                        title: 'Fail',
                        message: data.responseText,
                        position: 'topRight',
                        color: 'red'
                    });
                })
            }
        } else if (button === "deleteCategory") {
            if (confirm('Are you sure you want to delete?')) {
                $.post("/category-details/information/" + categoryId, ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Category ' + name + ' removed successfully.',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/admin-panel#category";
                }).fail(function (data) {
                    iziToast.show({
                        title: 'Fail',
                        message: data.responseText,
                        position: 'topRight',
                        color: 'red'
                    });
                })
            } else {
                window.location.href = "/admin-panel#category";
            }
        }

    })

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

    /*]]>*/
</script>
</html>
