<?php $__env->startSection('title', 'Daftar Produk'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Daftar Produk</h2>
            <p class="text-gray-500 mt-1">Kelola katalog produk toko Anda</p>
        </div>
        <a href="<?php echo e(route('produks.create')); ?>" 
           class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-medium rounded-xl shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transition-all duration-200 transform hover:-translate-y-0.5">
            <i class="bi bi-plus-lg"></i>
            Tambah Produk
        </a>
    </div>

    <!-- Success Alert -->
    <?php if(session('success')): ?>
        <div x-data="{ show: true }" x-show="show" x-transition class="flex items-center gap-3 px-5 py-4 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-800">
            <i class="bi bi-check-circle-fill text-emerald-500"></i>
            <span class="flex-1"><?php echo e(session('success')); ?></span>
            <button @click="show = false" class="text-emerald-400 hover:text-emerald-600 transition-colors">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
    <?php endif; ?>

    <!-- Empty State / Product Table -->
    <?php if($produks->isEmpty()): ?>
        <div class="flex flex-col items-center justify-center py-16 px-4 bg-white rounded-2xl border-2 border-dashed border-gray-200">
            <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                <i class="bi bi-box-seam text-3xl text-gray-400"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-700">Belum ada produk</h3>
            <p class="text-gray-500 mt-1 mb-4 text-center">Mulai tambahkan produk pertama Anda untuk mengisi katalog toko.</p>
            <a href="<?php echo e(route('produks.create')); ?>" class="px-5 py-2.5 bg-primary hover:bg-blue-600 text-white font-medium rounded-xl transition-colors">
                Tambah Produk Pertama
            </a>
        </div>
    <?php else: ?>
        <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden shadow-sm">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Foto</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Nama Produk</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Kategori</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Stok</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Harga</th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Varian</th>
                            <th scope="col" class="px-6 py-4 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                        <?php $__currentLoopData = $produks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $produk): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                                $varians = $produk->varians;
                                $minHarga = $varians->min('harga');
                                $maxHarga = $varians->max('harga');
                                $totalStok = $varians->sum('stok');
                                $varianUkuran = $varians->pluck('ukuran')->unique();
                            ?>
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                <!-- Foto -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex-shrink-0 h-12 w-12 rounded-lg overflow-hidden bg-gray-100">
                                        <?php if($produk->foto): ?>
                                            <img src="<?php echo e(asset('storage/' . $produk->foto)); ?>" 
                                                 alt="<?php echo e($produk->nama); ?>" 
                                                 class="h-full w-full object-cover">
                                        <?php else: ?>
                                            <div class="h-full w-full flex items-center justify-center">
                                                <i class="bi bi-image text-gray-400 text-lg"></i>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </td>

                                <!-- Nama Produk -->
                                <td class="px-6 py-4">
                                    <div class="text-sm font-medium text-gray-900"><?php echo e($produk->nama); ?></div>
                                    <?php if($totalStok == 0): ?>
                                        <span class="inline-flex items-center px-2 py-0.5 mt-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            Stok Habis
                                        </span>
                                    <?php elseif($totalStok < 5): ?>
                                        <span class="inline-flex items-center px-2 py-0.5 mt-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
                                            Stok Menipis
                                        </span>
                                    <?php endif; ?>
                                </td>

                                <!-- Kategori -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
                                        <i class="bi bi-tag text-xs"></i>
                                        <?php echo e($produk->kategori->nama); ?>

                                    </span>
                                </td>

                                <!-- Stok -->
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                    <div class="flex items-center gap-1.5">
                                        <i class="bi bi-box-seam text-gray-400"></i>
                                        <span class="font-medium text-gray-800"><?php echo e($totalStok); ?></span>
                                    </div>
                                </td>

                                <!-- Harga -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <?php if($minHarga && $maxHarga): ?>
                                        <?php if($minHarga == $maxHarga): ?>
                                            <div class="text-sm font-bold text-emerald-600">
                                                Rp <?php echo e(number_format($minHarga, 0, ',', '.')); ?>

                                            </div>
                                        <?php else: ?>
                                            <div class="text-sm font-semibold text-gray-800">
                                                <span class="text-emerald-600">Rp <?php echo e(number_format($minHarga, 0, ',', '.')); ?></span>
                                                <span class="text-gray-400 mx-1">-</span>
                                                <span class="text-emerald-600">Rp <?php echo e(number_format($maxHarga, 0, ',', '.')); ?></span>
                                            </div>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <span class="text-gray-400 text-xs italic">-</span>
                                    <?php endif; ?>
                                </td>

                                <!-- Varian -->
                                <td class="px-6 py-4">
                                    <?php if($varians->count()): ?>
                                        <div class="flex flex-wrap gap-1.5">
                                            <?php $__currentLoopData = $varianUkuran->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ukuran): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <span class="inline-flex px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-md">
                                                    <?php echo e($ukuran); ?>

                                                </span>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            <?php if($varianUkuran->count() > 3): ?>
                                                <span class="inline-flex px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded-md">
                                                    +<?php echo e($varianUkuran->count() - 3); ?>

                                                </span>
                                            <?php endif; ?>
                                            <span class="text-gray-400 text-xs ml-1">(<?php echo e($varians->count()); ?>)</span>
                                        </div>
                                    <?php else: ?>
                                        <span class="text-gray-400 text-xs italic">Tidak ada</span>
                                    <?php endif; ?>
                                </td>

                                <!-- Aksi -->
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="<?php echo e(route('produks.show', $produk->id)); ?>" 
                                           class="text-gray-500 hover:text-primary transition-colors" 
                                           title="Lihat Detail">
                                            <i class="bi bi-eye text-lg"></i>
                                        </a>
                                        <a href="<?php echo e(route('produks.edit', $produk->id)); ?>" 
                                           class="text-gray-500 hover:text-amber-500 transition-colors"
                                           title="Edit Produk">
                                            <i class="bi bi-pencil-square text-lg"></i>
                                        </a>
                                        <form action="<?php echo e(route('produks.destroy', $produk->id)); ?>" 
                                              method="POST" 
                                              class="inline-block"
                                              onsubmit="return confirm('Yakin ingin menghapus produk ini?')">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" 
                                                    class="text-gray-500 hover:text-red-600 transition-colors"
                                                    title="Hapus Produk">
                                                <i class="bi bi-trash text-lg"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        <?php if(method_exists($produks, 'links')): ?>
            <div class="mt-6">
                <?php echo e($produks->links()); ?>

            </div>
        <?php endif; ?>
    <?php endif; ?>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Toko-miftah\resources\views/produks/index.blade.php ENDPATH**/ ?>