<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teh Tarik 99 - Stok Bahan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #ffffff; color: #000; margin: 0; overflow: hidden; }
        .main-wrapper { display: flex; height: 100vh; }

        /* SIDEBAR - Konsisten dengan Dashboard & Laporan */
        .sidebar { width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; padding: 30px 0; }
        .brand { padding: 0 25px 40px; font-weight: 800; font-size: 1.5rem; }
        .nav-link-custom { padding: 12px 25px; display: flex; align-items: center; text-decoration: none; color: #333; font-weight: 500; font-size: 0.95rem; }
        .nav-link-custom i { width: 30px; font-size: 1.2rem; }
        .nav-link-custom.active { background-color: #448b39; color: white; border-radius: 0 12px 12px 0; margin-right: 15px; }

        /* CONTENT AREA */
        .content-area { flex: 1; display: flex; flex-direction: column; }
        .top-header { padding: 15px 30px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .search-bar { background-color: #e9e9e9; border: none; border-radius: 6px; padding: 10px 15px; width: 400px; font-size: 0.85rem; }

        .main-scroll { padding: 40px; overflow-y: auto; flex: 1; }

        /* STATS CARDS - Sesuai image_c133fb.png */
        .stat-card { 
            border: none; 
            border-radius: 15px; 
            padding: 20px; 
            height: 140px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            background: #fff;
            border: 1px solid #eee;
        }
        .card-title-sm { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-bottom: 15px; color: #000; }
        .card-value-lg { font-size: 1.8rem; font-weight: 800; margin: 0; }
        
        /* Spesifik Stok Menipis (Aksen Merah) */
        .card-warning { border-left: 5px solid #ff3b3b; }
        .text-warning-custom { color: #ff3b3b; font-size: 0.75rem; font-weight: 700; }

        /* TABLE STOK */
        .table-container { 
            background: white; 
            border-radius: 25px; 
            padding: 30px; 
            margin-top: 40px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
            border: 1px solid #f0f0f0;
        }
        .table thead th { border: none; color: #999; font-weight: 600; font-size: 0.8rem; padding-bottom: 20px; }
        .table tbody td { vertical-align: middle; padding: 15px 0; border-bottom: 1px solid #f8f8f8; font-size: 0.85rem; }

        /* Action Buttons */
        .btn-add { background-color: #448b39; color: white; border: none; border-radius: 8px; padding: 10px 20px; font-size: 0.85rem; font-weight: 700; }
        .btn-action { border: none; background: none; padding: 5px 10px; font-size: 1.1rem; }
        .text-edit { color: #448b39; }
        .text-delete { color: #ff3b3b; }

        /* Badge Stok */
        .badge-stok { padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: 0.75rem; }
        .bg-aman { background-color: #e8f5e9; color: #2e7d32; }
        .bg-tipis { background-color: #ffebee; color: #c62828; }
    </style>
</head>
<body>

<?php
\Carbon\Carbon::setLocale('id');
        $jam = date('H');
    if ($jam >= 5 && $jam < 11) {
        $ucapan = "Selamat Pagi";
    } elseif ($jam >= 11 && $jam < 15) {
        $ucapan = "Selamat Siang";
    } elseif ($jam >= 15 && $jam < 18) {
        $ucapan = "Selamat Sore";
    } else {
        $ucapan = "Selamat Malam";
    }
?>

<div class="main-wrapper">
    <div class="sidebar">
        <div class="brand">Teh Tarik 99</div>
        <nav class="flex-grow-1">
            <a href="<?php echo e(route('kasir.dashboard')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/dashboard') ? 'active' : ''); ?>">
                <i class="fa-solid fa-table-cells-large"></i> Dashboard
            </a>
            
            <a href="<?php echo e(route('kasir.transaksi')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/transaksi') ? 'active' : ''); ?>">
                <i class="fa-solid fa-receipt"></i> Riwayat
            </a>

            <a href="<?php echo e(route('kasir.laporan')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/laporan') ? 'active' : ''); ?>">
                <i class="fa-solid fa-chart-simple"></i> Laporan
            </a>
            
            <a href="<?php echo e(route('kasir.stok')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/stok') ? 'active' : ''); ?>">
                <i class="fa-solid fa-calendar-days"></i> Stok
            </a>
        </nav>
        <div class="mt-auto">
            <a href="#" class="nav-link-custom"><i class="fa-regular fa-circle-user"></i> Profil</a>
            <form action="<?php echo e(route('logout')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <button type="submit" class="nav-link-custom border-0 bg-transparent text-danger w-100 text-start">
                    <i class="fa-solid fa-arrow-right-from-bracket"></i> Keluar
                </button>
            </form>
        </div>
    </div>

    <div class="content-area">
        <div class="top-header">
            <input type="text" id="searchInput" class="search-bar" placeholder="cari stok bahan...">
            <div class="user-panel d-flex align-items-center gap-3">
                <i class="fa-solid fa-bell fs-5"></i>
                <div class="text-end" style="line-height: 1.2;">
                    <div class="fw-bold small"><?php echo e(auth()->user()->name); ?></div>
                    <div class="text-muted" style="font-size: 0.7rem;">Kasir</div>
                </div>
                <img src="https://ui-avatars.com/api/?name=<?php echo e(auth()->user()->name); ?>&background=448b39&color=fff" class="user-avatar" style="width: 35px; height: 35px; border-radius: 50%;">
            </div>
        </div>

        <div class="main-scroll">
            <div class="d-flex justify-content-between align-items-start mb-4">
                <div>
                    <h2 class="fw-bold m-0">Stok Bahan</h2>
                    <p class="text-muted small m-0">
                        <?php echo e(\Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y')); ?> | <?php echo e($ucapan); ?>, <?php echo e(explode(' ', auth()->user()->name)[0]); ?>

                    </p>
                </div>
                <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#modalTambahBahan">
                    <i class="fa-solid fa-circle-plus me-2"></i> Tambah Bahan Baru
                </button>
            </div>

            <div class="row g-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="card-title-sm">TOTAL PRODUK</div>
                        <div class="card-value-lg"><?php echo e($totalProduk); ?></div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="card-title-sm">KATEGORI AKTIF</div>
                        <div class="card-value-lg"><?php echo e($kategoriAktif); ?></div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="stat-card card-warning">
                        <div class="card-title-sm" style="color: #ff3b3b;">STOK MENIPIS</div>
                        <div class="d-flex align-items-baseline gap-2">
                            <span class="card-value-lg text-danger"><?php echo e($stokMenipis); ?></span>
                            <span class="text-warning-custom">Butuh Restok</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="card-title-sm">UPDATE TERAKHIR</div>
                        <div style="font-size: 0.85rem; font-weight: 600; margin-top: 10px;">
                            <?php echo e($terakhirUpdate ? $terakhirUpdate->updated_at->diffForHumans() : 'Belum ada data'); ?>

                        </div>
                        <p class="text-muted small">Oleh <?php echo e(auth()->user()->name); ?></p>
                    </div>
                </div>
            </div>

            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th width="35%">Nama Bahan</th>
                            <th class="text-center">Stok</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $bahans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td class="fw-bold"><?php echo e($b->nama_bahan); ?></td>
                            <td class="text-center">
                                <span class="badge <?php echo e($b->stok < 10 ? 'bg-danger-subtle text-danger' : 'bg-success-subtle text-success'); ?> px-3">
                                    <?php echo e($b->stok); ?> <?php echo e($b->satuan); ?>

                                </span>
                            </td>
                            <td class="text-end">
                                <div class="d-flex justify-content-end gap-2">
                                    <button class="btn btn-outline-success btn-sm border-0" 
                                        onclick="openEditModal(<?php echo e($b->id); ?>, '<?php echo e(addslashes($b->nama_bahan)); ?>', <?php echo e($b->stok); ?>, '<?php echo e(addslashes($b->satuan)); ?>')">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </button>

                                <button class="btn btn-outline-danger btn-sm border-0" 
                                    onclick="openDeleteModal(<?php echo e($b->id); ?>)">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="4" class="text-center py-5 text-muted">Belum ada data stok bahan.</td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahBahan" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-header border-0 pt-4 px-4">
                <h5 class="fw-bold"><i class="fa-solid fa-box-open me-2 text-success"></i>Tambah Bahan Baku</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="<?php echo e(route('kasir.stok.simpan')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <div class="modal-body px-4">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Nama Bahan</label>
                        <input type="text" name="nama_bahan" class="form-control" placeholder="Contoh: Susu Kental Manis" required style="border-radius: 10px;">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold">Stok Awal</label>
                            <input type="number" name="stok" class="form-control" placeholder="0" required style="border-radius: 10px;">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Satuan</label>
                        <select name="satuan" class="form-select" required style="border-radius: 10px;">
                            <option value="pcs">pcs (Bungkus/Botol)</option>
                            <option value="kaleng">kaleng</option>
                            <option value="Liter">Liter</option>
                            <option value="kg">kg</option>
                        </select>
                    </div>
                </div>

                <div class="modal-footer border-0 p-4">

                    <button type="button" class="btn btn-light w-100 py-2 fw-bold" data-bs-dismiss="modal" style="border-radius: 10px;">Batal</button>

                    <button type="submit" class="btn btn-success w-100 py-2 fw-bold" style="border-radius: 10px; background-color: #448b39;">Simpan Bahan</button>

                </div>

            </form>

        </div>

    </div>

</div>

<div class="modal fade" id="modalEditBahan" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-header border-0 pt-4 px-4">
                <h5 class="fw-bold"><i class="fa-solid fa-pen-to-square me-2 text-success"></i>Edit Bahan Baku</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formEditBahan" method="POST">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>
                <div class="modal-body px-4">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Nama Bahan</label>
                        <input type="text" name="nama_bahan" id="edit_nama" class="form-control" required style="border-radius: 10px;">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold">Stok</label>
                            <input type="number" name="stok" id="edit_stok" class="form-control" required style="border-radius: 10px;">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Satuan</label>
                        <input type="text" name="satuan" id="edit_satuan" class="form-control" 
                            placeholder="Contoh: kg, gram, liter, pcs..." required style="border-radius: 10px;">
                    </div>
                </div>
                <div class="modal-footer border-0 p-4">
                    <button type="button" class="btn btn-light w-100 py-2 fw-bold" data-bs-dismiss="modal" style="border-radius: 10px;">Batal</button>
                    <button type="submit" class="btn btn-success w-100 py-2 fw-bold" style="border-radius: 10px; background-color: #448b39;">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalHapusBahan" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-body text-center p-4">
                <i class="fa-solid fa-circle-exclamation text-danger mb-3" style="font-size: 3.5rem;"></i>
                <h5 class="fw-bold">Hapus Bahan?</h5>
                <p class="text-muted small">Data yang dihapus tidak dapat dikembalikan.</p>
                <form id="formHapusBahan" method="POST">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('DELETE'); ?>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-light w-100 fw-bold" data-bs-dismiss="modal" style="border-radius: 10px;">Batal</button>
                        <button type="submit" class="btn btn-danger w-100 fw-bold" style="border-radius: 10px;">Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function openEditModal(id, nama, stok, satuan) {
    document.getElementById('formEditBahan').action = '/kasir/stok/update/' + id;
    
    document.getElementById('edit_nama').value = nama;
    document.getElementById('edit_stok').value = stok;
    document.getElementById('edit_satuan').value = satuan;
    
    var editModal = new bootstrap.Modal(document.getElementById('modalEditBahan'));
    editModal.show();
}

    function openDeleteModal(id) {
        // Mengarahkan action form ke route delete dengan ID yang benar
        document.getElementById('formHapusBahan').action = '/kasir/stok/delete/' + id;
        
        // Menampilkan modal konfirmasi hapus
        var hapusModal = new bootstrap.Modal(document.getElementById('modalHapusBahan'));
        hapusModal.show();
    }

    // Masukkan ini di bawah fungsi openDeleteModal
    document.getElementById('searchInput').addEventListener('keyup', function() {
        let searchTerm = this.value.toLowerCase();
        let tableRows = document.querySelectorAll('table tbody tr');

        tableRows.forEach(row => {
            // Mengambil teks dari kolom pertama (Nama Bahan)
            let namaBahan = row.querySelector('td:first-child').textContent.toLowerCase();
            
            if (namaBahan.includes(searchTerm)) {
                row.style.display = ""; // Tampilkan jika cocok
            } else {
                row.style.display = "none"; // Sembunyikan jika tidak cocok
            }
        });
    });
</script>
</body>
</html><?php /**PATH C:\xampp\htdocs\tehtarik\resources\views/kasir/stok.blade.php ENDPATH**/ ?>