@extends('layout.app')

@section('content')
<div class="card shadow-sm border-0 rounded-4 overflow-hidden">
    <div class="card-header bg-white d-flex justify-content-between align-items-center p-4">
        <div>
            <h5 class="mb-0 fw-800">Katalog & Stok Produk</h5>
            <p class="text-muted small mb-0">Kelola produk dan pergerakan stok inventaris Anda.</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('products.stock.history') }}" class="btn btn-outline-secondary rounded-pill px-4 fw-bold">
                <i class="ti ti-history me-1"></i> Semua Riwayat Stok
            </a>
            <a href="{{ route('products.create') }}" class="btn btn-primary rounded-pill px-4 fw-bold">
                <i class="ti ti-plus me-1"></i> Tambah Produk
            </a>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4 py-3 border-0 text-muted small fw-800">PRODUK</th>
                        <th class="py-3 border-0 text-muted small fw-800">KATEGORI</th>
                        <th class="py-3 border-0 text-muted small fw-800">HARGA</th>
                        <th class="py-3 border-0 text-muted small fw-800">STOK SAAT INI</th>
                        <th class="pe-4 py-3 border-0 text-muted small fw-800 text-end">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $p)
                    <tr>
                        <td class="ps-4 py-4">
                            <div class="d-flex align-items-center gap-3">
                                @if($p->image)
                                    <img src="{{ asset('storage/'.$p->image) }}" width="52" height="52" class="rounded-3 border shadow-sm" style="object-fit:cover;">
                                @else
                                    <div class="bg-light rounded-3 border d-flex align-items-center justify-content-center" style="width:52px;height:52px;">
                                        <i class="ti ti-photo text-muted"></i>
                                    </div>
                                @endif
                                <div>
                                    <div class="fw-bold text-dark">{{ $p->name }}</div>
                                    <div class="text-muted small">{{ $p->description ? Str::limit($p->description, 40) : '' }}</div>
                                </div>
                            </div>
                        </td>
                        <td><span class="badge bg-primary bg-opacity-10 text-primary rounded-pill px-3 py-2 fw-bold" style="font-size:11px;">{{ $p->category->name }}</span></td>
                        <td class="fw-bold text-dark">Rp {{ number_format($p->price, 0, ',', '.') }}</td>
                        <td>
                            <span class="fw-800 fs-5 {{ $p->stock <= 5 ? 'text-danger' : 'text-success' }}">
                                {{ $p->stock }}
                            </span>
                            @if($p->stock <= 5)
                                <span class="badge bg-danger bg-opacity-10 text-danger ms-1 rounded-pill" style="font-size:10px;">Hampir Habis!</span>
                            @endif
                        </td>
                        <td class="pe-4 text-end">
                            <div class="d-flex justify-content-end gap-1">
                                {{-- TOMBOL KELOLA STOK (halaman tersendiri) --}}
                                <a href="{{ route('products.stock.detail', $p->id) }}" class="btn btn-sm btn-success rounded-3 px-3 fw-bold" title="Kelola Stok">
                                    <i class="ti ti-packages me-1"></i> Stok
                                </a>
                                <a href="{{ route('products.edit', $p) }}" class="btn btn-sm btn-light rounded-3 px-3 fw-bold" title="Edit Produk">
                                    <i class="ti ti-edit"></i>
                                </a>
                                <form action="{{ route('products.destroy', $p) }}" method="POST" onsubmit="return confirm('Yakin hapus produk ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger rounded-3 px-3 fw-bold" title="Hapus Produk">
                                        <i class="ti ti-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .fw-800 { font-weight: 800; }
    .table > :not(caption) > * > * { padding-top: 1rem; padding-bottom: 1rem; }
</style>
@endsection