@extends('layouts.admin')

@section('page_title', 'Manage Products (Partitions)')

@section('content')
<div class="mb-4 d-flex align-items-center justify-content-between">
    <h2 class="h4 fw-bold text-dark mb-0">Product Catalog</h2>
    {{-- Optional: <a href="{{ route('admin.products.create') }}" class="btn btn-primary rounded-pill px-4">Add Product</a> --}}
</div>

<div class="bg-white overflow-hidden shadow-sm rounded-4 border">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="bg-light">
                <tr>
                    <th class="px-4 py-3 text-secondary small text-uppercase fw-bold">SKU</th>
                    <th class="px-4 py-3 text-secondary small text-uppercase fw-bold">Image</th>
                    <th class="px-4 py-3 text-secondary small text-uppercase fw-bold">Name</th>
                    <th class="px-4 py-3 text-secondary small text-uppercase fw-bold">Base Price</th>
                    <th class="px-4 py-3 text-secondary small text-uppercase fw-bold text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($products as $p)
                <tr>
                    <td class="px-4 py-3 fw-bold text-muted small">{{ $p->sku }}</td>
                    <td class="px-4 py-3">
                        @if($p->image_path)
                            <img src="{{ Storage::url($p->image_path) }}" class="rounded shadow-sm" style="width: 50px; height: 50px; object-fit: contain; background: #f8fafc;" alt="">
                        @else
                            <div class="bg-light rounded text-muted text-center flex items-center justify-center p-2" style="width:50px; height:50px; font-size:10px;">NO IMG</div>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        <div class="fw-bold text-dark mb-0">{{ $p->name }}</div>
                        <div class="text-muted small">{{ $p->material }} | {{ $p->type }}</div>
                    </td>
                    <td class="px-4 py-3 fw-extrabold text-primary">${{ number_format($p->base_price_1_stall, 2) }}</td>
                    <td class="px-4 py-3 text-end">
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.products.edit', $p->id) }}" class="btn btn-sm btn-outline-dark rounded-pill px-3">Edit</a>
                            <form action="{{ route('admin.products.destroy', $p->id) }}" method="POST" onsubmit="return confirm('Delete this product?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3">Del</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="p-4 bg-light border-top">
        {{ $products->links() }}
    </div>
</div>
@endsection