@extends('template.desktop.app')

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

@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 Product</h4>
            <div class="d-flex flex-wrap align-items-center gap-2">
                <input type="search" class="form-control form-control-sm ps-4" id="dt-search-product"
                    placeholder="Cari Product: nama, SKU" />
                <select name="product_table_length" id="dt-length-product" 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('products.create') }}" class="btn btn-primary btn-sm">
                    <i class="icon-base ti tabler-plus me-1"></i> Tambah Product
                </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="kt_table_products">
                    <thead class="bg-light text-muted">
                        <tr class="text-uppercase fw-semibold fs-7">
                            <th>SKU</th>
                            <th>Nama</th>
                            <th>HPP</th>
                            <th>Fulfillment</th>
                            <th>Total Cost</th>
                            <th>Harga Jual</th>
                            <th>Total Deduction</th>
                            <th>Type</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="product-table-body" class="text-gray-600 fw-semibold">
                        @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><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 align-items-center mt-4">
                <ul class="pagination pagination-sm" id="pagination"></ul>
            </div>
        </div>
    </div>

    <div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tableBody = document.getElementById("product-table-body");
            const searchInput = document.getElementById("dt-search-product");
            const lengthSelect = document.getElementById("dt-length-product");
            const paginationContainer = document.getElementById("pagination");
            const toastContainer = document.getElementById("toast-container");

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

            function formatRupiah(number) {
                if (number === null || number === undefined) return '0';
                return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }

            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><span class="placeholder col-12"></span></td>
    <td class="text-end"><span class="placeholder col-12"></span></td>
</tr>`;
                }
                tableBody.innerHTML = skeleton;
            }

            function showToast(message, type = 'success') {
                const toast = document.createElement('div');
                toast.className = `alert alert-${type} shadow-sm mb-2`;
                toast.innerText = message;
                toastContainer.appendChild(toast);
                setTimeout(() => toast.remove(), 3000);
            }

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

                axios.get("{{ route('products.list') }}", {
                        params: {
                            search,
                            page,
                            length
                        }
                    })
                    .then(response => {
                        const products = response.data.data;
                        const lastPage = response.data.last_page;

                        tableBody.innerHTML = products.map(product => {
                            let totalDeduction = product.total_deduction;
                            let linkedProducts = '-';
                            if (product.product_type === 'combination' && product.combinations.length >
                                0) {
                                linkedProducts = product.combinations.map(c => c.parent.name).join(
                                ', ');
                                totalDeduction = product.combinations.reduce((sum, c) => sum + parseInt(
                                    c.total_deduction), 0);
                            }

                            return `
                                <tr>
                                    <td>${product.sku_code}</td>
                                    <td>
                                        ${product.name}
                                        ${linkedProducts !== '-' ? '<br><small class="text-muted">(' + linkedProducts + ')</small>' : ''}
                                    </td>
                                    <td>Rp${formatRupiah(product.hpp)}</td>
                                    <td>Rp${formatRupiah(product.fulfillment_cost)}</td>
                                    <td>Rp${formatRupiah(product.total_cost)}</td>
                                    <td>Rp${formatRupiah(product.selling_price)}</td>
                                    <td>${totalDeduction} qty</td>
                                    <td>${product.product_type}</td>
                                    <td class="text-end">
                                        <div class="d-flex flex-wrap justify-content-end gap-2">
                                            <a href="/products/${product.id}/edit" class="btn btn-sm btn-warning" title="Edit">
                                                <i class="icon-base ti tabler-pencil"></i>
                                            </a>
                                            <button class="btn btn-sm btn-danger" onclick="deleteProduct(${product.id})" title="Delete">
                                                <i class="icon-base ti tabler-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>`;
                        }).join('');

                        renderPagination(lastPage);
                    })
                    .catch(err => {
                        tableBody.innerHTML =
                            '<tr><td colspan="9" class="text-center text-danger">Gagal memuat data</td></tr>';
                        console.error(err);
                    });
            }

            function renderPagination(lastPage) {
                let html = '';

                html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(1)">
                        <i class="icon-base ti tabler-chevrons-left"></i>
                    </button>
                </li>`;
                html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(${currentPage - 1})">
                        <i class="icon-base ti tabler-chevron-left"></i>
                    </button>
                </li>`;

                let start = currentPage - 1;
                let end = currentPage + 1;
                if (start < 1) {
                    end += 1 - start;
                    start = 1;
                }
                if (end > lastPage) {
                    start -= end - lastPage;
                    end = lastPage;
                }
                if (start < 1) start = 1;

                if (start > 1) {
                    html +=
                        `<li class="page-item"><button class="page-link" onclick="changePage(1)">1</button></li>`;
                    if (start > 2) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }

                for (let i = start; i <= end; i++) {
                    html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                        <button class="page-link" onclick="changePage(${i})">${i}</button>
                    </li>`;
                }

                if (end < lastPage) {
                    if (end < lastPage - 1) html +=
                        `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                    html +=
                        `<li class="page-item"><button class="page-link" onclick="changePage(${lastPage})">${lastPage}</button></li>`;
                }

                html += `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(${currentPage + 1})">
                        <i class="icon-base ti tabler-chevron-right"></i>
                    </button>
                </li>`;
                html += `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(${lastPage})">
                        <i class="icon-base ti tabler-chevrons-right"></i>
                    </button>
                </li>`;

                paginationContainer.innerHTML = html;
            }

            window.changePage = function(page) {
                currentPage = page;
                fetchProducts(searchInput.value, currentPage, currentLength);
            };

            searchInput.addEventListener("input", () => {
                currentPage = 1;
                fetchProducts(searchInput.value, currentPage, currentLength);
            });
            lengthSelect.addEventListener("change", () => {
                currentLength = parseInt(lengthSelect.value);
                currentPage = 1;
                fetchProducts(searchInput.value, currentPage, currentLength);
            });

            window.deleteProduct = function(id) {
                if (!confirm('Yakin ingin menghapus produk ini?')) return;
                axios.delete(`/products/${id}`, {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(() => {
                        showToast('Produk berhasil dihapus', 'success');
                        fetchProducts(searchInput.value, currentPage, currentLength);
                    })
                    .catch(() => {
                        showToast('Gagal menghapus produk', 'danger');
                    });
            };

            fetchProducts();
        });
    </script>

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

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

            50% {
                background-color: #f0f0f0;
            }

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