<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="com.nisum.model.UserAddress" %>
<%@ page import="java.util.List" %>

<%
    List<UserAddress> addresses = (List<UserAddress>) request.getAttribute("addresses");
%>
<%
    String userId = request.getParameter("userId");
    String cartId = request.getParameter("cartId");
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FashionHub</title>
    <link rel="icon" href="./images/NISUM.jpeg" type="image/x-icon">
  <link rel="stylesheet" href="./CSS/address.css">

</head>
<body>
  <div class="container">
    <h2>Select a Delivery Address</h2>

    <c:forEach var="addr" items="${addresses}">
      <div class="address-box">
        <div class="address-info">
          ${addr.addressLine1}<br/>
          ${addr.addressLine2}<br/>
          ${addr.state}, ${addr.country}-${addr.zipCode}.
        </div>
        <div>
          <form method="post" action="${pageContext.request.contextPath}/checkout" style="display:inline;">
              <input type="hidden" name="addressId" value="${addr.addressId}" />
              <input type="hidden" name="userId" value="<%= userId %>" />
              <input type="hidden" name="cartId" value="<%= cartId %>" />
              <button class="btn btn-deliver" type="submit">Deliver to this Address</button>
          </form>
          <form method="post" action="${pageContext.request.contextPath}/deleteAddress" style="display:inline;">
            <input type="hidden" name="addressId" value="${addr.addressId}" />
            <button class="btn btn-delete" type="submit">Delete</button>
          </form>
        </div>
      </div>
    </c:forEach>

    <div class="bottom-buttons">
       <button class="btn btn-secondary" onclick="alert('Show more functionality not implemented')">Show more addresses</button>
       <button class="btn btn-primary" onclick="toggleForm()">Add a New Delivery Address</button>
    </div>

    <!-- Add New Address Form -->
    <div id="new-address-form">
      <form method="post" action="${pageContext.request.contextPath}/addAddress">
        <input type="text" name="name" placeholder="Name" required />
        <input type="text" name="addressLine1" placeholder="Street Address" required />
        <input type="text" name="addressLine2" placeholder="City" required />
        <input type="text" name="phone" placeholder="Phone Number" required />
        <input type="text" name="state" placeholder="State" required />
        <input type="text" name="country" placeholder="Country" required />
        <input type="text" name="zipCode" placeholder="Zip Code" required />
        <button class="btn btn-primary" type="submit">Save Address</button>
      </form>
    </div>


  </div>

  <script>
    function toggleForm() {
      const form = document.getElementById("new-address-form");
      form.style.display = form.style.display === "none" ? "block" : "none";
    }
  </script>
</body>
</html>
