@extends('template.desktop.app')

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

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-3 pb-2">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                <h4 class="card-title fw-bold mb-0">Data Product</h4>

                <div class="d-flex flex-wrap gap-2">
                    <input type="search" id="dt-search-product" class="form-control form-control-sm"
                        placeholder="Cari Product: Nama / SKU">

                    <select 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="ti tabler-plus me-1"></i> Tambah Product
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body pt-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="bg-light">
                        <tr class="text-uppercase fs-7 fw-semibold text-muted">
                            <th>SKU</th>
                            <th>Nama</th>
                            <th>Bonus CS</th>
                            <th>Conversion</th>
                            <th>HPP</th>
                            <th>Fulfillment</th>
                            <th>Total Cost</th>
                            <th>Harga Jual</th>
                            <th>Type</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody id="product-table-body">
                        @for ($i = 0; $i < 10; $i++)
                            <tr>
                                <td colspan="10">
                                    <span class="placeholder col-12"></span>
                                </td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-end mt-3">
                <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', () => {

            const tableBody = document.getElementById('product-table-body');
            const searchInput = document.getElementById('dt-search-product');
            const lengthSelect = document.getElementById('dt-length-product');
            const pagination = document.getElementById('pagination');
            const toastBox = document.getElementById('toast-container');

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

            const rupiah = n =>
                'Rp' + (n ?? 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');

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

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

            function renderConversion(product) {
                if (product.product_type !== 'single') return '-';
                if (!product.conversions || product.conversions.length === 0) return '-';

                return product.conversions.map(c =>
                    `1 ${c.target_unit.toUpperCase()} = ${c.base_quantity} ${product.category.toUpperCase()}`
                ).join('<br>');
            }

            function renderProducts(products) {
                tableBody.innerHTML = products.map(p => `
                    <tr>
                        <td>${p.sku_code}</td>
                        <td>
                            <strong>${p.name}</strong>
                            ${p.product_type === 'combination' && p.combinations.length
                                ? `<br><small class="text-muted">
                                        Kombinasi: ${p.combinations.map(c => c.parent?.name).join(', ')}
                                    </small>`
                                : ''}
                        </td>
                        <td>${rupiah(p.bonus)}</td>
                        <td>${renderConversion(p)}</td>
                        <td>${rupiah(p.hpp)}</td>
                        <td>${rupiah(p.fulfillment_cost)}</td>
                        <td>${rupiah(p.total_cost)}</td>
                        <td>${rupiah(p.selling_price)}</td>
                        <td>
                            <span class="badge bg-${p.product_type === 'single' ? 'success' : 'info'}">
                                ${p.product_type}
                            </span>
                        </td>
                        <td class="text-end">
                            <a href="/products/${p.id}/edit"
                            class="btn btn-sm btn-warning">Edit</a>
                            <button class="btn btn-sm btn-danger"
                                    onclick="deleteProduct(${p.id})">
                                Delete
                            </button>
                        </td>
                    </tr>
                `).join('');
            }

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

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

                pagination.innerHTML = html;
            }

            function fetchProducts() {
                skeleton(currentLength);

                axios.get("{{ route('products.list') }}", {
                        params: {
                            search: searchInput.value,
                            page: currentPage,
                            length: currentLength
                        }
                    })
                    .then(res => {
                        renderProducts(res.data.data);
                        renderPagination(res.data.last_page);
                    })
                    .catch(() => {
                        toast('Gagal load data', 'danger');
                    });
            }

            window.changePage = p => {
                currentPage = p;
                fetchProducts();
            };

            window.deleteProduct = id => {
                if (!confirm('Hapus product ini?')) return;
                axios.delete(`/products/${id}`, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(() => {
                    toast('Product dihapus');
                    fetchProducts();
                });
            };

            searchInput.oninput = () => {
                currentPage = 1;
                fetchProducts();
            };

            lengthSelect.onchange = () => {
                currentLength = parseInt(lengthSelect.value);
                currentPage = 1;
                fetchProducts();
            };

            fetchProducts();
        });
    </script>

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

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

            50% {
                opacity: 1
            }

            100% {
                opacity: .5
            }
        }
    </style>
@endsection