@extends('layouts.app')

@section('content')

<div class="d-flex justify-content-between mb-3">
    <h2>Products</h2>

    <a href="{{ route('products.create') }}" class="btn btn-primary">
        Add Product
    </a>
</div>

<table class="table table-bordered table-striped">

    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Stock</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>

        @foreach($products as $product)

        <tr>
            <td>{{ $product->id }}</td>
            <td>{{ $product->name }}</td>
            <td>{{ $product->price }}</td>
            <td>{{ $product->stock }} {{ $product->unitLabel() }}</td>
            <td>

                <a href="{{ route('products.edit', $product->id) }}"
                   class="btn btn-warning btn-sm">
                   Edit
                </a>

                <form action="{{ route('products.destroy', $product->id) }}"
                      method="POST"
                      class="d-inline">

                    @csrf
                    @method('DELETE')

                    <button class="btn btn-danger btn-sm">
                        Delete
                    </button>

                </form>

            </td>
        </tr>

        @endforeach

    </tbody>

</table>

@endsection