<?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">Manajemen Stock Log</h2>
     <?php $__env->endSlot(); ?>

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

        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; }

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

        .sl-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 24px 60px;
        }

        /* ── TOP BAR ── */
        .sl-topbar {
            margin-bottom: 32px;
        }

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

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

        /* ── ALERTS ── */
        .sl-alert {
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 0.8rem;
            margin-bottom: 20px;
            border-left: 3px solid;
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

        /* ── LAYOUT ── */
        .sl-layout {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 20px;
            align-items: start;
        }

        /* ── CARD ── */
        .sl-card {
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 12px;
            overflow: hidden;
        }

        .sl-card-header {
            padding: 16px 24px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

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

        .sl-card-body { padding: 24px; }

        /* ── FORM FIELDS ── */
        .sl-field { margin-bottom: 18px; }

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

        .sl-input, .sl-select {
            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;
        }

        .sl-input:focus, .sl-select:focus { border-color: #0f0f0f; }
        .sl-input:disabled, .sl-select:disabled { background: #fafafa; color: #ccc; cursor: not-allowed; }

        .sl-err { font-size: 0.7rem; color: #c62828; margin-top: 4px; }

        /* ── CURRENT STOCK DISPLAY ── */
        .sl-stock-display {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fafafa;
            border: 1px solid #ebebeb;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 0.85rem;
            color: #999;
        }

        .sl-stock-display-val {
            font-size: 0.9rem;
            font-weight: 600;
            color: #0f0f0f;
        }

        /* ── TYPE TOGGLE ── */
        .sl-type-toggle {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .sl-type-btn {
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 30px;
            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;
            cursor: pointer;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.15s;
            color: #999;
        }

        .sl-type-btn.in.active  { background: #e8f5e9; border-color: #2e7d32; color: #2e7d32; }
        .sl-type-btn.out.active { background: #ffebee; border-color: #c62828; color: #c62828; }
        .sl-type-btn:not(.active):hover { border-color: #0f0f0f; color: #0f0f0f; }

        /* ── QTY STEPPER ── */
        .sl-qty-wrap {
            display: flex;
            align-items: center;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            transition: border-color 0.15s;
        }

        .sl-qty-wrap:focus-within { border-color: #0f0f0f; }

        .sl-qty-btn {
            width: 40px;
            height: 40px;
            background: #fafafa;
            border: none;
            font-size: 1.2rem;
            font-weight: 400;
            color: #666;
            cursor: pointer;
            transition: background 0.15s;
            flex-shrink: 0;
        }

        .sl-qty-btn:hover { background: #f0f0f0; color: #0f0f0f; }

        .sl-qty-input {
            flex: 1;
            border: none;
            outline: none;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 600;
            color: #1a1a1a;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            padding: 0;
            background: #fff;
        }

        /* ── SUBMIT BUTTON ── */
        .sl-submit-btn {
            width: 100%;
            padding: 12px;
            background: #0f0f0f;
            color: #fff;
            border: none;
            border-radius: 30px;
            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;
            cursor: pointer;
            transition: background 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 20px;
        }

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

        /* ── TABLE ── */
        .sl-tbl-head {
            display: grid;
            grid-template-columns: 1.1fr 2fr 0.7fr 0.6fr 1.4fr 1fr;
            padding: 12px 24px;
            background: #fafafa;
            border-bottom: 1px solid #f0f0f0;
        }

        .sl-th {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
        }

        .sl-th.center { text-align: center; }

        .sl-row {
            display: grid;
            grid-template-columns: 1.1fr 2fr 0.7fr 0.6fr 1.4fr 1fr;
            padding: 14px 24px;
            border-bottom: 1px solid #f5f5f5;
            align-items: center;
            transition: background 0.12s;
        }

        .sl-row:last-child { border-bottom: none; }
        .sl-row:hover { background: #fafafa; }

        /* Time */
        .sl-time     { font-size: 0.8rem; font-weight: 500; color: #1a1a1a; }
        .sl-time-sub { font-size: 0.68rem; color: #ccc; margin-top: 2px; }

        /* Product */
        .sl-prod-name { font-size: 0.85rem; font-weight: 600; color: #1a1a1a; }
        .sl-prod-var  { font-size: 0.72rem; color: #bbb; margin-top: 2px; }
        .sl-prod-var.deleted { color: #c62828; font-style: italic; }

        /* Badge */
        .sl-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .sl-badge.in  { background: #e8f5e9; color: #2e7d32; }
        .sl-badge.out { background: #ffebee; color: #c62828; }

        /* Qty */
        .sl-qty-val { font-size: 0.9rem; font-weight: 600; text-align: center; }
        .sl-qty-val.in  { color: #2e7d32; }
        .sl-qty-val.out { color: #c62828; }

        /* Notes / User */
        .sl-notes { font-size: 0.75rem; color: #999; }
        .sl-user  { font-size: 0.75rem; color: #999; }

        /* Empty */
        .sl-empty { text-align: center; padding: 60px 20px; }
        .sl-empty-title {
            font-size: 1rem;
            font-weight: 500;
            color: #ccc;
            margin-bottom: 6px;
        }
        .sl-empty-desc { font-size: 0.75rem; color: #ddd; }

        /* ── CARD ICON DOT ── */
        .sl-card-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        @media (max-width: 900px) {
            .sl-layout { grid-template-columns: 1fr; }
            .sl-tbl-head { display: none; }
            .sl-row { grid-template-columns: 1fr; gap: 6px; }
        }
    </style>

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

            
            <div class="sl-topbar">
                <div class="sl-eyebrow">Admin</div>
                <div class="sl-title">Manajemen Stock Log</div>
            </div>

            
            <?php if(session('success')): ?>
                <div class="sl-alert success">
                    <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                    <?php echo e(session('success')); ?>

                </div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div class="sl-alert error">
                    <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <?php echo e(session('error')); ?>

                </div>
            <?php endif; ?>

            <div class="sl-layout">

                
                <div class="sl-card">
                    <div class="sl-card-header">
                        <div class="sl-card-dot" style="background:#0f0f0f;"></div>
                        <span class="sl-card-title">Tambah / Kurang Stok</span>
                    </div>
                    <div class="sl-card-body">
                        <form action="<?php echo e(route('admin.stock-logs.store')); ?>" method="POST" id="stock-form">
                            <?php echo csrf_field(); ?>

                            
                            <div class="sl-field">
                                <label class="sl-label">Pilih Produk</label>
                                <select id="product_id" class="sl-select" required>
                                    <option value="">— Pilih Produk —</option>
                                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($product->id); ?>"><?php echo e($product->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>

                            
                            <div class="sl-field">
                                <label class="sl-label">Varian (Ukuran & Warna)</label>
                                <select name="product_variant_id" id="product_variant_id" class="sl-select" required disabled>
                                    <option value="">— Pilih Produk Dulu —</option>
                                </select>
                                <?php $__errorArgs = ['product_variant_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <div class="sl-err"><?php echo e($message); ?></div>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            
                            <div class="sl-field" id="current-stock-wrap" style="display:none;">
                                <label class="sl-label">Stok Saat Ini</label>
                                <div class="sl-stock-display">
                                    <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="#bbb">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10"/>
                                    </svg>
                                    <span id="current-stock-val" class="sl-stock-display-val">0</span>
                                    <span>pcs tersedia</span>
                                </div>
                            </div>

                            
                            <div class="sl-field">
                                <label class="sl-label">Tipe Transaksi</label>
                                <div class="sl-type-toggle">
                                    <button type="button" class="sl-type-btn in active" id="btn-in" onclick="setType('in')">
                                        <svg width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                                        </svg>
                                        Stok Masuk
                                    </button>
                                    <button type="button" class="sl-type-btn out" id="btn-out" onclick="setType('out')">
                                        <svg width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                                        </svg>
                                        Stok Keluar
                                    </button>
                                </div>
                                <input type="hidden" name="type" id="type-input" value="in">
                            </div>

                            
                            <div class="sl-field">
                                <label class="sl-label">Jumlah (Pcs)</label>
                                <div class="sl-qty-wrap">
                                    <button type="button" class="sl-qty-btn" onclick="changeQty(-1)">−</button>
                                    <input type="number" name="quantity_change" id="qty-input"
                                           value="<?php echo e(old('quantity_change', 1)); ?>" min="1"
                                           class="sl-qty-input" required>
                                    <button type="button" class="sl-qty-btn" onclick="changeQty(1)">+</button>
                                </div>
                                <?php $__errorArgs = ['quantity_change'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <div class="sl-err"><?php echo e($message); ?></div>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            
                            <div class="sl-field" style="margin-bottom:0;">
                                <label class="sl-label">Catatan</label>
                                <select name="notes" class="sl-select">
                                    <option value="">Pilih alasan...</option>
                                    <option value="Pembelian dari supplier">Pembelian dari supplier</option>
                                    <option value="Produk rusak/cacat">Produk rusak/cacat</option>
                                    <option value="Kehilangan">Barang Hilang</option>
                                </select>
                            </div>

                            <button type="submit" class="sl-submit-btn">
                                <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                </svg>
                                Simpan Perubahan Stok
                            </button>
                        </form>
                    </div>
                </div>

                
                <div class="sl-card">
                    <div class="sl-card-header">
                        <div class="sl-card-dot" style="background:#bbb;"></div>
                        <span class="sl-card-title">Riwayat Pergerakan Stok</span>
                    </div>

                    
                    <div class="sl-tbl-head">
                        <div class="sl-th">Tanggal & Waktu</div>
                        <div class="sl-th">Produk & Varian</div>
                        <div class="sl-th center">Tipe</div>
                        <div class="sl-th center">Qty</div>
                        <div class="sl-th">Catatan</div>
                        <div class="sl-th">User</div>
                    </div>

                    <?php $__empty_1 = true; $__currentLoopData = $stockLogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $log): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <div class="sl-row">
                            <div>
                                <div class="sl-time"><?php echo e($log->created_at->format('d M Y')); ?></div>
                                <div class="sl-time-sub"><?php echo e($log->created_at->format('H:i')); ?> WIB</div>
                            </div>
                            <div>
                                <div class="sl-prod-name"><?php echo e($log->product->name ?? 'Produk Dihapus'); ?></div>
                                <div class="sl-prod-var <?php echo e(!$log->variant ? 'deleted' : ''); ?>">
                                    <?php if($log->variant): ?>
                                        Size: <?php echo e($log->variant->size); ?> · <?php echo e($log->variant->color); ?>

                                    <?php else: ?>
                                        Varian dihapus
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div style="text-align:center;">
                                <span class="sl-badge <?php echo e($log->type); ?>">
                                    <?php echo e($log->type == 'in' ? 'Masuk' : 'Keluar'); ?>

                                </span>
                            </div>
                            <div class="sl-qty-val <?php echo e($log->type); ?>">
                                <?php echo e($log->type == 'in' ? '+' : '−'); ?><?php echo e(abs($log->quantity_change)); ?>

                            </div>
                            <div class="sl-notes"><?php echo e($log->notes ?? '—'); ?></div>
                            <div class="sl-user"><?php echo e($log->user->name ?? 'Sistem'); ?></div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="sl-empty">
                            <div class="sl-empty-title">Belum ada riwayat</div>
                            <div class="sl-empty-desc">Pergerakan stok akan tercatat di sini</div>
                        </div>
                    <?php endif; ?>

                    
                    <?php if($stockLogs->hasPages()): ?>
                        <div style="padding: 14px 24px; border-top: 1px solid #f0f0f0;">
                            <?php echo e($stockLogs->links()); ?>

                        </div>
                    <?php endif; ?>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const productsData  = <?php echo json_encode($products->load('variants'), 15, 512) ?>;
            const productSelect = document.getElementById('product_id');
            const variantSelect = document.getElementById('product_variant_id');

            productSelect.addEventListener('change', function () {
                const selectedId = parseInt(this.value);
                variantSelect.innerHTML = '<option value="">-- Pilih Varian --</option>';
                document.getElementById('current-stock-wrap').style.display = 'none';

                if (selectedId) {
                    const prod = productsData.find(p => p.id === selectedId);
                    if (prod && prod.variants && prod.variants.length > 0) {
                        variantSelect.disabled = false;
                        prod.variants.forEach(v => {
                            const opt = document.createElement('option');
                            opt.value = v.id;
                            opt.dataset.stock = v.stock;
                            opt.textContent = `Size: ${v.size} — ${v.color} (Stok: ${v.stock} pcs)`;
                            variantSelect.appendChild(opt);
                        });
                    } else {
                        variantSelect.disabled = true;
                        variantSelect.innerHTML = '<option value="">Tidak ada varian tersedia</option>';
                    }
                } else {
                    variantSelect.disabled = true;
                    variantSelect.innerHTML = '<option value="">-- Pilih Produk Dulu --</option>';
                }
            });

            variantSelect.addEventListener('change', function () {
                const selected = this.options[this.selectedIndex];
                const stock    = selected ? selected.dataset.stock : null;
                const wrap     = document.getElementById('current-stock-wrap');
                if (stock !== undefined && stock !== null && this.value !== '') {
                    document.getElementById('current-stock-val').textContent = parseInt(stock).toLocaleString('id-ID');
                    wrap.style.display = 'block';
                } else {
                    wrap.style.display = 'none';
                }
            });
        });

        function setType(type) {
            document.getElementById('type-input').value = type;
            document.getElementById('btn-in').classList.toggle('active', type === 'in');
            document.getElementById('btn-out').classList.toggle('active', type === 'out');
        }

        function changeQty(delta) {
            const input = document.getElementById('qty-input');
            const val   = parseInt(input.value) || 1;
            input.value = Math.max(1, val + delta);
        }
    </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\toko_app\resources\views/admin/stock-logs/index.blade.php ENDPATH**/ ?>