<%- include('partials/head') %>
<%- include('partials/header') %>

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Cart / Checkout</div>
      <h1>Secure checkout</h1>
      <% if (cancelled) { %><div class="form-error" style="max-width:640px;">Your payment was cancelled — nothing was charged. You can try again below.</div><% } %>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <div class="checkout-grid">
        <form id="checkoutForm">
          <div class="step-card">
            <h3><span class="step-num">1</span> Contact details</h3>
            <div class="form-grid">
              <div class="form-field"><label for="coName">Full name</label><input id="coName" name="name" required <% if (user) { %>value="<%= user.name %>"<% } %>></div>
              <div class="form-field"><label for="coPhone">Phone</label><input id="coPhone" name="phone" type="tel" required <% if (user) { %>value="<%= user.phone %>"<% } %>></div>
            </div>
            <div class="form-field"><label for="coEmail">Email</label><input id="coEmail" name="email" type="email" required <% if (user) { %>value="<%= user.email %>"<% } %>></div>
          </div>

          <div class="step-card">
            <h3><span class="step-num">2</span> Delivery address</h3>
            <div class="form-field"><label for="coLine1">Street address</label><input id="coLine1" name="line1" required placeholder="House / street"></div>
            <div class="form-field"><label for="coLine2">Apartment / building (optional)</label><input id="coLine2" name="line2"></div>
            <div class="form-grid">
              <div class="form-field"><label for="coCity">City</label><input id="coCity" name="city" required></div>
              <div class="form-field"><label for="coProvince">Province</label><input id="coProvince" name="province" required></div>
              <div class="form-field"><label for="coPostal">Postal code</label><input id="coPostal" name="postal" required></div>
              <div class="form-field"><label for="coCountry">Country</label><input id="coCountry" name="country" value="South Africa"></div>
            </div>
          </div>

          <div class="step-card">
            <h3><span class="step-num">3</span> Payment method</h3>
            <label class="pay-option" id="optPayfast">
              <input type="radio" name="payment" value="payfast" checked>
              <span><b>Card / online payment (PayFast)</b><span>Pay securely with your credit or debit card.</span></span>
            </label>
            <label class="pay-option" id="optCod">
              <input type="radio" name="payment" value="cod">
              <span><b>Cash on delivery</b><span>Pay in cash when your order arrives.</span></span>
            </label>
          </div>

          <div class="step-card">
            <h3><span class="step-num">4</span> Order notes</h3>
            <div class="form-field"><label for="coNotes">Notes (optional)</label><textarea id="coNotes" name="notes" rows="3" placeholder="Anything we should know about delivery?"></textarea></div>
          </div>

          <button class="btn btn-gold btn-block" type="submit" id="placeOrderBtn" style="padding:17px; font-size:15px;">
            <i class="ic" data-ic="shield"></i> Place order
          </button>
          <p style="color:var(--muted); font-size:12.5px; margin-top:10px; text-align:center;">By placing your order you agree to our store terms. You'll receive an email confirmation.</p>
        </form>

        <aside>
          <div class="summary-card">
            <h3 style="font-size:18px; margin-bottom:6px;">Order summary</h3>
            <div class="coupon-box">
              <input type="text" id="coCoupon" placeholder="Discount code">
              <button class="btn btn-dark btn-sm" type="button" id="coApplyCoupon">Apply</button>
            </div>
            <div id="coCouponResult"></div>
            <div id="coItems"></div>
            <div class="summary-row"><span>Subtotal</span><span id="coSubtotal">R 0.00</span></div>
            <div class="summary-row"><span>Shipping</span><span id="coShipping">R 0.00</span></div>
            <div class="summary-row total"><span>Total</span><span id="coTotal">R 0.00</span></div>
          </div>
          <div class="panel" style="background:var(--surface); border:1px solid var(--line); margin-top:18px;">
            <h3 style="font-size:15px;">Need help?</h3>
            <p style="color:var(--muted); font-size:13px;">Chat with us on WhatsApp — we're open 24 hours.</p>
            <a class="btn btn-dark btn-sm" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20I%20need%20help%20with%20checkout." target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> WhatsApp us</a>
          </div>
        </aside>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
<script>window.TC_SITE = { shipping_fee: <%= site.shipping_fee %>, free_shipping_threshold: <%= site.free_shipping_threshold %> };</script>
<%- include('partials/scripts', { pageJs: 'checkout.js' }) %>
