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

<head>
    <title>Wish List | Book Your Shelf</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Little Closet template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon  -->
    <link rel="icon" th:href="@{/static/images/logo/book_your_shelf_tab.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/bootstrap-4.1.2/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/owl.theme.default.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/cart.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/cart_responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/core-style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/util.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/iziToast.min.css}">
</head>

<body>
<!-- Header -->
<header class="header_area" th:insert="fragments/header.html"></header>

<div class="super_container">
    <div class="super_container_inner">
        <div class="super_overlay"></div>

        <!-- Breadcrumbs -->
        <div class="container">
            <div class="row products_bar_row">
                <div class="col">
                    <div class="products_bar d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-start justify-content-center">
                        <div class="breadcrumbs d-flex flex-column align-items-center justify-content-center">
                            <ul class="d-flex flex-row align-items-start justify-content-start text-center">
                                <li><a th:href="@{/}">Home</a></li>
                                <li style="color: #fbaa1d">Your Wish List</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cart_section">
            <div class="container">

                <span th:unless="${#lists.isEmpty(wishListProducts)}">
                <div class="row">
                    <div class="col">
                        <div class="cart_container">
                            <!-- Cart Bar -->
                            <div class="cart_bar">
                                <ul class="cart_bar_list item_list d-flex flex-row align-items-center justify-content-end">
                                    <li class="mr-auto">Product</li>
                                    <li class="cart_item_li">Price</li>
                                    <li class="cart_item_li">Stock</li>
                                    <li class="cart_item_li"></li>
                                    <li class="cart_item_li"></li>
                                </ul>
                            </div>

                            <!-- Cart Items -->
                            <div class="cart_items">
                                <ul class="cart_items_list">

                                    <tr th:each="product : ${wishListProducts}">
                                        <li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-end justify-content-start">
                                            <div class="product_box d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start mr-auto">
                                                <a th:href="@{'/product/' + ${product.getProductId()}}">
                                                    <div>
                                                        <div class="product_image vertical_center"
                                                             style="margin-left: 20px; margin-right: 10px">
                                                            <img class="review_product_image" alt="Product Cover Image"
                                                                 th:src="|data:image/png;base64,${product.getEncodedCoverImage()}|"/>
                                                        </div>
                                                    </div>

                                                    <div class="product_name_container">
                                                        <div class="wish-list-product-name">
                                                            <a th:href="@{'/product/' + ${product.getProductId()}}"
                                                               th:text="${product.getProductName()}">
                                                            </a>
                                                        </div>

                                                        <!-- Author -->
                                                        <span th:if="${product.getProductTypeName() == 'Book' || product.getProductTypeName() == 'E-Book' || product.getProductTypeName() == 'Audio Book'}">
                                                            <div class="wish-list-product-text">
                                                                <span th:each="authors, iterStat : ${product.getAuthors()}"
                                                                      th:text="${!iterStat.last} ? ${authors} + ', ': ${authors}"
                                                                      style="display:inline">
                                                                </span>
                                                            </div>
                                                        </span>

                                                        <!-- Case Brand -->
                                                        <span th:if="${product.getProductTypeName() == 'E-Book Reader Case' || product.getProductTypeName() == 'Book Case'}">
                                                            <div class="wish-list-product-text"
                                                                 th:text="${product.getCaseBrand()}"></div>
                                                        </span>

                                                        <!-- Tablet Brand -->
                                                        <span th:if="${product.getProductTypeName() == 'E-Book Reader'}">
                                                            <div class="wish-list-product-text"
                                                                 th:text="${product.getReaderBrand()}"></div>
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>

                                            <div class="product_price product_text cart_item_li">
                                                <div th:if="${product.isOnDiscount()}">
                                                    <div class="align-items-start justify-content-start">
                                                        <!-- when no sale delete -->
                                                        <div class="sale_price">
                                                            <b th:text="${'%' + #numbers.formatDecimal(product.getDiscountRate() * 100, 0, 0) + ' off'}"></b>
                                                        </div>
                                                        <div class="sale_price">
                                                            <del th:text="${'₺' + product.getPrice()}"></del>
                                                        </div>
                                                    </div>
                                                </div>

                                                <span>Price:</span>
                                                <span style="display:inline" th:text="${'₺' + #numbers.formatDecimal(
                                                    product.getPrice() - (product.getPrice() * product.getDiscountRate()),
                                                    0, 2)}">
                                                </span>
                                            </div>

                                            <div th:if="${product.getStock() <= 0}" class="cart_item_li">
                                                <div><i style="font-size:30px"
                                                        class="fa fa-close product_text product_stock"></i></div>
                                            </div>

                                            <div th:unless="${product.getStock() <= 0}" class="cart_item_li">
                                                <div><i style="font-size:30px"
                                                        class="fa fa-check product_text product_stock"></i></div>
                                            </div>

                                            <div class="product_total product_text cart_item_li"><a th:href="@{/cart}"
                                                                                                    title="Add to cart">
                                                <button th:id="${product.getProductId()}" name="add_to_shopping_cart"
                                                        class="wish_to_shopping" style="font-size:30px"><i
                                                        class="fa fa-shopping-cart product_text"></i></button>
                                            </a></div>

                                            <div class="product_total product_text cart_item_li"><a href=""
                                                                                                    title="Remove from wish list">
                                                <button th:id="${product.getProductId()}" name="delete_product"
                                                        style="font-size:30px"
                                                        class="fa product_text wish_product_delete">&#xf014;</button>
                                            </a></div>
                                        </li>
                                    </tr>
                                </ul>
                            </div>

                            <!-- Cart Buttons -->
                            <div class="cart_buttons d-flex flex-row align-items-start justify-content-start">
                                <div class="cart_buttons_inner ml-sm-auto d-flex flex-row align-items-start justify-content-start flex-wrap">
                                    <div class="button button_clear trans_200"><a id="clear_list" href=""
                                                                                  class="clear_wish_list">clear wish
                                        list</a></div>
                                    <div class="button button_continue trans_200"><a th:href="@{/}">continue
                                        shopping</a></div>
                                </div>
                            </div>

                            <!-- Out of stock warning -->
                            <div class="out-of-stock" style="display: none">This product is out of stock.</div>
                        </div>
                    </div>
                </div>
                </span>

                <!-- No Wish List -->
                <span th:if="${#lists.isEmpty(wishListProducts)}">
                    <div class="warning-text">There are no products in your wish list.</div>
                    <div class="how-about">How about a tour on our bookshelf?</div>
                    <div style="text-align: center">
                        <img th:src="@{/static/images/wish-list.png}">
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <a th:href="@{/}" type="submit" style="cursor:pointer"
                               class="checkout_button trans_200">START SHOPPING
                            </a>
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </span>

            </div>
        </div>

        <!-- Footer -->
        <footer class="footer" th:insert="fragments/footer.html"></footer>
    </div>
