@extends('layouts.admin')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="brand-font text-uppercase text-secondary mb-0">Inventory Catalog</h4>
    <a href="{{ route('admin.products.create') }}" data-turbo-frame="admin-content" class="btn btn-primary-mj rounded-pill px-4 btn-sm">
        <i class="bi bi-plus-circle me-1"></i> Add New Product
    </a>
</div>

<div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
    <!-- Table list -->
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr class="text-uppercase text-secondary small" style="font-size: 10px;">
                    <th scope="col">Image</th>
                    <th scope="col">Product Details</th>
                    <th scope="col">Type</th>
                    <th scope="col">Price</th>
                    <th scope="col" class="text-center">Stock</th>
                    <th scope="col">Status</th>
                    <th scope="col" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($products as $prod)
                    @php
                        $prodImg = mjs_image($prod->primaryImage?->image_path, $prod->id);
                    @endphp
                    <tr>
                        <td>
                            <img src="{{ $prodImg }}" class="rounded border" style="width: 50px; height: 50px; object-fit: cover;" alt="product">
                        </td>
                        <td>
                            <span class="text-danger text-uppercase fw-bold d-block" style="font-size: 9px;">{{ $prod->brand ?? 'Generic' }}</span>
                            <h6 class="fw-bold text-secondary mb-0" style="font-size: 14px;">{{ $prod->name }}</h6>
                        </td>
                        <td>
                            <span class="badge bg-secondary rounded-pill px-2.5 py-1 text-uppercase" style="font-size: 9px;">{{ str_replace('_', ' ', $prod->type) }}</span>
                        </td>
                        <td>
                            @if($prod->discount_price)
                                <span class="fw-bold text-danger">KSh {{ number_format($prod->discount_price) }}</span>
                                <span class="text-decoration-line-through text-muted small d-block" style="font-size: 10px;">KSh {{ number_format($prod->price) }}</span>
                            @else
                                <span class="fw-bold text-secondary">KSh {{ number_format($prod->price) }}</span>
                            @endif
                        </td>
                        <td class="text-center fw-bold text-secondary">
                            {{ $prod->stock_quantity }}
                        </td>
                        <td>
                            @if($prod->stock_quantity > 0)
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1" style="font-size: 9px;">In Stock</span>
                            @else
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1" style="font-size: 9px;">Out of Stock</span>
                            @endif
                        </td>
                        <td class="text-end">
                            @include('partials.admin-crud-actions', [
                                'view' => route('admin.products.show', $prod->id),
                                'edit' => route('admin.products.edit', $prod->id),
                                'destroy' => route('admin.products.destroy', $prod->id),
                                'deleteTitle' => 'Delete this product?',
                                'deleteText' => 'This will permanently remove the product and all its images.',
                            ])
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center mt-4">
        {{ $products->links('pagination::bootstrap-5') }}
    </div>
</div>

@endsection
