<%@ page import="com.nisum.model.UserAddress" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false"%>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>FashionHub</title>
  <link rel="icon" href="./images/NISUM.jpeg" type="image/x-icon">
  <link rel="stylesheet" href="./CSS/checkout.css">

</head>
<body>

<%
    UserAddress userAddress = (UserAddress) request.getAttribute("userAddress");
%>

<div class="checkout-container" id="checkoutContainer">
  <h2>Checkout - Billing & Payment</h2>

  <div class="section-title">Billing Address</div>
  <div class="billing-address">
    <% if (userAddress != null) { %>
      <%= userAddress.getAddressLine1() %><br/>
      <%= userAddress.getAddressLine2() != null ? userAddress.getAddressLine2() + "<br/>" : "" %>
      <%= userAddress.getState() %>, <%= userAddress.getZipCode() %><br/>
      <%= userAddress.getCountry() %>
    <% } else { %>
      <em>No address found.</em>
    <% } %>
  </div>

  <div class="section-title">Enter Promo Code</div>
  <div class="promo-section">
    <input type="text" id="promoInput" placeholder="Enter promo code">
    <button onclick="applyPromo()">Apply</button>
  </div>

  <div class="section-title">Select Payment Method</div>
  <div class="payment-methods" id="paymentMethods">
    <label><input type="radio" name="payment" value=1> Credit/Debit Card</label>
    <label><input type="radio" name="payment" value=2> Wallet Rewards</label>
    <label><input type="radio" name="payment" value=3> Net Banking</label>
    <label><input type="radio" name="payment" value=4> UPI & Other Apps</label>
    <label><input type="radio" name="payment" value=5> EMI (Easy Installments)</label>
    <label><input type="radio" name="payment" value=6> Cash on Delivery</label>
  </div>

  <div class="actions">
    <button class="go-back" onclick="goBack()">Go Back</button>
    <button class="place-order" id="placeOrderBtn" onclick="placeOrder()">Place Order</button>
  </div>
</div>

<script>
  function applyPromo() {
    // silent handling
  }

  function goBack() {
    const userId = 1;
        const contextPath = '${pageContext.request.contextPath}';
        window.location.href = contextPath + '/cart?userId=' + userId;
  }

  const paymentMethods = document.getElementById('paymentMethods');
  const placeBtn = document.getElementById('placeOrderBtn');
  let selectedPayment = null;

    function updateButtonState() {
        const selected = document.querySelector('input[name="payment"]:checked');
        if (selected) {
          selectedPayment = selected.value;
          placeBtn.classList.add('enabled');
        } else {
          selectedPayment = null;
          placeBtn.classList.remove('enabled');
        }
      }

    paymentMethods.addEventListener('change', updateButtonState);

  window.addEventListener('DOMContentLoaded', updateButtonState);

  function placeOrder() {
      const userId =1;
      if (selectedPayment && userId) {
        window.location.href = `order?paymentMethod=&userId=${userId}`;
      } else {
        alert("Please select a payment method.");
      }
    }

</script>

</body>
</html>
