<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
  <%- include('partials/head') %>
</head>
<body class="bg-surface text-on-surface selection:bg-primary-fixed">
<%- include('partials/sidebar') %>
<%- include('partials/flash') %>

<div class="ml-64 min-h-screen flex flex-col">
  <%- include('partials/topbar') %>

  <main class="p-8 bg-surface-container-low flex-1">
    <div class="max-w-6xl mx-auto space-y-8">

      <!-- Page Header -->
      <div class="flex items-end justify-between">
        <div>
          <h1 class="text-3xl font-extrabold font-headline text-on-surface tracking-tight">Orders</h1>
          <p class="text-on-surface-variant mt-1">Manage and track your customer orders in one place.</p>
        </div>
        <div class="flex gap-3">
          <button class="px-4 py-2 bg-secondary-container text-on-secondary-container rounded-lg font-medium flex items-center gap-2 hover:bg-surface-container-high transition-colors text-sm">
            <span class="material-symbols-outlined text-[18px]">file_download</span>
            Export
          </button>
          <button onclick="document.getElementById('create-order-modal').classList.remove('hidden')"
            class="px-4 py-2 bg-gradient-to-r from-primary to-primary-container text-on-primary rounded-lg font-semibold flex items-center gap-2 shadow-sm text-sm">
            <span class="material-symbols-outlined text-[18px]">add</span>
            Create Order
          </button>
        </div>
      </div>

      <!-- Stats Grid -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between text-on-surface-variant mb-2">
            <span class="text-xs font-bold uppercase tracking-wide">Total Orders</span>
            <span class="material-symbols-outlined opacity-50">shopping_cart</span>
          </div>
          <div class="text-2xl font-bold font-headline"><%= (summary.total_orders || 0).toLocaleString() %></div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between text-on-surface-variant mb-2">
            <span class="text-xs font-bold uppercase tracking-wide">Unfulfilled</span>
            <span class="material-symbols-outlined text-tertiary">pending_actions</span>
          </div>
          <div class="text-2xl font-bold font-headline"><%= summary.unfulfilled || 0 %></div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between text-on-surface-variant mb-2">
            <span class="text-xs font-bold uppercase tracking-wide">Unpaid</span>
            <span class="material-symbols-outlined opacity-50">account_balance_wallet</span>
          </div>
          <div class="text-2xl font-bold font-headline"><%= summary.unpaid || 0 %></div>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-xl border border-outline-variant/10 shadow-sm">
          <div class="flex items-center justify-between text-on-surface-variant mb-2">
            <span class="text-xs font-bold uppercase tracking-wide">Net Revenue</span>
            <span class="material-symbols-outlined opacity-50">payments</span>
          </div>
          <div class="text-2xl font-bold font-headline">$<%= parseFloat(summary.net_revenue || 0).toFixed(0) %></div>
          <p class="text-[10px] text-on-surface-variant mt-1 uppercase tracking-tighter">This month</p>
        </div>
      </div>

      <!-- Orders Table -->
      <div class="bg-surface-container-lowest rounded-xl border border-outline-variant/10 overflow-hidden shadow-sm">
        <!-- Filters -->
        <div class="p-4 flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-outline-variant/10">
          <div class="flex items-center gap-1 bg-surface-container p-1 rounded-lg">
            <a href="/orders?filter=all" class="px-4 py-1.5 rounded-md text-sm font-semibold transition-colors
              <%= filter === 'all' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">All</a>
            <a href="/orders?filter=unfulfilled" class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
              <%= filter === 'unfulfilled' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">Unfulfilled</a>
            <a href="/orders?filter=unpaid" class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
              <%= filter === 'unpaid' ? 'bg-white shadow-sm text-primary' : 'text-on-surface-variant hover:bg-white/50' %>">Unpaid</a>
          </div>
          <div class="flex items-center gap-3">
            <button class="pl-4 pr-4 py-2 border border-outline-variant/30 rounded-lg text-sm font-medium hover:bg-surface-container-low transition-all flex items-center gap-2">
              <span class="material-symbols-outlined text-[18px]">filter_list</span>
              More Filters
            </button>
          </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
          <table class="w-full text-left">
            <thead>
              <tr class="bg-surface-container/30">
                <th class="py-4 px-6"><input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/></th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Order ID</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Date</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Customer</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-center">Payment</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-center">Fulfillment</th>
                <th class="py-4 px-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-right">Total</th>
                <th class="py-4 px-4"></th>
              </tr>
            </thead>
            <tbody class="divide-y divide-outline-variant/10">
              <% if (orders.length === 0) { %>
              <tr><td colspan="8" class="px-6 py-12 text-center text-on-surface-variant">No orders found.</td></tr>
              <% } %>
              <% orders.forEach(function(order, i) { %>
              <tr class="hover:bg-surface-container-low transition-colors group <%= i % 2 === 1 ? 'bg-surface-container-low/20' : '' %>">
                <td class="py-4 px-6"><input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/></td>
                <td class="py-4 px-4 font-headline font-bold text-on-surface"><%= order.order_number %></td>
                <td class="py-4 px-4 text-sm text-on-surface-variant"><%= new Date(order.created_at).toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'}) %></td>
                <td class="py-4 px-4">
                  <div class="flex items-center gap-2">
                    <div class="w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center text-[10px] font-bold text-primary">
                      <%= (order.customer_name || 'U').split(' ').map(n=>n[0]).join('').substring(0,2).toUpperCase() %>
                    </div>
                    <span class="text-sm font-medium"><%= order.customer_name || 'Unknown' %></span>
                  </div>
                </td>
                <td class="py-4 px-4 text-center">
                  <% if (order.payment_status === 'paid') { %>
                  <span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed text-[11px] font-bold rounded-full uppercase">Paid</span>
                  <% } else if (order.payment_status === 'pending') { %>
                  <span class="px-3 py-1 bg-secondary-fixed text-on-secondary-fixed-variant text-[11px] font-bold rounded-full uppercase">Pending</span>
                  <% } else if (order.payment_status === 'canceled') { %>
                  <span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] font-bold rounded-full uppercase">Canceled</span>
                  <% } else { %>
                  <span class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant text-[11px] font-bold rounded-full uppercase"><%= order.payment_status %></span>
                  <% } %>
                </td>
                <td class="py-4 px-4 text-center">
                  <% if (order.fulfillment_status === 'fulfilled') { %>
                  <span class="px-3 py-1 bg-secondary-fixed text-on-secondary-fixed-variant text-[11px] font-bold rounded-full uppercase">Fulfilled</span>
                  <% } else if (order.fulfillment_status === 'unfulfilled') { %>
                  <span class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant text-[11px] font-bold rounded-full uppercase">Unfulfilled</span>
                  <% } else { %>
                  <span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] font-bold rounded-full uppercase"><%= order.fulfillment_status %></span>
                  <% } %>
                </td>
                <td class="py-4 px-4 text-right font-headline font-bold">$<%= parseFloat(order.total).toFixed(2) %></td>
                <td class="py-4 px-4 text-right">
                  <a href="/orders/<%= order.id %>" class="opacity-0 group-hover:opacity-100 p-1 hover:bg-white rounded transition-all inline-block">
                    <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                  </a>
                </td>
              </tr>
              <% }) %>
            </tbody>
          </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 flex items-center justify-between bg-surface-container/10 border-t border-outline-variant/10">
          <span class="text-xs text-on-surface-variant font-medium">Showing <%= orders.length %> of <%= total_count %> orders</span>
          <div class="flex items-center gap-2">
            <% if (page > 1) { %>
            <a href="/orders?filter=<%= filter %>&page=<%= page-1 %>" class="w-8 h-8 rounded border border-outline-variant/20 flex items-center justify-center text-on-surface-variant hover:bg-white transition-colors">
              <span class="material-symbols-outlined text-[18px]">chevron_left</span>
            </a>
            <% } %>
            <% for (let p = Math.max(1, page-1); p <= Math.min(totalPages, page+1); p++) { %>
            <a href="/orders?filter=<%= filter %>&page=<%= p %>" class="w-8 h-8 rounded border border-outline-variant/20 flex items-center justify-center text-xs font-<%= p === page ? 'bold text-primary bg-white shadow-sm' : 'medium hover:bg-white' %>">
              <%= p %>
            </a>
            <% } %>
            <% if (page < totalPages) { %>
            <a href="/orders?filter=<%= filter %>&page=<%= page+1 %>" class="w-8 h-8 rounded border border-outline-variant/20 flex items-center justify-center text-on-surface-variant hover:bg-white transition-colors">
              <span class="material-symbols-outlined text-[18px]">chevron_right</span>
            </a>
            <% } %>
          </div>
        </div>
      </div>

      <!-- Quick Insight -->
      <div class="flex flex-col md:flex-row gap-8 mb-12">
        <div class="md:w-2/3 bg-primary text-on-primary p-8 rounded-2xl relative overflow-hidden flex flex-col justify-between h-64">
          <div class="relative z-10">
            <h2 class="text-2xl font-headline font-bold mb-2">Automate your fulfillment</h2>
            <p class="text-on-primary/80 max-w-sm">Connect with 20+ shipping providers to streamline your process and reduce delivery time by 30%.</p>
          </div>
          <div class="relative z-10">
            <button class="px-6 py-3 bg-white text-primary font-bold rounded-xl active:scale-95 transition-transform text-sm">Explore Apps</button>
          </div>
          <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-primary-container/30 rounded-full blur-3xl"></div>
          <div class="absolute right-8 top-8 opacity-20">
            <span class="material-symbols-outlined text-[120px]">local_shipping</span>
          </div>
        </div>
        <div class="md:w-1/3 bg-white p-8 rounded-2xl border border-outline-variant/10 shadow-sm flex flex-col gap-4">
          <h3 class="font-headline font-bold text-lg text-on-surface">Need help?</h3>
          <p class="text-sm text-on-surface-variant">Check our guide on managing high-volume order cycles during peak seasons.</p>
          <a class="text-primary font-bold text-sm flex items-center gap-1 group hover:gap-2 transition-all" href="#">
            Read Merchant Guide
            <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
          </a>
        </div>
      </div>

    </div>
  </main>