</div>

<script th:src="@{/static/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/satatic/styles/bootstrap-4.1.2/popper.js}"></script>
<script th:src="@{/static/styles/bootstrap-4.1.2/bootstrap.min.js}"></script>
<script th:src="@{/static/js/plugins.js}"></script>
<script th:src="@{/static/plugins/greensock/TweenMax.min.js}"></script>
<script th:src="@{/static/plugins/greensock/TimelineMax.min.js}"></script>
<script th:src="@{/static/plugins/scrollmagic/ScrollMagic.min.js}"></script>
<script th:src="@{/static/plugins/greensock/animation.gsap.min.js}"></script>
<script th:src="@{/static/plugins/greensock/ScrollToPlugin.min.js}"></script>
<script th:src="@{/static/plugins/OwlCarousel2-2.2.1/owl.carousel.js}"></script>
<script th:src="@{/static/plugins/easing/easing.js}"></script>
<script th:src="@{/static/plugins/progressbar/progressbar.min.js}"></script>
<script th:src="@{/static/plugins/parallax-js-master/parallax.min.js}"></script>
<script th:src="@{/static/js/classy-nav.min.js}"></script>
<script th:src="@{/static/js/custom.js}"></script>
<script th:src="@{/static/js/active.js}"></script>
<script th:src="@{/static/js/iziToast.min.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    $('.wish_to_shopping').click(function (event) {

        var button = $(this).attr("name");
        var productID = $(this).attr("id");

        var ret = {
            button: button,
            productID: productID
        };
        event.preventDefault();
        $.post("/wish-list", ret, function (data) {
            window.location.href = "/cart";
        }).fail(function (data) {
            iziToast.show({
                title: 'Fail',
                message: data.responseText,
                position: 'topRight',
                color: 'red'
            });
        })
    });

    $('#clear_list').click(function (event) {

        var button = $(this).attr("id");
        var productID = 0;

        var ret = {
            button: button,
            productID: productID
        };

        if (confirm('Are you sure you want to clear list?')) {
            event.preventDefault();
            $.post("/wish-list", ret, function (data) {
                iziToast.show({
                    title: 'Success',
                    message: 'Wish list cleared successfully',
                    position: 'topRight',
                    color: 'green'
                });
                window.location.href = "wish-list";
                setTimeout(function () {
                    history.pushState(null, null, ' ');
                }, 100);
            }).fail(function (data) {
                iziToast.show({
                    title: 'Fail',
                    message: data.responseText,
                    position: 'topRight',
                    color: 'red'
                });
            })
        } else window.location.href = "wish-list";
    });

    $('.wish_product_delete').click(function (event) {

        var button = $(this).attr("name");
        var productID = $(this).attr("id");

        var ret = {
            button: button,
            productID: productID
        };

        if (confirm('Are you sure you want to delete?')) {
            event.preventDefault();
            $.post("/wish-list", ret, function (data) {
                iziToast.show({
                    title: 'Success',
                    message: 'Product deleted successfully',
                    position: 'topRight',
                    color: 'green'
                });
                window.location.href = "wish-list";
                setTimeout(function () {
                    history.pushState(null, null, ' ');
                }, 100);
            }).fail(function (data) {
                iziToast.show({
                    title: 'Fail',
                    message: data.responseText,
                    position: 'topRight',
                    color: 'red'
                });
            })
        } else window.location.href = "wish-list";
    });

    /*]]>*/
</script>

</body>
</html>