@extends('layouts.admin')

@section('title', 'Kelola Produk')
@section('page_title', 'Produk')
@section('breadcrumb') Daftar Produk @endsection

@section('topbar_actions')
    <a href="{{ route('admin.products.create') }}" class="btn-topbar-primary btn-topbar-pink">
        <i class="bi bi-plus-circle-fill"></i>
        <span class="d-none d-sm-inline">Tambah Produk</span>
    </a>
@endsection

@section('content')
<div class="card-admin">
    <div class="card-header-admin">
        <div>
            <h5 style="font-size: 1rem;">Daftar Semua Produk</h5>
            <p class="text-muted small mb-0">Kelola seluruh produk yang tersedia di katalog toko</p>
        </div>
        <span class="badge-pink">{{ count($products) }} Produk</span>
    </div>

    <div class="table-responsive">
        <table class="table table-admin mb-0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Gambar</th>
                    <th>Nama Produk</th>
                    <th>Kategori</th>
                    <th>Harga</th>
                    <th class="text-center">Stok</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($products as $product)
                <tr>
                    <td>
                        <span class="badge-pink" style="background:#f1f5f9;color:#64748b;border-color:#e2e8f0;">{{ $product->id }}</span>
                    </td>
                    <td>
                        @if($product->image)
                            @php
                                $adminTableImg = \Illuminate\Support\Str::startsWith($product->image, ['http://', 'https://'])
                                    ? $product->image
                                    : asset('storage/' . $product->image);
                            @endphp
                            <img src="{{ $adminTableImg }}"
                                 alt="{{ $product->name }}"
                                 style="width:52px;height:52px;object-fit:cover;border-radius:12px;border:1px solid #fce7f3;"
                                 onerror="this.onerror=null; this.src='https://placehold.co/100x100?text=No+Image';">
                        @else
                            <div style="width:52px;height:52px;border-radius:12px;background:#fdf2f8;border:1px solid #fce7f3;display:flex;align-items:center;justify-content:center;color:#f9a8d4;">
                                <i class="bi bi-image fs-5"></i>
                            </div>
                        @endif
                    </td>
                    <td>
                        <div class="fw-semibold text-dark" style="max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            {{ $product->name }}
                        </div>
                    </td>
                    <td>
                        @if($product->category)
                            <span class="badge-pink">{{ $product->category->name }}</span>
                        @else
                            <span class="text-muted small">—</span>
                        @endif
                    </td>
                    <td class="fw-bold" style="color: #db2777;">
                        Rp {{ number_format($product->price, 0, ',', '.') }}
                    </td>
                    <td class="text-center">
                        <span class="{{ $product->stock > 0 ? 'badge-pink' : '' }}"
                              style="{{ $product->stock <= 0 ? 'background:#fff1f2;color:#be123c;border:1px solid #fecdd3;padding:0.25rem 0.65rem;border-radius:9999px;font-size:0.72rem;font-weight:700;' : '' }}">
                            {{ $product->stock }}
                        </span>
                    </td>
                    <td class="text-center">
                        @if($product->is_active)
                            <span style="background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;padding:0.28rem 0.65rem;border-radius:9999px;font-size:0.72rem;font-weight:700;">Aktif</span>
                        @else
                            <span style="background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;padding:0.28rem 0.65rem;border-radius:9999px;font-size:0.72rem;font-weight:700;">Nonaktif</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center gap-1">
                            <a href="{{ route('admin.products.show', $product->id) }}" class="btn-pink-soft py-1 px-2" style="font-size:0.8rem;" title="Lihat Detail">
                                <i class="bi bi-eye-fill"></i>
                            </a>
                            <a href="{{ route('admin.products.edit', $product->id) }}" class="btn-pink-soft py-1 px-2" style="font-size:0.8rem;" title="Edit Produk">
                                <i class="bi bi-pencil-fill"></i>
                            </a>
                            <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus produk {{ $product->name }}?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-topbar-danger btn-topbar-pink py-1 px-2" style="font-size:0.8rem;border-radius:8px;" title="Hapus">
                                    <i class="bi bi-trash3-fill"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5 text-muted">
                        <i class="bi bi-box-seam fs-1 d-block mb-2 opacity-25"></i>
                        Belum ada produk. Tambahkan produk pertama Anda!
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection