<div class="flex items-center gap-2 mb-6">
  <a href="/admin/orders" class="text-gray-500 hover:text-indigo-600"><i class="fas fa-arrow-left"></i></a>
  <h1 class="text-2xl font-bold text-gray-800">Order #<%= order.orderNumber %></h1>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <div class="lg:col-span-2 space-y-6">
    <!-- Items -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h2 class="font-semibold text-gray-800 mb-4">Order Items</h2>
      <div class="space-y-3">
        <% order.items.forEach(function(item) { %>
          <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div>
              <p class="font-medium text-gray-800"><%= item.productName %></p>
              <% if (item.variantInfo) { %><p class="text-xs text-gray-500"><%= item.variantInfo %></p><% } %>
              <p class="text-sm text-gray-500"><%= item.quantity %> × ₹<%= parseFloat(item.unitPrice).toFixed(2) %></p>
            </div>
            <p class="font-bold">₹<%= parseFloat(item.total).toFixed(2) %></p>
          </div>
        <% }) %>
      </div>
      <hr class="my-4">
      <div class="space-y-2 text-sm">
        <div class="flex justify-between"><span class="text-gray-500">Subtotal</span><span>₹<%= parseFloat(order.subtotal).toFixed(2) %></span></div>
        <% if (parseFloat(order.discountAmount) > 0) { %><div class="flex justify-between text-green-600"><span>Discount</span><span>-₹<%= parseFloat(order.discountAmount).toFixed(2) %></span></div><% } %>
        <div class="flex justify-between"><span class="text-gray-500">Shipping</span><span><%= parseFloat(order.shippingAmount) > 0 ? '₹' + parseFloat(order.shippingAmount).toFixed(2) : 'FREE' %></span></div>
        <div class="flex justify-between"><span class="text-gray-500">Tax</span><span>₹<%= parseFloat(order.taxAmount).toFixed(2) %></span></div>
        <hr>
        <div class="flex justify-between text-lg font-bold"><span>Total</span><span class="text-indigo-600">₹<%= parseFloat(order.total).toFixed(2) %></span></div>
      </div>
    </div>

    <!-- Addresses -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h2 class="font-semibold text-gray-800 mb-3">Shipping Address</h2>
        <div class="text-sm text-gray-600">
          <p class="font-medium text-gray-800"><%= order.shippingName %></p>
          <p><%= order.shippingPhone %></p>
          <p><%= order.shippingAddress %></p>
          <p><%= order.shippingCity %>, <%= order.shippingState %> - <%= order.shippingPincode %></p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h2 class="font-semibold text-gray-800 mb-3">Order Info</h2>
        <div class="text-sm space-y-2">
          <div><span class="text-gray-500">Payment:</span> <span class="font-medium"><%= order.paymentMethod.toUpperCase() %></span></div>
          <div><span class="text-gray-500">Payment Status:</span> <span class="font-medium <%= order.paymentStatus === 'paid' ? 'text-green-600' : 'text-yellow-600' %>"><%= order.paymentStatus %></span></div>
          <div><span class="text-gray-500">Date:</span> <span class="font-medium"><%= new Date(order.createdAt).toLocaleString('en-IN') %></span></div>
          <% if (order.razorpayPaymentId) { %><div><span class="text-gray-500">Razorpay ID:</span> <span class="font-medium text-xs"><%= order.razorpayPaymentId %></span></div><% } %>
        </div>
      </div>
    </div>
  </div>

  <!-- Status Update -->
  <div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 sticky top-24">
      <h2 class="font-semibold text-gray-800 mb-4">Update Status</h2>
      <form action="/admin/orders/<%= order.id %>/status" method="POST">
        <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-4">
          <option value="pending" <%= order.status === 'pending' ? 'selected' : '' %>>Pending</option>
          <option value="confirmed" <%= order.status === 'confirmed' ? 'selected' : '' %>>Confirmed</option>
          <option value="processing" <%= order.status === 'processing' ? 'selected' : '' %>>Processing</option>
          <option value="shipped" <%= order.status === 'shipped' ? 'selected' : '' %>>Shipped</option>
          <option value="delivered" <%= order.status === 'delivered' ? 'selected' : '' %>>Delivered</option>
          <option value="cancelled" <%= order.status === 'cancelled' ? 'selected' : '' %>>Cancelled</option>
        </select>
        <button type="submit" class="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 mb-4">Update Status</button>
      </form>
      
      <hr class="my-4">
      
      <h3 class="font-semibold text-gray-800 mb-2">Current Status</h3>
      <div class="flex items-center gap-2 mb-4">
        <span class="px-3 py-1.5 rounded-full text-sm font-medium
          <%= order.status === 'delivered' ? 'bg-green-100 text-green-700' : '' %>
          <%= order.status === 'shipped' ? 'bg-blue-100 text-blue-700' : '' %>
          <%= order.status === 'processing' ? 'bg-yellow-100 text-yellow-700' : '' %>
          <%= order.status === 'pending' ? 'bg-gray-100 text-gray-700' : '' %>
          <%= order.status === 'cancelled' ? 'bg-red-100 text-red-700' : '' %>
        "><%= order.status.toUpperCase() %></span>
      </div>

      <a href="/admin/orders/<%= order.id %>/invoice" class="flex items-center justify-center gap-2 w-full border border-gray-300 text-gray-700 py-2 rounded-lg text-sm font-medium hover:bg-gray-50">
        <i class="fas fa-file-pdf"></i> Download Invoice
      </a>
    </div>
  </div>
</div>
