<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<br>
<br>
<div class="row order - row ">
    <div class="col-lg-6">
        <div class="address-element-padding">
            <div class="billingAddress">
                <div class="product_content">
                    <div class="row order - row ">
                        <div class="address-title">Billing Address</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add address 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 Address</div>
                            <i style="padding-left: 5px" class="fa fa-plus"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Address 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" method="post">

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

                                <select name="billing_address_title" id="billing_address_title"
                                        class="dropdown_item_select checkout_input"
                                        required="required">
                                    <option value="">SELECT</option>
                                    <option th:each="address_title : ${T(com.oak.bookyourshelf.model.Address.AddressTitle).values()}"
                                            th:value="${address_title}"
                                            th:text="#{${'address_title.' + address_title}}">addressTitle
                                    </option>
                                </select>
                            </div>

                            <!-- Name Surname -->
                            <div class="row">
                                <div class="col-lg-6">
                                    <!-- Name -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Name
                                    </div>

                                    <input type="text" id="billing_address_name"
                                           th:value="${user.getName()}"
                                           class="checkout_input form-control"
                                           pattern="^[a-zA-Z ]+$" placeholder="Name" required="required">
                                </div>
                                <div class="col-lg-6">
                                    <!-- Surname -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Surname
                                    </div>

                                    <input type="text" id="billing_address_surname"
                                           th:value="${user.getSurname()}"
                                           class="checkout_input form-control"
                                           pattern="^[a-zA-Z ]+$" placeholder="Surname"
                                           required="required">
                                </div>
                            </div>

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

                                <select name="billing_address_country"
                                        id="billing_address_country"
                                        class="dropdown_item_select checkout_input"
                                        required="required">
                                </select>
                            </div>

                            <!-- City Province -->
                            <div>
                                <!-- City -->
                                <div class="login-text p-b-10" style="color: black;">
                                    City
                                </div>
                                <select name="billing_address_city"
                                        id="billing_address_city"
                                        class="dropdown_item_select checkout_input"
                                        required="required">
                                </select>

                            </div>

                            <!-- Neighborhood Zipcode -->
                            <div class="row">
                                <div class="col-lg-6">
                                    <!-- Neighborhood -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Town
                                    </div>

                                    <input type="text" id="billing_address_neighborhood"
                                           placeholder="Town" class="checkout_input form-control"
                                           required="required" pattern="^[a-zA-Z ]+$">
                                </div>
                                <div class="col-lg-6">
                                    <!-- Zipcode -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Zip Code
                                    </div>

                                    <input type="number" id="billing_address_zip_code"
                                           placeholder="Zip Code" class="checkout_input form-control"
                                           required="required">
                                </div>
                            </div>

                            <!-- Address -->
                            <div>
                                <div class="login-text p-b-10" style="color: black;">
                                    Address
                                </div>
                                <input type="text" id="billing_open_address"
                                       class="checkout_input form-control"
                                       placeholder="Full Address" required="required">
                            </div>

                            <!-- Phone no -->
                            <div>
                                <div class="login-text p-b-10" style="color: black;">Phone
                                    Number
                                </div>
                                <input type="text" id="billing_address_phone"
                                       class="checkout_input form-control phone_mask"
                                       placeholder="(XXX) XXX XX XX" required="required" pattern=".{15}">
                            </div>

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

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

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

        <!-- Registered addresses -->
        <!-- Registered address 1 -->
        <div>
            <ul>
                <span th:unless="${#lists.isEmpty(allBillingAddress)}">
                    <tr th:each="address : ${allBillingAddress}">
                        <div class="address-element-padding" id="accordion">
                            <div class="billingAddress">
                                <div class="product_content">
                                    <li class="row">
                                        <div class="col-md-9 registered-address-title">
                                            <td th:text="${address.getAddressTitle()}"></td>
                                        </div>
                                        <div class="col-md-3">
                                            <a data-toggle="collapse" data-parent="#accordion"
                                               th:href="'#billing_address_update' + ${address.getAddressId()}"
                                               th:id="${address.getAddressId()}"
                                               class="trans_200 update_address_icon"><i
                                                    style="font-size: 25px; padding-right: 10px"
                                                    class="fa fa-pencil"></i></a>
                                            <a href="#" class="trans_200 delete_billing_address" data-toggle="collapse"
                                               name="delete_billing_address"
                                               th:id="${address.getAddressId()}"><i
                                                    style="font-size: 25px; color: #4a4a4a"
                                                    class="fa product_text">&#xf014;</i></a>
                                        </div>
                                    </li>
                                    <li class="row">
                                        <div class="col-md-9 registered-address-content">
                                            <td th:text="${address.getFullAddress() + ','}"></td>
                                            <td th:text="${address.getTown() + ','}"></td>
                                            <td th:text="${address.getZipCode()}"></td>
                                        </div>
                                    </li>
                                    <li class="row">
                                        <div class="col-md-9 registered-address-content">
                                            <td th:text="${address.getCity() + '/'}"></td>
                                            <td th:text="${address.getCountry()}"></td>
                                        </div>
                                    </li>
                                </div>
                            </div>
                        </div>
                        <!--No Billing Address-->
                        <div th:if="${allBillingAddress== null}">
                            <div class="warning-text" style="display: none">There are no billing addresses.</div>
                        </div>

                        <!-- Update address form -->
                        <div th:id="'billing_address_update' + ${address.getAddressId()}" class="collapse">
                            <div class="address-container">
                                <div class="billingAddress">
                                    <div class="checkout_form_container">
                                        <form action="#" id="billing_address_update_form_2"
                                              class="checkout_form" method="post">

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

                                                <select name="billing_address_update_title_id"
                                                        th:id="'billing_address_update_title'+ ${address.getAddressId()}"
                                                        th:value="${address.getAddressTitle()}"
                                                        class="dropdown_item_select checkout_input"
                                                        required="required">
                                                    <option th:each="address_title : ${T(com.oak.bookyourshelf.model.Address.AddressTitle).values()}"
                                                            th:value="${address_title}"
                                                            th:text="#{${'address_title.' + address_title}}"
                                                            th:selected="${address_title == address.getAddressTitle()}">addressTitle
                                                    </option>
                                                </select>
                                            </div>

                                            <!-- Name Surname -->
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <!-- Name -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Name
                                                    </div>

                                                    <input type="text"
                                                           th:id="'billing_address_update_name' + ${address.getAddressId()}"
                                                           th:value="${address.getName()}"
                                                           class="checkout_input form-control"
                                                           placeholder="Name" pattern="^[a-zA-Z ]+$"
                                                           required="required">
                                                </div>
                                                <div class="col-lg-6">
                                                    <!-- Surname -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Surname
                                                    </div>

                                                    <input type="text"
                                                           th:id="'billing_address_update_surname' + ${address.getAddressId()}"
                                                           th:value="${address.getSurname()}"
                                                           class="checkout_input form-control" pattern="^[a-zA-Z ]+$"
                                                           placeholder="Surname"
                                                           required="required">
                                                </div>
                                            </div>

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

                                                <select name="billing_address_update_country_id"
                                                        th:id="'billing_address_update_country' + ${address.getAddressId()}"
                                                        th:value="${address.getCountry()}"
                                                        class="dropdown_item_select checkout_input"
                                                        required="required">
                                                </select>
                                            </div>

                                            <span style="display: none">
                                                <input th:id="'billing_country_value' + ${address.getAddressId()}"
                                                       th:value="${address.getCountry()}">
                                            </span>

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

                                                <select name="billing_address_update_city_id"
                                                        th:id="'billing_address_update_city' + ${address.getAddressId()}"
                                                        th:value="${address.getCity()}"
                                                        class="dropdown_item_select checkout_input"
                                                        required="required">
                                                </select>

                                            </div>

                                            <span style="display: none">
                                                <input th:id="'billing_city_value' + ${address.getAddressId()}"
                                                       th:value="${address.getCity()}">
                                            </span>

                                            <!-- Neighborhood Zipcode -->
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <!-- Neighborhood -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Town
                                                    </div>

                                                    <input type="text"
                                                           th:id="'billing_address_update_neighborhood' + ${address.getAddressId()}"
                                                           th:value="${address.getTown()}"
                                                           class="checkout_input form-control"
                                                           required="required" pattern="^[a-zA-Z ]+$">
                                                </div>
                                                <div class="col-lg-6">
                                                    <!-- Zipcode -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Zip Code
                                                    </div>

                                                    <input type="number"
                                                           th:id="'billing_address_update_zip_code' + ${address.getAddressId()}"
                                                           th:value="${address.getZipCode()}"
                                                           placeholder="Zip Code" class="checkout_input form-control"
                                                           required="required">
                                                </div>
                                            </div>

                                            <!-- Address -->
                                            <div>
                                                <div class="login-text p-b-10" style="color: black;">
                                                    Address
                                                </div>
                                                <input type="text"
                                                       th:id="'billing_address_update_open_address_2_id' + ${address.getAddressId()}"
                                                       th:value="${address.getFullAddress()}"
                                                       class="checkout_input form-control"
                                                       placeholder="Full Address" required="required">
                                            </div>

                                            <!-- Phone no -->
                                            <div>
                                                <div class="login-text p-b-10" style="color: black;">
                                                    Phone
                                                    Number
                                                </div>
                                                <input type="text"
                                                       th:id="'billing_address_update_phone' + ${address.getAddressId()}"
                                                       th:value="${address.getPhoneNumber()}"
                                                       class="checkout_input form-control phone_mask"
                                                       placeholder="(XXX) XXX XX XX" pattern=".{15}"
                                                       required="required">
                                            </div>

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

                                            <!-- Button -->
                                            <input name="update_billing_address" th:id="${address.getAddressId()}"
                                                   type="submit" value="UPDATE"
                                                   class="login_button trans_200 update_billing_address">
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </tr>
                </span>
                <!-- No Billing  Address -->
                <span th:if="${#lists.isEmpty(allBillingAddress)}">
                    <div class="warning-text">There are no Billing Addresses.</div>
                </span>

            </ul>
        </div>
        <br>
    </div>

    <div class="col-lg-6">
        <div class="address-element-padding">
            <div class="billingAddress">
                <div class="product_content">
                    <div class="row order - row ">
                        <div class="address-title">Delivery Address</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add address button -->
        <div class="address-element-padding">
            <a href="#delivery_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 Address</div>
                            <i style="padding-left: 5px" class="fa fa-plus"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Address form -->
        <div id="delivery_address_column" class="collapse">
            <div class="address-container">
                <div class="billingAddress">
                    <div class="checkout_form_container">
                        <form action="#" id="delivery_address_form" class="checkout_form" method="post">

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

                                <select name="delivery_address_title"
                                        id="delivery_address_title"
                                        class="dropdown_item_select checkout_input"
                                        required="required">
                                    <option value="">SELECT</option>
                                    <option th:each="address_title : ${T(com.oak.bookyourshelf.model.Address.AddressTitle).values()}"
                                            th:value="${address_title}"
                                            th:text="#{${'address_title.' + address_title}}">addressTitle
                                    </option>
                                </select>
                            </div>

                            <!-- Name Surname -->
                            <div class="row">
                                <div class="col-lg-6">
                                    <!-- Name -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Name
                                    </div>

                                    <input type="text" id="delivery_address_name"
                                           th:value="${user.getName()}"
                                           class="checkout_input form-control"
                                           placeholder="Name" required="required" pattern="^[a-zA-Z ]+$">
                                </div>
                                <div class="col-lg-6">
                                    <!-- Surname -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Surname
                                    </div>

                                    <input type="text" id="delivery_address_surname"
                                           th:value="${user.getSurname()}"
                                           class="checkout_input form-control"
                                           placeholder="Surname"
                                           required="required" pattern="^[a-zA-Z ]+$">
                                </div>
                            </div>

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

                                <select name="delivery_address_country"
                                        id="delivery_address_country"
                                        class="dropdown_item_select checkout_input"
                                        required="required">
                                </select>
                            </div>

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

                                <select name="delivery_address_city"
                                        id="delivery_address_city"
                                        class="dropdown_item_select checkout_input"
                                        required="required">
                                </select>
                            </div>

                            <!-- Neighborhood Zipcode -->
                            <div class="row">
                                <div class="col-lg-6">
                                    <!-- Neighborhood -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Town
                                    </div>

                                    <input type="text" id="delivery_address_neighborhood"
                                           class="checkout_input form-control"
                                           placeholder="Town" required="required" pattern="^[a-zA-Z ]+$">
                                </div>
                                <div class="col-lg-6">
                                    <!-- Zipcode -->
                                    <div class="login-text p-b-10" style="color: black;">
                                        Zip Code
                                    </div>

                                    <input type="number" id="delivery_address_zip_code"
                                           placeholder="Zip Code" class="checkout_input form-control"
                                           required="required">
                                </div>
                            </div>

                            <!-- Address -->
                            <div>
                                <div class="login-text p-b-10" style="color: black;">
                                    Address
                                </div>
                                <input type="text" id="delivery_open_address"
                                       class="checkout_input form-control"
                                       placeholder="Full Address" required="required">
                            </div>

                            <!-- Phone no -->
                            <div>
                                <div class="login-text p-b-10" style="color: black;">Phone
                                    Number
                                </div>
                                <input type="text" id="delivery_address_phone"
                                       class="checkout_input form-control phone_mask"
                                       placeholder="(XXX) XXX XX XX" required="required" pattern=".{15}">
                            </div>

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

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

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

        <!-- Registered addresses -->
        <div>
            <ul>
                <span th:unless="${#lists.isEmpty(allDeliveryAddress)}">
                    <tr th:each="address : ${allDeliveryAddress}">
                        <!-- Registered address 1 -->
                        <div class="address-element-padding">
                            <div class="billingAddress">
                                <div class="product_content">
                                    <li class="row">
                                        <div class="col-md-9 registered-address-title">
                                            <td th:text="${address.getAddressTitle()}"></td>
                                        </div>
                                        <div class="col-md-3">
                                            <a data-toggle="collapse"
                                               th:href="'#delivery_address_update' + ${address.getAddressId()}"
                                               th:id="${address.getAddressId()}" class="trans_200 address_icon">
                                                <i style="font-size: 25px; padding-right: 10px"
                                                   class="fa fa-pencil"></i>
                                            </a>
                                            <a href="#" class="trans_200 delete_delivery_address" data-toggle="collapse"
                                               name="delete_delivery_address"
                                               th:id="${address.getAddressId()}">
                                                <i style="font-size: 25px; color: #4a4a4a" class="fa product_text">&#xf014;</i>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="row">
                                        <div class="col-md-9 registered-address-content">
                                            <td th:text="${address.getFullAddress() + ','}"></td>
                                            <td th:text="${address.getTown() + ','}"></td>
                                            <td th:text="${address.getZipCode()}"></td>
                                        </div>
                                    </li>
                                    <li class="row">
                                        <div class="col-md-9 registered-address-content">
                                            <td th:text="${address.getCity() + '/'}"></td>
                                            <td th:text="${address.getCountry()}"></td>
                                        </div>
                                    </li>
                                </div>
                            </div>
                        </div>

                        <!--No Delivery Address-->
                        <div th:if="${allDeliveryAddress== null}">
                            <div class="warning-text" style="display: none">There are no billing addresses.</div>
                        </div>

                        <!-- Update address form -->
                        <div th:id="'delivery_address_update' + ${address.getAddressId()}" class="collapse">
                            <div class="address-container">
                                <div class="billingAddress">
                                    <div class="checkout_form_container">
                                        <form action="#" id="delivery_address_update_form"
                                              class="checkout_form">

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

                                                <select th:id="'delivery_address_update_title' + ${address.getAddressId()}"
                                                        name="delivery_address_update_title"
                                                        th:value="${address.getAddressTitle()}"
                                                        class="dropdown_item_select checkout_input"
                                                        required="required">
                                                    <option th:each="address_title : ${T(com.oak.bookyourshelf.model.Address.AddressTitle).values()}"
                                                            th:value="${address_title}"
                                                            th:text="#{${'address_title.' + address_title}}"
                                                            th:selected="${address_title == address.getAddressTitle()}">addressTitle
                                                    </option>
                                                </select>
                                            </div>

                                            <!-- Name Surname -->
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <!-- Name -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Name
                                                    </div>

                                                    <input type="text"
                                                           th:id="'delivery_address_update_name' + ${address.getAddressId()}"
                                                           th:value="${address.getName()}"
                                                           class="checkout_input form-control"
                                                           placeholder="Name" pattern="^[a-zA-Z ]+$"
                                                           required="required">
                                                </div>
                                                <div class="col-lg-6">
                                                    <!-- Surname -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Surname
                                                    </div>

                                                    <input type="text"
                                                           th:id="'delivery_address_update_surname' + ${address.getAddressId()}"
                                                           th:value="${address.getSurname()}"
                                                           class="checkout_input form-control"
                                                           placeholder="Surname" pattern="^[a-zA-Z ]+$"
                                                           required="required">
                                                </div>
                                            </div>

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

                                                <select name="delivery_address_update_country"
                                                        th:id="'delivery_address_update_country' + ${address.getAddressId()}"
                                                        th:value="${address.getCountry()}"
                                                        class="dropdown_item_select checkout_input"
                                                        required="required">
                                                </select>
                                            </div>

                                            <span style="display: none">
                                                <input th:id="'delivery_country_value' + ${address.getAddressId()}"
                                                       th:value="${address.getCountry()}">
                                            </span>

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

                                                <select name="delivery_address_update_city"
                                                        th:id="'delivery_address_update_city' + ${address.getAddressId()}"
                                                        th:value="${address.getCity()}"
                                                        class="dropdown_item_select checkout_input"
                                                        required="required">
                                                </select>
                                            </div>

                                            <span style="display: none">
                                                <input th:id="'delivery_city_value' + ${address.getAddressId()}"
                                                       th:value="${address.getCity()}">
                                            </span>

                                            <!-- Neighborhood Zipcode -->
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <!-- Neighborhood -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Town
                                                    </div>

                                                     <input type="text"
                                                            th:id="'delivery_address_update_neighborhood' + ${address.getAddressId()}"
                                                            th:value="${address.getTown()}"
                                                            class="checkout_input form-control"
                                                            pattern="^[a-zA-Z ]+$" required="required">
                                                </div>
                                                <div class="col-lg-6">
                                                    <!-- Zipcode -->
                                                    <div class="login-text p-b-10"
                                                         style="color: black;">
                                                        Zip Code
                                                    </div>

                                                    <input type="number"
                                                           th:id="'delivery_address_update_zip_code' + ${address.getAddressId()}"
                                                           th:value="${address.getZipCode()}"
                                                           placeholder="Zip Code" class="checkout_input form-control"
                                                           required="required">
                                                </div>
                                            </div>

                                            <!-- Address -->
                                            <div>
                                                <div class="login-text p-b-10" style="color: black;">
                                                    Address
                                                </div>
                                                <input type="text"
                                                       th:id="'delivery_address_update_open_address_id' + ${address.getAddressId()}"
                                                       th:value="${address.getFullAddress()}"
                                                       class="checkout_input form-control"
                                                       placeholder="Full Address" required="required">
                                            </div>

                                            <!-- Phone no -->
                                            <div>
                                                <div class="login-text p-b-10" style="color: black;">
                                                    Phone
                                                    Number
                                                </div>
                                                <input type="text"
                                                       th:id="'delivery_address_update_phone' + ${address.getAddressId()}"
                                                       th:value="${address.getPhoneNumber()}"
                                                       class="checkout_input form-control phone_mask"
                                                       placeholder="(XXX) XXX XX XX" pattern=".{15}"
                                                       required="required">
                                            </div>

                                            <div><!--ERROR--></div>
                                            <!-- Button -->
                                            <input name="update_delivery_address" th:id="${address.getAddressId()}"
                                                   type="submit"
                                                   value="UPDATE"
                                                   class="login_button trans_200 update_delivery_address">

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </tr>
                </span>
                <!-- No Delivery Address -->
                <span th:if="${#lists.isEmpty(allDeliveryAddress)}">
                    <div class="warning-text">There are no Delivery Addresses.</div>
                </span>
            </ul>
        </div>
    </div>
