<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Manajemen Inventaris</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&display=swap" rel="stylesheet">
<style>
        body { font-family: 'Poppins', sans-serif; background-color: #fcfcfc; margin: 0; }
        .main-wrapper { display: flex; height: 100vh; overflow: hidden; }

        /* SIDEBAR */
        .sidebar { 
            width: 240px; 
            background: #fff;
            border-right: 1px solid #eee; 
            display: flex; 
            flex-direction: column; 
            padding: 25px 0;
            flex-shrink: 0;
            height: 100vh;
        }
        
        .brand { font-size: 22px; font-weight: 700; padding: 0 25px 30px; letter-spacing: -0.5px; }
        
        .nav-menu { list-style: none; padding: 0; flex-grow: 1; }
        .nav-item { padding: 2px 25px; }
        
        /* LINK DEFAULT (Warna hitam, bukan abu-abu) */
        .nav-link { 
            text-decoration: none; 
            color: #333 !important; 
            font-size: 14px; 
            padding: 12px 15px; 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            transition: 0.2s;
        }

        /* KOTAK HIJAU SAAT AKTIF */
        .nav-link.active { 
            background: #28a745 !important; /* Hijau Solid */
            color: #fff !important;         /* Teks Putih agar kontras */
            font-weight: 600; 
        }

        /* Mencegah warna biru bawaan bootstrap saat diklik/focus */
        .nav-link:hover { background: #f8f9fa; }
        .nav-link:focus { background: transparent; }
        .nav-link.active:hover { background: #28a745 !important; }

        .nav-link i { margin-right: 12px; width: 18px; font-size: 15px; }
        
        .sidebar-footer { padding: 0 25px; }
        .logout-btn { 
            background: none; border: none; color: #dc3545; font-size: 14px; 
            padding: 10px 15px; cursor: pointer; display: flex; align-items: center; width: 100%;
        }
        .logout-btn i { margin-right: 12px; }

        .content { flex-grow: 1; padding: 20px 40px; overflow-y: auto; height: 100vh; }

        .card-stat { border: 1px solid #eee; border-radius: 8px; padding: 15px; background: #fff; }
        .table-card { border: 1px solid #eee; border-radius: 8px; background: #fff; }
        .btn-outline-secondary { border-color: #dee2e6; color: #6c757d; }
        .btn-outline-secondary.active { background-color: #e9ecef; color: #000; }

        /* Styling Header yang rapi */
        .top-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 30px; 
            padding-bottom: 20px;
            border-bottom: 2px solid #eee;
            /* Menarik garis ke kiri dan kanan agar menembus padding konten */
            margin-left: -40px;  
            margin-right: -40px; 
            
            /* Memberi padding agar isi header tidak ikut menempel ke pinggir */
            padding-left: 40px;  
            padding-right: 40px;
        }
        .search-bar { 
            width: 350px; 
            padding: 8px 15px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            font-size: 14px;
            background: #fdfdfd;
        }
        .user-panel { display: flex; align-items: center; gap: 20px; }
        
    </style>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <div class="brand">TEH TARIK 99</div>
        
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="/admin/dashboard" class="nav-link <?php echo e(request()->is('admin/dashboard') ? 'active' : ''); ?>">
                    <i class="fa fa-home"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/produk" class="nav-link <?php echo e(request()->is('admin/produk') ? 'active' : ''); ?>">
                    <i class="fa fa-box"></i> Produk
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/resep" class="nav-link <?php echo e(request()->is('admin/resep') ? 'active' : ''); ?>">
                    <i class="fa fa-cubes"></i> Atur Resep
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/kontrol-stok" class="nav-link <?php echo e(request()->is('admin/kontrol-stok') ? 'active' : ''); ?>">
                    <i class="fa fa-list-check"></i> Kontrol Stok
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/laporan" class="nav-link <?php echo e(request()->is('admin/laporan') ? 'active' : ''); ?>">
                    <i class="fa fa-chart-line"></i> Laporan
                </a>
            </li>
        </ul>

        <div class="sidebar-footer">
            <a href="#" class="nav-link"><i class="fa-solid fa-user"></i> Profil</a>
            <form action="<?php echo e(route('logout')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <button type="submit" class="logout-btn"><i class="fa-solid fa-right-from-bracket"></i> Keluar</button>
            </form>
        </div>
    </div>

    <div class="content">
        <div class="top-header">
            <form id="formSearch" action="/admin/produk" method="GET" class="d-flex">
                <input type="text" id="inputSearch" name="search" class="search-bar" 
                    placeholder="Search operational data..." 
                    value="<?php echo e(request('search')); ?>">
            </form>
            <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(urlencode(auth()->user()->name)); ?>&background=448b39&color=fff" 
                    class="user-avatar" style="width: 40px; height: 40px; border-radius: 50%;">
            </div>
        </div>

        <div class="main-scroll">
    <div class="d-flex justify-content-between align-items-center mb-4">
        
        <div>
            <h4 class="fw-bold m-0">Manajemen Inventaris</h4>
            <?php
                date_default_timezone_set('Asia/Jakarta');
                $jam = (int)date('H');
                if ($jam >= 18) { $ucapan = "Selamat Malam"; }
                elseif ($jam >= 15) { $ucapan = "Selamat Sore"; }
                elseif ($jam >= 11) { $ucapan = "Selamat Siang"; }
                else { $ucapan = "Selamat Pagi"; }

                $hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                $bulan = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                $tanggalLengkap = $hari[date('w')] . ', ' . date('d') . ' ' . $bulan[date('n')] . ' ' . date('Y');
            ?>
            <p class="text-muted small m-0">
                <?php echo e($tanggalLengkap); ?> | <?php echo e($ucapan); ?>, <?php echo e(auth()->user()->name); ?>

            </p>
        </div>
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalTambahProduk">
            <i class="fa fa-plus"></i> Tambah Produk
        </button>
        
    </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card-stat p-3 shadow-sm" style="background: #fff; border-radius: 8px;">
                <small class="text-muted">Total Produk</small>
                <h4 class="fw-bold mt-2 mb-0"><?php echo e(\App\Models\Produk::count()); ?></h4>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card-stat p-3 shadow-sm" style="background: #fff; border-radius: 8px;">
                <small class="text-muted">Produk Aktif</small>
                <h4 class="fw-bold mt-2 mb-0 text-primary"><?php echo e(\App\Models\Produk::count()); ?></h4>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card-stat p-3 shadow-sm" style="background: #fff; border-radius: 8px;">
                <small class="text-muted">Pertumbuhan</small>
                <h4 class="fw-bold mt-2 mb-0 <?php echo e($pertumbuhan >= 0 ? 'text-success' : 'text-danger'); ?>">
                    <?php echo e($pertumbuhan >= 0 ? '+' : ''); ?><?php echo e(number_format($pertumbuhan, 1)); ?>%</h4>
            </div>
        </div>
    </div>

    <?php if(session('success')): ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <?php echo e(session('success')); ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>
    <div class="table-card">
        <table class="table table-hover align-middle">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Gambar</th>
                    <th>ID Produk</th>
                    <th>Nama Produk</th>
                    <th>Harga Jual</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $produk; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <td><?php echo e($index + 1); ?></td>
                    
                    <td>
                        <?php if($item->gambar): ?>
                            <img src="<?php echo e(asset($item->gambar) . '?t=' . time()); ?>" 
                                style="width: 50px; height: 50px; object-fit: cover; border-radius: 5px;" 
                                alt="Produk">
                        <?php else: ?>
                            <span class="text-muted small">No Image</span>
                        <?php endif; ?>
                    </td>
                    
                    <td><?php echo e($item->id_produk); ?></td>
                    <td><?php echo e($item->nama_produk); ?></td>
                    <td>Rp <?php echo e(number_format($item->harga, 0, ',', '.')); ?></td>
                    
                    <td>
                        <button type="button" class="btn btn-sm btn-outline-primary" 
                            data-bs-toggle="modal"  data-bs-target="#modalEditProduk" 
                            onclick="editProduk('<?php echo e($item->id); ?>', '<?php echo e($item->id_produk); ?>', '<?php echo e($item->nama_produk); ?>', '<?php echo e($item->harga); ?>')">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <form action="<?php echo e(route('admin.produk.destroy', $item->id)); ?>" method="POST" class="d-inline">
                            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus produk ini?')">
                                <i class="fa fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div>
                Menampilkan <?php echo e($produk->firstItem()); ?> sampai <?php echo e($produk->lastItem()); ?> dari <?php echo e($produk->total()); ?> produk
            </div>
            <div>
                <?php echo e($produk->links('pagination::bootstrap-5')); ?>

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

<div class="modal fade" id="modalTambahProduk" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/admin/produk" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Produk Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">ID Produk</label>
                        <input type="text" name="id_produk" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Produk</label>
                        <input type="text" name="nama_produk" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Harga (Rp)</label>
                        <input type="number" name="harga" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Foto Produk</label>
                        <input type="file" name="gambar" class="form-control" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Simpan Produk</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEditProduk" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="formEdit" action="/admin/produk/update" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?> <input type="hidden" name="id" id="edit_id">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Produk</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>ID Produk</label>
                        <input type="text" name="id_produk" id="edit_id_produk" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label>Nama Produk</label>
                        <input type="text" name="nama_produk" id="edit_nama_produk" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Harga (Rp)</label>
                        <input type="number" name="harga" id="edit_harga" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Ganti Foto (Opsional)</label>
                        <input type="file" name="gambar" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Update Produk</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // FUNGSI EDIT PRODUK (Jangan dihapus)
    function editProduk(id, id_produk, nama, harga) {
        document.getElementById('edit_id').value = id;
        document.getElementById('edit_id_produk').value = id_produk;
        document.getElementById('edit_nama_produk').value = nama;
        document.getElementById('edit_harga').value = harga;
        document.getElementById('formEdit').action = '/admin/produk/' + id;
    }

    // FUNGSI PENCARIAN OTOMATIS
    const inputSearch = document.getElementById('inputSearch');
    const formSearch = document.getElementById('formSearch');
    let timer; // Deklarasi hanya sekali di sini

    inputSearch.addEventListener('keyup', function() {
        clearTimeout(timer);
        // Simpan posisi kursor
        sessionStorage.setItem('cursorPos', inputSearch.selectionStart);
        
        timer = setTimeout(function() {
            formSearch.submit();
        }, 500);
    });

    // Jaga Fokus setelah refresh
    document.addEventListener("DOMContentLoaded", function() {
        if (inputSearch.value.length > 0) {
            inputSearch.focus();
            let pos = sessionStorage.getItem('cursorPos');
            if (pos !== null) {
                inputSearch.setSelectionRange(pos, pos);
                sessionStorage.removeItem('cursorPos');
            }
        }
    });
</script>
</body>
</html><?php /**PATH C:\xampp\htdocs\tehtarik\resources\views/admin/produk.blade.php ENDPATH**/ ?>