<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eleastore</title>
    <style>
        /* Page background: plain color only. Image will be placed inside a white hero banner for visibility */
        body { 
            font-family: Segoe UI, Roboto, Arial, sans-serif; 
            /* Background image visible: very light overlay to keep contrast */
            background-color: #f4f5f7;
            background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), url('/images/eleastore.jpg');
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
            background-size: cover;
            color: #111; margin: 0; padding: 24px; 
        }

        /* Card uses solid white background to contrast with hero banner */
        .card { max-width: 1200px; margin: 0 auto; background: #ffffff; padding: 24px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }

        /* Hero banner: white container with the EleaStore image centered and contained */
        .hero-banner { width: 100%; height: 220px; background-color: #ffffff; border-radius: 12px; margin-bottom: 20px; display: block; box-shadow: 0 8px 18px rgba(0,0,0,.06); background-position: center; background-repeat: no-repeat; background-size: contain; }

        .category-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
        .category-chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid #ddd; background: #fff; color: #333; text-decoration: none; font-size: .9rem; transition: background .2s ease, border-color .2s ease; }
        .category-chip:hover { background: #f8f8f8; }
        .category-chip.active { background: #111; border-color: #111; color: #fff; }
        .inventory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
        .product-card { background: #ffffff; border: 1px solid #e8e8e8; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease; }
        .product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(0,0,0,.12); }
        .product-image { width: 100%; height: 220px; overflow: hidden; background: #fafafa; display: flex; align-items: center; justify-content: center; }
        .product-image img { width: 100%; height: 100%; object-fit: cover; }
        .product-info { padding: 16px; }
        .product-info h2 { margin: 8px 0 10px; font-size: 1.1rem; line-height: 1.3; }
        .product-category { display: inline-flex; margin-bottom: 10px; padding: 6px 10px; background: #f5f5f5; border-radius: 999px; font-size: .8rem; color: #555; }
        .product-info p { margin: 6px 0; color: #4a4a4a; font-size: .95rem; }
        .badge { display: inline-block; padding: 6px 12px; background: #111; color: #fff; border-radius: 999px; font-size: .85rem; }
        .badge-low { background: #fef3c7; color: #92400e; }
        .badge-over { background: #dbeafe; color: #1e40af; }

        /* Responsive tweak: reduce overlay on small screens for readability */
        @media (max-width: 600px) {
            body { background-position: center top; background-attachment: scroll; }
            .card { background: rgba(255,255,255,0.98); padding: 18px; }
            .product-image { height: 180px; }
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>EleaStore</h1>
        <p>Selamat datang di toko pakaian EleaStore.</p>

        <?php if($products->isEmpty()): ?>
            <div class="badge">Tidak ada produk</div>
        <?php else: ?>
            <div class="category-filter">
                <a href="<?php echo e(route('inventory.index')); ?>" class="category-chip <?php echo e(request()->get('category_id') ? '' : 'active'); ?>">Semua</a>
                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e(route('inventory.index', ['category_id' => $category->id])); ?>" class="category-chip <?php echo e(request()->get('category_id') == $category->id ? 'active' : ''); ?>"><?php echo e($category->name); ?></a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="inventory-grid">
                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <article class="product-card">
                        <div class="product-image">
                            <?php
                                $originalName = $product->name;
                                $foundImage = null;

                                // Path folder target gambar fisik
                                $dirPath = public_path('images');

                                if (is_dir($dirPath)) {
                                    $filesInFolder = scandir($dirPath);

                                    // Normalisasi teks pencarian produk (diubah ke lowercase & bersihkan spasi)
                                    $searchClean = strtolower(str_replace(' ', '', $originalName)); // "dresspestasatin"
                                    $words = explode(' ', strtolower(trim($originalName))); // ["dress", "pesta", "satin"]

                                    foreach ($filesInFolder as $file) {
                                        if ($file === '.' || $file === '..') continue;

                                        $fileClean = strtolower(str_replace(' ', '', $file)); // "dresspestasatinmarun.jpg"

                                        // Skenario 1: Jika nama produk tanpa spasi terkandung di dalam nama file gambar tanpa spasi
                                        // Contoh: "dresspestasatin" ada di dalam "dresspestasatinmarun.jpg"
                                        if (str_contains($fileClean, $searchClean)) {
                                            $foundImage = asset('images/' . $file);
                                            break;
                                        }

                                        // Skenario 2: Jika nama file tanpa spasi mengandung nama produk tanpa spasi (Kasus kebalikannya)
                                        // Contoh: "jaketbomberarmy.jpg" dicari lewat kata kunci "jaketbomber"
                                        if (isset($words[0], $words[1])) {
                                            $twoWords = $words[0] . $words[1]; // "jaketbomber"
                                            if (str_contains($fileClean, $twoWords)) {
                                                $foundImage = asset('images/' . $file);
                                                break;
                                            }
                                        }

                                        // Skenario 3: Pengecekan multi-kata minimal 2 kata pertama cocok (Akurat untuk dress pesta / dress midi)
                                        if (count($words) >= 2) {
                                            if (str_contains($fileClean, $words[0]) && str_contains($fileClean, $words[1])) {
                                                $foundImage = asset('images/' . $file);
                                                break;
                                            }
                                        }
                                    }
                                }

                                // Ambil gambar yang ditemukan, jika gagal total baru lempar ke generator teks placeholder
                                $src = $foundImage ?? 'https://placehold.co/400x300/e8e8e8/111111?text=' . urlencode($originalName);
                            ?>
                            <img src="<?php echo e($src); ?>" alt="<?php echo e($product->name); ?>">
                        </div>
                        <div class="product-info">
                            <span class="product-category"><?php echo e($product->category->name ?? 'Tanpa kategori'); ?></span>
                            <h2><?php echo e($product->name); ?></h2>
                            <p><strong>Ukuran:</strong>
                                <?php if($product->sizes->isNotEmpty()): ?>
                                    <?php $__currentLoopData = $product->sizes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $variant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <span class="category-chip" style="padding:6px 10px; font-size:.85rem; margin-right:6px;"><?php echo e($variant->size); ?> <?php if($variant->stock > 0): ?> (<?php echo e($variant->stock); ?>) <?php endif; ?></span>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php else: ?>
                                    <?php echo e($product->size ?? '-'); ?>

                                <?php endif; ?>
                            </p>
                            <p><strong>Warna:</strong> <?php echo e($product->color); ?></p>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        <?php endif; ?>
    </div>
</body>
</html><?php /**PATH C:\Mini projek - Toko pakaian\toko-pakaian-stok\resources\views/inventory/index.blade.php ENDPATH**/ ?>