<?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, []); ?> 
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            <?php echo e(__('Tambah Produk Baru')); ?>

        </h2>
     <?php $__env->endSlot(); ?>

    <style>
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }

        .picker-thumb {
            position: relative;
            width: 64px; height: 64px; flex-shrink: 0;
            border: 2px solid #e5e7eb; border-radius: 6px;
            overflow: hidden; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            background: #fff; transition: border-color .15s;
        }
        .picker-thumb:hover { border-color: #6366f1; }
        .picker-thumb.selected { border-color: #6366f1; box-shadow: 0 0 0 2px #a5b4fc; }
        .picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .picker-thumb .cover-badge {
            position: absolute; bottom: 0; left: 0; right: 0;
            background: #6366f1; color: #fff; font-size: 9px;
            text-align: center; padding: 1px 0;
        }
        .picker-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    </style>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <?php if(session('success')): ?>
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4"><?php echo e(session('success')); ?></div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"><?php echo e(session('error')); ?></div>
            <?php endif; ?>
            <?php if($errors->any()): ?>
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                    <strong class="font-bold">Terdapat kesalahan:</strong>
                    <ul class="mt-2 list-disc list-inside text-sm">
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><li><?php echo e($error); ?></li><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            <?php endif; ?>

            <form action="<?php echo e(route('admin.products.store')); ?>" method="POST" enctype="multipart/form-data" class="space-y-6">
                <?php echo csrf_field(); ?>

                
                <div class="bg-white shadow-sm sm:rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 border-b pb-3 mb-5">Informasi Dasar</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nama Produk <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="<?php echo e(old('name')); ?>"
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Kategori <span class="text-red-500">*</span></label>
                            <select name="category_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                                <option value="">Pilih Kategori</option>
                                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($category->id); ?>" <?php echo e(old('category_id') == $category->id ? 'selected' : ''); ?>><?php echo e($category->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Brand</label>
                            <select name="brand_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">Pilih Brand (Opsional)</option>
                                <?php $__currentLoopData = $brands; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $brand): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($brand->id); ?>" <?php echo e(old('brand_id') == $brand->id ? 'selected' : ''); ?>><?php echo e($brand->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Berat Produk (gram)</label>
                            <input type="number" name="weight" value="<?php echo e(old('weight', 1000)); ?>" min="1"
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        </div>

                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Deskripsi Produk</label>
                            <textarea name="description" rows="4"
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                placeholder="Tuliskan deskripsi produk..."><?php echo e(old('description')); ?></textarea>
                        </div>
                    </div>
                </div>

                
                <div class="bg-white shadow-sm sm:rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 border-b pb-3 mb-5">Foto Produk</h3>

                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-indigo-400 transition cursor-pointer"
                        onclick="document.getElementById('images').click()">
                        <i class="fas fa-images text-4xl text-gray-400 mb-2"></i>
                        <p class="text-sm text-gray-500">Klik untuk upload banyak foto sekaligus</p>
                        <p class="text-xs text-gray-400 mt-1">Format: JPG, PNG, WEBP. Maks 5MB per foto. Foto pertama jadi cover.</p>
                        <input type="file" name="images[]" id="images" class="hidden" accept="image/*" multiple onchange="previewImages(this)">
                    </div>

                    <div id="image-preview-container" class="mt-4" style="display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:8px;"></div>
                </div>

                
                <div class="bg-white shadow-sm sm:rounded-lg p-6">
                    <div class="flex justify-between items-center border-b pb-3 mb-5">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">Varian Produk</h3>
                            <p class="text-xs text-gray-400 mt-1">Setiap varian dapat dikaitkan dengan foto produk yang berbeda.</p>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="flex items-center gap-2 bg-indigo-50 border border-indigo-200 rounded-lg px-3 py-1.5">
                                <span class="text-xs font-medium text-indigo-500 uppercase tracking-wide">Total Stok</span>
                                <span id="total-stock-display" class="text-sm font-bold text-indigo-700">0</span>
                            </div>
                            <button type="button" onclick="addVariant()"
                                class="text-sm bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded hover:bg-indigo-100 transition font-medium">
                                + Tambah Varian
                            </button>
                        </div>
                    </div>
                    <input type="hidden" name="stock" id="total-stock-input" value="0">
                    <div class="space-y-4" id="variant-container"></div>
                </div>

                <div class="flex justify-end gap-3">
                    <a href="<?php echo e(route('admin.products.index')); ?>" class="bg-gray-200 text-gray-700 px-5 py-2.5 rounded-lg hover:bg-gray-300 transition">Batal</a>
                    <button type="submit" class="bg-indigo-600 text-white px-6 py-2.5 rounded-lg hover:bg-indigo-700 transition font-medium">
                        Simpan Produk
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        let uploadedImages = []; // [{ index, dataUrl, name }]

        // ============================================================
        // PREVIEW FOTO YANG DIUPLOAD
        // ============================================================
        function previewImages(input) {
            const container = document.getElementById('image-preview-container');
            container.innerHTML = '';
            uploadedImages = [];

            if (!input.files || input.files.length === 0) return;

            const files   = Array.from(input.files);
            const results = new Array(files.length);
            let loaded    = 0;

            files.forEach((file, i) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    results[i] = e.target.result;
                    loaded++;
                    if (loaded === files.length) {
                        results.forEach((dataUrl, idx) => {
                            uploadedImages[idx] = { index: idx, dataUrl, name: files[idx].name };
                            container.insertAdjacentHTML('beforeend', `
                                <div style="position:relative; border-radius:6px; border:1px solid #e5e7eb; overflow:hidden; aspect-ratio:1;">
                                    <img src="${dataUrl}" style="width:100%; height:100%; object-fit:cover; display:block;">
                                    ${idx === 0 ? '<span style="position:absolute;bottom:0;left:0;right:0;background:#6366f1;color:#fff;font-size:11px;text-align:center;padding:3px 0;font-weight:600;">Cover</span>' : ''}
                                </div>
                            `);
                        });
                        refreshAllVariantPickers();
                    }
                };
                reader.readAsDataURL(file);
            });
        }

        // ============================================================
        // BUILD KONTEN PICKER
        // ============================================================
        function buildPickerContent(variantIdx) {
            let html = `<p class="text-xs font-medium text-gray-600 mb-1">Pilih foto untuk varian ini:</p>
                        <div class="picker-wrap">
                            <div class="picker-thumb" data-imgindex="" title="Tidak ada foto">
                                <i class="fas fa-times text-gray-400 text-lg"></i>
                            </div>`;

            uploadedImages.forEach(img => {
                html += `
                    <div class="picker-thumb" data-imgindex="${img.index}" title="Foto ${img.index + 1}${img.index === 0 ? ' (Cover)' : ''}">
                        <img src="${img.dataUrl}" alt="">
                        ${img.index === 0 ? '<span class="cover-badge">Cover</span>' : ''}
                    </div>`;
            });

            html += `</div>`;

            if (uploadedImages.length === 0) {
                html += `<p class="text-xs text-gray-400 italic mt-1">Upload foto produk terlebih dahulu.</p>`;
            }

            return html;
        }

        function refreshAllVariantPickers() {
            document.querySelectorAll('.variant-picker').forEach(pickerEl => {
                const variantIdx = pickerEl.dataset.variantidx;
                pickerEl.innerHTML = buildPickerContent(variantIdx);
                bindPickerEvents(pickerEl, variantIdx);
                const hiddenInput = document.getElementById(`hidden-img-index-${variantIdx}`);
                if (hiddenInput && hiddenInput.value !== '') {
                    const selected = pickerEl.querySelector(`.picker-thumb[data-imgindex="${hiddenInput.value}"]`);
                    if (selected) selected.classList.add('selected');
                }
            });
        }

        // ============================================================
        // BIND EVENT KLIK PICKER
        // ============================================================
        function bindPickerEvents(pickerEl, variantIdx) {
            pickerEl.querySelectorAll('.picker-thumb').forEach(thumb => {
                thumb.addEventListener('click', function () {
                    const imgIndex    = this.dataset.imgindex;
                    const imgData     = (imgIndex !== '') ? uploadedImages[parseInt(imgIndex)] : null;
                    const previewWrap = document.getElementById(`img-preview-wrap-${variantIdx}`);
                    const hiddenInput = document.getElementById(`hidden-img-index-${variantIdx}`);

                    hiddenInput.value = imgIndex;

                    if (imgData) {
                        previewWrap.innerHTML = `<img src="${imgData.dataUrl}" style="width:100%;height:100%;object-fit:cover;">`;
                    } else {
                        previewWrap.innerHTML = `
                            <div style="display:flex;flex-direction:column;align-items:center;color:#d1d5db;">
                                <i class="fas fa-image" style="font-size:1.5rem;"></i>
                                <span style="font-size:0.75rem;margin-top:4px;">Pilih Foto</span>
                            </div>`;
                    }

                    pickerEl.querySelectorAll('.picker-thumb').forEach(t => t.classList.remove('selected'));
                    this.classList.add('selected');
                    pickerEl.classList.add('hidden');
                });
            });
        }

        // ============================================================
        // TOGGLE PICKER
        // ============================================================
        function openImagePicker(variantIdx) {
            document.querySelectorAll('.variant-picker').forEach(el => {
                if (el.dataset.variantidx !== String(variantIdx)) el.classList.add('hidden');
            });
            document.getElementById(`picker-v${variantIdx}`).classList.toggle('hidden');
        }

        // ============================================================
        // TAMBAH BARIS VARIAN
        // ============================================================
        let variantIndex = 0;

        function addVariant() {
            const idx = variantIndex;

            const html = `
                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition" id="variant-row-${idx}">
                    <div class="grid grid-cols-1 md:grid-cols-7 gap-3 items-end">

                        <!-- Foto Varian -->
                        <div class="md:col-span-1">
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">Foto Varian</label>
                            <div id="img-preview-wrap-${idx}"
                                 class="w-full h-20 border-2 border-dashed border-gray-200 rounded-lg overflow-hidden cursor-pointer hover:border-indigo-400 transition flex items-center justify-center bg-gray-50"
                                 onclick="openImagePicker(${idx})">
                                <div style="display:flex;flex-direction:column;align-items:center;color:#d1d5db;">
                                    <i class="fas fa-image" style="font-size:1.5rem;"></i>
                                    <span style="font-size:0.75rem;margin-top:4px;">Pilih Foto</span>
                                </div>
                            </div>
                            <input type="hidden" name="variants[${idx}][image_index]" id="hidden-img-index-${idx}" value="">
                        </div>

                        <!-- Ukuran -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">Ukuran <span class="text-red-500">*</span></label>
                            <select name="variants[${idx}][size]" class="w-full text-sm border-gray-300 rounded-md" required>
                                <option value="">Pilih</option>
                                <option value="S">S</option>
                                <option value="M">M</option>
                                <option value="L">L</option>
                                <option value="XL">XL</option>
                                <option value="XXL">XXL</option>
                                <option value="XXXL">XXXL</option>
                            </select>
                        </div>

                        <!-- Warna -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">Warna <span class="text-red-500">*</span></label>
                            <input type="text" name="variants[${idx}][color]" placeholder="Warna"
                                class="w-full text-sm border-gray-300 rounded-md" required>
                        </div>

                        <!-- Kode Warna -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">Kode Warna</label>
                            <input type="color" name="variants[${idx}][color_code]" value="#000000"
                                class="w-10 h-9 border border-gray-300 rounded cursor-pointer">
                        </div>

                        <!-- Harga -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">Harga (Rp) <span class="text-red-500">*</span></label>
                            <input type="number" name="variants[${idx}][price]" placeholder="0"
                                min="0" class="w-full text-sm border-gray-300 rounded-md" required>
                        </div>

                        <!-- Stok -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">Stok <span class="text-red-500">*</span></label>
                            <input type="number" name="variants[${idx}][stock]" placeholder="0"
                                min="0" oninput="recalcStock()" class="w-full text-sm border-gray-300 rounded-md" required>
                        </div>

                        <!-- SKU & Delete -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1 uppercase">SKU Varian <span class="text-red-500">*</span></label>
                            <div class="flex items-center gap-2">
                                <input type="text" name="variants[${idx}][sku_variant]" placeholder="Contoh: PRD-ABC-V1"
                                    class="w-full text-sm border-gray-300 rounded-md" required>
                                <button type="button"
                                    onclick="document.getElementById('variant-row-${idx}').remove(); recalcStock();"
                                    class="flex-shrink-0 text-red-400 hover:text-red-600 transition">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Image Picker Popup -->
                    <div id="picker-v${idx}"
                         class="variant-picker hidden mt-3 p-3 bg-gray-50 border border-gray-200 rounded-lg"
                         data-variantidx="${idx}">
                    </div>
                </div>
            `;

            document.getElementById('variant-container').insertAdjacentHTML('beforeend', html);

            const pickerEl = document.getElementById(`picker-v${idx}`);
            pickerEl.innerHTML = buildPickerContent(idx);
            bindPickerEvents(pickerEl, idx);

            variantIndex++;
        }

        // ============================================================
        // HITUNG TOTAL STOK
        // ============================================================
        function recalcStock() {
            let total = 0;
            document.querySelectorAll('#variant-container input[name*="[stock]"]').forEach(inp => {
                total += parseInt(inp.value) || 0;
            });
            document.getElementById('total-stock-display').textContent = total.toLocaleString('id-ID');
            document.getElementById('total-stock-input').value = total;
        }

        document.addEventListener('DOMContentLoaded', function () {
            addVariant();
            addVariant();
        });
    </script>
 <?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\e_commerce_pakaian\resources\views/admin/products/create.blade.php ENDPATH**/ ?>