@extends('layout')

@section('content')
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
    <h2>Products</h2>
    <a class="btn btn-primary" href="{{ route('products.create') }}">Add Product</a>
  </div>

  @if($products->isEmpty())
    <p>No products yet. Add your first product.</p>
  @else
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Price</th>
            <th>Stock</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach($products as $p)
            <tr>
              <td>{{ $p->name }}</td>
              <td>{{ optional($p->category)->name ?? '—' }}</td>
              <td>{{ number_format($p->price, 2) }}</td>
              <td>{{ $p->stock ?? '—' }}</td>
              <td>
                <a class="btn btn-secondary" href="{{ route('products.show', $p) }}">View</a>
                <a class="btn btn-secondary" href="{{ route('products.edit', $p) }}">Edit</a>
                <form method="post" action="{{ route('products.destroy', $p) }}" style="display:inline" onsubmit="return confirm('Delete product?');">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-danger" type="submit">Delete</button>
                </form>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <div style="margin-top:12px;">
      {{ $products->links() }}
    </div>
  @endif
@endsection