<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div class="flex items-center">
                <div class="w-1 h-6 sm:h-8 rounded-full mr-3 gradient-primary"></div>
                <h2 class="text-xl sm:text-2xl font-bold text-slate-800 flex items-center gap-2">
                    <i class="fas fa-boxes" style="color: var(--brand-text);"></i>
                    <?php echo e(__('Kelola Produk')); ?>

                </h2>
            </div>
            <div class="flex gap-3 w-full sm:w-auto">
                <a href="<?php echo e(route('admin.product.create')); ?>"
                    class="flex-1 sm:flex-none inline-flex items-center justify-center px-5 py-2.5 text-white text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 gradient-primary">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah Produk
                </a>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="py-6 sm:py-8">
        <div class="space-y-4 sm:space-y-6">

            
            <?php if(session('error')): ?>
            <div class="mb-4 p-4 bg-gradient-to-r from-rose-600 to-red-600 text-white rounded-xl shadow-lg animate-fade-in flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <i class="fas fa-exclamation-circle text-xl"></i>
                    <span class="font-medium"><?php echo e(session('error')); ?></span>
                </div>
                <button onclick="this.parentElement.remove()" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <?php endif; ?>

            
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5 sm:p-6 transition-all duration-200 hover:shadow-md">
                <h3 class="text-base font-semibold text-slate-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-search" style="color: var(--brand-text);"></i>
                    Filter Produk
                </h3>
                <form method="GET" action="<?php echo e(route('admin.product.index')); ?>" class="flex flex-col lg:flex-row gap-3">
                    <div class="flex-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-search text-slate-400 text-sm"></i>
                        </div>
                        <input type="text"
                            name="search"
                            value="<?php echo e(request('search')); ?>"
                            placeholder="Cari produk berdasarkan nama atau ID..."
                            class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:border-transparent transition placeholder:text-slate-400">
                    </div>
                    <div class="w-full lg:w-64 relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-tag text-slate-400 text-sm"></i>
                        </div>
                        <select name="category"
                            class="w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:border-transparent appearance-none cursor-pointer text-slate-700">
                            <option value="">Semua Kategori</option>
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($category->category_id); ?>" <?php echo e(request('category') == $category->category_id ? 'selected' : ''); ?>>
                                <?php echo e($category->category_name); ?>

                            </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-slate-400 text-xs"></i>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit"
                            class="px-6 py-3 text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-2 whitespace-nowrap gradient-primary">
                            <i class="fas fa-search text-sm"></i>
                            <span>Cari</span>
                        </button>
                        <?php if(request('search') || request('category')): ?>
                        <a href="<?php echo e(route('admin.product.index')); ?>"
                            class="px-6 py-3 bg-slate-500 hover:bg-slate-600 text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-2 whitespace-nowrap">
                            <i class="fas fa-undo-alt text-sm"></i>
                            <span>Reset</span>
                        </a>
                        <?php endif; ?>
                    </div>
                </form>
            </div>

            
            <?php if($products->count() > 0): ?>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-gradient-to-r from-slate-50 to-white">
                            <tr>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Produk</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider hidden sm:table-cell">Kategori</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Harga</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider hidden md:table-cell">Stok</th>
                                <th class="px-4 sm:px-6 py-4 text-right text-xs font-semibold text-slate-600 uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                            $images = is_array($product->image) ? $product->image : json_decode($product->image, true);
                            ?>
                            <tr class="hover:bg-slate-50 transition-colors duration-200">
                                <td class="px-4 sm:px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16">
                                            <?php if($images && count($images) > 0): ?>
                                            <img class="w-full h-full rounded-xl object-cover shadow-sm border border-slate-200"
                                                src="<?php echo e(asset('storage/'.$images[0])); ?>"
                                                alt="<?php echo e($product->product_name); ?>">
                                            <?php else: ?>
                                            <div class="w-full h-full rounded-xl flex items-center justify-center shadow-sm border border-slate-200"
                                                style="background: linear-gradient(135deg, #fef3c7, #f5f0e8);">
                                                <i class="fas fa-image text-xl" style="color: var(--brand-text);"></i>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <div class="text-sm font-semibold text-slate-800 truncate"><?php echo e($product->product_name); ?></div>
                                            <div class="text-xs text-slate-500 mt-0.5 flex items-center gap-1">
                                                <i class="fas fa-hashtag text-[10px]"></i>
                                                <span>#<?php echo e($product->product_id); ?></span>
                                            </div>
                                            <div class="sm:hidden mt-2 space-y-1">
                                                <div class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs rounded-full border"
                                                    style="background: #fef3c7; color: var(--brand-text); border-color: #fcd34d;">
                                                    <i class="fas fa-tag text-[10px]"></i>
                                                    <span><?php echo e($product->category->category_name ?? 'N/A'); ?></span>
                                                </div>
                                                <div class="mt-1">
                                                    <?php if($product->stock > 10): ?>
                                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-50 text-emerald-700 text-xs rounded-full border border-emerald-200">
                                                        <i class="fas fa-check-circle text-[10px]"></i><?php echo e($product->stock); ?> unit
                                                    </span>
                                                    <?php elseif($product->stock > 0): ?>
                                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border"
                                                        style="background: #fef3c7; color: var(--brand-text); border-color: #fcd34d;">
                                                        <i class="fas fa-exclamation-triangle text-[10px]"></i><?php echo e($product->stock); ?> unit
                                                    </span>
                                                    <?php else: ?>
                                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-rose-50 text-rose-700 text-xs rounded-full border border-rose-200">
                                                        <i class="fas fa-times-circle text-[10px]"></i>Habis
                                                    </span>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap hidden sm:table-cell">
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full border"
                                        style="background: #fef3c7; color: var(--brand-text); border-color: #fcd34d;">
                                        <i class="fas fa-tag text-[10px]"></i>
                                        <?php echo e($product->category->category_name ?? 'N/A'); ?>

                                    </span>
                                </td>

                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-bold" style="color: var(--brand-text);">
                                        Rp <?php echo e(number_format($product->price, 0, ',', '.')); ?>

                                    </div>
                                </td>

                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap hidden md:table-cell">
                                    <?php if($product->stock > 10): ?>
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">
                                        <i class="fas fa-check-circle text-[10px]"></i><?php echo e($product->stock); ?> unit
                                    </span>
                                    <?php elseif($product->stock > 0): ?>
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full border"
                                        style="background: #fef3c7; color: var(--brand-text); border-color: #fcd34d;">
                                        <i class="fas fa-exclamation-triangle text-[10px]"></i><?php echo e($product->stock); ?> unit
                                    </span>
                                    <?php else: ?>
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 border border-rose-200">
                                        <i class="fas fa-times-circle text-[10px]"></i>Habis
                                    </span>
                                    <?php endif; ?>
                                </td>

                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center justify-end gap-1.5 sm:gap-2">
                                        <a href="<?php echo e(route('admin.product.edit', $product->product_id)); ?>"
                                            class="group relative w-8 h-8 sm:w-9 sm:h-9 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center"
                                            style="background: linear-gradient(135deg, #3b82f6, #2563eb);">
                                            <i class="fas fa-edit text-xs sm:text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">Edit</span>
                                        </a>
                                        <a href="<?php echo e(route('product.show', $product->product_id)); ?>"
                                            class="group relative w-8 h-8 sm:w-9 sm:h-9 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center gradient-primary">
                                            <i class="fas fa-eye text-xs sm:text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">Detail</span>
                                        </a>
                                        <button onclick="openDeleteModal('<?php echo e($product->product_id); ?>', '<?php echo e(addslashes($product->product_name)); ?>')"
                                            class="group relative w-8 h-8 sm:w-9 sm:h-9 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center"
                                            style="background: linear-gradient(135deg, #e11d48, #be123c);">
                                            <i class="fas fa-trash-alt text-xs sm:text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">Hapus</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <?php if($products->hasPages()): ?>
            <div class="mt-4">
                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <span class="text-xs text-slate-600">
                            Menampilkan <?php echo e($products->firstItem()); ?> - <?php echo e($products->lastItem()); ?>

                            dari <?php echo e($products->total()); ?> produk
                        </span>
                        <div class="flex items-center gap-1">
                            <?php echo e($products->onEachSide(1)->links()); ?>

                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <?php else: ?>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="py-12 sm:py-16 md:py-20 text-center">
                    <div class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 mx-auto rounded-2xl flex items-center justify-center shadow-sm border border-slate-200 mb-4 sm:mb-6"
                        style="background: linear-gradient(135deg, #f5f0e8, #faf7f2);">
                        <i class="fas fa-box-open text-4xl sm:text-5xl text-slate-400"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-slate-800 mb-2">Belum Ada Produk</h3>
                    <p class="text-sm text-slate-600 mb-6">Mulai dengan menambahkan produk pertama Anda.</p>
                    <a href="<?php echo e(route('admin.product.create')); ?>"
                        class="inline-flex items-center px-6 py-3 text-white text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 gradient-primary">
                        <i class="fas fa-plus mr-2"></i>Tambah Produk
                    </a>
                </div>
            </div>
            <?php endif; ?>

        </div>
    </div>

    
    <div id="deleteProductModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300">
        <div class="bg-white rounded-2xl max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0 shadow-2xl" id="deleteProductModalContent">
            <div class="p-6">
                <div class="text-center mb-4">
                    <div class="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-3">
                        <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-800">Hapus Produk</h3>
                </div>

                <p class="text-slate-500 text-center text-sm mb-2">Apakah Anda yakin ingin menghapus produk</p>
                <p class="text-center font-semibold text-slate-800 mb-6" id="deleteProductName"></p>

                <div class="flex gap-3">
                    <button onclick="closeDeleteModal()"
                        class="flex-1 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold rounded-xl transition-all duration-200">
                        Batal
                    </button>
                    <button id="confirmDeleteProductBtn"
                        class="flex-1 px-4 py-2.5 text-white text-sm font-semibold rounded-xl transition-all duration-200"
                        style="background: linear-gradient(135deg, #e11d48, #be123c);">
                        <i class="fas fa-trash-alt mr-1"></i> Hapus
                    </button>
                </div>
            </div>
        </div>
    </div>

    <form id="delete-product-form" action="" method="POST" style="display: none;">
        <?php echo csrf_field(); ?>
        <?php echo method_field('DELETE'); ?>
    </form>

    <?php $__env->startPush('scripts'); ?>
    <script>
        let currentProductId = null;

        function openDeleteModal(productId, productName) {
            currentProductId = productId;
            document.getElementById('deleteProductName').textContent = productName;
            document.getElementById('delete-product-form').action = "<?php echo e(route('admin.product.destroy', ':id')); ?>".replace(':id', productId);

            const modal = document.getElementById('deleteProductModal');
            const modalContent = document.getElementById('deleteProductModalContent');

            modal.classList.remove('hidden');
            modal.classList.add('flex');

            void modal.offsetHeight;

            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);

            document.body.style.overflow = 'hidden';
        }

        function closeDeleteModal() {
            const modal = document.getElementById('deleteProductModal');
            const modalContent = document.getElementById('deleteProductModalContent');

            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');

            setTimeout(() => {
                modal.classList.remove('flex');
                modal.classList.add('hidden');
                document.body.style.overflow = '';
                currentProductId = null;
            }, 300);
        }

        document.getElementById('confirmDeleteProductBtn').addEventListener('click', function() {
            if (currentProductId) {
                document.getElementById('delete-product-form').submit();
            }
        });

        document.getElementById('deleteProductModal').addEventListener('click', function(e) {
            if (e.target === this) closeDeleteModal();
        });

        document.addEventListener('keydown', function(e) {
            const modal = document.getElementById('deleteProductModal');
            if (e.key === 'Escape' && modal && modal.classList.contains('flex')) {
                closeDeleteModal();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.bg-gradient-to-r.from-emerald-600, .bg-gradient-to-r.from-rose-600');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.transition = 'opacity 0.5s ease';
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 500);
                }, 5000);
            });
        });
    </script>
    <?php $__env->stopPush(); ?>

    <style>
        @media (max-width: 640px) {
            .overflow-x-auto { -webkit-overflow-scrolling: touch; }
        }
        button, a, [role="button"], .group {
            touch-action: manipulation;
            min-height: 40px;
            min-width: 40px;
        }
        input, select, textarea { font-size: 16px !important; }
        .animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .overflow-x-auto::-webkit-scrollbar { height: 6px; }
        .overflow-x-auto::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        .overflow-x-auto::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .overflow-x-auto::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    </style>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\interia\resources\views/product/admin/index.blade.php ENDPATH**/ ?>