@extends('template.desktop.app')

@section('title', 'Manajemen Produk')

@section('content')
    <div class="row g-4 fade-in-up">
        <div class="col-12">
            <!-- Header Section -->
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-4 mb-4">
                <div>
                    <h4 class="fw-800 text-dark mb-1" style="letter-spacing: -0.02em;">Daftar Produk</h4>
                    <p class="text-muted small mb-0">Kelola inventaris, harga modal, dan strategi penjualan.</p>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <a href="{{ route('products.create') }}"
                        class="p-btn p-btn-primary d-flex align-items-center gap-2 rounded-2">
                        <i data-lucide="plus" style="width: 18px;"></i>
                        <span>Tambah Produk</span>
                    </a>
                </div>
            </div>

            <!-- Filter Section -->
            <div class="border-bottom border-light-subtle mb-4 pb-4">
                <div class="row g-3 align-items-center">
                    <div class="col-12 col-md-5">
                        <div class="input-group">
                            <span class="input-group-text bg-white text-muted">
                                <i data-lucide="search" style="width: 16px;"></i>
                            </span>
                            <input type="search" id="dt-search-product" class="form-control" style="height: 40px;"
                                placeholder="Cari nama atau SKU...">
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <select id="dt-length-product" class="form-select" style="height: 40px;">
                            <option value="10">10 baris</option>
                            <option value="25">25 baris</option>
                            <option value="50">50 baris</option>
                            <option value="100">100 baris</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4 text-md-end">
                        <div class="text-muted small fw-500">
                            Total: <span id="total-text" class="text-dark fw-bold">...</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Data Table Card -->
            <div class="card border border-light-subtle shadow-none rounded-2 overflow-hidden">
                <div class="table-responsive">
                    <table class="table table-custom align-middle mb-0" id="table-products">
                        <thead>
                            <tr>
                                <th class="ps-4" style="width: 300px;">Produk</th>
                                <th class="text-center">Tipe</th>
                                <th class="text-end">HPP (Modal)</th>
                                <th class="text-end">Harga Jual</th>
                                <th class="text-end">Potongan</th>
                                <th class="text-end">Margin</th>
                                <th class="text-end pe-4" style="width: 120px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="product-table-body">
                            <!-- Populated by JS -->
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div class="card-footer bg-white border-top border-light-subtle py-3 px-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                        <div class="text-muted small fw-500" id="pagination-info">Menampilkan...</div>
                        <nav>
                            <ul class="pagination pagination-modern mb-0" id="pagination">
                                <!-- Populated by JS -->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080" id="toast-container"></div>

    <style>
        :root {
            --bs-primary: #7B1E24;
            --bs-primary-hover: #5e161b;
            --bg-surface: #ffffff;
            --bg-subtle: #f8fafc;
            --border-color: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --radius-sm: 4px;
        }

        body {
            background-color: #ffffff;
            font-family: 'Inter', system-ui, sans-serif;
            color: var(--text-main);
        }

        .fw-800 {
            font-weight: 800;
        }

        .fw-600 {
            font-weight: 600;
        }

        .fw-500 {
            font-weight: 500;
        }

        /* Table Custom */
        .table-custom thead th {
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            background-color: #fff;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 1.25rem;
        }

        .table-custom tbody td {
            padding: 1rem 1.25rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-main);
            font-size: 0.875rem;
        }

        .table-custom tbody tr:hover {
            background-color: #f8fafc;
        }

        /* Inputs */
        .form-control,
        .form-select {
            border: 1px solid var(--border-color);
            background-color: #fff;
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            color: var(--text-main);
            box-shadow: none;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--bs-primary);
            box-shadow: none;
            outline: none;
            z-index: 2;
        }

        /* Input Group Styling */
        .input-group-text {
            border: 1px solid var(--border-color);
            background-color: #fff;
            color: var(--text-muted);
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
            border-right: none;
            padding: 0.5rem 0.75rem;
        }

        .input-group .form-control {
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            border-left: 1px solid var(--border-color);
        }

        .input-group .form-control:focus {
            border-color: var(--bs-primary);
            border-left-color: var(--bs-primary);
        }

        /* Buttons */
        .p-btn {
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.875rem;
            transition: background 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border: 1px solid transparent;
        }

        .p-btn-primary {
            background-color: var(--bs-primary);
            color: white;
        }

        .p-btn-primary:hover {
            background-color: var(--bs-primary-hover);
        }

        /* Pagination */
        .pagination-modern .page-link {
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            border-radius: var(--radius-sm);
            margin: 0 2px;
            font-size: 0.85rem;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pagination-modern .page-item.active .page-link {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
        }

        .pagination-modern .page-link:hover:not(.active) {
            background-color: #f1f5f9;
        }

        .fade-in-up {
            animation: fadeInUp 0.3s ease-out forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Skeleton */
        .skeleton-loader {
            background: #e5e7eb;
            background: linear-gradient(to right, #e5e7eb 8%, #f3f4f6 18%, #e5e7eb 33%);
            background-size: 800px 104px;
            animation: shimmer 2s infinite linear;
            border-radius: 4px;
        }

        @keyframes shimmer {
            0% {
                background-position: -468px 0;
            }

            100% {
                background-position: 468px 0;
            }
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></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');
            const totalText = document.getElementById('total-text');

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

            lucide.createIcons();

            const formatRupiah = (number) => {
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0
                }).format(number || 0);
            };

            const showToast = (message, type = 'success') => {
                const toastEl = document.createElement('div');
                const bgColor = type === 'success' ? 'bg-success' : 'bg-danger';
                toastEl.className =
                    `toast align-items-center text-white ${bgColor} border-0 show mb-2 shadow-sm`;
                toastEl.innerHTML = `
                    <div class="d-flex">
                        <div class="toast-body fw-bold">${message}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>`;
                toastBox.appendChild(toastEl);
                setTimeout(() => toastEl.remove(), 3000);
            };

            const renderSkeleton = (count) => {
                tableBody.innerHTML = Array(count).fill(0).map(() => `
                    <tr>
                        <td colspan="7" class="p-3">
                            <div class="d-flex gap-3 align-items-center">
                                <div class="skeleton-loader" style="width: 40px; height: 40px; border-radius: 8px;"></div>
                                <div class="w-100">
                                    <div class="skeleton-loader mb-2" style="width: 60%;"></div>
                                    <div class="skeleton-loader" style="width: 30%; height: 14px;"></div>
                                </div>
                            </div>
                        </td>
                    </tr>
                `).join('');
            };

            const renderProducts = (products) => {
                if (products.length === 0) {
                    tableBody.innerHTML =
                        `<tr><td colspan="7" class="text-center py-5 text-muted">Tidak ada data produk ditemukan.</td></tr>`;
                    return;
                }

                tableBody.innerHTML = products.map(p => {
                    const margin = (p.selling_price || 0) - (p.total_cost || 0);
                    const marginPercentage = p.selling_price ? Math.round((margin / p.selling_price) *
                        100) : 0;
                    const marginClass = margin > 0 ? 'text-success' : 'text-danger';

                    const typeBadge = p.product_type === 'single' ?
                        '<span class="badge bg-light text-dark border fw-normal rounded-1 px-2">Single</span>' :
                        '<span class="badge bg-dark text-white border border-dark rounded-1 px-2">Combo</span>';

                    return `
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="bg-light rounded-2 border d-flex align-items-center justify-content-center flex-shrink-0 text-muted fw-bold" 
                                         style="width: 36px; height: 36px; font-size: 0.8rem;">
                                        ${p.name.substring(0,2).toUpperCase()}
                                    </div>
                                    <div>
                                        <div class="fw-600 text-dark text-truncate-2" style="max-width: 200px;">${p.name}</div>
                                        <div class="small text-muted font-monospace mt-1" style="font-size: 0.75rem;">${p.sku_code}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">${typeBadge}</td>
                            <td class="text-end">
                                <div class="fw-600 text-dark">${formatRupiah(p.total_cost)}</div>
                                <div class="small text-muted" style="font-size: 0.7rem;">Modal</div>
                            </td>
                            <td class="text-end">
                                <div class="fw-800 text-dark">${formatRupiah(p.selling_price)}</div>
                            </td>
                            <td class="text-end">
                                ${p.shipping_discount > 0 
                                    ? `<span class="badge bg-warning-subtle text-warning-emphasis rounded-1 px-2 fw-normal">
                                                     <i data-lucide="scissors" style="width:10px; margin-right:2px;"></i> ${formatRupiah(p.shipping_discount)}
                                                   </span>`
                                    : '<span class="text-muted small">-</span>'
                                }
                            </td>
                            <td class="text-end">
                                <div class="fw-bold ${marginClass}">${formatRupiah(margin)}</div>
                                <div class="small text-muted" style="font-size: 0.7rem;">${marginPercentage}%</div>
                            </td>
                            <td class="text-end pe-4">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="/products/${p.id}/edit" class="btn btn-sm btn-white border text-muted hover-text-dark px-2" title="Edit">
                                        <i data-lucide="edit-3" style="width: 14px;"></i>
                                    </a>
                                    <button onclick="deleteProduct(${p.id})" class="btn btn-sm btn-white border text-danger px-2" title="Hapus">
                                        <i data-lucide="trash-2" style="width: 14px;"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    `;
                }).join('');
                lucide.createIcons();
            };

            const renderPaginationUI = (meta) => {
                const {
                    current_page,
                    last_page,
                    total
                } = meta;
                totalText.innerText = `${total} Items`;
                pageInfo.innerText = `Hal ${current_page} dari ${last_page}`;

                let html = '';
                const maxVisible = 5;
                let start = Math.max(1, current_page - Math.floor(maxVisible / 2));
                let end = start + maxVisible - 1;

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

                // Prev
                html += `<li class="page-item ${current_page === 1 ? 'disabled' : ''}">
                            <button class="page-link" onclick="changePage(${current_page - 1})"><i data-lucide="chevron-left" style="width:14px;"></i></button>
                         </li>`;

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

                // Next
                html += `<li class="page-item ${current_page === last_page ? 'disabled' : ''}">
                            <button class="page-link" onclick="changePage(${current_page + 1})"><i data-lucide="chevron-right" style="width:14px;"></i></button>
                         </li>`;

                pagination.innerHTML = html;
                lucide.createIcons();
            };

            const fetchProducts = () => {
                renderSkeleton(currentLength);
                axios.get("{{ route('products.list') }}", {
                        params: {
                            search: searchInput.value,
                            page: currentPage,
                            length: currentLength
                        }
                    })
                    .then(res => {
                        const {
                            data,
                            ...meta
                        } = res.data;
                        renderProducts(data);
                        renderPaginationUI(meta);
                    })
                    .catch(err => {
                        console.error(err);
                        tableBody.innerHTML =
                            `<tr><td colspan="7" class="text-center text-danger py-4">Gagal memuat data.</td></tr>`;
                    });
            };

            window.changePage = (page) => {
                if (page < 1) return;
                currentPage = page;
                fetchProducts();
            };

            window.deleteProduct = (id) => {
                if (!confirm('Hapus produk ini?')) return;
                axios.delete(`/products/${id}`, {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(() => {
                        showToast('Produk dihapus.');
                        fetchProducts();
                    })
                    .catch(() => showToast('Gagal menghapus.', 'error'));
            };

            let debounceTimer;
            searchInput.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    currentPage = 1;
                    fetchProducts();
                }, 500);
            });

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

            // Init load
            fetchProducts();
        });
    </script>
@endsection