@extends('layouts.admin')
@section('title', 'All Products')

@section('content')
@php
  $select = 'h-11 px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500';
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <span>Products</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">All products</span>
</div>

{{-- Success message --}}
@if (session('success'))
  <div class="px-4 py-3 rounded-xl bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30 text-sm font-medium">
    {{ session('success') }}
  </div>
@endif

<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">

  {{-- Search + Filter --}}
  <div class="p-5 flex flex-col xl:flex-row gap-4 xl:items-center xl:justify-between border-b border-slate-200 dark:border-slate-800">
    <form method="GET" class="flex flex-wrap gap-3">
      <input type="text" name="q" value="{{ request('q') }}" placeholder="Search name or code…" class="{{ $select }} w-full sm:w-64">

      <select name="category" class="{{ $select }}">
        <option value="">All categories</option>
        @foreach ($categories as $c)
          <option value="{{ $c->id }}" @selected(request('category') == $c->id)>{{ $c->name }}</option>
        @endforeach
      </select>

      <select name="brand" class="{{ $select }}">
        <option value="">All brands</option>
        @foreach ($brands as $b)
          <option value="{{ $b->id }}" @selected(request('brand') == $b->id)>{{ $b->name }}</option>
        @endforeach
      </select>

      <button class="h-11 px-5 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold hover:opacity-90">Search</button>

      @if (request()->hasAny(['q', 'category', 'brand']))
        <a href="{{ route('admin.products.index') }}" class="h-11 px-4 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800">Reset</a>
      @endif
    </form>

    <a href="{{ route('admin.products.create') }}" class="h-11 px-6 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold text-sm shadow-lg shadow-brand-500/25 hover:opacity-90">+ Create Product</a>
  </div>

  {{-- Table --}}
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
        <tr>
          <th class="px-5 py-3">Product</th>
          <th class="px-3">Code</th>
          <th class="px-3">Category</th>
          <th class="px-3">Brand</th>
          <th class="px-3 text-right">Cost</th>
          <th class="px-3 text-right">Price</th>
          <th class="px-3 text-right">Stock</th>
          <th class="px-5 text-right">Action</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse ($products as $p)
          @php $unit = $p->unit?->short_name; @endphp
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-5 py-3">
              <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 overflow-hidden grid place-items-center shrink-0">
                  @if ($p->image)
                    <img src="{{ asset('storage/' . $p->image) }}" alt="{{ $p->name }}" class="w-full h-full object-cover">
                  @else
                    <svg class="w-6 h-6 text-slate-400" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg>
                  @endif
                </div>
                <span class="font-semibold">{{ $p->name }}</span>
              </div>
            </td>
            <td class="px-3 text-slate-500">{{ $p->code }}</td>
            <td class="px-3">{{ $p->category->name }}</td>
            <td class="px-3">{{ $p->brand->name ?? '—' }}</td>
            <td class="px-3 text-right">{{ number_format($p->cost, 2) }}</td>
            <td class="px-3 text-right font-semibold">{{ number_format($p->price, 2) }}<span class="text-xs font-normal text-slate-500">{{ $unit ? ' / ' . $unit : '' }}</span></td>
            <td class="px-3 text-right">
              @if ($p->stock_qty <= 0)
                <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-red-500/10 text-red-500">Out of stock</span>
              @elseif ($p->stock_qty <= $p->stock_alert)
                <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-600 dark:text-amber-400">Low · {{ $p->stock_qty }} {{ $unit }}</span>
              @else
                <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">{{ $p->stock_qty }} {{ $unit }}</span>
              @endif
            </td>
            <td class="px-5 text-right whitespace-nowrap">
              <a href="{{ route('admin.products.edit', $p) }}" class="inline-flex items-center h-9 px-3 rounded-lg text-brand-600 dark:text-brand-400 font-semibold hover:bg-brand-500/10">Edit</a>
              <form action="{{ route('admin.products.destroy', $p) }}" method="POST" class="inline" onsubmit="return confirm('Ei product delete korben?')">
                @csrf
                @method('DELETE')
                <button class="h-9 px-3 rounded-lg text-red-500 font-semibold hover:bg-red-500/10">Delete</button>
              </form>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="8" class="px-5 py-16 text-center text-slate-500">
              Kono product paoa jayni.
              <a href="{{ route('admin.products.create') }}" class="text-brand-600 dark:text-brand-400 font-semibold">Notun product add koro</a>
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- Pagination --}}
  @if ($products->hasPages())
    <div class="p-4 border-t border-slate-200 dark:border-slate-800">
      {{ $products->links() }}
    </div>
  @endif
</div>
@endsection