<div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
        <thead>
            <tr>
                <th width="70" class="text-center">#</th>
                <th>Nama Produk</th>
                @if(isset($readonly) && $readonly)
                <th width="120" class="text-center">Cabang</th>
                @endif
                <th width="150" class="text-center">Kategori</th>
                <th width="120" class="text-center">Stok</th>
                <th width="180" class="text-right">Harga Beli</th>
                <th width="180" class="text-right">Harga Jual</th>
                <th width="100" class="text-center">Gambar</th>
                @if(!isset($readonly) || !$readonly)
                <th width="120" class="text-center">Aksi</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @foreach($products as $index => $p)
            <tr class="align-middle" data-branch="{{ $p->branch ?? '' }}">
                <td class="text-center text-muted font-weight-bold">{{ $loop->iteration }}</td>
                <td>
                    <div class="font-weight-bold">{{ $p->name }}</div>
                </td>
                @if(isset($readonly) && $readonly)
                <td class="text-center">
                    <span class="badge badge-info">{{ $p->branch }}</span>
                </td>
                @endif
                <td class="text-center">
                    @php
                        $categoryClass = 'badge-' . $p->category;
                        $icon = $p->category == 'makanan' ? '🍛' : ($p->category == 'minuman' ? '☕' : '🍿');
                    @endphp
                    <span class="badge {{ $categoryClass }} px-3 py-2" style="border-radius: 8px;">
                        {{ $icon }} {{ ucfirst($p->category) }}
                    </span>
                </td>
                <td class="text-center font-weight-bold">
                    {{ $p->stocks->first()->quantity ?? 0 }} Pcs
                </td>
                <td class="text-right font-weight-bold text-muted">Rp{{ number_format($p->purchase_price, 0, ',', '.') }}</td>
                <td class="text-right font-weight-bold" style="color: #ff5e00;">Rp{{ number_format($p->selling_price, 0, ',', '.') }}</td>
                <td class="text-center">
                    <img src="{{ $p->image ?? '/img/default-product.jpg' }}" style="width:45px;height:45px;object-fit:cover;border-radius:10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);" alt="{{ $p->name }}">
                </td>
                @if(!isset($readonly) || !$readonly)
                <td class="text-center">
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-link text-warning edit-product-btn"
                            data-product="{{ json_encode(['id' => $p->id, 'name' => $p->name, 'category' => $p->category, 'purchase_price' => $p->purchase_price, 'selling_price' => $p->selling_price]) }}"
                            data-recipes="{{ json_encode($p->recipes->map(function($r){ return ['raw_material_id' => $r->raw_material_id, 'quantity_needed' => $r->quantity_needed]; })->toArray()) }}"
                            title="Edit">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-link text-danger" title="Hapus" onclick="if(confirm('Yakin ingin menghapus?')) document.getElementById('delete-form-{{ $p->id }}').submit();">
                            <i class="fas fa-trash fa-lg"></i>
                        </button>
                        <form id="delete-form-{{ $p->id }}" action="/produk/{{ $p->id }}" method="POST" style="display: none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </div>
                </td>
                @endif
            </tr>
            @endforeach
            @if($products->isEmpty())
            <tr>
                <td colspan="{{ (isset($readonly) && $readonly) ? 8 : 7 }}" class="text-center py-4 text-muted">Belum ada menu yang terdaftar.</td>
            </tr>
            @endif
        </tbody>
    </table>
</div>
