374 lines
17 KiB
PHP
374 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>Ellia Cellular</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
|
|
<link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
|
|
rel="stylesheet">
|
|
|
|
<!-- Tambahkan ini di bagian <head> atau sebelum penutup </body> -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
@include('header')
|
|
<!-- ======= Sidebar ======= -->
|
|
@include('sidebar')
|
|
|
|
<main id="main" class="main">
|
|
<div class="pagetitle">
|
|
<h1>Stok</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
|
|
<li class="breadcrumb-item">Manajemen Barang</li>
|
|
<li class="breadcrumb-item">Stock</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Data Stok</h5>
|
|
<div class="mb-2">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Cari..."
|
|
style="width: 200px;">
|
|
</div>
|
|
{{-- <div class="mb-1 d-flex align-items-center">
|
|
<label class="me-2">Tampilkan:</label>
|
|
<select id="entriesPerPage" class="form-select w-auto">
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
<option value="all">Semua</option>
|
|
</select>
|
|
</div> --}}
|
|
|
|
<div class="row row-cols-1 row-cols-md-3 g-4 mt-3">
|
|
@foreach($product as $p)
|
|
<div class="col">
|
|
<div class="card h-100 d-flex flex-column p-3">
|
|
<div class="d-flex align-items-start">
|
|
<!-- Gambar Produk -->
|
|
<img src="{{ asset('upload/produk/' . ($p->image && $p->image != '' ? $p->image : 'Gambar_HP_Awal.png')) }}" class="rounded" width="100" height="100" alt="Produk">
|
|
<div class="ms-3 w-100">
|
|
<!-- Kategori dan Status -->
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="text-muted">{{ $p->category->nama_kategori }}</span>
|
|
<!-- Penyesuaian warna badge berdasarkan status -->
|
|
@php
|
|
if ($p->stok == 0) {
|
|
$p->status = 'HABIS';
|
|
}
|
|
|
|
$badgeClass = match(strtoupper($p->status)) {
|
|
'AKTIF' => 'bg-success',
|
|
'HABIS' => 'bg-danger',
|
|
'TIDAK AKTIF' => 'bg-warning',
|
|
default => 'bg-secondary'
|
|
};
|
|
@endphp
|
|
<span class="badge {{ $badgeClass }} text-light fw-bold">
|
|
{{ strtoupper($p->status) }}
|
|
</span>
|
|
</div>
|
|
<!-- Nama Produk -->
|
|
<h5 class="mt-1 fw-bold">{{ $p->nama_produk }}</h5>
|
|
<!-- Stok Produk -->
|
|
<p class="mb-2 text-muted">Stok: {{ $p->stok }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- Tombol Ubah Stok -->
|
|
<button class="btn btn-outline-primary mt-auto" data-bs-toggle="modal" data-bs-target="#editStock{{ $p->id }}">
|
|
Ubah Stok
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main><!-- End #main -->
|
|
|
|
<!-- Modal Ubah Stok -->
|
|
@foreach ($product as $p)
|
|
<div class="modal fade" id="editStock{{ $p->id }}" tabindex="-1" aria-labelledby="modalEditStockLabel{{ $p->id }}" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalEditStockLabel{{ $p->id }}">Ubah Stok</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="{{ route('stock.update', $p->id) }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Informasi Produk -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<img src="{{ asset('upload/produk/' . $p->image) }}" class="rounded" width="80" height="80" alt="Produk">
|
|
<div class="ms-3">
|
|
<span class="text-muted">{{ $p->category->nama_kategori }}</span>
|
|
<h5 class="fw-bold">{{ $p->nama_produk }}</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Produk -->
|
|
<div class="mb-3 d-flex align-items-center justify-content-between">
|
|
<label for="status{{ $p->id }}" class="form-label">Status Produk</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="status{{ $p->id }}" name="status" value="aktif" {{ $p->status == 'aktif' ? 'checked' : '' }}>
|
|
<label class="form-check-label" for="status{{ $p->id }}">Produk Aktif</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stok Produk -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Stok</label>
|
|
<div class="input-group">
|
|
<button type="button" class="btn btn-outline-secondary" onclick="decreaseStock({{ $p->id }})">-</button>
|
|
<input type="number" class="form-control text-center" id="stok{{ $p->id }}" name="stok" value="{{ $p->stok }}" min="0">
|
|
<button type="button" class="btn btn-outline-secondary" onclick="increaseStock({{ $p->id }})">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
<!-- ======= Footer ======= -->
|
|
@include('footer')
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
|
|
class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/quill/quill.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="{{ asset('assets/js/main.js') }}"></script>
|
|
|
|
<!-- Script untuk pencarian dan pagination -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const container = document.querySelector(".row.row-cols-1");
|
|
const items = Array.from(container.children);
|
|
const paginationContainer = document.createElement("div");
|
|
paginationContainer.className = "pagination-container mt-3 d-flex justify-content-end";
|
|
|
|
const searchInput = document.getElementById("searchInput");
|
|
let currentPage = 1;
|
|
let itemsPerPage = 6;
|
|
|
|
// Fungsi untuk memfilter item berdasarkan pencarian
|
|
function filterItems() {
|
|
const filter = searchInput.value.toLowerCase();
|
|
return items.filter(item => {
|
|
const productName = item.querySelector('h5').innerText.toLowerCase();
|
|
return productName.includes(filter);
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk menampilkan halaman tertentu
|
|
function displayPage(page) {
|
|
const filteredItems = filterItems();
|
|
const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
|
|
|
|
if (page > totalPages) page = totalPages;
|
|
if (page < 1) page = 1;
|
|
|
|
container.innerHTML = ""; // Kosongkan container sebelum menambahkan item baru
|
|
|
|
const startIndex = (page - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const itemsToShow = filteredItems.slice(startIndex, endIndex);
|
|
|
|
itemsToShow.forEach(item => container.appendChild(item));
|
|
updatePagination(page, totalPages);
|
|
}
|
|
|
|
// Fungsi untuk memperbarui pagination
|
|
function updatePagination(currentPage, totalPages) {
|
|
paginationContainer.innerHTML = ""; // Hapus pagination sebelumnya
|
|
|
|
if (totalPages <= 1) return;
|
|
|
|
// Batasi jumlah nomor halaman yang ditampilkan (maksimal 5)
|
|
const maxPagesToShow = 5;
|
|
let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
|
|
let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
|
|
|
|
// Jika jumlah halaman yang ditampilkan kurang dari 5, geser startPage
|
|
if (endPage - startPage + 1 < maxPagesToShow) {
|
|
startPage = Math.max(1, endPage - maxPagesToShow + 1);
|
|
}
|
|
|
|
// Tampilkan nomor halaman
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
const button = document.createElement("button");
|
|
button.textContent = i;
|
|
button.className = "btn btn-sm btn-outline-primary mx-1";
|
|
if (i === currentPage) button.classList.add("active");
|
|
|
|
button.addEventListener("click", () => {
|
|
displayPage(i);
|
|
});
|
|
|
|
paginationContainer.appendChild(button);
|
|
}
|
|
}
|
|
|
|
// Event listener untuk pencarian
|
|
searchInput.addEventListener("keyup", () => displayPage(1));
|
|
|
|
// Tampilkan halaman pertama saat pertama kali dimuat
|
|
displayPage(1);
|
|
container.parentNode.appendChild(paginationContainer);
|
|
});
|
|
</script>
|
|
|
|
{{-- <script>
|
|
document.getElementById('searchInput').addEventListener('keyup', function () {
|
|
let filter = this.value.toLowerCase();
|
|
let cards = document.querySelectorAll('.col'); // Target semua kartu produk
|
|
|
|
cards.forEach(card => {
|
|
let productName = card.querySelector('h5').innerText.toLowerCase(); // Ambil teks nama produk
|
|
if (productName.includes(filter)) {
|
|
card.style.display = 'block'; // Tampilkan jika cocok
|
|
} else {
|
|
card.style.display = 'none'; // Sembunyikan jika tidak cocok
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Ini buat datatables Custom Rownya dengan Sorting -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const container = document.querySelector(".row.row-cols-1");
|
|
const items = Array.from(container.children);
|
|
const paginationContainer = document.createElement("div");
|
|
paginationContainer.className = "pagination-container mt-3 d-flex justify-content-end";
|
|
|
|
const searchInput = document.getElementById("searchInput");
|
|
let currentPage = 1;
|
|
let itemsPerPage = 6;
|
|
|
|
function filterItems() {
|
|
const filter = searchInput.value.toLowerCase();
|
|
return items.filter(item => item.innerText.toLowerCase().includes(filter));
|
|
}
|
|
|
|
function displayPage(page) {
|
|
const filteredItems = filterItems();
|
|
const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
|
|
|
|
if (page > totalPages) page = totalPages;
|
|
if (page < 1) page = 1;
|
|
|
|
container.innerHTML = "";
|
|
const startIndex = (page - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const itemsToShow = filteredItems.slice(startIndex, endIndex);
|
|
|
|
itemsToShow.forEach(item => container.appendChild(item));
|
|
updatePagination(page, totalPages);
|
|
}
|
|
|
|
function updatePagination(currentPage, totalPages) {
|
|
paginationContainer.innerHTML = "";
|
|
|
|
if (totalPages <= 1) return;
|
|
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
const button = document.createElement("button");
|
|
button.textContent = i;
|
|
button.className = "btn btn-sm btn-outline-primary mx-1";
|
|
if (i === currentPage) button.classList.add("active");
|
|
|
|
button.addEventListener("click", () => {
|
|
displayPage(i);
|
|
});
|
|
|
|
paginationContainer.appendChild(button);
|
|
}
|
|
}
|
|
|
|
searchInput.addEventListener("keyup", () => displayPage(1));
|
|
displayPage(1);
|
|
|
|
container.parentNode.appendChild(paginationContainer);
|
|
});
|
|
</script> --}}
|
|
|
|
<script>
|
|
function decreaseStock(id) {
|
|
let input = document.getElementById('stok' + id);
|
|
if (input.value > 0) {
|
|
input.value--;
|
|
}
|
|
}
|
|
|
|
function increaseStock(id) {
|
|
let input = document.getElementById('stok' + id);
|
|
input.value++;
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|