

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

<?php $__env->startSection('content'); ?>
<div class="container-fluid px-4 py-3">

    
    <div class="hero-section mb-5">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
            <div>
                <h1 class="display-6 fw-bold mb-2">
                    ✨ Discover Your Style
                </h1>
                <p class="text-muted mb-0">Temukan produk favoritmu dengan koleksi terbaru dari Kei's Store</p>
            </div>
            
            <div class="d-flex gap-3">
                
                <form action="<?php echo e(route('product.index')); ?>" method="GET" class="search-wrapper">
                    <div class="search-box">
                        <i class="bi bi-search search-icon"></i>
                        <input type="text" name="search" value="<?php echo e(request('search')); ?>"
                               class="search-input" placeholder="Cari produk...">
                        <?php if(request('search')): ?>
                            <a href="<?php echo e(route('product.index')); ?>" class="clear-search">
                                <i class="bi bi-x-circle"></i>
                            </a>
                        <?php endif; ?>
                    </div>
                </form>

                
                <?php if(Auth::user()->role == 'admin'): ?>
                    <a href="<?php echo e(route('product.create')); ?>" class="btn-primary-modern">
                        <i class="bi bi-plus-lg"></i>
                        <span>Tambah Produk</span>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>

    
    <?php if(session('success')): ?>
        <div class="alert-modern alert-success-modern mb-4">
            <i class="bi bi-check-circle-fill"></i>
            <span><?php echo e(session('success')); ?></span>
            <button class="close-alert"><i class="bi bi-x-lg"></i></button>
        </div>
    <?php endif; ?>

    
    <?php if(session('error')): ?>
        <div class="alert-modern alert-error-modern mb-4">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <span><?php echo e(session('error')); ?></span>
            <button class="close-alert"><i class="bi bi-x-lg"></i></button>
        </div>
    <?php endif; ?>

    
    <?php if(Auth::user()->role == 'pengguna'): ?>
        <div class="info-banner mb-5">
            <div class="info-banner-content">
                <i class="bi bi-cart-check-fill"></i>
                <div>
                    <strong>Mode Belanja Aktif</strong>
                    <p class="mb-0">Pilih produk untuk dimasukkan ke keranjang atau beli langsung</p>
                </div>
            </div>
        </div>
    <?php endif; ?>

    
    <div class="products-grid">
        <?php $__empty_1 = true; $__currentLoopData = $produk; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?php
                $avgRating = $item->reviews->avg('rating') ?? 0;
                $totalRating = $item->reviews->count();
                $ratingRounded = round($avgRating);
                
                // Ambil gambar dari relasi images (multiple images)
                $allImages = $item->images->sortBy('order');
                $primaryImage = $item->images->where('is_primary', true)->first();
                
                // Tentukan gambar yang akan ditampilkan di card
                $displayImage = null;
                if ($primaryImage) {
                    $displayImage = $primaryImage->foto;
                } elseif ($allImages->count() > 0) {
                    $displayImage = $allImages->first()->foto;
                } elseif ($item->foto) {
                    $displayImage = $item->foto;
                }
                
                // Helper function untuk mendapatkan URL foto yang valid
                $getPhotoUrl = function($fotoPath) {
                    if (!$fotoPath) {
                        return asset('images/no-image.png');
                    }
                    
                    if (filter_var($fotoPath, FILTER_VALIDATE_URL)) {
                        return $fotoPath;
                    }
                    
                    $cleanPath = ltrim($fotoPath, '/');
                    
                    // Cek berbagai kemungkinan path
                    $possibleUrls = [
                        asset('storage/' . $cleanPath),
                        asset('storage/produk/' . basename($cleanPath)),
                        asset('storage/produk/' . $cleanPath),
                    ];
                    
                    return $possibleUrls[0];
                };
                
                $photoUrl = $getPhotoUrl($displayImage);
                $hasMultipleImages = $allImages->count() > 1;
                $totalImages = $allImages->count();
            ?>

            <div class="product-card">
                
                <?php if($item->created_at->diffInDays(now()) <= 7): ?>
                    <div class="product-badge-new">NEW</div>
                <?php endif; ?>
                
                
                <?php if($hasMultipleImages): ?>
                    <div class="product-badge-gallery">
                        <i class="bi bi-images"></i> <?php echo e($totalImages); ?>

                    </div>
                <?php endif; ?>

                
                <div class="product-image-container">
                    <img src="<?php echo e($photoUrl); ?>"
                         alt="<?php echo e($item->nama_produk); ?>"
                         class="product-image"
                         loading="lazy"
                         onerror="this.src='<?php echo e(asset('images/no-image.png')); ?>'; this.onerror=null;">
                    
                    
                    <?php if($hasMultipleImages): ?>
                        <div class="image-indicator">
                            <?php for($i = 0; $i < min($totalImages, 5); $i++): ?>
                                <span class="dot <?php echo e($i == 0 ? 'active' : ''); ?>"></span>
                            <?php endfor; ?>
                            <?php if($totalImages > 5): ?>
                                <span class="dot-more">+<?php echo e($totalImages - 5); ?></span>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                    
                    
                    <div class="product-actions">
                        <?php if(Auth::user()->role == 'pengguna' && $item->stok > 0 && !$item->is_expired): ?>
                            <button class="action-btn quick-cart" onclick="this.closest('form').submit();" 
                                    form="cart-form-<?php echo e($item->produk_id); ?>" title="Tambah ke Keranjang">
                                <i class="bi bi-bag-plus"></i>
                            </button>
                        <?php elseif($item->is_expired): ?>
                            <div class="action-btn bg-light text-muted" title="Produk Kadaluwarsa">
                                <i class="bi bi-calendar-x"></i>
                            </div>
                        <?php endif; ?>
                        <a href="<?php echo e(route('product.show', $item->produk_id)); ?>" class="action-btn">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>
                </div>

                <div class="product-info">
                    
                    <div class="product-category">
                        <?php echo e($item->kategori->nama_kategori ?? 'Uncategorized'); ?>

                    </div>

                    
                    <h3 class="product-title"><?php echo e($item->nama_produk); ?></h3>

                    
                    <div class="product-rating">
                        <div class="stars">
                            <?php for($i=1; $i<=5; $i++): ?>
                                <?php if($i <= $ratingRounded): ?>
                                    <i class="bi bi-star-fill"></i>
                                <?php elseif($i - 0.5 <= $avgRating): ?>
                                    <i class="bi bi-star-half"></i>
                                <?php else: ?>
                                    <i class="bi bi-star"></i>
                                <?php endif; ?>
                            <?php endfor; ?>
                        </div>
                        <?php if($totalRating > 0): ?>
                            <span class="rating-count">(<?php echo e(number_format($avgRating, 1)); ?> • <?php echo e($totalRating); ?> reviews)</span>
                        <?php else: ?>
                            <span class="rating-count">Belum ada ulasan</span>
                        <?php endif; ?>
                    </div>

                    
                    <div class="price-stock">
                        <div class="product-price">
                            Rp <?php echo e(number_format($item->harga,0,',','.')); ?>

                        </div>
                        <div class="stock-badge <?php echo e($item->stok > 10 ? 'in-stock' : ($item->stok > 0 ? 'low-stock' : 'out-stock')); ?>">
                            <?php if($item->stok > 10): ?>
                                <i class="bi bi-check-circle-fill"></i> Tersedia
                            <?php elseif($item->stok > 0): ?>
                                <i class="bi bi-exclamation-circle-fill"></i> Stok <?php echo e($item->stok); ?>

                            <?php else: ?>
                                <i class="bi bi-x-circle-fill"></i> Habis
                            <?php endif; ?>
                        </div>
                    </div>

                    
                    <?php if($item->tanggal_kadaluarsa): ?>
                        <?php
                            $expired = $item->is_expired;
                            $near = \Carbon\Carbon::parse($item->tanggal_kadaluarsa)->diffInDays(now()) <= 30 && !$expired;
                        ?>
                        <div class="expiry-badge <?php echo e($expired ? 'expired' : ($near ? 'near-expiry' : '')); ?>">
                            <i class="bi bi-calendar-<?php echo e($expired ? 'x' : 'exclamation'); ?>"></i>
                            <?php echo e($expired ? 'Kadaluwarsa: ' : 'Exp: '); ?><?php echo e(\Carbon\Carbon::parse($item->tanggal_kadaluarsa)->format('d/m/Y')); ?>

                        </div>
                    <?php endif; ?>

                    
                    <div class="product-buttons">
                        <?php if(Auth::user()->role == 'admin'): ?>
                            <a href="<?php echo e(route('product.edit',$item->produk_id)); ?>" class="btn-outline-modern">
                                <i class="bi bi-pencil"></i> Edit
                            </a>
                            <form action="<?php echo e(route('product.destroy',$item->produk_id)); ?>" method="POST" class="d-inline">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('DELETE'); ?>
                                <button onclick="return confirm('Yakin hapus produk?')" class="btn-danger-modern">
                                    <i class="bi bi-trash"></i> Hapus
                                </button>
                            </form>
                            
                            
                            <form action="<?php echo e(route('product.addStock', $item->produk_id)); ?>" 
                                  method="POST" 
                                  class="stock-form"
                                  onsubmit="return validateStock(this)">
                                <?php echo csrf_field(); ?>
                                <div class="stock-control">
                                    <input type="number" 
                                           name="tambah_stok" 
                                           class="stock-input"
                                           min="1"
                                           value="1"
                                           required>
                                    <button type="submit" class="btn-stock-add" title="Tambah Stok">
                                        <i class="bi bi-plus-circle"></i>
                                    </button>
                                </div>
                            </form>
                        <?php else: ?>
                            
                            <form id="cart-form-<?php echo e($item->produk_id); ?>" 
                                  action="<?php echo e(route('cart.add', $item->produk_id)); ?>" 
                                  method="POST" class="d-none">
                                <?php echo csrf_field(); ?>
                                <input type="hidden" name="buy_now" value="0">
                            </form>
                            
                            <form id="buy-form-<?php echo e($item->produk_id); ?>" 
                                  action="<?php echo e(route('cart.add', $item->produk_id)); ?>" 
                                  method="POST" class="d-none">
                                <?php echo csrf_field(); ?>
                                <input type="hidden" name="buy_now" value="1">
                            </form>
                            
                            <button onclick="document.getElementById('cart-form-<?php echo e($item->produk_id); ?>').submit();" 
                                    class="btn-cart" <?php echo e(($item->stok < 1 || $item->is_expired) ? 'disabled' : ''); ?>>
                                <i class="bi bi-bag"></i> Keranjang
                            </button>
                            
                            <button onclick="document.getElementById('buy-form-<?php echo e($item->produk_id); ?>').submit();" 
                                    class="btn-buy" <?php echo e(($item->stok < 1 || $item->is_expired) ? 'disabled' : ''); ?>>
                                <i class="bi bi-lightning-charge"></i> Beli
                            </button>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="bi bi-bag-x"></i>
                </div>
                <h3>Belum Ada Produk</h3>
                <p>Yuk tambahkan produk pertama kamu!</p>
                <?php if(Auth::user()->role == 'admin'): ?>
                    <a href="<?php echo e(route('product.create')); ?>" class="btn-primary-modern">
                        <i class="bi bi-plus-lg"></i> Tambah Produk Sekarang
                    </a>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<style>
