@extends('layouts.admin')

@section('title', 'Produk & HPP - Report Admin')

@php
/**
 * Badge warna nama toko — diambil dari palet berdasar ID toko,
 * sehingga toko yang sama SELALU berwarna sama di seluruh halaman.
 * Warna enak dilihat di latar putih (bg pastel + teks gelap senada).
 */
function storeBadgeClasses($storeId): string
{
    $palette = [
        'bg-emerald-50 text-emerald-700 border-emerald-200',
        'bg-purple-50 text-purple-700 border-purple-200',
        'bg-amber-50 text-amber-700 border-amber-200',
        'bg-rose-50 text-rose-700 border-rose-200',
        'bg-teal-50 text-teal-700 border-teal-200',
        'bg-orange-50 text-orange-700 border-orange-200',
        'bg-cyan-50 text-cyan-700 border-cyan-200',
        'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200',
    ];
    return $palette[((int) $storeId) % count($palette)];
}

function storeBadge($store): string
{
    if (!$store) return '';
    $cls = storeBadgeClasses($store->id);
    return '<span class="px-2 py-0.5 text-xs font-semibold rounded border whitespace-nowrap ' . $cls . '">'
        . e($store->name) . '</span>';
}
@endphp

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Produk & HPP</h1>
            <p class="text-sm text-gray-500 mt-1">Kelola produk dan harga pokok penjualan (HPP)</p>
        </div>
        <button onclick="openProductModal()" class="h-9 px-4 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">add</span>
            Tambah Produk
        </button>
    </div>

    <!-- Search & Filter Bar -->
    <form method="GET" action="{{ route('admin.products') }}" class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm flex flex-col md:flex-row md:items-end gap-3">
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Toko</label>
            <select name="store_id" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Toko</option>
                @foreach($stores as $store)
                    <option value="{{ $store->id }}" {{ $storeId == $store->id ? 'selected' : '' }}>{{ $store->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Cari Produk</label>
            <div class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg">search</span>
                <input type="text" name="search" value="{{ $search }}" placeholder="Nama produk atau SKU..." class="w-full h-9 pl-9 pr-4 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Kategori</label>
            <select name="category" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Kategori</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat }}" {{ $category == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                @endforeach
            </select>
        </div>
        <div class="w-44">
            <label class="block text-xs font-medium text-gray-500 mb-1">Status HPP</label>
            <select name="hpp" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Semua</option>
                <option value="missing" {{ $hpp === 'missing' ? 'selected' : '' }}>⚠ Belum ada HPP</option>
                <option value="filled" {{ $hpp === 'filled' ? 'selected' : '' }}>✓ Sudah ada HPP</option>
            </select>
        </div>
        <div class="flex gap-2">
            <button type="submit" class="h-9 px-4 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">Filter</button>
            <a href="{{ route('admin.products') }}" class="h-9 px-4 rounded-lg border border-gray-300 text-gray-600 text-sm font-medium hover:bg-gray-50 flex items-center">Reset</a>
        </div>
    </form>

    @if($unmappedSkus->isNotEmpty())
    <!-- SKU pesanan yang belum terhubung ke produk mana pun -->
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
        <div class="flex items-start gap-3 mb-3">
            <span class="material-symbols-outlined text-amber-600">link_off</span>
            <div class="text-sm text-amber-800">
                <p class="font-semibold">{{ $unmappedSkus->count() }} SKU pesanan belum terhubung ke produk</p>
                <p class="text-amber-700">SKU berikut ditemukan di pesanan terimpor tetapi produknya belum ada di daftar produk, sehingga labanya belum dihitung. Klik "Buat Produk" untuk membuatkan produknya sekaligus menghubungkan pesanan lamanya.</p>
            </div>
        </div>
        <div class="overflow-x-auto rounded-lg border border-amber-200 bg-white">
            <table class="w-full text-left text-sm">
                <thead class="bg-amber-50 text-amber-700 text-xs uppercase">
                    <tr>
                        <th class="px-3 py-2 font-semibold">SKU</th>
                        <th class="px-3 py-2 font-semibold">Nama Produk</th>
                        <th class="px-3 py-2 font-semibold">Toko</th>
                        <th class="px-3 py-2 font-semibold text-center">Platform</th>
                        <th class="px-3 py-2 font-semibold text-center">Pesanan</th>
                        <th class="px-3 py-2 font-semibold text-center">Qty</th>
                        <th class="px-3 py-2 font-semibold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($unmappedSkus as $item)
                    <tr class="hover:bg-amber-50/50">
                        <td class="px-3 py-2 font-mono font-medium text-gray-900">{{ $item->sku }}</td>
                        <td class="px-3 py-2 text-gray-700">{{ $item->product_name }}</td>
                        <td class="px-3 py-2">
                            @if($item->store)
                                {!! storeBadge($item->store) !!}
                            @else
                                <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-center">
                            <span class="px-2 py-0.5 bg-purple-50 text-purple-700 text-xs font-semibold rounded capitalize">{{ $item->platform }}</span>
                        </td>
                        <td class="px-3 py-2 text-center text-gray-700">{{ number_format($item->orders_count) }}</td>
                        <td class="px-3 py-2 text-center text-gray-700">{{ number_format($item->total_qty) }}</td>
                        <td class="px-3 py-2 text-center">
                            <button onclick="openProductModalForSku({{ $item->store_id }}, '{{ $item->platform }}', '{{ addslashes($item->sku) }}', '{{ addslashes($item->product_name) }}')"
                                    class="h-7 px-3 rounded bg-amber-600 text-white text-xs font-medium hover:bg-amber-700 whitespace-nowrap">
                                + Buat Produk
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    @if($missingHppCount > 0)
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-start gap-3">
            <span class="material-symbols-outlined text-amber-600">warning</span>
            <div class="text-sm text-amber-800">
                <p class="font-semibold">{{ $missingHppCount }} produk belum memiliki HPP</p>
                <p class="text-amber-700">Transaksi produk ini tidak diikutkan dalam perhitungan laba. Lengkapi HPP agar laba akurat.</p>
            </div>
        </div>
        <a href="{{ route('admin.products', ['hpp' => 'missing']) }}"
           class="h-9 px-4 rounded-lg bg-amber-600 text-white text-sm font-medium hover:bg-amber-700 flex items-center justify-center gap-2 whitespace-nowrap">
            <span class="material-symbols-outlined text-base">visibility</span>
            Lihat Produk
        </a>
    </div>
    @endif

    <!-- Bulk Edit Bar -->
    <div id="bulkEditBar" class="hidden bg-blue-50 border border-blue-200 rounded-xl p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-center gap-2 text-sm text-blue-800">
            <span class="material-symbols-outlined text-blue-600">checklist</span>
            <span><strong id="bulkSelectedCount">0</strong> produk dipilih</span>
        </div>
        <div class="flex gap-2">
            <button onclick="openBulkModal()" class="h-9 px-4 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 flex items-center gap-2">
                <span class="material-symbols-outlined text-base">edit</span>
                Edit Massal
            </button>
            <button onclick="clearSelection()" class="h-9 px-4 rounded-lg border border-blue-300 text-blue-700 text-sm font-medium hover:bg-blue-100">Batal Pilih</button>
        </div>
    </div>

    <!-- Products Table -->
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                    <tr>
                        <th class="px-4 py-3 font-semibold w-10">
                            <input type="checkbox" id="selectAllProducts" onchange="toggleSelectAll(this.checked)" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer">
                        </th>
                        <th class="px-4 py-3 font-semibold">SKU</th>
                        <th class="px-4 py-3 font-semibold">Nama Produk</th>
                        <th class="px-4 py-3 font-semibold">Toko</th>
                        <th class="px-4 py-3 font-semibold">Kategori</th>
                        <th class="px-4 py-3 font-semibold text-right">HPP (Cost)</th>
                        <th class="px-4 py-3 font-semibold text-right">Harga Jual</th>
                        <th class="px-4 py-3 font-semibold text-right">Margin</th>
                        <th class="px-4 py-3 font-semibold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-100">
                    @forelse($products as $product)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <input type="checkbox" class="product-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" value="{{ $product->id }}" onchange="updateBulkBar()">
                        </td>
                        <td class="px-4 py-3 font-mono font-medium text-gray-900">{{ $product->sku }}</td>
                        <td class="px-4 py-3 text-gray-900">{{ $product->name }}</td>
                        <td class="px-4 py-3">
                            @if($product->store)
                                {!! storeBadge($product->store) !!}
                            @else
                                <span class="text-gray-400 text-xs">Tanpa toko</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($product->category)
                                <span class="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs font-medium rounded">{{ $product->category }}</span>
                            @else
                                <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            @if($product->purchase_price > 0)
                                <span class="text-red-600 font-medium">Rp {{ number_format($product->purchase_price, 0, ',', '.') }}</span>
                            @else
                                <span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-xs font-semibold rounded-full" title="HPP belum diisi — transaksi tidak dihitung dalam laba">⚠ Belum ada HPP</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right text-gray-900 whitespace-nowrap">Rp {{ number_format($product->selling_price ?? 0, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            @if($product->selling_price > 0 && $product->purchase_price > 0)
                                @php $margin = ($product->selling_price - $product->purchase_price) / $product->selling_price * 100; @endphp
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded">{{ number_format($margin, 1) }}%</span>
                            @else
                                <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex items-center justify-center gap-1">
                                <button onclick='editProduct({{ json_encode($product) }})' class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded" title="Edit">
                                    <span class="material-symbols-outlined text-lg">edit</span>
                                </button>
                                <button onclick="deleteProduct({{ $product->id }}, '{{ $product->name }}')" class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded" title="Hapus">
                                    <span class="material-symbols-outlined text-lg">delete</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-12 text-center">
                            <span class="material-symbols-outlined text-5xl text-gray-300">inventory_2</span>
                            <p class="mt-3 text-gray-500">Belum ada produk. Tambahkan produk pertama Anda.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($products->hasPages())
        <div class="px-4 py-3 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-2">
            <p class="text-sm text-gray-500">
                Menampilkan {{ $products->firstItem() }} - {{ $products->lastItem() }} dari {{ number_format($products->total()) }} produk
            </p>
            <div>{{ $products->links('pagination::tailwind') }}</div>
        </div>
        @endif
    </div>
</div>
@endsection

<!-- Product Modal -->
<div id="productModal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-black/50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-md">
            <div class="p-4 border-b border-gray-200 flex items-center justify-between">
                <h3 id="modalTitle" class="font-semibold text-gray-900">Tambah Produk</h3>
                <button onclick="closeProductModal()" class="p-1 text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="productForm" onsubmit="saveProduct(event)" class="p-4 space-y-4">
                <input type="hidden" id="product_id">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Toko <span class="text-red-500">*</span></label>
                    <select id="product_store_id" required class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">-- Pilih toko --</option>
                        @foreach($stores as $store)
                            <option value="{{ $store->id }}">{{ $store->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Produk <span class="text-red-500">*</span></label>
                    <input type="text" id="product_name" required class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">SKU <span class="text-red-500">*</span></label>
                    <input type="text" id="product_sku" required class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">HPP (Cost) <span class="text-red-500">*</span></label>
                        <input type="number" id="product_purchase_price" required min="0" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Harga Jual</label>
                        <input type="number" id="product_selling_price" min="0" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Kategori</label>
                    <input type="text" id="product_category" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" onclick="closeProductModal()" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 text-sm font-medium hover:bg-gray-50">Batal</button>
                    <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Edit Modal -->
<div id="bulkModal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-black/50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-md">
            <div class="p-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">Edit Massal <span id="bulkModalCount" class="text-blue-600"></span></h3>
                <button onclick="closeBulkModal()" class="p-1 text-gray-400 hover:text-gray-600">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="bulkForm" onsubmit="saveBulkEdit(event)" class="p-4 space-y-4">
                <p class="text-xs text-gray-500">Centang kolom yang ingin diubah, lalu isi nilai barunya. Kolom yang tidak dicentang <strong>tidak akan diubah</strong>.</p>

                <div class="space-y-3">
                    <div class="p-3 rounded-lg border border-gray-200">
                        <label class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                            <input type="checkbox" id="bulk_apply_purchase_price" class="w-4 h-4 rounded border-gray-300 text-blue-600 cursor-pointer">
                            HPP (Cost)
                        </label>
                        <input type="number" id="bulk_purchase_price" min="0" placeholder="HPP baru" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-400" disabled>
                    </div>

                    <div class="p-3 rounded-lg border border-gray-200">
                        <label class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                            <input type="checkbox" id="bulk_apply_selling_price" class="w-4 h-4 rounded border-gray-300 text-blue-600 cursor-pointer">
                            Harga Jual
                        </label>
                        <input type="number" id="bulk_selling_price" min="0" placeholder="Harga jual baru" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-400" disabled>
                    </div>

                    <div class="p-3 rounded-lg border border-gray-200">
                        <label class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                            <input type="checkbox" id="bulk_apply_category" class="w-4 h-4 rounded border-gray-300 text-blue-600 cursor-pointer">
                            Kategori
                        </label>
                        <input type="text" id="bulk_category" placeholder="Kategori baru" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-400" disabled>
                    </div>

                    <div class="p-3 rounded-lg border border-gray-200">
                        <label class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
                            <input type="checkbox" id="bulk_apply_store_id" class="w-4 h-4 rounded border-gray-300 text-blue-600 cursor-pointer">
                            Toko
                        </label>
                        <select id="bulk_store_id" class="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-400" disabled>
                            <option value="">-- Pilih toko --</option>
                            @foreach($stores as $store)
                                <option value="{{ $store->id }}">{{ $store->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" onclick="closeBulkModal()" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-600 text-sm font-medium hover:bg-gray-50">Batal</button>
                    <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">Terapkan ke Produk Terpilih</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
    let productSourcePlatform = null; // diisi saat produk dibuat dari daftar SKU pesanan

    function openProductModal() {
        productSourcePlatform = null;
        document.getElementById('modalTitle').textContent = 'Tambah Produk';
        document.getElementById('productForm').reset();
        document.getElementById('product_id').value = '';
        document.getElementById('productModal').classList.remove('hidden');
    }

    // Dibuka dari daftar "SKU belum terhubung": isi otomatis + ingat platform
    function openProductModalForSku(storeId, platform, sku, productName) {
        productSourcePlatform = platform;
        document.getElementById('productForm').reset();
        document.getElementById('product_id').value = '';
        document.getElementById('product_store_id').value = storeId;
        document.getElementById('product_name').value = productName;
        document.getElementById('product_sku').value = sku;
        document.getElementById('product_purchase_price').value = '';
        document.getElementById('product_purchase_price').focus();
        document.getElementById('modalTitle').textContent = 'Buat Produk dari SKU Pesanan';
        document.getElementById('productModal').classList.remove('hidden');
    }
    
    function closeProductModal() {
        document.getElementById('productModal').classList.add('hidden');
    }
    
    function editProduct(product) {
        document.getElementById('modalTitle').textContent = 'Edit Produk';
        document.getElementById('product_id').value = product.id;
        document.getElementById('product_name').value = product.name;
        document.getElementById('product_sku').value = product.sku;
        document.getElementById('product_purchase_price').value = product.purchase_price;
        document.getElementById('product_selling_price').value = product.selling_price ?? '';
        document.getElementById('product_category').value = product.category ?? '';
        document.getElementById('product_store_id').value = product.store_id ?? '';
        document.getElementById('productModal').classList.remove('hidden');
    }
    
    async function saveProduct(e) {
        e.preventDefault();
        const id = document.getElementById('product_id').value;
        const payload = {
            store_id: document.getElementById('product_store_id').value,
            name: document.getElementById('product_name').value,
            sku: document.getElementById('product_sku').value,
            purchase_price: document.getElementById('product_purchase_price').value,
            selling_price: document.getElementById('product_selling_price').value || null,
            category: document.getElementById('product_category').value || null,
        };
        if (productSourcePlatform) {
            payload.platform = productSourcePlatform; // buat mapping + relink pesanan lama
        }
        
        const url = id ? `/admin/products/${id}` : '{{ route("admin.products.store") }}';
        const res = await fetch(url, {
            method: id ? 'PUT' : 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify(payload),
        });
        
        if (res.ok) {
            window.location.reload();
        } else {
            const data = await res.json();
            alert(data.message || 'Terjadi kesalahan');
        }
    }
    
    async function deleteProduct(id, name) {
        if (!confirm(`Hapus produk "${name}"?`)) return;
        
        const res = await fetch(`/admin/products/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
        });
        
        if (res.ok) {
            window.location.reload();
        } else {
            alert('Gagal menghapus produk');
        }
    }

    // ---- Bulk edit helpers ----
    function getSelectedIds() {
        return Array.from(document.querySelectorAll('.product-checkbox:checked')).map(cb => parseInt(cb.value));
    }

    function toggleSelectAll(checked) {
        document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = checked);
        updateBulkBar();
    }

    function updateBulkBar() {
        const ids = getSelectedIds();
        const bar = document.getElementById('bulkEditBar');
        bar.classList.toggle('hidden', ids.length === 0);
        document.getElementById('bulkSelectedCount').textContent = ids.length;
    }

    function clearSelection() {
        const selectAll = document.getElementById('selectAllProducts');
        if (selectAll) selectAll.checked = false;
        document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = false);
        updateBulkBar();
    }

    function openBulkModal() {
        const ids = getSelectedIds();
        if (ids.length === 0) {
            alert('Pilih minimal 1 produk terlebih dahulu');
            return;
        }
        document.getElementById('bulkModalCount').textContent = `(${ids.length} produk)`;
        document.getElementById('bulkModal').classList.remove('hidden');
    }

    function closeBulkModal() {
        document.getElementById('bulkModal').classList.add('hidden');
    }

    // enable/disable value input when its "apply" checkbox toggles
    [['bulk_apply_purchase_price', 'bulk_purchase_price'],
     ['bulk_apply_selling_price', 'bulk_selling_price'],
     ['bulk_apply_category', 'bulk_category'],
     ['bulk_apply_store_id', 'bulk_store_id']].forEach(([chk, input]) => {
        document.getElementById(chk)?.addEventListener('change', function () {
            const el = document.getElementById(input);
            el.disabled = !this.checked;
            if (this.checked) el.focus();
        });
    });

    async function saveBulkEdit(e) {
        e.preventDefault();
        const ids = getSelectedIds();
        if (ids.length === 0) {
            alert('Pilih minimal 1 produk terlebih dahulu');
            return;
        }

        const payload = { ids };
        const pairs = [
            ['bulk_apply_purchase_price', 'purchase_price', 'bulk_purchase_price'],
            ['bulk_apply_selling_price', 'selling_price', 'bulk_selling_price'],
            ['bulk_apply_category', 'category', 'bulk_category'],
            ['bulk_apply_store_id', 'store_id', 'bulk_store_id'],
        ];
        let any = false;
        pairs.forEach(([chk, field, input]) => {
            if (document.getElementById(chk).checked) {
                payload[`apply_${field}`] = true;
                payload[field] = document.getElementById(input).value || null;
                any = true;
            }
        });

        if (!any) {
            alert('Centang minimal 1 kolom yang ingin diubah');
            return;
        }

        if (!confirm(`Terapkan perubahan ke ${ids.length} produk?`)) return;

        const res = await fetch('{{ route("admin.products.bulkUpdate") }}', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify(payload),
        });

        const data = await res.json().catch(() => ({}));
        if (res.ok) {
            alert(data.message || 'Produk berhasil diperbarui');
            window.location.reload();
        } else {
            alert(data.message || 'Gagal menyimpan perubahan massal');
        }
    }
</script>
@endpush