@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 Gudang & Stok</h4>

            <div class="d-flex flex-wrap gap-2">
                <input type="search" id="dt-search-warehouse" class="form-control form-control-sm"
                    placeholder="Cari: nama gudang, actor, SKU, produk">

                <select id="filter-status" class="form-select form-select-sm w-auto">
                    <option value="">Semua Status</option>
                    <option value="kurang">Stok Kurang</option>
                    <option value="warning">Warning (Limit)</option>
                    <option value="aman">Stok 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 Baris</option>
                    <option value="50">50 Baris</option>
                    <option value="100">100 Baris</option>
                </select>

                <a href="{{ route('warehouses.create') }}" class="btn btn-primary btn-sm">Tambah Gudang</a>
            </div>
        </div>

        <div class="card-body pt-4">
            <div class="table-responsive">
                <table class="table table-hover table-striped table-rounded align-middle" id="warehouse-table">
                    <thead class="bg-light text-muted" id="warehouse-thead">
                        <tr class="text-uppercase fw-semibold fs-7"></tr>
                    </thead>
                    <tbody id="warehouse-table-body"></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>

    {{-- Toast Notifikasi --}}
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 999999">
        <div id="toastBox" class="toast align-items-center text-white bg-success border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastMessage">Berhasil</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        function showToast(message, type = 'success') {
            const toastBox = document.getElementById("toastBox");
            const toastMessage = document.getElementById("toastMessage");

            toastMessage.textContent = message;

            if (type === 'success') {
                toastBox.classList.remove("bg-danger");
                toastBox.classList.add("bg-success");
            } else {
                toastBox.classList.remove("bg-success");
                toastBox.classList.add("bg-danger");
            }

            const toast = new bootstrap.Toast(toastBox);
            toast.show();
        }

        document.addEventListener('DOMContentLoaded', function() {
            const tableHead = document.querySelector('#warehouse-thead tr');
            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;
            let skuList = [];

            function showSkeleton(rows = 10) {
                tableBody.innerHTML = '';
                for (let i = 0; i < rows; i++) {

                    let tds = `
                        <td><span class="placeholder col-12"></span></td>
                        <td><span class="placeholder col-12"></span></td>
                        <td><span class="placeholder col-12"></span></td>
                    `;

                    skuList.forEach(() => {
                        tds += `<td><span class="placeholder col-12"></span></td>`;
                    });

                    tableBody.innerHTML += `<tr>${tds}</tr>`;
                }
            }

            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>`;
                            });

                            skuList = products.map(p => p.sku_code);
                            renderTableHeader();

                            optionsLoaded = true;
                        }

                        tableBody.innerHTML = data.map(w => {

                            let cols = `
                            <td>${w.nama_gudang}</td>
                            <td>${w.actor_code}</td>

                            <td>
                                <span class="pickup-value" data-id="${w.id}">
                                    ${w.pickup_type ?? '-'}
                                </span>

                                <select class="pickup-editor form-select form-select-sm d-none"
                                        data-id="${w.id}">
                                    <option value="pickup" ${w.pickup_type == 'pickup' ? 'selected' : ''}>Pickup</option>
                                    <option value="dropoff" ${w.pickup_type == 'dropoff' ? 'selected' : ''}>Dropoff</option>
                                    <option value="pickup_dropoff" ${w.pickup_type == 'pickup_dropoff' ? 'selected' : ''}>Pickup & Dropoff</option>
                                </select>
                            </td>
                        `;

                            skuList.forEach(sku => {
                                cols += `<td>${w[sku] ?? '-'}</td>`;
                            });

                            return `<tr>${cols}</tr>`;
                        }).join('');

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

            function renderTableHeader() {
                let header = `
                    <th>Nama Gudang</th>
                    <th>Kode Actor</th>
                    <th>Tipe Pickup</th>
                `;
                skuList.forEach(sku => {
                    header += `<th>${sku}</th>`;
                });
                tableHead.innerHTML = header;
            }

            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();
        });

        document.addEventListener("click", function(e) {
            if (e.target.classList.contains("pickup-value")) {
                let span = e.target;
                let id = span.dataset.id;
                let select = document.querySelector(`.pickup-editor[data-id="${id}"]`);

                span.classList.add("d-none");
                select.classList.remove("d-none");
            }
        });

        document.addEventListener("change", function(e) {
            if (e.target.classList.contains("pickup-editor")) {
                let select = e.target;
                let id = select.dataset.id;
                let span = document.querySelector(`.pickup-value[data-id="${id}"]`);

                axios.patch(`/warehouses/${id}/pickup-type`, {
                        pickup_type: select.value
                    })
                    .then(res => {
                        span.textContent = res.data.pickup_type;
                        select.classList.add("d-none");
                        span.classList.remove("d-none");

                        showToast("Tipe pickup berhasil diperbarui!", "success");
                    })
                    .catch(() => {
                        showToast("Gagal memperbarui tipe pickup!", "error");
                    });
            }
        });
    </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