/* MODERN CSS RESET & VARIABLES */
:root {
    --pink-primary: #ec4899;
    --pink-dark: #db2777;
    --pink-light: #fdf2f8;
    --pink-soft: #fce7f3;
    --pink-gradient: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    --pink-gradient-soft: linear-gradient(135deg, #fbcfe8 0%, #fce7f3 100%);
    --gray-50: #faf9fe;
    --gray-100: #f5f3ff;
    --gray-200: #ede9fe;
    --gray-600: #6b7280;
    --gray-800: #1f2937;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-pink: 0 4px 14px 0 rgba(236, 72, 153, 0.25);
    --shadow-pink-lg: 0 20px 25px -12px rgba(236, 72, 153, 0.3);
}

/* HERO SECTION */
.hero-section {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    padding: 2rem 2rem;
    border-radius: 28px;
    margin-bottom: 2rem;
}

.display-6 {
    font-size: 1.875rem;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* SEARCH MODERN */
.search-wrapper {
    width: 300px;
}

.search-box {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.125rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 45px;
    border: 2px solid transparent;
    border-radius: 60px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--pink-primary);
    box-shadow: var(--shadow-pink);
}

.clear-search {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
}

.clear-search:hover {
    color: var(--pink-primary);
}

/* BUTTON MODERN */
.btn-primary-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--pink-gradient);
    color: white;
    border: none;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pink-lg);
    color: white;
}

