<!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>