</div>

<!-- Create Order Modal -->
<div id="create-order-modal" class="hidden fixed inset-0 bg-on-surface/40 z-50 flex items-center justify-center p-4">
  <div class="bg-white rounded-2xl p-8 w-full max-w-md shadow-2xl editorial-shadow">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-bold font-headline">Create New Order</h3>
      <button onclick="document.getElementById('create-order-modal').classList.add('hidden')" class="p-2 hover:bg-surface-container rounded-lg">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>
    <form action="/orders" method="POST" class="space-y-4">
      <div>
        <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Customer Name</label>
        <input name="customer_name" type="text" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary transition-all" placeholder="Full Name" required/>
      </div>
      <div>
        <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Customer Email</label>
        <input name="customer_email" type="email" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary transition-all" placeholder="email@example.com"/>
      </div>
      <div>
        <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Order Total ($)</label>
        <input name="total" type="number" step="0.01" min="0" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary transition-all" placeholder="0.00" required/>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Payment</label>
          <select name="payment_status" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary transition-all">
            <option value="paid">Paid</option>
            <option value="pending" selected>Pending</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Fulfillment</label>
          <select name="fulfillment_status" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary transition-all">
            <option value="unfulfilled" selected>Unfulfilled</option>
            <option value="fulfilled">Fulfilled</option>
          </select>
        </div>
      </div>
      <div class="flex gap-3 pt-2">
        <button type="button" onclick="document.getElementById('create-order-modal').classList.add('hidden')"
          class="flex-1 py-3 bg-secondary-container text-on-secondary-container font-bold rounded-xl text-sm">Cancel</button>
        <button type="submit" class="flex-1 py-3 bg-gradient-to-r from-primary to-primary-container text-white font-bold rounded-xl text-sm shadow-lg">Create Order</button>
      </div>
    </form>
  </div>
</div>

<!-- FAB -->
<button onclick="document.getElementById('create-order-modal').classList.remove('hidden')"
  class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-on-primary rounded-full shadow-2xl flex items-center justify-center hover:scale-110 active:scale-90 transition-all z-40 group">
  <span class="material-symbols-outlined" style="font-variation-settings:'wght' 600;">add</span>
  <span class="absolute right-full mr-4 bg-on-surface text-white px-3 py-1.5 rounded-lg text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">New Quick Order</span>
</button>
</body>
</html>