/* ALERT MODERN */
.alert-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    font-size: 0.875rem;
    position: relative;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success-modern {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-error-modern {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.close-alert {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.close-alert:hover {
    opacity: 1;
}

/* INFO BANNER */
.info-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    border: 1px solid #bfdbfe;
}

.info-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-banner-content i {
    font-size: 1.5rem;
    color: #2563eb;
}

/* PRODUCTS GRID */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

/* PRODUCT CARD */
.product-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: var(--shadow-md);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.product-badge-new {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--pink-gradient);
    color: white;
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

.product-badge-gallery {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 10px;
    border-radius: 60px;
    font-size: 0.7rem;
    font-weight: 500;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* PRODUCT IMAGE */
.product-image-container {
    position: relative;
    height: 260px;
    background: linear-gradient(135deg, #faf9fe 0%, #f5f3ff 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.product-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

/* IMAGE INDICATOR */
.image-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 2;
}

.image-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
}

.image-indicator .dot.active {
    background: white;
    width: 16px;
    border-radius: 3px;
}

.image-indicator .dot-more {
    font-size: 0.6rem;
    color: white;
    margin-left: 4px;
}

/* QUICK ACTIONS */
.product-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 3;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

.action-btn {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-800);
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    border: none;
}

.action-btn:hover {
    background: var(--pink-primary);
    color: white;
    transform: scale(1.1);
}

/* PRODUCT INFO */
.product-info {
    padding: 20px;
}

.product-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pink-primary);
    margin-bottom: 8px;
}

