@extends('layout.admin')

@section('content')
<div class="mx-auto px-2 sm:px-3 md:px-4 max-w-7xl space-y-3">
  <div class="flex items-center justify-between gap-2 flex-wrap mb-2 mt-0.5">
    <h1 class="text-lg font-semibold tracking-tight">Vendor Orders</h1>
    <div class="flex items-center gap-2">
      <a href="{{ route('admin.vendor-ship.vendors') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-700 px-3.5 py-2 text-white hover:bg-slate-800 text-sm">Vendor List</a>
      <a href="{{ route('admin.vendor-ship.products') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-indigo-700 bg-indigo-700 px-3.5 py-2 text-white hover:bg-indigo-800 text-sm">Vendor Products</a>
    </div>
  </div>

  <form method="GET" class="rounded-xl bg-white shadow-sm border border-gray-100 p-3">
    <div class="flex flex-wrap items-center gap-2">
      <input type="text" name="q" value="{{ $q ?? '' }}" placeholder="Search vendor name / referral code / mobile / user" class="w-full sm:w-[420px] rounded-lg border border-slate-300 px-3 py-2 text-sm">
      <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm bg-white">
        <option value="all" @selected($status==='all')>All Status</option>
        <option value="pending" @selected($status==='pending')>Pending</option>
        <option value="processing" @selected($status==='processing')>Processing</option>
        <option value="delivered" @selected($status==='delivered')>Delivered</option>
        <option value="cancelled" @selected($status==='cancelled')>Cancelled</option>
      </select>
      <button class="inline-flex items-center rounded-lg bg-blue-600 px-3.5 py-2 text-white text-sm font-semibold hover:bg-blue-700">Search</button>
      @if(!empty($q) || $status !== 'all')
        <a href="{{ route('admin.vendor-ship.orders') }}" class="inline-flex items-center rounded-lg bg-slate-200 px-3.5 py-2 text-slate-700 text-sm font-semibold hover:bg-slate-300">Reset</a>
      @endif
    </div>
  </form>

  <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
    <div class="rounded-xl border border-slate-200 bg-white p-3"><div class="text-xs text-slate-500">Total</div><div class="text-xl font-extrabold">{{ (int)($counts->total ?? 0) }}</div></div>
    <div class="rounded-xl border border-amber-200 bg-amber-50 p-3"><div class="text-xs text-amber-700">Pending</div><div class="text-xl font-extrabold text-amber-800">{{ (int)($counts->pending ?? 0) }}</div></div>
    <div class="rounded-xl border border-blue-200 bg-blue-50 p-3"><div class="text-xs text-blue-700">Processing</div><div class="text-xl font-extrabold text-blue-800">{{ (int)($counts->processing ?? 0) }}</div></div>
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-3"><div class="text-xs text-emerald-700">Delivered</div><div class="text-xl font-extrabold text-emerald-800">{{ (int)($counts->delivered ?? 0) }}</div></div>
    <div class="rounded-xl border border-rose-200 bg-rose-50 p-3"><div class="text-xs text-rose-700">Cancelled</div><div class="text-xl font-extrabold text-rose-800">{{ (int)($counts->cancelled ?? 0) }}</div></div>
  </div>

  @if(!empty($q))
    <div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-auto">
      <div class="px-4 py-3 border-b border-slate-100 font-bold">Vendor-wise matched order count</div>
      <table class="w-full min-w-[780px] text-sm">
        <thead class="bg-slate-50 text-slate-600">
          <tr>
            <th class="px-3 py-2 text-left">Vendor</th>
            <th class="px-3 py-2 text-left">User</th>
            <th class="px-3 py-2 text-left">Referral</th>
            <th class="px-3 py-2 text-left">Mobile</th>
            <th class="px-3 py-2 text-left">Total Orders</th>
          </tr>
        </thead>
        <tbody>
          @forelse($vendorSummary as $v)
            <tr class="border-t border-slate-100">
              <td class="px-3 py-2">{{ $v->vendor_name }}</td>
              <td class="px-3 py-2">{{ $v->user->name ?? '-' }}</td>
              <td class="px-3 py-2">{{ $v->user->referral_code ?? '-' }}</td>
              <td class="px-3 py-2">{{ $v->user->mobile ?? '-' }}</td>
              <td class="px-3 py-2 font-bold">{{ (int)$v->orders_count }}</td>
            </tr>
          @empty
            <tr><td colspan="5" class="px-3 py-6 text-center text-slate-500">No vendor matched your search.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  @endif

  <div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-auto">
    <div class="px-4 py-3 border-b border-slate-100 font-bold">All Orders</div>
    <table class="w-full min-w-[980px] text-sm">
      <thead class="bg-slate-50 text-slate-600">
        <tr>
          <th class="px-3 py-2 text-left">Order No</th>
          <th class="px-3 py-2 text-left">Vendor</th>
          <th class="px-3 py-2 text-left">User</th>
          <th class="px-3 py-2 text-left">Referral</th>
          <th class="px-3 py-2 text-left">Mobile</th>
          <th class="px-3 py-2 text-left">Status</th>
          <th class="px-3 py-2 text-left">Amount</th>
          <th class="px-3 py-2 text-left">Date</th>
          <th class="px-3 py-2 text-left">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($orders as $o)
          <tr class="border-t border-slate-100">
            <td class="px-3 py-2">{{ $o->order_no ?: ('#V' . $o->id) }}</td>
            <td class="px-3 py-2">{{ $o->vendorProfile->vendor_name ?? '-' }}</td>
            <td class="px-3 py-2">{{ $o->vendorProfile->user->name ?? '-' }}</td>
            <td class="px-3 py-2">{{ $o->vendorProfile->user->referral_code ?? '-' }}</td>
            <td class="px-3 py-2">{{ $o->vendorProfile->user->mobile ?? '-' }}</td>
            <td class="px-3 py-2">{{ ucfirst($o->status) }}</td>
            <td class="px-3 py-2">Tk {{ number_format((float)$o->total_amount, 2) }}</td>
            <td class="px-3 py-2">{{ optional($o->created_at)->format('d M Y, h:i A') }}</td>
            <td class="px-3 py-2">
              <a href="{{ route('admin.vendor-ship.orders.edit', $o->id) }}"
                 class="inline-flex items-center rounded-lg bg-indigo-600 px-3 py-1.5 text-white text-xs font-semibold hover:bg-indigo-700">
                Manage
              </a>
            </td>
          </tr>
        @empty
          <tr><td colspan="9" class="px-3 py-8 text-center text-slate-500">No vendor orders found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div>{{ $orders->links('vendor.pagination.custom-tailwind') }}</div>
</div>
@endsection
