<?php $__env->startSection('title', 'Kelola Stok: ' . $product->name); ?>

<?php $__env->startSection('content'); ?>
<div class="animate-pro">

    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb" class="mb-1">
                <ol class="breadcrumb mb-0" style="font-size: 12px;">
                    <li class="breadcrumb-item"><a href="<?php echo e(route('products.index')); ?>" class="text-decoration-none text-muted">Katalog Produk</a></li>
                    <li class="breadcrumb-item active text-dark fw-bold">Kelola Stok</li>
                </ol>
            </nav>
            <h4 class="fw-800 mb-0"><?php echo e($product->name); ?></h4>
            <p class="text-muted small mb-0"><?php echo e($product->category->name); ?> &bull; Rp <?php echo e(number_format($product->price, 0, ',', '.')); ?></p>
        </div>
        <a href="<?php echo e(route('products.index')); ?>" class="btn btn-outline-secondary rounded-pill px-4 fw-bold">
            <i class="ti ti-arrow-left me-2"></i> Kembali
        </a>
    </div>

    
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-4 p-md-5">

            
            <div class="d-flex align-items-center gap-4 mb-5 pb-4 border-bottom">
                <?php if($product->image): ?>
                    <img src="<?php echo e(asset('storage/'.$product->image)); ?>" width="72" height="72" class="rounded-4 border shadow-sm" style="object-fit:cover;">
                <?php endif; ?>
                <div>
                    <p class="text-muted small fw-bold mb-1 text-uppercase" style="letter-spacing: 1px;">Stok Saat Ini</p>
                    <div class="d-flex align-items-center gap-3">
                        <span class="display-5 fw-800 <?php echo e($product->stock <= 5 ? 'text-danger' : 'text-success'); ?>" id="liveStock"><?php echo e($product->stock); ?></span>
                        <?php if($product->stock <= 5): ?>
                            <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-3 py-2 fw-bold">⚠️ Hampir Habis</span>
                        <?php else: ?>
                            <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-2 fw-bold">✓ Aman</span>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            
            <div class="row g-4">

                
                <div class="col-md-6">
                    <div class="p-4 rounded-4 h-100" style="border: 2px solid #d1fae5; background: #f0fdf4;">
                        <h6 class="fw-800 text-success mb-3">
                            <i class="ti ti-arrow-bar-to-down me-2"></i>Stok Masuk / Penambahan
                        </h6>
                        <form id="formMasuk">
                            <div class="row g-3 align-items-end">
                                <div class="col-sm-8">
                                    <label class="small fw-bold mb-1 d-block">JUMLAH TAMBAH</label>
                                    <input type="number" name="amount" class="form-control border-0 bg-white py-3 rounded-3 fw-bold fs-5 text-center shadow-sm" min="1" placeholder="0" required>
                                </div>
                                <div class="col-sm-4">
                                    <button type="submit" class="btn btn-success w-100 py-3 rounded-3 fw-800 shadow-sm">
                                        <i class="ti ti-plus"></i> Simpan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                
                <div class="col-md-6">
                    <div class="p-4 rounded-4 h-100" style="border: 2px solid #fee2e2; background: #fff5f5;">
                        <h6 class="fw-800 text-danger mb-3">
                            <i class="ti ti-arrow-bar-to-up me-2"></i>Stok Keluar / Pengurangan
                        </h6>
                        <form id="formKeluar">
                            <div class="row g-3 align-items-end">
                                <div class="col-sm-8">
                                    <label class="small fw-bold mb-1 d-block">JUMLAH KURANGI</label>
                                    <input type="number" name="amount" class="form-control border-0 bg-white py-3 rounded-3 fw-bold fs-5 text-center shadow-sm" min="1" placeholder="0" required>
                                </div>
                                <div class="col-sm-4">
                                    <button type="submit" class="btn btn-danger w-100 py-3 rounded-3 fw-800 shadow-sm">
                                        <i class="ti ti-minus"></i> Simpan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

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

    
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white p-4 border-0 d-flex justify-content-between align-items-center">
            <div>
                <h5 class="fw-800 mb-0">Riwayat Pergerakan Stok</h5>
                <p class="text-muted small mb-0">Semua catatan perubahan stok untuk produk ini.</p>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="historyTable">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4 py-3 border-0 text-muted small fw-800">WAKTU</th>
                            <th class="py-3 border-0 text-muted small fw-800 text-center">STATUS</th>
                            <th class="py-3 border-0 text-muted small fw-800 text-center">JUMLAH</th>
                            <th class="py-3 border-0 text-muted small fw-800 text-center">STOK SEBELUM</th>
                            <th class="py-3 border-0 text-muted small fw-800 text-center">STOK SESUDAH</th>
                            <th class="pe-4 py-3 border-0 text-muted small fw-800">KETERANGAN</th>
                        </tr>
                    </thead>
                    <tbody id="historyBody">
                        <?php $__empty_1 = true; $__currentLoopData = $histories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $h): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td class="ps-4 py-3">
                                <div class="fw-bold text-dark" style="font-size: 13px;"><?php echo e($h->created_at->format('d M Y')); ?></div>
                                <div class="text-muted" style="font-size: 11px;"><?php echo e($h->created_at->format('H:i:s')); ?></div>
                            </td>
                            <td class="text-center">
                                <?php if($h->status == 'masuk'): ?>
                                    <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-2 fw-800" style="font-size: 10px;">↓ Masuk</span>
                                <?php else: ?>
                                    <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-3 py-2 fw-800" style="font-size: 10px;">↑ Keluar</span>
                                <?php endif; ?>
                            </td>
                            <td class="text-center fw-800 fs-5 <?php echo e($h->status == 'masuk' ? 'text-success' : 'text-danger'); ?>">
                                <?php echo e($h->status == 'masuk' ? '+' : '-'); ?><?php echo e($h->jumlah); ?>

                            </td>
                            <td class="text-center">
                                <span class="badge bg-light text-dark border rounded-pill px-3 py-2 fw-bold"><?php echo e($h->stok_sebelum); ?></span>
                            </td>
                            <td class="text-center">
                                <span class="badge <?php echo e($h->stok_sesudah <= 5 ? 'bg-danger bg-opacity-10 text-danger' : 'bg-success bg-opacity-10 text-success'); ?> rounded-pill px-3 py-2 fw-bold"><?php echo e($h->stok_sesudah); ?></span>
                            </td>
                            <td class="pe-4 text-muted small"><?php echo e($h->keterangan ?? '-'); ?></td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr id="emptyRow">
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="ti ti-history fs-1 d-block mb-2 opacity-25"></i>
                                Belum ada riwayat pergerakan stok untuk produk ini.
                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <?php if($histories->hasPages()): ?>
        <div class="card-footer bg-white border-0 p-4">
            <?php echo e($histories->links()); ?>

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