.product-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* RATING */
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stars {
    display: inline-flex;
    gap: 2px;
    color: #fbbf24;
    font-size: 0.875rem;
}

.rating-count {
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* PRICE & STOCK */
.price-stock {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pink-primary);
}

.stock-badge {
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 60px;
}

.stock-badge.in-stock {
    background: #dcfce7;
    color: #166534;
}

.stock-badge.low-stock {
    background: #fed7aa;
    color: #9a3412;
}

.stock-badge.out-stock {
    background: #fee2e2;
    color: #991b1b;
}

/* EXPIRY BADGE */
.expiry-badge {
    font-size: 0.7rem;
    padding: 6px 10px;
    background: #fef3c7;
    border-radius: 8px;
    color: #92400e;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.expiry-badge.expired {
    background: #fee2e2;
    color: #991b1b;
}

.expiry-badge.near-expiry {
    background: #fed7aa;
    color: #9a3412;
}

/* PRODUCT BUTTONS */
.product-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.btn-outline-modern {
    flex: 1;
    padding: 8px 16px;
    border: 2px solid var(--pink-primary);
    background: transparent;
    color: var(--pink-primary);
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-outline-modern:hover {
    background: var(--pink-primary);
    color: white;
}

.btn-danger-modern {
    flex: 1;
    padding: 8px 16px;
    border: 2px solid #ef4444;
    background: transparent;
    color: #ef4444;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-danger-modern:hover {
    background: #ef4444;
    color: white;
}

.btn-cart, .btn-buy {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-cart {
    background: var(--gray-100);
    color: var(--gray-800);
}

.btn-cart:hover:not(:disabled) {
    background: var(--pink-primary);
    color: white;
    transform: translateY(-2px);
}

.btn-buy {
    background: var(--pink-gradient);
    color: white;
}

.btn-buy:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pink);
}

.btn-cart:disabled, .btn-buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* STOCK CONTROL FOR ADMIN */
.stock-form {
    flex: 1;
}

.stock-control {
    display: flex;
    gap: 4px;
    align-items: center;
}

.stock-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 60px;
    font-size: 0.75rem;
    text-align: center;
}

.stock-input:focus {
    outline: none;
    border-color: var(--pink-primary);
}

.btn-stock-add {
    padding: 8px 12px;
    background: #10b981;
    border: none;
    border-radius: 60px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-stock-add:hover {
    background: #059669;
    transform: scale(1.05);
}

/* EMPTY STATE */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 28px;
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--pink-primary);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--gray-800);
}

.empty-state p {
    color: var(--gray-600);
    margin-bottom: 24px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero-section {
        padding: 1.5rem;
    }
    
    .display-6 {
        font-size: 1.25rem;
    }
    
    .search-wrapper {
        width: 100%;
    }
    
    .products-grid {
        gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .product-buttons {
        flex-wrap: wrap;
    }
    
    .btn-cart, .btn-buy, .btn-outline-modern, .btn-danger-modern {
        font-size: 0.7rem;
        padding: 8px 12px;
    }
    
    .product-image-container {
        height: 220px;
    }
    
    .image-indicator {
        padding: 3px 8px;
    }
    
    .image-indicator .dot {
        width: 4px;
        height: 4px;
    }
    
    .image-indicator .dot.active {
        width: 12px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
function validateStock(form) {
    var jumlah = form.tambah_stok.value;
    if (jumlah <= 0) {
        alert('Jumlah stok yang ditambah harus lebih dari 0!');
        return false;
    }
    if (isNaN(jumlah)) {
        alert('Masukkan angka yang valid!');
        return false;
    }
    return confirm('Tambah stok sebanyak ' + jumlah + '?');
}

// Close alert functionality
document.querySelectorAll('.close-alert').forEach(button => {
    button.addEventListener('click', function() {
        this.closest('.alert-modern').style.display = 'none';
    });
});

// Auto hide alerts after 5 seconds
setTimeout(function() {
    document.querySelectorAll('.alert-modern').forEach(alert => {
        alert.style.display = 'none';
    });
}, 5000);
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\comca\resources\views/product/index.blade.php ENDPATH**/ ?>