@extends('layouts.admin')
@section('title', 'Orders')

@section('content')

<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">Orders</h1>
    <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">{{ $orders->total() }} total orders</p>
  </div>
  <a href="{{ route('admin.orders.create') }}" class="btn btn-primary btn-sm">
    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
    </svg>
    New Order
  </a>
</div>

<div class="card" style="padding:.875rem 1.25rem;margin-bottom:1rem">
  <form method="GET" style="display:flex;flex-wrap:wrap;gap:.625rem;align-items:center">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search order number..."
      class="input" style="width:220px">
    <select name="status" class="select" style="width:140px">
      <option value="">All Statuses</option>
      @foreach(['pending','paid','failed','refunded','cancelled'] as $s)
      <option value="{{ $s }}" @selected(request('status')===$s)>{{ ucfirst($s) }}</option>
      @endforeach
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Filter</button>
    @if(request()->anyFilled(['search','status']))
    <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost btn-sm">Clear</a>
    @endif
  </form>
</div>

<div class="card">
  <table style="width:100%;border-collapse:collapse">
    <thead>
      <tr style="border-bottom:1px solid var(--border)">
        <th class="th">Order</th>
        <th class="th">Customer</th>
        <th class="th">Status</th>
        <th class="th" style="text-align:right">Total</th>
        <th class="th">Payment</th>
        <th class="th">Date</th>
        <th class="th"></th>
      </tr>
    </thead>
    <tbody>
      @forelse($orders as $order)
      <tr class="trow">
        <td class="td">
          <div style="font-weight:700;color:var(--foreground);font-size:.8rem">{{ $order->order_number }}</div>
        </td>
        <td class="td">
          <div style="display:flex;align-items:center;gap:.5rem">
            <div class="avatar" style="width:24px;height:24px;font-size:.6rem;border-radius:.35rem">
              {{ strtoupper(substr($order->user->name??'-',0,1)) }}
            </div>
            <span style="font-size:.78rem;font-weight:500;color:var(--foreground)">{{ $order->user->name??'-' }}</span>
          </div>
        </td>
        <td class="td">
          <span class="badge {{ match($order->status){'paid'=>'b-green','pending'=>'b-yellow','refunded'=>'b-blue','failed'=>'b-red','cancelled'=>'b-gray',default=>'b-gray'} }}">
            {{ ucfirst($order->status) }}
          </span>
        </td>
        <td class="td" style="text-align:right;font-weight:800;color:var(--foreground)">{{ $currencySymbol }}{{ number_format($order->total,2) }}</td>
        <td class="td" style="font-size:.75rem;color:var(--muted-foreground)">{{ ucfirst($order->payment_method??'-') }}</td>
        <td class="td" style="font-size:.75rem;color:var(--muted-foreground);white-space:nowrap">{{ $order->created_at->format('M d, Y') }}</td>
        <td class="td">
          <a href="{{ route('admin.orders.show',$order) }}" class="btn btn-secondary btn-xs">View <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
        </td>
      </tr>
      @empty
      <tr><td colspan="7" style="padding:3rem;text-align:center;color:var(--muted-foreground);font-size:.8rem">No orders found.</td></tr>
      @endforelse
    </tbody>
  </table>
  <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border)">{{ $orders->links() }}</div>
</div>

@endsection
