@extends('template.desktop.app')

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

@section('content')
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-0 pb-0">
            <div class="d-flex flex-column gap-3">

                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="fw-bold mb-0">Data Product</h4>
                        <small class="text-muted">Manajemen produk & kombinasi</small>
                    </div>

                    <div class="d-flex align-items-center gap-3 header-actions">
                        <div class="input-group input-group-lg search-modern">
                            <span class="input-group-text bg-light border-0">
                                <i class="ti tabler-search"></i>
                            </span>
                            <input type="search" id="dt-search-product" class="form-control border-0 bg-light"
                                placeholder="Cari nama / SKU">
                        </div>

                        <select id="dt-length-product" class="form-select form-select-lg filter-modern">
                            <option value="10" selected>10 / halaman</option>
                            <option value="50">50 / halaman</option>
                            <option value="100">100 / halaman</option>
                        </select>

                        <a href="{{ route('products.create') }}" class="btn btn-maroon btn-lg px-4 btn-add">
                            <i class="ti tabler-plus me-2"></i>Tambah Product
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="card-body pt-4">
            <div class="table-responsive">
                <table class="table align-middle table-hover">
                    <thead>
                        <tr class="text-muted text-uppercase fs-7">
                            <th>Produk</th>
                            <th>Bonus</th>
                            <th>Conversion</th>
                            <th>Cost</th>
                            <th>Harga</th>
                            <th>Type</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody id="product-table-body">
                        @for ($i = 0; $i < 6; $i++)
                            <tr>
                                <td colspan="7">
                                    <div class="skeleton-line"></div>
                                </td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-4">
                <small class="text-muted" id="pagination-info"></small>
                <ul class="pagination pagination-modern mb-0" id="pagination"></ul>
            </div>
        </div>
    </div>

    <div id="toast-container" class="toast-modern"></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 pageInfo = document.getElementById('pagination-info');
            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 el = document.createElement('div');
                el.className = `toast-item ${type}`;
                el.innerText = msg;
                toastBox.appendChild(el);
                setTimeout(() => el.remove(), 3000);
            };

            function skeleton(rows) {
                tableBody.innerHTML = '';
                for (let i = 0; i < rows; i++) {
                    tableBody.innerHTML += `
                <tr>
                    <td colspan="7">
                        <div class="skeleton-line"></div>
                    </td>
                </tr>
            `;
                }
            }

            function renderConversion(p) {
                if (p.product_type !== 'single') return '-';
                if (!p.conversions?.length) return '-';

                return p.conversions.map(c =>
                    `<span class="badge bg-light text-dark mb-1 d-inline-block">
                1 ${c.target_unit.toUpperCase()} = ${c.base_quantity} ${p.category.toUpperCase()}
            </span>`
                ).join('<br>');
            }

            function renderProducts(products) {
                tableBody.innerHTML = products.map(p => `
            <tr>
                <td>
                    <div class="fw-semibold">${p.name}</div>
                    <small class="text-muted">${p.sku_code}</small>
                </td>
                <td class="fw-semibold">${rupiah(p.bonus)}</td>
                <td class="fs-8">${renderConversion(p)}</td>
                <td>
                    <div class="fs-8 text-muted">Total</div>
                    <div class="fw-semibold">${rupiah(p.total_cost)}</div>
                </td>
                <td class="fw-semibold">${rupiah(p.selling_price)}</td>
                <td>
                    <span class="badge rounded-pill
                        ${p.product_type === 'single'
                            ? 'badge-maroon'
                            : 'badge-outline-maroon'}">
                        ${p.product_type.toUpperCase()}
                    </span>
                </td>
                <td class="text-end">
                    <a href="/products/${p.id}/edit"
                       class="btn btn-light btn-action">
                        <i class="ti tabler-edit"></i>
                    </a>
                    <button class="btn btn-light btn-action text-danger"
                            onclick="deleteProduct(${p.id})">
                        <i class="ti tabler-trash"></i>
                    </button>
                </td>
            </tr>
        `).join('');
            }

            function renderPagination(meta) {
                const lastPage = meta.last_page;
                const current = meta.current_page;

                let html = '';
                const maxVisible = 5;

                let start = Math.max(1, current - Math.floor(maxVisible / 2));
                let end = start + maxVisible - 1;

                if (end > lastPage) {
                    end = lastPage;
                    start = Math.max(1, end - maxVisible + 1);
                }

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

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

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

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

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

                pagination.innerHTML = html;
                pageInfo.innerText = `Page ${current} of ${lastPage}`;
            }

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

            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>
        :root {
            --maroon: #7B1E24;
            --maroon-soft: #FBEAEA;
        }

        .header-actions {
            flex-wrap: nowrap;
        }

        .search-modern {
            width: 360px;
        }

        .filter-modern {
            width: 190px;
        }

        .btn-maroon {
            background: var(--maroon);
            color: #fff;
            border: none;
        }

        .btn-maroon:hover {
            background: #66161b;
            color: #fff;
        }

        .badge-maroon {
            background: var(--maroon-soft);
            color: var(--maroon);
        }

        .badge-outline-maroon {
            border: 1px solid var(--maroon);
            color: var(--maroon);
        }

        .btn-action {
            padding: 8px 10px;
        }

        .pagination-modern .page-link {
            border: none;
            border-radius: 999px;
            padding: 8px 14px;
            margin: 0 3px;
            background: transparent;
            color: #374151;
            font-weight: 500;
        }

        .pagination-modern .page-item.active .page-link {
            background: var(--maroon);
            color: #fff;
            box-shadow: 0 6px 14px rgba(123, 30, 36, .25);
        }

        .pagination-modern .page-link:hover {
            background: var(--maroon-soft);
        }

        .pagination-modern .page-item.disabled .page-link {
            color: #9ca3af;
            pointer-events: none;
        }

        .skeleton-line {
            height: 14px;
            width: 100%;
            background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
            background-size: 200% 100%;
            animation: shimmer 1.2s infinite;
            border-radius: 6px;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0
            }

            100% {
                background-position: -200% 0
            }
        }

        .toast-modern {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }

        .toast-item {
            background: #fff;
            border-left: 4px solid var(--maroon);
            padding: 10px 14px;
            margin-bottom: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
            border-radius: 6px;
            font-size: 13px;
        }

        .toast-item.danger {
            border-left-color: #ef4444;
        }
    </style>
@endsection