@extends('template.desktop.app')

@section('title', 'Data Warehouse')

@section('content')
    <div class="card">
        <div
            class="card-header border-0 pt-4 pb-0 d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
            <h4 class="card-title text-dark fw-bold mb-3 mb-md-0">Data Warehouse</h4>
            <div class="d-flex flex-wrap gap-2">
                <input type="search" id="dt-search-warehouse" class="form-control form-control-sm"
                    placeholder="Cari warehouse: nama, SKU, produk">
                <select id="filter-status" class="form-select form-select-sm w-auto">
                    <option value="">Semua Status</option>
                    <option value="kurang">Kurang</option>
                    <option value="warning">Warning</option>
                    <option value="aman">Aman</option>
                </select>
                <select id="filter-actor" class="form-select form-select-sm w-auto">
                    <option value="">Semua Actor</option>
                </select>
                <select id="filter-product" class="form-select form-select-sm w-auto">
                    <option value="">Semua Produk</option>
                </select>
                <select id="dt-length-warehouse" class="form-select form-select-sm w-auto">
                    <option value="10" selected>10</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <a href="{{ route('warehouses.create') }}" class="btn btn-primary btn-sm">Tambah Warehouse</a>
            </div>
        </div>

        <div class="card-body pt-4">
            <div class="table-responsive">
                <table class="table table-hover table-striped table-rounded align-middle">
                    <thead class="bg-light text-muted">
                        <tr class="text-uppercase fw-semibold fs-7">
                            <th>Warehouse</th>
                            <th>Actor</th>
                            <th>Produk</th>
                            <th>SKU</th>
                            <th>Stock</th>
                            <th>Safety Stock</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="warehouse-table-body">
                        @for ($i = 0; $i < 10; $i++)
                            <tr>
                                <td><span class="placeholder col-12"></span></td>
                                <td><span class="placeholder col-12"></span></td>
                                <td><span class="placeholder col-12"></span></td>
                                <td><span class="placeholder col-12"></span></td>
                                <td><span class="placeholder col-12"></span></td>
                                <td><span class="placeholder col-12"></span></td>
                                <td><span class="placeholder col-12"></span></td>
                                <td class="text-end"><span class="placeholder col-12"></span></td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end mt-4">
                <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableBody = document.getElementById('warehouse-table-body');
            const searchInput = document.getElementById('dt-search-warehouse');
            const statusFilter = document.getElementById('filter-status');
            const actorFilter = document.getElementById('filter-actor');
            const productFilter = document.getElementById('filter-product');
            const lengthSelect = document.getElementById('dt-length-warehouse');
            const paginationContainer = document.getElementById('pagination');

            let currentPage = 1;
            let currentLength = parseInt(lengthSelect.value);
            let optionsLoaded = false;

            function showSkeleton(rows = 10) {
                let skeleton = '';
                for (let i = 0; i < rows; i++) {
                    skeleton += `<tr>
                <td><span class="placeholder col-12"></span></td>
                <td><span class="placeholder col-12"></span></td>
                <td><span class="placeholder col-12"></span></td>
                <td><span class="placeholder col-12"></span></td>
                <td><span class="placeholder col-12"></span></td>
                <td><span class="placeholder col-12"></span></td>
                <td><span class="placeholder col-12"></span></td>
                <td class="text-end"><span class="placeholder col-12"></span></td>
            </tr>`;
                }
                tableBody.innerHTML = skeleton;
            }

            function getStatusBadge(stock, safety_stock) {
                if (stock < safety_stock) return `<span class="badge bg-danger text-white">Kurang</span>`;
                if (stock === safety_stock) return `<span class="badge bg-warning text-white">Warning</span>`;
                return `<span class="badge bg-success text-white">Aman</span>`;
            }

            function formatRupiah(amount) {
                return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }

            function fetchWarehouses(search = '', page = 1, length = 10) {
                showSkeleton(length);

                axios.get("{{ route('warehouses.list') }}", {
                        params: {
                            search,
                            page,
                            length,
                            status: statusFilter.value,
                            actor: actorFilter.value,
                            product: productFilter.value
                        }
                    })
                    .then(res => {
                        const data = res.data.data;
                        const lastPage = res.data.last_page;
                        const actors = res.data.actors ?? [];
                        const products = res.data.products ?? [];

                        if (!optionsLoaded) {
                            actorFilter.innerHTML = `<option value="">Semua Actor</option>`;
                            actors.forEach(a => {
                                actorFilter.innerHTML +=
                                    `<option value="${a.id}">${a.code} - ${a.name}</option>`;
                            });

                            productFilter.innerHTML = `<option value="">Semua Produk</option>`;
                            products.forEach(p => {
                                productFilter.innerHTML +=
                                    `<option value="${p.id}">${p.sku_code} - ${p.name}</option>`;
                            });

                            optionsLoaded = true;
                        }

                        tableBody.innerHTML = data.map(w => `
                <tr>
                    <td>${w.warehouse.name}</td>
                    <td>${w.warehouse.actor?.code ?? '-'}</td>
                    <td>${w.product.name}</td>
                    <td>${w.sku_code}</td>
                    <td>${formatRupiah(w.stock)}</td>
                    <td>${formatRupiah(w.safety_stock)}</td>
                    <td>${getStatusBadge(w.stock, w.safety_stock)}</td>
                    <td class="text-end">
                        <div class="d-flex gap-2 justify-content-end">
                            <a href="/warehouses/${w.id}/edit" class="btn btn-sm btn-warning">Edit</a>
                            <form action="/warehouses/${w.id}" method="POST" class="m-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Yakin ingin menghapus data ini?')">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
            `).join('');

                        renderPagination(lastPage);
                    })
                    .catch(() => {
                        tableBody.innerHTML =
                            `<tr><td colspan="8" class="text-center text-danger">Gagal memuat data</td></tr>`;
                    });
            }

            function renderPagination(lastPage) {
                let html = '';
                const delta = 2;
                const range = [];

                for (let i = Math.max(2, currentPage - delta); i <= Math.min(lastPage - 1, currentPage +
                    delta); i++) {
                    range.push(i);
                }

                if (currentPage - delta > 2) range.unshift("...");
                if (currentPage + delta < lastPage - 1) range.push("...");
                range.unshift(1);
                if (lastPage > 1) range.push(lastPage);

                html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
            <button class="page-link" onclick="changePage(${currentPage - 1})">&laquo;</button></li>`;

                range.forEach(i => {
                    if (i === "...") {
                        html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                    } else {
                        html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                    <button class="page-link" onclick="changePage(${i})">${i}</button>
                </li>`;
                    }
                });

                html += `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
            <button class="page-link" onclick="changePage(${currentPage + 1})">&raquo;</button></li>`;

                paginationContainer.innerHTML = html;
            }

            window.changePage = function(page) {
                if (page < 1) return;
                currentPage = page;
                fetchWarehouses(searchInput.value, currentPage, currentLength);
            };

            searchInput.addEventListener('input', () => {
                currentPage = 1;
                fetchWarehouses(searchInput.value, currentPage, currentLength);
            });

            [statusFilter, actorFilter, productFilter].forEach(f => {
                f.addEventListener('change', () => {
                    currentPage = 1;
                    fetchWarehouses(searchInput.value, currentPage, currentLength);
                });
            });

            lengthSelect.addEventListener('change', () => {
                currentLength = parseInt(lengthSelect.value);
                currentPage = 1;
                fetchWarehouses(searchInput.value, currentPage, currentLength);
            });

            fetchWarehouses();
        });
    </script>

    <style>
        .placeholder {
            display: inline-block;
            height: 1rem;
            background: #e0e0e0;
            border-radius: 4px;
            animation: placeholderShimmer 1.5s infinite linear;
        }

        @keyframes placeholderShimmer {
            0% {
                background: #e0e0e0;
            }

            50% {
                background: #f0f0f0;
            }

            100% {
                background: #e0e0e0;
            }
        }
    </style>
@endsection