<?php $__env->startSection('title', isset($product) ? 'Edit Produk' : 'Tambah Produk'); ?>
<?php $__env->startSection('page-title', isset($product) ? 'Edit Produk' : 'Tambah Produk'); ?>

<?php $__env->startSection('content'); ?>
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
            <h2 class="font-bold text-slate-800"><?php echo e(isset($product) ? 'Edit: '.$product->name : 'Produk Baru'); ?></h2>
            <a href="<?php echo e(route('products.index')); ?>" class="text-sm text-slate-500 hover:text-slate-700">← Kembali</a>
        </div>

        <form method="POST" action="<?php echo e(isset($product) ? route('products.update', $product) : route('products.store')); ?>"
              enctype="multipart/form-data" class="p-6 space-y-5">
            <?php echo csrf_field(); ?>
            <?php if(isset($product)): ?> <?php echo method_field('PUT'); ?> <?php endif; ?>

            <div class="grid grid-cols-2 gap-4">
                
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Nama Produk <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="<?php echo e(old('name', $product->name ?? '')); ?>" required
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-400 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                        placeholder="Nama produk...">
                    <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">SKU / Kode Produk</label>
                    <input type="text" name="sku" value="<?php echo e(old('sku', $product->sku ?? '')); ?>"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        placeholder="Auto generate jika kosong">
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Barcode</label>
                    <input type="text" name="barcode" value="<?php echo e(old('barcode', $product->barcode ?? '')); ?>"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        placeholder="Scan atau ketik barcode">
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Kategori</label>
                    <select name="category_id" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white">
                        <option value="">— Pilih Kategori —</option>
                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($cat->id); ?>" <?php echo e(old('category_id', $product->category_id ?? '') == $cat->id ? 'selected' : ''); ?>>
                            <?php echo e($cat->icon); ?> <?php echo e($cat->name); ?>

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

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Satuan <span class="text-red-500">*</span></label>
                    <input type="text" name="unit" value="<?php echo e(old('unit', $product->unit ?? 'pcs')); ?>" required
                        list="unit-list"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        placeholder="pcs, kg, liter...">
                    <datalist id="unit-list">
                        <option value="pcs"><option value="kg"><option value="gram"><option value="liter">
                        <option value="ml"><option value="botol"><option value="bungkus"><option value="lusin">
                        <option value="box"><option value="karton"><option value="porsi"><option value="gelas">
                    </datalist>
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Harga Modal (HPP) <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">Rp</span>
                        <input type="number" name="cost_price" value="<?php echo e(old('cost_price', $product->cost_price ?? 0)); ?>" required min="0"
                            class="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                            oninput="calcMargin()">
                    </div>
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Harga Jual <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">Rp</span>
                        <input type="number" name="selling_price" value="<?php echo e(old('selling_price', $product->selling_price ?? 0)); ?>" required min="0"
                            class="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                            oninput="calcMargin()">
                    </div>
                    <p class="text-xs mt-1" id="marginInfo"></p>
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Stok Awal</label>
                    <input type="number" name="stock" value="<?php echo e(old('stock', $product->stock ?? 0)); ?>" min="0"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        <?php echo e(isset($product) ? 'disabled' : ''); ?>>
                    <?php if(isset($product)): ?>
                    <p class="text-xs text-slate-500 mt-1">Gunakan tombol "Penyesuaian Stok" untuk mengubah stok.</p>
                    <?php endif; ?>
                </div>

                
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Min. Stok Alert</label>
                    <input type="number" name="min_stock" value="<?php echo e(old('min_stock', $product->min_stock ?? 5)); ?>" min="0"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                </div>

                
                <div class="col-span-2 flex items-center gap-4">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="track_stock" value="1" class="rounded"
                            <?php echo e(old('track_stock', $product->track_stock ?? true) ? 'checked' : ''); ?>>
                        <span class="text-sm font-medium text-slate-700">Lacak Stok</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" class="rounded"
                            <?php echo e(old('is_active', $product->is_active ?? true) ? 'checked' : ''); ?>>
                        <span class="text-sm font-medium text-slate-700">Produk Aktif</span>
                    </label>
                </div>

                
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Deskripsi (opsional)</label>
                    <textarea name="description" rows="2"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
                        placeholder="Deskripsi singkat produk..."><?php echo e(old('description', $product->description ?? '')); ?></textarea>
                </div>

                
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Gambar Produk</label>
                    <?php if(isset($product) && $product->image): ?>
                    <div class="mb-2">
                        <img src="<?php echo e(asset('storage/'.$product->image)); ?>" class="w-20 h-20 object-cover rounded-xl border border-slate-200" alt="">
                    </div>
                    <?php endif; ?>
                    <input type="file" name="image" accept="image/*"
                        class="w-full text-sm border border-slate-200 rounded-xl px-3 py-2 focus:outline-none file:mr-3 file:py-1 file:px-3 file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <p class="text-xs text-slate-500 mt-1">Maks 2MB. Format: JPG, PNG, WebP</p>
                </div>
            </div>

            <div class="flex gap-3 pt-2">
                <a href="<?php echo e(route('products.index')); ?>"
                   class="px-6 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-sm transition">Batal</a>
                <button type="submit"
                    class="px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition shadow-sm">
                    <?php echo e(isset($product) ? '💾 Update Produk' : '➕ Simpan Produk'); ?>

                </button>
            </div>
        </form>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function calcMargin() {
    const cost = parseFloat(document.querySelector('[name=cost_price]').value) || 0;
    const sell = parseFloat(document.querySelector('[name=selling_price]').value) || 0;
    const el = document.getElementById('marginInfo');
    if (sell > 0 && cost > 0) {
        const margin = ((sell - cost) / sell * 100).toFixed(1);
        const profit = sell - cost;
        el.textContent = `Margin: ${margin}% | Untung: Rp ${profit.toLocaleString('id-ID')}`;
        el.className = 'text-xs mt-1 ' + (margin >= 20 ? 'text-emerald-600' : margin >= 10 ? 'text-amber-600' : 'text-red-500');
    } else {
        el.textContent = '';
    }
}
calcMargin();
</script>
<?php $__env->stopPush(); ?>
<?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\pos-umkm\resources\views/products/form.blade.php ENDPATH**/ ?>