@extends('layout.user')

@section('content')
<div class="max-w-6xl mx-auto px-3 py-3 space-y-3">
  <div class="flex items-center justify-between">
    <h1 class="text-lg font-extrabold text-slate-900">Vendor Product Page</h1>
    <a href="{{ route('vendor-ship.profile') }}" class="text-sm font-bold text-blue-700">Back</a>
  </div>

  @if(session('success'))
    <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-emerald-800 text-sm">{{ session('success') }}</div>
  @endif

  <div class="flex flex-wrap gap-2">
    <a href="{{ route('vendor-ship.products.create') }}" class="inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-white font-bold hover:bg-indigo-700">Upload Product</a>
    <a href="{{ route('vendor-ship.products.index') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-white font-bold hover:bg-slate-900">All Product</a>
    <a href="{{ route('vendor-ship.products.pending') }}" class="inline-flex items-center rounded-lg bg-amber-600 px-4 py-2 text-white font-bold hover:bg-amber-700">Pending Product</a>
    <a href="{{ route('vendor-ship.products.approved') }}" class="inline-flex items-center rounded-lg bg-emerald-600 px-4 py-2 text-white font-bold hover:bg-emerald-700">All Approved Product</a>
    <a href="{{ route('vendor-ship.products.rejected') }}" class="inline-flex items-center rounded-lg bg-rose-600 px-4 py-2 text-white font-bold hover:bg-rose-700">Rejected Product</a>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
    <div class="rounded-xl border border-slate-200 bg-white p-3"><div class="text-xs text-slate-500">All Product</div><div class="text-2xl font-extrabold">{{ (int)($summary->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 Product</div><div class="text-2xl font-extrabold text-amber-800">{{ (int)($summary->pending ?? 0) }}</div></div>
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-3"><div class="text-xs text-emerald-700">All Approved Product</div><div class="text-2xl font-extrabold text-emerald-800">{{ (int)($summary->approved ?? 0) }}</div></div>
    <div class="rounded-xl border border-rose-200 bg-rose-50 p-3"><div class="text-xs text-rose-700">Rejected Product</div><div class="text-2xl font-extrabold text-rose-800">{{ (int)($summary->rejected ?? 0) }}</div></div>
  </div>

  <div class="rounded-xl border border-slate-200 bg-white overflow-auto">
    <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">Image</th>
        <th class="px-3 py-2 text-left">Title</th>
        <th class="px-3 py-2 text-left">Category</th>
        <th class="px-3 py-2 text-left">Admin Price</th>
        <th class="px-3 py-2 text-left">Seller Price</th>
        <th class="px-3 py-2 text-left">Sizes</th>
        <th class="px-3 py-2 text-left">Status</th>
        <th class="px-3 py-2 text-left">Action</th>
      </tr>
      </thead>
      <tbody>
      @forelse($products as $p)
        <tr class="border-t border-slate-100">
          <td class="px-3 py-2"><img src="{{ $p->main_image_url }}" class="w-12 h-12 rounded object-cover border border-slate-200" alt=""></td>
          <td class="px-3 py-2">{{ $p->title }}</td>
          <td class="px-3 py-2">{{ $p->category->name ?? '-' }}</td>
          <td class="px-3 py-2">?{{ number_format((float)$p->admin_price, 2) }}</td>
          <td class="px-3 py-2">?{{ number_format((float)$p->seller_price, 2) }}</td>
          <td class="px-3 py-2">{{ $p->sizes_text }}</td>
          <td class="px-3 py-2">{{ ucfirst($p->status) }}</td>
          <td class="px-3 py-2">
            <div class="flex items-center gap-2">
              <a href="{{ route('vendor-ship.products.edit', $p->id) }}" class="inline-flex rounded-md bg-indigo-600 px-2.5 py-1.5 text-white text-xs">Edit</a>
              <form method="POST" action="{{ route('vendor-ship.products.destroy', $p->id) }}" onsubmit="return confirm('Delete this product?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="inline-flex rounded-md bg-rose-600 px-2.5 py-1.5 text-white text-xs">Delete</button>
              </form>
            </div>
          </td>
        </tr>
      @empty
        <tr><td colspan="8" class="px-3 py-6 text-center text-slate-500">No products found.</td></tr>
      @endforelse
      </tbody>
    </table>
  </div>

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