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

<main>
  <section class="section">
    <div class="container" style="max-width:720px;">
      <div class="empty" style="padding:20px 20px 40px;">
        <div class="ico" style="color:var(--green);"><i class="ic" data-ic="check"></i></div>
        <h3>Order received — thank you!</h3>
        <p>Your order <b style="color:var(--gold-2);"><%= order.order_number %></b> has been placed.</p>
      </div>

      <% if (payfastSuccess) { %>
        <div class="panel" style="background:var(--gold-soft); border-color:rgba(212,175,55,.35);">
          <b style="color:var(--gold-2);">Payment processed.</b> <span style="color:var(--ink-2);">Your card payment went through and your order is being prepared. A confirmation was sent to your email.</span>
        </div>
      <% } %>

      <% if (order.payment_status === 'unpaid' && order.payment_method === 'cod') { %>
        <div class="panel" style="border:1px solid var(--line-2);">
          <b>Cash on delivery.</b> <span style="color:var(--ink-2);">Please have <b><%= money(order.total) %></b> ready in cash when your order arrives.</span>
        </div>
      <% } %>
      <% if (order.payment_status === 'unpaid' && order.payment_method !== 'cod') { %>
        <div class="panel" style="border:1px solid var(--line-2);">
          <b>Awaiting payment.</b> <span style="color:var(--ink-2);">We'll update this page automatically once your payment is confirmed.</span>
        </div>
      <% } %>

      <div class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
        <h3 style="margin-bottom:14px;">Order summary</h3>
        <% items.forEach(function(i){ %>
          <div style="display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line);">
            <% if (i.image) { %><img src="/public/images/products/<%= i.image %>" alt="" style="width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid var(--line);"><% } %>
            <div style="flex:1;">
<div style="font-weight:700; font-size:14px;"><%= i.name %><% if (i.size) { %> <span class="di-size"><%= i.size %></span><% } %></div>
<div style="color:var(--muted); font-size:12.5px;">Qty <%= i.qty %></div>
            </div>
            <div style="font-weight:800; color:var(--gold-2);"><%= money(i.price * i.qty) %></div>
          </div>
        <% }); %>
        <div class="summary-row" style="margin-top:12px;"><span>Subtotal</span><span><%= money(order.subtotal) %></span></div>
        <% if (order.discount_amount > 0) { %><div class="summary-row"><span>Discount (<%= order.coupon_code %>)</span><span style="color:var(--green);">−<%= money(order.discount_amount) %></span></div><% } %>
        <div class="summary-row"><span>Shipping</span><span><%= order.shipping_fee === 0 ? 'FREE' : money(order.shipping_fee) %></span></div>
        <div class="summary-row total"><span>Total</span><span><%= money(order.total) %></span></div>
      </div>

      <div class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
        <h3 style="margin-bottom:10px;">Shipping to</h3>
        <p style="color:var(--ink-2); font-size:14px;">
          <b><%= order.name %></b><br>
          <%= order.address_line1 %><%= order.address_line2 ? ', ' + order.address_line2 : '' %><br>
          <%= order.city %>, <%= order.province %> <%= order.postal_code %><br>
          <%= order.country %><br>
          <%= order.phone %>
        </p>
      </div>

      <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px;">
        <a class="btn btn-gold" href="/">Continue shopping</a>
        <a class="btn btn-dark" href="/account">View my orders</a>
        <a class="btn btn-dark" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20please%20confirm%20my%20order%20<%= order.order_number %>." target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Confirm on WhatsApp</a>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
<script>try { localStorage.setItem('tc_review_order', '<%= order.order_number %>'); } catch (e) {}</script>
