<div class="content">

<h2 class="intro-y text-lg font-medium mt-10">

Product List
</h2>
<div id="productList" class="grid grid-cols-12 gap-6 mt-5">
<div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-
center mt-2">

<div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">

<div class="w-56 relative text-slate-500">
<input id="searchInput" type="text" class="form-control w-56 box pr-
10" placeholder="Search..." oninput="searchProduct()">
<button type="submit" class="w-4 h-4 absolute my-auto inset-y-0 mr-3
right-0" data-lucide="search"></button>
</div>
</div>

</div>
<!-- BEGIN: Users Layout -->
<?php foreach ($product as $row) : ?>
<div class="intro-y col-span-12 md:col-span-6 lg:col-span-4
xl:col-span-3">
<div class="box">
<div class="p-5">
<div class="h-40 2xl:h-56 image-fit rounded-md
overflow-hidden before:block before:absolute before:w-full before:h-full
before:top-0 before:left-0 before:z-10 before:bg-gradient-to-t before:from-
black before:to-black/10">
<img alt="Midone - HTML Admin Template"
class="rounded-md" src="<?= base_url() . '/uploads/' . $row->gambar ?>">
<span class="absolute top-0 bg-pending/80 text-
white text-xs m-5 px-2 py-1 rounded z-10">Featured</span>
<div class="absolute bottom-0 text-white px-5 pb-6
z-10"> <a href="" class="block font-medium text-base"><?= $row->nama_brg ?
></a> <span class="text-white/90 text-xs mt-3"><?= $row->kategori ?></span>
</div>
</div>
<div class="text-slate-600 dark:text-slate-500 mt-5">
<div class="flex items-center"> <i data-
lucide="link" class="w-4 h-4 mr-2"></i> Price: IDR <?= number_format($row-
>harga, 0, ',', '.') ?> </div>
<div class="flex items-center mt-2"> <i data-
lucide="layers" class="w-4 h-4 mr-2"></i> Remaining Stock: <?=
number_format($row->stok, 0, ',', '.') ?> </div>
<div class="flex items-center mt-2"> <i data-
lucide="check-square" class="w-4 h-4 mr-2"></i> Status: Active </div>
 </div>
</div>
<div class="flex justify-center lg:justify-end items-
center p-5 border-t border-slate-200/60">
<a class="flex items-center btn btn-sm btn-success
text-white mr-3" href="<?php echo base_url('dashboard/detail_product/' . $row-
>id_brg) ?>" data-tw-toggle="modal" data-tw-target="#delete-confirmation-
modal"> <i data-lucide="info" class="w-4 h-4 mr-1"></i> Detail </a>
<a class="flex items-center btn btn-sm btn-primary mr-
3" href="<?= site_url('dashboard/cart/' . $row->id_brg) ?>"> <i data-
lucide="shopping-cart" class="w-4 h-4 mr-1"></i> Add to Cart </a>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- END: Users Layout -->
<!-- BEGIN: Pagination -->
<!-- <div class="intro-y col-span-12 flex flex-wrap sm:flex-row
sm:flex-nowrap items-center">
<nav class="w-full sm:w-auto sm:mr-auto">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#"> <i class="w-4 h-4"
data-lucide="chevrons-left"></i> </a>
</li>
<li class="page-item">
<a class="page-link" href="#"> <i class="w-4 h-4"
data-lucide="chevron-left"></i> </a>
</li>
<li class="page-item"> <a class="page-link"
href="#">...</a> </li>
<li class="page-item"> <a class="page-link" href="#">1</a>
</li>
<li class="page-item active"> <a class="page-link"
href="#">2</a> </li>
<li class="page-item"> <a class="page-link" href="#">3</a>
</li>
<li class="page-item"> <a class="page-link"
href="#">...</a> </li>
<li class="page-item">
<a class="page-link" href="#"> <i class="w-4 h-4"
data-lucide="chevron-right"></i> </a>
</li>
<li class="page-item">
<a class="page-link" href="#"> <i class="w-4 h-4"
data-lucide="chevrons-right"></i> </a>
</li>
</ul>
 </nav>
<select class="w-20 form-select box mt-3 sm:mt-0">
<option>10</option>
<option>25</option>
<option>35</option>
<option>50</option>
</select>
</div> -->
<!-- END: Pagination -->
</div>
</div>
<script>
// Fungsi untuk menangani pencarian produk
function searchProduct() {
// Ambil nilai pencarian dari input
var searchQuery = document.getElementById("searchInput").value;

// Buat objek XMLHttpRequest

var xhr = new XMLHttpRequest();

// Tetapkan tindakan ketika permintaan selesai

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Perbarui isi konten dengan hasil pencarian
document.getElementById("productList").innerHTML =
xhr.responseText;
}
};

// Kirim permintaan GET ke endpoint pencarian dengan nilai pencarian

sebagai parameter
xhr.open("GET", "<?php echo base_url('dashboard/search_product') ?>?
search_query=" + searchQuery, true);
xhr.send();
}
</script>