</div>

<?php $__env->startPush('js'); ?>
<script>
$(function() {

    function formatDate(dateStr) {
        const d = new Date(dateStr);
        return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }) 
             + ' · ' + d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
    }

    function submitAdjust(type, form) {
        const amount = parseInt($(form).find('[name=amount]').val());

        if (!amount || amount < 1) {
            $(form).find('[name=amount]').focus().addClass('is-invalid');
            return;
        }
        $(form).find('[name=amount]').removeClass('is-invalid');

        const btn = $(form).find('button[type=submit]');
        const origHtml = btn.html();
        btn.prop('disabled', true).html('<i class="ti ti-loader-2 ti-spin me-1"></i>...');

        $.ajax({
            url: '/products/<?php echo e($product->id); ?>/adjust-stock',
            type: 'POST',
            data: { _token: '<?php echo e(csrf_token()); ?>', type: type, amount: amount },
            success: function(res) {
                btn.prop('disabled', false).html(origHtml);
                if (res.success) {
                    const newStock = res.new_stock;
                    const before   = res.before;
                    const now      = new Date().toISOString();

                    // Update angka stok
                    $('#liveStock').text(newStock);
                    if (newStock <= 5) {
                        $('#liveStock').removeClass('text-success').addClass('text-danger');
                    } else {
                        $('#liveStock').removeClass('text-danger').addClass('text-success');
                    }

                    // Tambahkan baris baru di ATAS tabel riwayat
                    const statusBadge = type === 'masuk'
                        ? `<span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-2 fw-800" style="font-size: 10px;">↓ Masuk</span>`
                        : `<span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-3 py-2 fw-800" style="font-size: 10px;">↑ Keluar</span>`;
                    const jmlClass   = type === 'masuk' ? 'text-success' : 'text-danger';
                    const jmlSign    = type === 'masuk' ? '+' : '-';
                    const sesudahClass = newStock <= 5 ? 'bg-danger bg-opacity-10 text-danger' : 'bg-success bg-opacity-10 text-success';

                    const today = new Date();
                    const tgl   = today.toLocaleDateString('id-ID', {day:'2-digit',month:'short',year:'numeric'});
                    const jam   = today.toLocaleTimeString('id-ID');

                    const newRow = `<tr style="background: #f0fdf4; animation: flash 1s ease-out;">
                        <td class="ps-4 py-3">
                            <div class="fw-bold text-dark" style="font-size:13px;">${tgl}</div>
                            <div class="text-muted" style="font-size:11px;">${jam}</div>
                        </td>
                        <td class="text-center">${statusBadge}</td>
                        <td class="text-center fw-800 fs-5 ${jmlClass}">${jmlSign}${amount}</td>
                        <td class="text-center"><span class="badge bg-light text-dark border rounded-pill px-3 py-2 fw-bold">${before}</span></td>
                        <td class="text-center"><span class="badge ${sesudahClass} rounded-pill px-3 py-2 fw-bold">${newStock}</span></td>
                        <td class="pe-4 text-muted small">${res.keterangan || '-'}</td>
                    </tr>`;

                    $('#emptyRow').remove();
                    $('#historyBody').prepend(newRow);

                    // Reset form
                    $(form)[0].reset();
                }
            },
            error: function(err) {
                btn.prop('disabled', false).html(origHtml);
                alert(err.responseJSON?.message || 'Terjadi kesalahan, coba lagi.');
            }
        });
    }

    $('#formMasuk').on('submit', function(e) { e.preventDefault(); submitAdjust('masuk', this); });
    $('#formKeluar').on('submit', function(e) { e.preventDefault(); submitAdjust('keluar', this); });

});
</script>
<?php $__env->stopPush(); ?>

<style>
    .fw-800 { font-weight: 800; }
    .table > :not(caption) > * > * { padding-top: 0.85rem; padding-bottom: 0.85rem; }
    @keyframes flash {
        0%   { background-color: #bbf7d0; }
        100% { background-color: #f0fdf4; }
    }
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\jasa_printer\resources\views/products/stock_detail.blade.php ENDPATH**/ ?>