@extends('layouts.app')
@section('title', 'Daftar Produk')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1">Daftar Produk</h4>
        <p class="text-muted mb-0">Kelola semua produk yang akan diuji</p>
    </div>
    <a href="{{ route('products.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg"></i> Tambah Produk
    </a>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th width="50">No.</th>
                        <th>Nama Produk</th>
                        <th>Kode</th>
                        <th>Kategori</th>
                        <th>Status</th>
                        <th>Total Test</th>
                        <th width="150">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $i => $product)
                    <tr>
                        <td class="text-muted">{{ $i + 1 }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($product->image)
                                <img src="{{ Storage::url($product->image) }}" width="36" height="36"
                                    style="border-radius:8px;object-fit:cover">
                                @else
                                <div style="width:36px;height:36px;background:#e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center">
                                    <i class="bi bi-box text-muted"></i>
                                </div>
                                @endif
                                <div>
                                    <div class="fw-medium">{{ $product->name }}</div>
                                    <small class="text-muted">{{ Str::limit($product->description, 40) }}</small>
                                </div>
                            </div>
                        </td>
                        <td><code>{{ $product->code }}</code></td>
                        <td>{{ $product->category }}</td>
                        <td>
                            <span class="badge {{ $product->status === 'active' ? 'bg-success' : 'bg-secondary' }}">
                                {{ $product->status === 'active' ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>
                        <td>{{ $product->panelTests->count() }} test</td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('products.show', $product) }}"
                                    class="btn btn-sm btn-outline-info" title="Detail">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('products.edit', $product) }}"
                                    class="btn btn-sm btn-outline-warning" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form method="POST" action="{{ route('products.destroy', $product) }}"
                                    onsubmit="return confirm('Hapus produk ini?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Hapus">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="bi bi-box fs-2 d-block mb-2"></i>
                            Belum ada produk. <a href="{{ route('products.create') }}">Tambah sekarang</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
</div>
@endsection