<?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, []); ?> 
        <style>
            .dash-header-title {
                font-weight: 600;
                font-size: 1.5rem;
                letter-spacing: -0.01em;
                color: #0f0f0f;
            }
        </style>
        <h2 class="dash-header-title">EDIT PRODUK</h2>
     <?php $__env->endSlot(); ?>

    <style>
        * { box-sizing: border-box; }

        .eprod-wrap { 
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
        }

        .eprod-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 32px 24px;
        }

        /* ── TOP BAR ── */
        .eprod-topbar {
            margin-bottom: 24px;
        }

        .eprod-eyebrow {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 4px;
        }

        .eprod-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #0f0f0f;
            letter-spacing: -0.01em;
        }

        .eprod-title-sub {
            font-size: 0.8rem;
            color: #bbb;
            margin-top: 2px;
        }

        /* ── ALERTS ── */
        .eprod-alert {
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 0.8rem;
            margin-bottom: 20px;
            border-left: 3px solid;
        }

        .eprod-alert-success { background: #e8f5e9; border-color: #2e7d32; color: #2e7d32; }
        .eprod-alert-error   { background: #ffebee; border-color: #c62828; color: #c62828; }

        /* ── 2 COLUMN LAYOUT ── */
        .eprod-two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* ── SECTION CARD ── */
        .eprod-section {
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 12px;
            padding: 20px 24px;
            margin-bottom: 20px;
        }

        .eprod-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 12px;
            margin-bottom: 20px;
        }

        .eprod-section-title {
            font-size: 1rem;
            font-weight: 600;
            color: #0f0f0f;
        }

        .eprod-section-sub {
            font-size: 0.7rem;
            color: #bbb;
            margin-top: 2px;
        }

        /* ── FORM FIELDS ── */
        .eprod-label {
            display: block;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 6px;
        }

        .eprod-label-req { color: #c62828; }

        .eprod-input,
        .eprod-select,
        .eprod-textarea {
            width: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.85rem;
            color: #1a1a1a;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 10px 12px;
            transition: border-color 0.15s;
            outline: none;
        }

        .eprod-input:focus,
        .eprod-select:focus,
        .eprod-textarea:focus { border-color: #0f0f0f; }

        .eprod-textarea { resize: vertical; min-height: 80px; }

        .form-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        /* ── EXISTING PHOTOS ── */
        .eprod-photo-label {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 10px;
        }

        .eprod-photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 8px;
            margin-bottom: 16px;
        }

        .eprod-photo-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

        .eprod-photo-item img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border: 1px solid #ebebeb;
            border-radius: 8px;
        }

        .eprod-photo-cover {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: #0f0f0f;
            color: #fff;
            font-size: 8px;
            text-align: center;
            padding: 3px 0;
            letter-spacing: 0.05em;
        }

        .eprod-photo-delete-btn {
            position: absolute;
            inset: 0;
            background: rgba(198, 40, 40, 0.85);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.15s;
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            font-family: inherit;
            gap: 4px;
        }

        .eprod-photo-item:hover .eprod-photo-delete-btn { opacity: 1; }

        /* ── UPLOAD ZONE ── */
        .eprod-upload-zone {
            border: 2px dashed #e0e0e0;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }

        .eprod-upload-zone:hover { border-color: #0f0f0f; background: #fafafa; }

        .eprod-upload-zone-text { font-size: 0.8rem; color: #999; }
        .eprod-upload-zone-hint { font-size: 0.68rem; color: #ccc; margin-top: 3px; }

        /* ── STOCK BADGE ── */
        .eprod-stock-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #f5f5f5;
            border: 1px solid #e8e8e8;
            border-radius: 30px;
            padding: 6px 14px;
            font-size: 0.7rem;
            color: #999;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .eprod-stock-num {
            font-size: 0.9rem;
            font-weight: 600;
            color: #0f0f0f;
        }

        /* ── VARIANT BUTTONS ── */
        .eprod-add-variant-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: 1px solid #e0e0e0;
            border-radius: 30px;
            padding: 7px 16px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #666;
            cursor: pointer;
            transition: border-color 0.15s, color 0.15s;
        }

        .eprod-add-variant-btn:hover { border-color: #0f0f0f; color: #0f0f0f; }

        /* ── VARIANT TABLE ── */
        .variant-table {
            width: 100%;
            border-collapse: collapse;
        }

        .variant-table th {
            text-align: left;
            padding: 10px 8px;
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            background: #fafafa;
            border-bottom: 1px solid #f0f0f0;
        }

        .variant-table td {
            padding: 10px 8px;
            border-bottom: 1px solid #f5f5f5;
            vertical-align: middle;
        }

        .variant-img-preview {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: #f5f5f5;
            border: 1px solid #ebebeb;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .variant-img-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .variant-input-sm {
            width: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.75rem;
            padding: 8px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            outline: none;
        }

        .variant-input-sm:focus { border-color: #0f0f0f; }

        .variant-select-sm {
            width: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.75rem;
            padding: 8px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background: #fff;
            outline: none;
        }

        .variant-color-input {
            width: 40px;
            height: 36px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            padding: 2px;
        }

        .variant-delete-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #ccc;
            transition: color 0.15s;
            padding: 4px;
        }

        .variant-delete-btn:hover { color: #c62828; }

        /* ── FORM ACTIONS ── */
        .eprod-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
            margin-top: 24px;
        }

        .eprod-btn-cancel {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            text-decoration: none;
            padding: 10px 20px;
            border: 1px solid #e0e0e0;
            border-radius: 30px;
            transition: border-color 0.15s, color 0.15s;
        }

        .eprod-btn-cancel:hover { border-color: #0f0f0f; color: #0f0f0f; }

        .eprod-btn-submit {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #fff;
            background: #0f0f0f;
            padding: 10px 28px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .eprod-btn-submit:hover { background: #333; }

        .hidden { display: none; }
        .relative { position: relative; }
        .mt-2 { margin-top: 8px; }
    </style>

    <div class="eprod-wrap">
        <div class="eprod-inner">

            
            <div class="eprod-topbar">
                <div class="eprod-title">Edit Produk</div>
                <div class="eprod-title-sub"><?php echo e($product->name); ?></div>
            </div>

            
            <?php if(session('success')): ?>
                <div class="eprod-alert eprod-alert-success"><?php echo e(session('success')); ?></div>
            <?php endif; ?>
            <?php if($errors->any()): ?>
                <div class="eprod-alert eprod-alert-error">
                    <strong style="display:block;margin-bottom:6px;">Terdapat kesalahan:</strong>
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div>· <?php echo e($error); ?></div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            <?php endif; ?>

            <form action="<?php echo e(route('admin.products.update', $product->id)); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>

                
                <div class="eprod-two-columns">
                    
                    <div class="eprod-section">
                        <div class="eprod-section-header">
                            <div class="eprod-section-title">Informasi Dasar</div>
                        </div>

                        <div class="form-grid-2">
                            <div style="grid-column: span 2;">
                                <label class="eprod-label">Nama Produk <span class="eprod-label-req">*</span></label>
                                <input type="text" name="name" value="<?php echo e(old('name', $product->name)); ?>" class="eprod-input" required>
                            </div>

                            <div>
                                <label class="eprod-label">Kategori <span class="eprod-label-req">*</span></label>
                                <select name="category_id" class="eprod-select" required>
                                    <?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($product->category_id == $category->id ? 'selected' : ''); ?>>
                                            <?php echo e($category->name); ?>

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

                            <div>
                                <label class="eprod-label">Brand</label>
                                <select name="brand_id" class="eprod-select">
                                    <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($product->brand_id == $brand->id ? 'selected' : ''); ?>>
                                            <?php echo e($brand->name); ?>

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

                            <div>
                                <label class="eprod-label">Berat (gram)</label>
                                <input type="number" name="weight" value="<?php echo e(old('weight', $product->weight)); ?>" min="1" class="eprod-input">
                            </div>

                            <div style="grid-column: span 2;">
                                <label class="eprod-label">Deskripsi</label>
                                <textarea name="description" rows="3" class="eprod-textarea"><?php echo e(old('description', $product->description)); ?></textarea>
                            </div>
                        </div>
                    </div>

                    
                    <div class="eprod-section">
                        <div class="eprod-section-header">
                            <div>
                                <div class="eprod-section-title">Galeri Foto</div>
                                <div class="eprod-section-sub">Hover foto untuk hapus · Foto pertama = cover</div>
                            </div>
                        </div>

                        
                        <?php if($product->images->count() > 0): ?>
                            <div class="eprod-photo-label">Foto saat ini</div>
                            <div class="eprod-photo-grid" id="existing-images-grid">
                                <?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="eprod-photo-item" data-image-id="<?php echo e($img->id); ?>">
                                    <img src="<?php echo e(Storage::url($img->image_path)); ?>" alt="">
                                    <?php if($img->is_primary): ?>
                                        <div class="eprod-photo-cover">Cover</div>
                                    <?php endif; ?>
                                    <button type="submit" form="delete-img-<?php echo e($img->id); ?>"
                                        class="eprod-photo-delete-btn"
                                        onclick="return confirm('Yakin hapus foto ini?')">
                                        <svg width="12" height="12" 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"/>
                                        </svg>
                                        Hapus
                                    </button>
                                </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        <?php else: ?>
                            <p style="font-size:0.75rem;color:#ccc;font-style:italic;margin-bottom:16px;">Belum ada foto produk.</p>
                        <?php endif; ?>

                        
                        <div class="eprod-upload-zone" onclick="document.getElementById('new_images').click()">
                            <div class="eprod-upload-zone-text">+ Tambah Foto Baru</div>
                            <div class="eprod-upload-zone-hint">JPG, PNG, WEBP · Bisa pilih banyak</div>
                            <input type="file" name="new_images[]" id="new_images" class="hidden" multiple accept="image/*" onchange="previewNewImages(this)">
                        </div>
                        <div id="new-image-preview" class="eprod-photo-grid" style="margin-top:8px;"></div>
                    </div>
                </div>

                
                <div class="eprod-section">
                    <div class="eprod-section-header">
                        <div>
                            <div class="eprod-section-title">Varian Produk</div>
                            <div class="eprod-section-sub">Edit varian yang ada atau tambah varian baru</div>
                        </div>
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div class="eprod-stock-badge">
                                Total Stok &nbsp;<span id="total-stock-display" class="eprod-stock-num"><?php echo e($product->variants->sum('stock')); ?></span>
                            </div>
                            <button type="button" class="eprod-add-variant-btn" onclick="addNewVariant()">
                                + Varian Baru
                            </button>
                        </div>
                    </div>

                    <input type="hidden" name="stock" id="total-stock-input" value="<?php echo e($product->variants->sum('stock')); ?>">

                    <div style="overflow-x: auto;">
                        <table class="variant-table">
                            <thead>
                                <tr>
                                    <th style="width:60px">Foto</th>
                                    <th>Ukuran</th>
                                    <th>Warna</th>
                                    <th style="width:50px">Kode</th>
                                    <th>Harga (Rp)</th>
                                    <th>Stok</th>
                                    <th>SKU</th>
                                    <th>Aksi</th>
                                    <th style="width:40px"></th>
                                </tr>
                            </thead>
                            <tbody id="variant-container">
                                
                                <?php $__currentLoopData = $product->variants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $variant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr id="variant-row-<?php echo e($variant->id); ?>">
                                    <td>
                                        <div class="relative">
                                            <div id="variant-img-<?php echo e($variant->id); ?>" class="variant-img-preview" onclick="togglePicker('<?php echo e($variant->id); ?>')">
                                                <?php if($variant->image): ?>
                                                    <img src="<?php echo e(Storage::url($variant->image->image_path)); ?>">
                                                <?php else: ?>
                                                    <svg width="20" height="20" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                    </svg>
                                                <?php endif; ?>
                                            </div>
                                            <div id="picker-popup-<?php echo e($variant->id); ?>" class="variant-picker hidden">
                                                <div class="picker-content" data-variantid="<?php echo e($variant->id); ?>"></div>
                                            </div>
                                            <input type="hidden" name="existing_variants[<?php echo e($variant->id); ?>][product_image_id]" id="hidden-img-<?php echo e($variant->id); ?>" value="<?php echo e($variant->product_image_id ?? ''); ?>">
                                        </div>
                                    </td>
                                    <td>
                                        <select name="existing_variants[<?php echo e($variant->id); ?>][size]" class="variant-select-sm">
                                            <option value="">Pilih</option>
                                            <?php $__currentLoopData = ['S','M','L','XL','XXL','XXXL']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($s); ?>" <?php echo e($variant->size == $s ? 'selected' : ''); ?>><?php echo e($s); ?></option>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" name="existing_variants[<?php echo e($variant->id); ?>][color]" value="<?php echo e($variant->color); ?>" class="variant-input-sm">
                                    </td>
                                    <td>
                                        <input type="color" name="existing_variants[<?php echo e($variant->id); ?>][color_code]" value="<?php echo e($variant->color_code ?? '#000000'); ?>" class="variant-color-input">
                                    </td>
                                    <td>
                                        <input type="number" name="existing_variants[<?php echo e($variant->id); ?>][price]" value="<?php echo e($variant->additional_price); ?>" min="0" class="variant-input-sm">
                                    </td>
                                    <td>
                                        <input type="number" name="existing_variants[<?php echo e($variant->id); ?>][stock]" value="<?php echo e($variant->stock); ?>" min="0" oninput="recalcStock()" class="variant-input-sm">
                                    </td>
                                    <td>
                                        <input type="text" name="existing_variants[<?php echo e($variant->id); ?>][sku]" value="<?php echo e($variant->sku_variant); ?>" class="variant-input-sm">
                                    </td>
                                    <td>
                                        <button type="submit" form="delete-variant-<?php echo e($variant->id); ?>" class="variant-delete-btn" onclick="return confirm('Hapus varian ini?')">
                                            <svg width="16" height="16" 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"/>
                                            </svg>
                                        </button>
                                    </td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>

                    
                    <div id="new-variant-container"></div>
                </div>

                
                <div class="eprod-actions">
                    <a href="<?php echo e(route('admin.products.index')); ?>" class="eprod-btn-submit">Batal</a>
                    <button type="submit" class="eprod-btn-submit">Perbarui Produk</button>
                </div>
            </form>
        </div>
    </div>

    
    <?php $__currentLoopData = $product->variants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $variant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <form id="delete-variant-<?php echo e($variant->id); ?>"
              action="<?php echo e(route('admin.products.variant.destroy', $variant->id)); ?>"
              method="POST" style="display:none;">
            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
        </form>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    
    <?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <form id="delete-img-<?php echo e($img->id); ?>"
              action="<?php echo e(route('admin.products.image.destroy', $img->id)); ?>"
              method="POST" style="display:none;">
            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
        </form>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    <?php
        $imagesForJs = $product->images->map(function($img) {
            return ['id' => $img->id, 'url' => Storage::url($img->image_path), 'primary' => $img->is_primary];
        })->values()->toArray();
    ?>

    <script>
        const existingImages = <?php echo json_encode($imagesForJs, 15, 512) ?>;
        let newVarIndex = 0;

        function previewNewImages(input) {
            const container = document.getElementById('new-image-preview');
            container.innerHTML = '';
            if (input.files) {
                Array.from(input.files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = e => {
                        container.innerHTML += `
                            <div class="eprod-photo-item">
                                <img src="${e.target.result}" style="aspect-ratio:1;object-fit:cover;">
                            </div>`;
                    };
                    reader.readAsDataURL(file);
                });
            }
        }

        function togglePicker(variantId) {
            const popup = document.getElementById(`picker-popup-${variantId}`);
            if (popup.classList.contains('hidden')) {
                document.querySelectorAll('.variant-picker').forEach(p => p.classList.add('hidden'));
                popup.classList.remove('hidden');
                const content = popup.querySelector('.picker-content');
                if (content && content.innerHTML === '') {
                    buildPickerContent(content, variantId);
                }
            } else {
                popup.classList.add('hidden');
            }
        }

        function buildPickerContent(container, variantId) {
            let html = `<div style="display:flex;flex-wrap:wrap;gap:8px;">
                        <div class="picker-thumb" onclick="selectImage(${variantId}, '', '')" style="width:50px;height:50px;border:1px solid #e0e0e0;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                            <svg width="16" height="16" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </div>`;
            
            existingImages.forEach(img => {
                html += `
                    <div class="picker-thumb" onclick="selectImage(${variantId}, ${img.id}, '${img.url}')" style="width:50px;height:50px;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;cursor:pointer;">
                        <img src="${img.url}" style="width:100%;height:100%;object-fit:cover;">
                    </div>`;
            });
            
            html += `</div>`;
            if (existingImages.length === 0) {
                html += `<p style="font-size:0.7rem;color:#ccc;margin-top:8px;">Upload foto produk terlebih dahulu.</p>`;
            }
            container.innerHTML = html;
        }

        function selectImage(variantId, imageId, imageUrl) {
            const previewEl = document.getElementById(`variant-img-${variantId}`);
            const hiddenEl = document.getElementById(`hidden-img-${variantId}`);
            hiddenEl.value = imageId;
            
            if (imageUrl) {
                previewEl.innerHTML = `<img src="${imageUrl}" style="width:100%;height:100%;object-fit:cover;">`;
            } else {
                previewEl.innerHTML = `<svg width="20" height="20" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>`;
            }
            document.getElementById(`picker-popup-${variantId}`).classList.add('hidden');
        }

        function addNewVariant() {
            const sizes = ['S','M','L','XL','XXL','XXXL'];
            const sizeOptions = sizes.map(s => `<option value="${s}">${s}</option>`).join('');
            
            let imgPickerOptions = `<div style="display:flex;flex-wrap:wrap;gap:8px;">
                <div class="picker-thumb" onclick="selectNewVariantImage(${newVarIndex}, '', '')" style="width:50px;height:50px;border:1px solid #e0e0e0;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;">
                    <svg width="16" height="16" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </div>`;
            
            existingImages.forEach(img => {
                imgPickerOptions += `
                    <div class="picker-thumb" onclick="selectNewVariantImage(${newVarIndex}, ${img.id}, '${img.url}')" style="width:50px;height:50px;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;cursor:pointer;">
                        <img src="${img.url}" style="width:100%;height:100%;object-fit:cover;">
                    </div>`;
            });
            imgPickerOptions += `</div>`;

            const html = `
                <tr id="new-variant-row-${newVarIndex}">
                    <td>
                        <div class="relative">
                            <div id="new-variant-img-${newVarIndex}" class="variant-img-preview" onclick="toggleNewPicker(${newVarIndex})">
                                <svg width="20" height="20" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                            </div>
                            <div id="new-picker-popup-${newVarIndex}" class="variant-picker hidden">
                                <div class="new-picker-content" data-newidx="${newVarIndex}">${imgPickerOptions}</div>
                            </div>
                            <input type="hidden" name="new_variants[${newVarIndex}][product_image_id]" id="new-hidden-img-${newVarIndex}" value="">
                        </div>
                    </td>
                    <td>
                        <select name="new_variants[${newVarIndex}][size]" class="variant-select-sm" required>
                            <option value="">Pilih</option>${sizeOptions}
                        </select>
                    </td>
                    <td>
                        <input type="text" name="new_variants[${newVarIndex}][color]" placeholder="Nama warna" class="variant-input-sm" required>
                    </td>
                    <td>
                        <input type="color" name="new_variants[${newVarIndex}][color_code]" value="#000000" class="variant-color-input">
                    </td>
                    <td>
                        <input type="number" name="new_variants[${newVarIndex}][price]" placeholder="0" min="0" class="variant-input-sm" required>
                    </td>
                    <td>
                        <input type="number" name="new_variants[${newVarIndex}][stock]" placeholder="0" min="0" oninput="recalcStock()" class="variant-input-sm" required>
                    </td>
                    <td>
                        <input type="text" name="new_variants[${newVarIndex}][sku]" placeholder="SKU" class="variant-input-sm">
                    </td>
                    <td>
                        <button type="button" class="variant-delete-btn" onclick="removeNewVariant(${newVarIndex})">
                            <svg width="16" height="16" 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"/>
                            </svg>
                        </button>
                    </td>
                </tr>
            `;
            
            document.getElementById('variant-container').insertAdjacentHTML('beforeend', html);
            newVarIndex++;
        }

        function toggleNewPicker(idx) {
            const popup = document.getElementById(`new-picker-popup-${idx}`);
            document.querySelectorAll('.variant-picker').forEach(p => p.classList.add('hidden'));
            popup.classList.toggle('hidden');
        }

        function selectNewVariantImage(idx, imageId, imageUrl) {
            const previewEl = document.getElementById(`new-variant-img-${idx}`);
            const hiddenEl = document.getElementById(`new-hidden-img-${idx}`);
            hiddenEl.value = imageId;
            
            if (imageUrl) {
                previewEl.innerHTML = `<img src="${imageUrl}" style="width:100%;height:100%;object-fit:cover;">`;
            } else {
                previewEl.innerHTML = `<svg width="20" height="20" fill="none" stroke="#ccc" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>`;
            }
            document.getElementById(`new-picker-popup-${idx}`).classList.add('hidden');
        }

        function removeNewVariant(idx) {
            document.getElementById(`new-variant-row-${idx}`).remove();
            recalcStock();
        }

        function recalcStock() {
            const existing = document.querySelectorAll('#variant-container input[name*="[stock]"]');
            let total = 0;
            existing.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('click', function(e) {
            if (!e.target.closest('.variant-picker') && !e.target.closest('.variant-img-preview')) {
                document.querySelectorAll('.variant-picker').forEach(p => p.classList.add('hidden'));
            }
        });
    </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\ecommerce_app\resources\views/admin/products/edit.blade.php ENDPATH**/ ?>