@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">Pending Products</h1>
    <a href="{{ route('vendor-ship.products.index') }}" 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="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"><span class="font-bold text-amber-700">Pending</span></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 pending products.</td></tr>
      @endforelse
      </tbody>
    </table>
  </div>

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