<?php $__env->startSection('title', 'All Products'); ?>
<?php $__env->startSection('header_title', 'Product Catalog'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">

    <!-- Header Actions & Search Bar -->
    <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-4">
        
        <div>
            <h2 class="font-serif text-xl font-bold text-slate-900">Manage Jewellery Products</h2>
            <p class="text-xs text-slate-500">Filter, search, add, edit, import from Excel, or manage micro gold items.</p>
        </div>

        <div class="flex items-center gap-3 self-start lg:self-auto">
            <a href="<?php echo e(route('admin.products.import')); ?>" class="px-4 py-3 rounded-2xl bg-amber-50 text-gold-800 border border-amber-300 font-bold text-xs shadow-xs hover:bg-amber-100 transition-colors flex items-center space-x-2">
                <i class="fa-solid fa-file-excel text-sm text-emerald-600"></i>
                <span>IMPORT FROM EXCEL</span>
            </a>

            <a href="<?php echo e(route('admin.products.create')); ?>" class="px-5 py-3 rounded-2xl gold-gradient-bg text-obsidian-900 font-bold text-xs shadow-md hover:scale-[1.02] transition-transform flex items-center space-x-2">
                <i class="fa-solid fa-plus text-sm"></i>
                <span>ADD NEW PRODUCT</span>
            </a>
        </div>
    </div>

    <!-- FILTER & SEARCH BAR FORM -->
    <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs">
        <form method="GET" action="<?php echo e(route('admin.products.index')); ?>" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3">
            
            <!-- Search Keyword -->
            <div class="lg:col-span-3 relative">
                <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-xs text-slate-400"></i>
                <input 
                    type="text" 
                    name="search" 
                    value="<?php echo e(request('search')); ?>" 
                    placeholder="Search by name or SKU..." 
                    class="w-full pl-9 pr-4 py-2.5 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:border-gold-500 focus:bg-white transition-all"
                >
            </div>

            <!-- Product Type Filter -->
            <div class="lg:col-span-2">
                <select name="product_type" class="w-full px-3 py-2.5 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:border-gold-500 transition-all font-semibold">
                    <option value="">All Product Types</option>
                    <option value="normal" <?php echo e(request('product_type') == 'normal' ? 'selected' : ''); ?>>Normal Products</option>
                    <option value="impon" <?php echo e(request('product_type') == 'impon' ? 'selected' : ''); ?>>Impon Products</option>
                </select>
            </div>

            <!-- Category Filter -->
            <div class="lg:col-span-3">
                <select name="category_id" class="w-full px-3 py-2.5 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:border-gold-500 transition-all">
                    <option value="">All Categories</option>
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($cat->id); ?>" <?php echo e(request('category_id') == $cat->id ? 'selected' : ''); ?>>
                            <?php echo e($cat->name); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <!-- Status Filter -->
            <div class="lg:col-span-2">
                <select name="status" class="w-full px-3 py-2.5 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:border-gold-500 transition-all">
                    <option value="">All Statuses</option>
                    <option value="active" <?php echo e(request('status') == 'active' ? 'selected' : ''); ?>>Active</option>
                    <option value="inactive" <?php echo e(request('status') == 'inactive' ? 'selected' : ''); ?>>Inactive</option>
                    <option value="sold_out" <?php echo e(request('status') == 'sold_out' ? 'selected' : ''); ?>>Sold Out</option>
                </select>
            </div>

            <!-- Submit & Reset Buttons -->
            <div class="lg:col-span-2 flex items-center space-x-2">
                <button type="submit" class="flex-1 py-2.5 bg-obsidian-900 text-white rounded-xl text-xs font-bold hover:bg-obsidian-800 transition-colors">
                    FILTER
                </button>
                <a href="<?php echo e(route('admin.products.index')); ?>" class="p-2.5 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200 transition-colors text-center" title="Reset Filters">
                    <i class="fa-solid fa-rotate-left"></i>
                </a>
            </div>

        </form>
    </div>

    <!-- PRODUCT TABLE -->
    <div class="bg-white rounded-3xl border border-amber-900/10 shadow-xs overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/80 text-[11px] font-bold text-slate-500 uppercase tracking-wider border-b border-slate-100">
                        <th class="py-4 px-4">Image</th>
                        <th class="py-4 px-4">Product Name</th>
                        <th class="py-4 px-4">SKU</th>
                        <th class="py-4 px-4">Type</th>
                        <th class="py-4 px-4">Category</th>
                        <th class="py-4 px-4">Price</th>
                        <th class="py-4 px-4">Stock</th>
                        <th class="py-4 px-4">Status</th>
                        <th class="py-4 px-4">Flags</th>
                        <th class="py-4 px-4">Date</th>
                        <th class="py-4 px-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    <?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-amber-50/30 transition-colors">
                            
                            <!-- Thumbnail -->
                            <td class="py-3 px-4">
                                <img src="<?php echo e($product->primary_image_url); ?>" 
                                     alt="<?php echo e($product->name); ?>" 
                                     class="w-12 h-12 rounded-xl object-cover border border-amber-900/10 shadow-xs hover:scale-110 cursor-pointer transition-transform"
                                     onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=80';"
                                     onclick="openImagePreview('<?php echo e($product->primary_image_url); ?>', '<?php echo e(addslashes($product->name)); ?>')"
                                     title="Click to view large preview"
                                >
                            </td>

                            <!-- Product Name -->
                            <td class="py-3 px-4">
                                <a href="<?php echo e(route('admin.products.show', $product->id)); ?>" class="font-bold text-slate-900 leading-tight mb-0.5 hover:text-gold-600 transition-colors block">
                                    <?php echo e($product->name); ?>

                                </a>
                                <p class="text-[10px] text-slate-400 truncate max-w-xs"><?php echo e(Str::limit($product->short_description, 40)); ?></p>
                            </td>

                            <!-- SKU -->
                            <td class="py-3 px-4 font-mono text-slate-600 font-semibold">
                                <?php echo e($product->sku ?? 'N/A'); ?>

                            </td>

                            <!-- Product Type -->
                            <td class="py-3 px-4">
                                <?php if(strtolower($product->product_type ?? 'normal') === 'impon'): ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-500 text-white shadow-xs">
                                        IMPON
                                    </span>
                                <?php else: ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-100 text-slate-700 border border-slate-200">
                                        NORMAL
                                    </span>
                                <?php endif; ?>
                            </td>

                            <!-- Category -->
                            <td class="py-3 px-4 text-slate-700">
                                <span class="px-2.5 py-1 rounded-full bg-slate-100 text-slate-700 font-medium text-[11px]">
                                    <?php echo e($product->category->name ?? 'Uncategorized'); ?>

                                </span>
                            </td>

                            <!-- Price -->
                            <td class="py-3 px-4">
                                <div class="font-bold text-slate-900">₹<?php echo e(number_format($product->price, 2)); ?></div>
                                <?php if($product->original_price && $product->original_price > $product->price): ?>
                                    <div class="text-[10px] text-slate-400 line-through">₹<?php echo e(number_format($product->original_price, 2)); ?></div>
                                <?php endif; ?>
                            </td>

                            <!-- Stock -->
                            <td class="py-3 px-4">
                                <?php if($product->stock > 0): ?>
                                    <span class="font-semibold text-emerald-700"><?php echo e($product->stock); ?> units</span>
                                <?php else: ?>
                                    <span class="font-bold text-red-600">0 (Out)</span>
                                <?php endif; ?>
                            </td>

                            <!-- Status -->
                            <td class="py-3 px-4">
                                <?php if($product->status === 'active'): ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800 border border-emerald-200">
                                        ACTIVE
                                    </span>
                                <?php elseif($product->status === 'sold_out'): ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-200">
                                        SOLD OUT
                                    </span>
                                <?php else: ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600 border border-slate-200">
                                        INACTIVE
                                    </span>
                                <?php endif; ?>
                            </td>

                            <!-- Flags -->
                            <td class="py-3 px-4 space-x-1">
                                <?php if($product->is_featured): ?>
                                    <span class="text-[9px] font-bold bg-gold-500/20 text-gold-700 px-1.5 py-0.5 rounded border border-gold-400/30">FEATURED</span>
                                <?php endif; ?>
                                <?php if($product->is_new): ?>
                                    <span class="text-[9px] font-bold bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">NEW</span>
                                <?php endif; ?>
                                <?php if($product->is_best_seller): ?>
                                    <span class="text-[9px] font-bold bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">BESTSELLER</span>
                                <?php endif; ?>
                            </td>

                            <!-- Date -->
                            <td class="py-3 px-4 text-slate-500 text-[11px]">
                                <?php echo e($product->created_at ? $product->created_at->format('M d, Y') : 'N/A'); ?>

                            </td>

                            <!-- Actions -->
                            <td class="py-3 px-4 text-right">
                                <div class="flex items-center justify-end space-x-1">
                                    <a href="<?php echo e(route('admin.products.show', $product->id)); ?>" class="p-2 rounded-lg text-slate-500 hover:text-gold-600 hover:bg-gold-50 transition-colors flex items-center space-x-1 text-xs font-semibold" title="View Product Details">
                                        <i class="fa-solid fa-eye"></i>
                                        <span class="hidden xl:inline">View</span>
                                    </a>
                                    <a href="<?php echo e(route('admin.products.edit', $product->id)); ?>" class="p-2 rounded-lg text-slate-500 hover:text-gold-600 hover:bg-gold-50 transition-colors" title="Edit Product">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <button onclick="confirmDeactivate('<?php echo e($product->id); ?>', '<?php echo e(addslashes($product->name)); ?>')" class="p-2 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 transition-colors" title="Deactivate Product">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </button>
                                </div>
                            </td>

                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="10" class="py-12 text-center text-slate-400">
                                <i class="fa-solid fa-box-open text-4xl mb-3 text-slate-300 block"></i>
                                <p class="font-medium text-sm">No products found matching your search query.</p>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Pagination Bar -->
        <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-between">
            <p class="text-xs text-slate-500">Showing <?php echo e($products->firstItem() ?? 0); ?> to <?php echo e($products->lastItem() ?? 0); ?> of <?php echo e($products->total()); ?> items</p>
            <div>
                <?php echo e($products->links()); ?>

            </div>
        </div>
    </div>

</div>

<!-- DEACTIVATION CONFIRMATION MODAL -->
<div id="deactivate-modal" class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center hidden transition-all duration-300">
    <div class="bg-white rounded-3xl p-6 md:p-8 max-w-sm w-full mx-4 shadow-2xl border border-amber-900/10 text-center">
        <div class="w-14 h-14 rounded-full bg-red-50 text-red-600 flex items-center justify-center mx-auto mb-4 text-2xl border border-red-200">
            <i class="fa-solid fa-circle-exclamation"></i>
        </div>
        <h3 class="font-serif text-xl font-bold text-slate-900 mb-2">Remove Product?</h3>
        <p class="text-xs text-slate-500 mb-2" id="deactivate-product-name">This product will no longer appear in the public shop.</p>
        <p class="text-[11px] text-amber-700 bg-amber-50 p-2.5 rounded-xl border border-amber-200 mb-6">Note: This action safely marks the product as inactive without deleting order history.</p>

        <form id="deactivate-form" method="POST" class="flex items-center justify-center space-x-3">
            <?php echo csrf_field(); ?>
            <?php echo method_field('DELETE'); ?>
            <button type="button" onclick="closeDeactivateModal()" class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-600 hover:bg-slate-50 font-medium text-xs transition-colors">
                CANCEL
            </button>
            <button type="submit" class="px-5 py-2.5 rounded-xl bg-red-600 text-white font-bold text-xs shadow-md hover:bg-red-700 transition-all">
                DEACTIVATE PRODUCT
            </button>
        </form>
    </div>
</div>

<!-- TABLE IMAGE PREVIEW MODAL -->
<div id="image-preview-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center hidden p-4 transition-all duration-300" onclick="closeImagePreview()">
    <div class="relative max-w-xl max-h-[85vh] bg-white rounded-3xl p-4 shadow-2xl border border-amber-900/10 text-center" onclick="event.stopPropagation()">
        <button type="button" onclick="closeImagePreview()" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-slate-100 text-slate-700 hover:bg-red-600 hover:text-white font-bold flex items-center justify-center transition-colors">
            ×
        </button>
        <h4 id="image-preview-title" class="font-serif text-sm font-bold text-slate-900 mb-3 px-6 truncate"></h4>
        <img id="image-preview-img" src="" alt="Product Preview" class="max-h-[70vh] mx-auto rounded-2xl object-contain shadow-md">
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
    function openImagePreview(url, name) {
        document.getElementById('image-preview-img').src = url;
        document.getElementById('image-preview-title').innerText = name;
        document.getElementById('image-preview-modal').classList.remove('hidden');
    }

    function closeImagePreview() {
        document.getElementById('image-preview-modal').classList.add('hidden');
    }

    function confirmDeactivate(id, name) {
        const modal = document.getElementById('deactivate-modal');
        const form = document.getElementById('deactivate-form');
        const nameText = document.getElementById('deactivate-product-name');
        
        form.action = `/admin/products/${id}`;
        nameText.innerText = `"${name}" will be deactivated from the public store.`;
        modal.classList.remove('hidden');
    }

    function closeDeactivateModal() {
        document.getElementById('deactivate-modal').classList.add('hidden');
    }
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\dwaraka_backend\resources\views/admin/products/index.blade.php ENDPATH**/ ?>