<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/non-responsive.css" rel="stylesheet"/>

    <!-- Bootstrap Dropdown Hover CSS -->
    <link href="/css/animate.min.css" rel="stylesheet"/>
    <link href="/css/bootstrap-dropdownhover.min.css" rel="stylesheet"/>

    <link href="/css/font-awesome.min.css" rel="stylesheet"/>

    <link href="/css/style.css" rel="stylesheet"/>

    <style>
        table {
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<p>Dear <span th:text="${user.firstName}"></span>,</p>
<br/>
<p>Thank you for shopping from our book store. We hope you had a good time with our service!</p>
<p>Your order number is: <strong>#<span th:text="${order.id}"></span></strong>. Here is your order detail:</p>
<h2>Order Detail for purchase #<span th:text="${order.id}"></span></h2>
<hr/>

<table>
    <tr>
        <th>Billing Details</th>
        <th>Payment Information</th>
        <th>Shipping Address</th>
    </tr>
    <tr>
        <td>
            <span th:text="${order.billingAddress.billingAddressName}"></span><br/>
            <span th:text="${order.billingAddress.billingAddressStreet1}+' '+${order.billingAddress.billingAddressStreet2}"></span><br/>
            <span th:text="${order.billingAddress.billingAddressCity}"></span><br/>
            <span th:text="${order.billingAddress.billingAddressState}"></span><br/>
            <span th:text="${order.billingAddress.billingAddressZipcode}"></span><br/>
        </td>
        <td>
            <span th:text="${order.payment.holderName}">Card Name</span><br/>
            Visa<br/>
            <span th:text="${order.payment.cardNumber}">Card Number</span><br/>
            <span>Exp Date:</span> <span
                th:text="${order.payment.expiryMonth}"></span>/<span
                th:text="${order.payment.expiryYear}"></span><br/>
        </td>
        <td>
            <span th:text="${order.shippingAddress.shippingAddressName}">David Peere:</span><br/>
            <span th:text="${order.shippingAddress.shippingAddressStreet1}+' '+${order.shippingAddress.shippingAddressStreet2}"></span><br/>
            <span th:text="${order.shippingAddress.shippingAddressCity}"></span><br/>
            <span th:text="${order.shippingAddress.shippingAddressState}"></span><br/>
            <span th:text="${order.shippingAddress.shippingAddressZipcode}"></span><br/>
        </td>
    </tr>
</table>

<h3><strong>Order summary</strong></h3>
<table>
    <thead>
    <tr>
        <td><strong>Item Name</strong></td>
        <td class="text-center"><strong>Item Price</strong></td>
        <td class="text-center"><strong>Item Quantity</strong>
        </td>
        <td class="text-right"><strong>Total</strong></td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="cartItem : ${cartItemList}">
        <td><span data-th-text="${cartItem.book.title}"></span>
        </td>
        <td data-th-text="${cartItem.book.ourPrice}"
            class="text-center">
        </td>
        <td data-th-text="${cartItem.qty}" class="text-center">

        </td>
        <td data-th-text="${cartItem.subtotal}"
            class="text-right">
        </td>
    </tr>
    <tr>
        <td class="highrow"></td>
        <td class="highrow"></td>
        <td class="highrow text-center">
            <strong>Subtotal</strong></td>
        <td data-th-text="${order.orderTotal}"
            class="highrow text-right">
        </td>
    </tr>
    <tr>
        <td class="emptyrow"></td>
        <td class="emptyrow"></td>
        <td class="emptyrow text-center"><strong>Tax</strong>
        </td>
        <td data-th-text="${#numbers.formatDecimal(order.orderTotal*0.06, 0, 2)}"
            class="emptyrow text-right">
        </td>
    </tr>
    <tr>
        <td class="emptyrow"><i
                class="fa fa-barcode iconbig"></i></td>
        <td class="emptyrow"></td>
        <td class="emptyrow text-center"><strong>Total</strong>
        </td>
        <td th:with="total=${order.orderTotal+order.orderTotal*0.06}"
            data-th-text="${#numbers.formatDecimal(total, 0, 2)}"
            class="emptyrow text-right">
        </td>
    </tr>
    </tbody>
</table>
<br/>
<p>Best,</p>
<p>Le's Bookstore</p>
</body>
</html>