@extends('template.desktop.app')
@section('title', 'Data Stock')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

    <style>
        th.sortable {
            cursor: pointer;
            user-select: none
        }

        th.sortable:hover {
            color: #1d4ed8
        }

        th.sortable.active {
            color: #1d4ed8;
            font-weight: bold
        }

        th.sortable i {
            margin-left: 4px;
        }

        .skeleton {
            background: #f2f3f4;
            border-radius: 6px;
            animation: pulse 1.2s infinite ease-in-out;
            height: 20px
        }

        @keyframes pulse {
            0% {
                opacity: .6
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: .6
            }
        }

        .pagination .page-item .page-link {
            background: #e5e7eb;
            color: #000;
            border-radius: 6px;
            border: none;
            margin: 0 3px;
        }

        .pagination .page-item.active .page-link {
            background: #dc2626;
            color: #fff;
            font-weight: bold;
        }

        .pagination .page-item.disabled .page-link {
            background: #d1d5db;
            color: #6b7280;
        }

        .btn-icon {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 6px;
        }
    </style>
@endpush

@section('content')

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center pt-4 pb-0">
            <h4 class="fw-bold text-dark">Data Stock Gudang</h4>
            <div class="d-flex gap-2">
                <input id="search" class="form-control" placeholder="Cari gudang / SKU / produk..." autocomplete="off">
                <select id="length" class="form-select w-auto">
                    <option value="10">10</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>

        <div class="card-body pt-4">

            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead id="thead-products" class="bg-light fw-semibold text-center"></thead>
                    <tbody id="tbody-data"></tbody>
                </table>
            </div>

            <div id="pagination" class="pt-3"></div>

        </div>
    </div>

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

    <script>
        document.addEventListener("DOMContentLoaded", () => {

            let fullProducts = []
            let page = 1
            let perPage = 10
            let search = ""
            let sort = {
                key: "warehouse",
                dir: "asc",
                product_id: null
            }

            loadData()

            function showSkeleton() {
                let s = ""
                for (let i = 0; i < 8; i++) {
                    s += `
                <tr>
                    <td><div class="skeleton" style="width:160px"></div></td>
                    <td><div class="skeleton" style="width:180px"></div></td>
                    <td><div class="skeleton" style="width:160px"></div></td>
                    <td><div class="skeleton" style="width:160px"></div></td>
                    <td><div class="skeleton" style="width:120px"></div></td>
                </tr>`
                }
                document.getElementById("tbody-data").innerHTML = s
            }

            function loadData() {
                showSkeleton()

                axios.get("{{ route('stocks.data') }}", {
                    params: {
                        page: page,
                        length: perPage,
                        search: search,
                        sort_key: sort.key,
                        sort_dir: sort.dir,
                        sort_product: sort.product_id
                    }
                }).then(res => {

                    fullProducts = res.data.products

                    renderThead()
                    renderTbody(res.data.rows)
                    renderPagination(res.data.current_page, res.data.last_page)

                })
            }

            function renderThead() {
                let html = `
        <tr>
            <th class="text-center sortable" data-sort="warehouse">
                Gudang <i class="bi bi-arrow-down-up"></i>
            </th>`

                fullProducts.forEach(p => {
                    html += `
            <th class="text-center sortable" data-sort="product" data-product="${p.id}">
                <small>${p.sku_code}</small>
                <i class="bi bi-arrow-down-up"></i>
            </th>`
                })

                html += `
            <th class="text-center sortable" data-sort="total_box">
                Total Stock <i class="bi bi-arrow-down-up"></i>
            </th>
            <th class="text-center">Aksi</th>
        </tr>`

                document.getElementById("thead-products").innerHTML = html

                document.querySelectorAll("th.sortable").forEach(th => {
                    th.onclick = () => {
                        let key = th.dataset.sort
                        let pid = th.dataset.product ?? null

                        if (sort.key === key && sort.product_id === pid) {
                            sort.dir = sort.dir === "asc" ? "desc" : "asc"
                        } else {
                            sort.key = key
                            sort.product_id = pid
                            sort.dir = "asc"
                        }

                        loadData()
                    }
                })
            }

            function renderTbody(rows) {
                let html = ""

                rows.forEach(row => {
                    html += `
            <tr>
                <td class="fw-bold">
                    ${row.warehouse}<br>
                    <small class="text-muted">${row.actor} (${row.actor_code})</small>
                </td>`

                    fullProducts.forEach(p => {
                        let qty = row.products[p.id] ?? 0
                        let box = Math.floor(qty / 5)
                        let sachet = qty % 5

                        html += `<td class="text-center">${box} Box ${sachet} Sachet</td>`
                    })

                    html += `
                <td class="fw-bold text-center">${row.total_box} Box ${row.total_sachet} Sachet</td>

                <td class="text-center d-flex gap-2 justify-content-center">

                    <button onclick="location.href='/stocks/add/${row.warehouse_id}'"
                        class="btn btn-primary btn-sm btn-icon text-white" title="Tambah">
                        <i class="bi bi-plus-circle fs-5"></i>
                    </button>

                    <button onclick="location.href='/stocks/reduce/${row.warehouse_id}'"
                        class="btn btn-danger btn-sm btn-icon text-white" title="Kurangi">
                        <i class="bi bi-dash-circle fs-5"></i>
                    </button>

                    <button onclick="location.href='/stocks/adjust/${row.warehouse_id}'"
                        class="btn btn-warning btn-sm btn-icon text-white" title="Adjust">
                        <i class="bi bi-sliders fs-5"></i>
                    </button>

                </td>
            </tr>
            `
                })

                document.getElementById("tbody-data").innerHTML = html
            }

            function renderPagination(current, last) {
                let html = `<nav><ul class="pagination pagination-sm justify-content-center">`

                html += `
            <li class="page-item ${current === 1 ? 'disabled':''}">
                <a class="page-link" href="javascript:void(0)" onclick="goPage(${current - 1})">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>`

                if (current > 3) html += pageBtn(1)
                if (current > 4) html += ellipsis()

                for (let i = current - 2; i <= current + 2; i++) {
                    if (i > 0 && i <= last) html += pageBtn(i)
                }

                if (current < last - 3) html += ellipsis()
                if (current < last - 2) html += pageBtn(last)

                html += `
            <li class="page-item ${current === last ? 'disabled':''}">
                <a class="page-link" href="javascript:void(0)" onclick="goPage(${current + 1})">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
        `

                html += `</ul></nav>`
                document.getElementById("pagination").innerHTML = html
            }

            function pageBtn(i) {
                return `
            <li class="page-item ${i === page ? 'active':''}">
                <a class="page-link" href="javascript:void(0)" onclick="goPage(${i})">${i}</a>
            </li>`
            }

            function ellipsis() {
                return `<li class="page-item disabled"><a class="page-link">...</a></li>`
            }

            window.goPage = function(i) {
                page = i
                loadData()
            }

            document.getElementById("search").oninput = function() {
                search = this.value
                page = 1
                loadData()
            }

            document.getElementById("length").onchange = function() {
                perPage = this.value
                page = 1
                loadData()
            }

        })
    </script>

@endsection