</div>
<br>

<script th:inline="javascript">
    /*<![CDATA[*/
    $('.update_billing_address,.delete_billing_address').click(function (event) {
        var addressId = $(this).attr("id");
        var button = $(this).attr("name");
        var name = $('#billing_address_update_name' + addressId).val();
        var surname = $('#billing_address_update_surname' + addressId).val();
        var country = $('#billing_address_update_country' + addressId).children("option:selected").val();
        var city = $('#billing_address_update_city' + addressId).children("option:selected").val();
        var town = $('#billing_address_update_neighborhood' + addressId).val();
        var zipCode = $('#billing_address_update_zip_code' + addressId).val();
        var fullAddress = $('#billing_address_update_open_address_2_id' + addressId).val();
        var addressTitle = $('#billing_address_update_title' + addressId).children("option:selected").val().toUpperCase().split(" ").join("_");
        var phoneNumber = $('#billing_address_update_phone' + addressId).val();

        var ret = {
            button: button,
            name: name,
            surname: surname,
            country: country,
            city: city,
            town: town,
            zipCode: zipCode,
            fullAddress: fullAddress,
            addressTitle: addressTitle,
            phoneNumber: phoneNumber,
            addressId: addressId
        };

        if (button === "update_billing_address") {
            if (validation_check(["billing_address_update_name" + addressId, "billing_address_update_surname" + addressId, "billing_address_update_country" + addressId,
                "billing_address_update_city" + addressId, "billing_address_update_neighborhood" + addressId, "billing_address_update_zip_code" + addressId, "billing_address_update_open_address_2_id" + addressId, "billing_address_update_title" + addressId,
                "billing_address_update_phone" + addressId])) {
                event.preventDefault();
                $.post("/profile/address", ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Address updated successfully',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/profile#address";
                    setTimeout(function () {
                        history.pushState(null, null, ' ');
                    }, 100);
                }).fail(function (data) {
                    iziToast.show({
                        title: 'Fail',
                        message: data.responseText,
                        position: 'topRight',
                        color: 'red'
                    });
                })
            }

        } else if (button === "delete_billing_address") {
            if (confirm('Are you sure you want to delete?')) {
                event.preventDefault();
                $.post("/profile/address", ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Address deleted successfully',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/profile#address";
                    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 = "/profile#address";
            }
        }

    });

    $('#add_delivery_address').click(function (event) {
        var button = $(this).attr("id");
        var name = $('#delivery_address_name').val();
        var surname = $('#delivery_address_surname').val();
        var country = $('#delivery_address_country').val();
        var city = $('#delivery_address_city').val();
        var town = $('#delivery_address_neighborhood').val();
        var zipCode = $('#delivery_address_zip_code').val();
        var fullAddress = $('#delivery_open_address').val();
        var addressTitle = $('#delivery_address_title').val().toUpperCase().split(" ").join("_");
        var phoneNumber = $('#delivery_address_phone').val();

        var ret = {
            button: button,
            name: name,
            surname: surname,
            country: country,
            city: city,
            town: town,
            zipCode: zipCode,
            fullAddress: fullAddress,
            addressTitle: addressTitle,
            phoneNumber: phoneNumber
        };

        if (button === "add_delivery_address") {
            if (validation_check(["delivery_address_name", "delivery_address_surname", "delivery_open_address", "delivery_address_neighborhood",
                "delivery_address_phone", "delivery_address_zip_code", "delivery_address_country", "delivery_address_city",
                "delivery_address_title"])) {
                event.preventDefault();
                $.post("/profile/address", ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Address added successfully',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/profile#address";
                    setTimeout(function () {
                        history.pushState(null, null, ' ');
                    }, 100);
                }).fail(function (data) {
                    iziToast.show({
                        title: 'Fail',
                        message: data.responseText,
                        position: 'topRight',
                        color: 'red'
                    });
                })
            }
        }
    });

    $('#add_billing_address').click(function (event) {
        var button = $(this).attr("id");
        var name = $('#billing_address_name').val();
        var surname = $('#billing_address_surname').val();
        var country = $('#billing_address_country').val();
        var city = $('#billing_address_city').val();
        var town = $('#billing_address_neighborhood').val();
        var zipCode = $('#billing_address_zip_code').val();
        var fullAddress = $('#billing_open_address').val();
        var addressTitle = $('#billing_address_title').val().toUpperCase().split(" ").join("_");
        var phoneNumber = $('#billing_address_phone').val();

        var ret = {
            button: button,
            name: name,
            surname: surname,
            country: country,
            city: city,
            town: town,
            zipCode: zipCode,
            fullAddress: fullAddress,
            phoneNumber: phoneNumber,
            addressTitle: addressTitle
        };

        if (button === "add_billing_address") {
            if (validation_check(["billing_address_name", "billing_address_surname", "billing_open_address", "billing_address_neighborhood",
                "billing_address_phone", "billing_address_zip_code", "billing_address_country", "billing_address_city",
                "billing_address_title"])) {
                event.preventDefault();
                $.post("/profile/address", ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Address added successfully',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/profile#address";
                    setTimeout(function () {
                        history.pushState(null, null, ' ');
                    }, 100);
                }).fail(function (data) {
                    iziToast.show({
                        title: 'Fail',
                        message: data.responseText,
                        position: 'topRight',
                        color: 'red'
                    });
                })
            }
        }
    });

    $('.update_delivery_address,.delete_delivery_address').click(function (event) {
        var addressId = $(this).attr("id");
        var button = $(this).attr("name");
        var name = $('#delivery_address_update_name' + addressId).val();
        var surname = $('#delivery_address_update_surname' + addressId).val();
        var country = $('#delivery_address_update_country' + addressId).children("option:selected").text();
        var city = $('#delivery_address_update_city' + addressId).children("option:selected").text();
        var town = $('#delivery_address_update_neighborhood' + addressId).val();
        var zipCode = $('#delivery_address_update_zip_code' + addressId).val();
        var fullAddress = $('#delivery_address_update_open_address_id' + addressId).val();
        var addressTitle = $('#delivery_address_update_title' + addressId).children("option:selected").val().toUpperCase().split(" ").join("_");
        var phoneNumber = $('#delivery_address_update_phone' + addressId).val();

        var ret = {
            button: button,
            name: name,
            surname: surname,
            country: country,
            city: city,
            town: town,
            zipCode: zipCode,
            fullAddress: fullAddress,
            addressTitle: addressTitle,
            phoneNumber: phoneNumber,
            addressId: addressId
        };

        if (button === "update_delivery_address") {
            if (validation_check(["delivery_address_update_name" + addressId, "delivery_address_update_surname" + addressId, "delivery_address_update_country" + addressId, "delivery_address_update_city" + addressId,
                "delivery_address_update_neighborhood" + addressId, "delivery_address_update_zip_code" + addressId, "delivery_address_update_open_address_id" + addressId, "delivery_address_update_title" + addressId,
                "delivery_address_update_phone" + addressId])) {
                event.preventDefault();
                $.post("/profile/address", ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Address updated successfully',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/profile#address";
                    setTimeout(function () {
                        history.pushState(null, null, ' ');
                    }, 100);
                }).fail(function (data) {
                    iziToast.show({
                        title: 'Fail',
                        message: data.responseText,
                        position: 'topRight',
                        color: 'red'
                    });
                })
            }

        } else if (button === "delete_delivery_address") {
            if (confirm('Are you sure you want to delete?')) {
                event.preventDefault();
                $.post("/profile/address", ret, function (data) {
                    iziToast.show({
                        title: 'Success',
                        message: 'Address deleted successfully',
                        position: 'topRight',
                        color: 'green'
                    });
                    window.location.href = "/profile#address";
                    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 = "/profile#address";
            }
        }
    });
    /*]]>*/
</script>

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

<script th:src="@{/static/js/input-mask.js}"></script>
<script th:src="@{/static/js/countries.js}"></script>

<script th:inline="javascript">

    $('.update_address_icon').click(function () {
        var ID = $(this).attr("id");
        populateCountries("billing_address_update_country" + ID, "billing_address_update_city" + ID);
        document.getElementById("billing_address_update_country" + ID).value = document.getElementById("billing_country_value" + ID).value;
        populateStates("billing_address_update_country" + ID, "billing_address_update_city" + ID);
        document.getElementById("billing_address_update_city" + ID).value = document.getElementById("billing_city_value" + ID).value;
    });

    $('.address_icon').click(function () {
        var ID = $(this).attr("id");
        populateCountries("delivery_address_update_country" + ID, "delivery_address_update_city" + ID);
        document.getElementById("delivery_address_update_country" + ID).value = document.getElementById("delivery_country_value" + ID).value;
        populateStates("delivery_address_update_country" + ID, "delivery_address_update_city" + ID);
        document.getElementById("delivery_address_update_city" + ID).value = document.getElementById("delivery_city_value" + ID).value;
    });

    populateCountries("billing_address_country", "billing_address_city");
    populateCountries("delivery_address_country", "delivery_address_city");

    $(document).ready(function () {
        var i;
        var text_inputs = document.querySelectorAll("input[type=text]");
        var number_inputs = document.querySelectorAll("input[type=number]");


        const TEXT_MAX_LENGTH = "255";
        const NUMBER_MAX_LENGTH = 2147483647;

        for (i = 0; i < text_inputs.length; i++) {
            text_inputs[i].setAttribute("maxlength", TEXT_MAX_LENGTH)
        }

        for (i = 0; i < number_inputs.length; i++) {
            number_inputs[i].setAttribute("max", NUMBER_MAX_LENGTH)
        }

    });

</script>

</html>
