@extends('admin.layout.content')

@section('content')
    
    <div class="content-manager-container px-3 py-4">

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="d-flex flex-row justify-content-between align-items-center gap-3 mb-4">
            <div>
                <h2 class="content-manager-title h3 mb-1">Produk untuk Dijual</h2>
                <p class="text-muted mb-0">Daftar produk yang sudah diinput untuk dijual.</p>
            </div>
            <button class="btn-add-content d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalCreate">
                <span class="material-symbols-outlined">add</span>
                Tambah Produk
            </button>
        </div>

        <div class="content-manager-card">

            {{-- Filter Bar --}}
            <div class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                <div class="search-box-wrapper">
                    <span class="material-symbols-outlined">search</span>
                    <input type="text" id="search-input" class="form-control search-box-input" placeholder="Cari produk...">
                </div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <select id="category-filter" class="form-select form-modern-input" style="min-width: 170px; max-width: 220px;">
                        <option value="">Semua Kategori</option>
                        @foreach($products->pluck('category')->filter()->unique('category_id') as $cat)
                            <option value="{{ $cat->category_id }}">{{ $cat->category_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table content-data-table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 70px;">No</th>
                            <th>Nama Produk</th>
                            <th>Varian</th>
                            <th>Harga</th>
                            <th>Stok</th>
                            <th>Kapasitas Panen</th>
                            <th>Media</th>
                            <th class="text-center" style="width: 120px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $index => $product)
                            @php
                                $mainMedia = $product->media->where('is_main', true)->first() ?? $product->media->first();
                            @endphp
                            <tr class="product-row" data-category-id="{{ $product->category_id }}" data-product-name="{{ strtolower($product->product_name) }}">
                                <td class="row-index-number">{{ $index + 1 }}</td>
                                <td>
                                    <span class="fw-semibold text-slate-800">{{ $product->product_name }}</span>
                                </td>
                                <td>
                                    @if($product->packages->isNotEmpty())
                                        <span class="badge bg-success text-white px-2 py-1" style="font-size: 0.75rem;">
                                            {{ $product->packages->count() }} varian
                                        </span>
                                    @else
                                        <span class="badge bg-danger text-white px-2 py-1" style="font-size: 0.75rem;">
                                            Belum ada
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($product->packages->isNotEmpty())
                                        @php
                                            $minPrice = $product->packages->min('price');
                                            $maxPrice = $product->packages->max('price');
                                        @endphp
                                        @if($minPrice == $maxPrice)
                                            Rp{{ number_format($minPrice, 0, ',', '.') }}
                                        @else
                                            Rp{{ number_format($minPrice, 0, ',', '.') }} - Rp{{ number_format($maxPrice, 0, ',', '.') }}
                                        @endif
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($product->packages->isNotEmpty())
                                        @php
                                            $totalStock = $product->packages->sum('stock');
                                        @endphp
                                        <span class="fw-semibold">{{ $totalStock }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $remainingKg = $product->remaining_kg ?? 0;
                                        $harvestKg   = $product->harvest_kg ?? 0;
                                        $usedKg      = $product->used_kg ?? 0;
                                        $pct         = $harvestKg > 0 ? round(($usedKg / $harvestKg) * 100) : 0;
                                        $barColor    = $pct >= 90 ? 'bg-danger' : ($pct >= 60 ? 'bg-warning' : 'bg-success');
                                    @endphp
                                    <div style="min-width: 130px;">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span class="small fw-semibold {{ $remainingKg <= 0 ? 'text-danger' : 'text-success' }}">
                                                Sisa: {{ number_format($remainingKg, 2) }} Kg
                                            </span>
                                        </div>
                                        <div class="progress" style="height: 6px; border-radius: 4px; background:#e2e8f0;">
                                            <div class="progress-bar {{ $barColor }}" role="progressbar"
                                                style="width: {{ min($pct, 100) }}%; border-radius: 4px;"
                                                title="{{ $pct }}% terpakai"></div>
                                        </div>
                                        <div class="text-muted" style="font-size: 0.7rem; margin-top: 2px;">
                                            {{ number_format($usedKg, 2) }} / {{ number_format($harvestKg, 2) }} Kg
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($mainMedia)
                                        @if($mainMedia->media_type === 'photo')
                                            <img src="{{ asset($mainMedia->file_url) }}" class="rounded border bg-light" style="width: 40px; height: 40px; object-fit: cover;">
                                        @else
                                            <div class="bg-dark text-warning rounded d-flex align-items-center justify-content-center border" style="width: 40px; height: 40px;">
                                                <span class="material-symbols-outlined" style="font-size: 16px;">videocam</span>
                                            </div>
                                        @endif
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        <button class="btn-table-action btn-action-view" title="Detail" data-bs-toggle="modal" data-bs-target="#modalDetail"
                                            data-product-id="{{ $product->product_id }}"
                                            data-product-name="{{ $product->product_name }}"
                                            data-category="{{ $product->category->category_name ?? '-' }}"
                                            data-packages="{{ json_encode($product->packages) }}"
                                            data-media="{{ json_encode($product->media) }}">
                                            <span class="material-symbols-outlined">visibility</span>
                                        </button>
                                        <button class="btn-table-action btn-action-edit" title="Edit" data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-product-id="{{ $product->product_id }}"
                                            data-product-name="{{ $product->product_name }}"
                                            data-packages="{{ json_encode($product->packages) }}"
                                            data-media="{{ json_encode($product->media) }}"
                                            data-harvest-kg="{{ $product->harvest_kg ?? 0 }}"
                                            data-remaining-kg="{{ $product->remaining_kg ?? 0 }}">
                                            <span class="material-symbols-outlined">edit</span>
                                        </button>
                                        <button class="btn-table-action btn-action-delete" title="Hapus" data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-product-id="{{ $product->product_id }}"
                                            data-product-name="{{ $product->product_name }}">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="8" class="text-center text-muted py-5">
                                    <span class="material-symbols-outlined d-block mb-2" style="font-size: 32px; color: #cbd5e1;">shopping_bag</span>
                                    Belum ada produk yang dijual. <br><br>
                                    <span class="text-secondary small">
                                        <strong>Catatan:</strong> Hanya produk yang masa tanamnya sudah <strong>Panen/Selesai</strong> dan memiliki <strong>hasil panen (Kg)</strong> yang bisa dijual.<br>
                                        Pastikan Anda sudah mencatat hasil panen di menu Masa Tanam.
                                    </span>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL TAMBAH Produk ==================== --}}
    <div class="modal fade modal-modern" id="modalCreate" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down mx-auto px-2" style="max-width: 900px;">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('admin.products.sell.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">shopping_bag</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" style="font-size: 1.1rem;">Tambah Produk</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Input varian, harga, stok, dan media</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        @php
                            $availableProducts = $products->filter(function($p) { return $p->packages->isEmpty(); });
                        @endphp
                        @if($availableProducts->isEmpty())
                            <div class="alert alert-warning small mb-3">
                                <i class="material-symbols-outlined align-middle me-1" style="font-size: 18px;">warning</i>
                                <strong>Perhatian:</strong> Belum ada produk baru yang bisa ditambahkan ke etalase.<br>
                                Semua produk yang siap panen sudah ditambahkan, atau Anda belum mencatatkan hasil panen di menu <strong>Produksi &gt; Masa Tanam</strong>.
                            </div>
                        @endif
                        <div class="row g-3 mb-3">
                            <div class="col-6">
                                <label class="form-label fw-semibold text-secondary small">PILIH PRODUK <span class="text-danger">*</span></label>
                                <select name="product_id" id="modal-product-select" class="form-select form-modern-input w-100" required {{ $availableProducts->isEmpty() ? 'disabled' : '' }}>
                                    <option value="">-- Pilih Produk --</option>
                                    @foreach($availableProducts as $product)
                                        <option value="{{ $product->product_id }}">{{ $product->product_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold text-secondary small">PERIODE PANEN <span class="text-danger">*</span></label>
                                <select name="planting_period_id" id="modal-period-select" class="form-select form-modern-input w-100 no-tomselect" required disabled>
                                    <option value="">-- Pilih Periode Panen --</option>
                                </select>
                            </div>
                        </div>

                        <div class="border-top pt-3">
                            <h6 class="fw-bold text-slate-700 mb-2 small text-uppercase tracking-wider" style="font-size: 0.75rem;">Varian Produk</h6>
                            {{-- Banner info sisa kapasitas panen (muncul setelah periode dipilih) --}}
                            <div id="modal-harvest-info" class="d-none mb-2 px-3 py-2 rounded-3 d-flex align-items-center gap-2"
                                style="background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 0.82rem;">
                                <span class="material-symbols-outlined text-success" style="font-size: 18px;">eco</span>
                                <span>
                                    Kapasitas panen: <strong id="modal-harvest-kg-display">0</strong> Kg &nbsp;|&nbsp;
                                    Terpakai: <strong id="modal-used-kg-display">0</strong> Kg &nbsp;|&nbsp;
                                    <span class="fw-bold text-success">Sisa: <span id="modal-remaining-kg-display">0</span> Kg</span>
                                </span>
                            </div>
                            <div id="modal-packages-container" class="row g-2">
                                <div class="col-12 text-muted small">Pilih produk dan periode panen terlebih dahulu.</div>
                            </div>
                            <button type="button" class="btn btn-outline-success btn-sm mt-2 fw-semibold" id="modal-add-package-btn" disabled>
                                <span class="material-symbols-outlined align-middle" style="font-size: 16px;">add</span> Tambah Varian
                            </button>
                        </div>

                        <div class="border-top pt-3 mt-3">
                            <h6 class="fw-bold text-slate-700 mb-2 small text-uppercase tracking-wider" style="font-size: 0.75rem;">Media Produk</h6>
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-secondary" style="font-size:11px;">MEDIA UTAMA <span class="text-danger">*</span></label>
                                <div class="tf-sell-media-box" id="main-tf-sell-media-box">
                                    <input type="file" name="images[]" accept="image/*,video/*" onchange="previewMedia(this)" required>
                                    <span class="material-symbols-outlined icon">add_photo_alternate</span>
                                    <div class="tf-sell-preview-container"></div>
                                </div>
                                <input type="hidden" name="main_image_index" value="0">
                            </div>

                            <div>
                                <label class="form-label fw-semibold text-secondary" style="font-size:11px;">MEDIA TAMBAHAN (OPSIONAL)</label>
                                <div class="d-flex flex-wrap gap-2" id="additional-media-container">
                                    <div class="tf-sell-media-box additional-tf-sell-media-box">
                                        <input type="file" name="images[]" accept="image/*,video/*" onchange="handleAdditionalMedia(this)">
                                        <span class="material-symbols-outlined icon">add</span>
                                        <div class="tf-sell-preview-container"></div>
                                        <button type="button" class="btn-close remove-media d-none" aria-label="Close" onclick="removeMediaBox(this)"></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL DETAIL ==================== --}}
    <div class="modal fade modal-modern" id="modalDetail" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-2" style="max-width: 700px;">
            <div class="modal-content border-0 shadow">
                <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                            <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">info</span>
                        </div>
                        <div>
                            <h5 class="modal-title fw-bold text-slate-800 mb-0" style="font-size: 1.1rem;">Detail Produk</h5>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <strong>Nama Produk:</strong> <span id="detail-product-name"></span>
                    </div>
                    <div class="mb-3">
                        <strong>Kategori:</strong> <span id="detail-category"></span>
                    </div>
                    <div class="border-top pt-3">
                        <h6 class="fw-bold mb-2">Varian Kemasan</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>Satuan</th>
                                        <th>Bobot (Kg)</th>
                                        <th>Harga (Rp)</th>
                                        <th>Stok</th>
                                    </tr>
                                </thead>
                                <tbody id="detail-packages-body"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="border-top pt-3 mt-3">
                        <h6 class="fw-bold mb-2">Media</h6>
                        <div class="row g-2" id="detail-media-grid"></div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end">
                    <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL HAPUS ==================== --}}
    <div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-3" style="max-width: 400px;">
            <div class="modal-content border-0 shadow">
                <form id="form-delete" method="POST">
                    @csrf @method('DELETE')
                    <div class="modal-body text-center p-4 pt-5">
                        <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3 flex-shrink-0"
                            style="width: 56px; height: 56px; background-color: #fef2f2;">
                            <span class="material-symbols-outlined" style="font-size: 28px; color: #ef4444;">delete_forever</span>
                        </div>
                        <h5 class="fw-bold text-slate-800 mb-2" style="font-size: 1.15rem;">Hapus Produk?</h5>
                        <p class="text-secondary mb-0 small px-1">Tindakan ini akan menghapus semua varian dan media:</p>
                        <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light"
                            id="delete-product-name"
                            style="font-size: 1.05rem; background-color: #fff5f5 !important; border: 1px dashed #fca5a5;">
                        </div>
                    </div>
                    <div class="modal-footer bg-white border-0 d-flex gap-2 p-4 pt-0 justify-content-center">
                        <button type="button" class="btn btn-modern-secondary px-4 m-0 w-50" data-bs-dismiss="modal" style="padding: 0.6rem;">Batal</button>
                        <button type="submit" class="btn btn-danger px-4 m-0 w-50"
                            style="background-color: #ef4444; border: none; border-radius: 10px; font-weight: 500; padding: 0.6rem;">Ya, Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL EDIT Produk ==================== --}}
    <div class="modal fade modal-modern" id="modalEdit" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down mx-auto px-2" style="max-width: 900px;">
            <div class="modal-content border-0 shadow">
                <form id="form-edit" method="POST" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">edit</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" style="font-size: 1.1rem;">Edit Produk</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Ubah varian, harga, stok, dan media</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">PRODUK</label>
                            <input type="text" id="edit-product-name-display" class="form-control form-modern-input w-100" readonly disabled>
                        </div>

                        <div class="border-top pt-3 mt-3">
                            <h6 class="fw-bold text-slate-700 mb-2 small text-uppercase tracking-wider" style="font-size: 0.75rem;">Varian Produk</h6>
                            {{-- Banner info sisa kapasitas panen --}}
                            <div id="edit-harvest-info" class="mb-2 px-3 py-2 rounded-3 d-flex align-items-center gap-2"
                                style="background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 0.82rem;">
                                <span class="material-symbols-outlined text-success" style="font-size: 18px;">eco</span>
                                <span>
                                    Kapasitas panen: <strong id="edit-harvest-kg-display">0</strong> Kg &nbsp;|&nbsp;
                                    Terpakai: <strong id="edit-used-kg-display">0</strong> Kg &nbsp;|&nbsp;
                                    <span class="fw-bold text-success">Sisa: <span id="edit-remaining-kg-display">0</span> Kg</span>
                                </span>
                            </div>
                            <div id="edit-packages-container" class="row g-2"></div>
                            <button type="button" class="btn btn-outline-success btn-sm mt-2 fw-semibold" id="edit-add-package-btn">
                                <span class="material-symbols-outlined align-middle" style="font-size: 16px;">add</span> Tambah Varian
                            </button>
                        </div>

                        <div class="border-top pt-3 mt-3">
                            <h6 class="fw-bold text-slate-700 mb-2 small text-uppercase tracking-wider" style="font-size: 0.75rem;">Media Produk Saat Ini</h6>
                            <div class="d-flex flex-wrap gap-2 mb-3" id="edit-existing-media-container"></div>
                            
                            <h6 class="fw-bold text-slate-700 mb-2 small text-uppercase tracking-wider mt-3" style="font-size: 0.75rem;">Tambah Media Baru (Opsional)</h6>
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-secondary" style="font-size:11px;">MEDIA BARU (AKAN DITAMBAHKAN)</label>
                                <div class="d-flex flex-wrap gap-2" id="edit-additional-media-container">
                                    <div class="tf-sell-media-box edit-additional-tf-sell-media-box">
                                        <input type="file" name="images[]" accept="image/*,video/*" onchange="handleEditAdditionalMedia(this)">
                                        <span class="material-symbols-outlined icon">add</span>
                                        <div class="tf-sell-preview-container"></div>
                                        <button type="button" class="btn-close remove-media d-none" aria-label="Close" onclick="removeEditMediaBox(this)"></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modalProductSelect = document.getElementById('modal-product-select');
            const modalPeriodSelect = document.getElementById('modal-period-select');
            const modalPackagesContainer = document.getElementById('modal-packages-container');
            const modalAddPackageBtn = document.getElementById('modal-add-package-btn');
            const units = @json($units);

            // Data sisa stok per produk dari server (dihitung dari harvest - used)
            const productStockData = @json($productStockData);

            let packageCount = 0;

            // ===== Helpers: update banner harvest info =====
            function updateCreateHarvestBanner(harvestKg, usedKg, remainingKg) {
                const banner = document.getElementById('modal-harvest-info');
                if (!banner) return;
                document.getElementById('modal-harvest-kg-display').textContent  = parseFloat(harvestKg).toFixed(2);
                document.getElementById('modal-used-kg-display').textContent     = parseFloat(usedKg).toFixed(2);
                const remainEl = document.getElementById('modal-remaining-kg-display');
                remainEl.textContent = parseFloat(remainingKg).toFixed(2);
                remainEl.closest('span.fw-bold').className = parseFloat(remainingKg) <= 0
                    ? 'fw-bold text-danger' : 'fw-bold text-success';
                banner.classList.remove('d-none');
            }

            // Recalculate sisa kg dari baris varian yang ada di container (modal Create)
            function getCreateUsedKgFromRows() {
                let used = 0;
                document.querySelectorAll('#modal-packages-container .package-row').forEach(row => {
                    const weightInput = row.querySelector('input[name*="weight_in_kg"]');
                    const stockInput  = row.querySelector('input[name*="stock"]');
                    const w = parseFloat(weightInput?.value) || 0;
                    const s = parseFloat(stockInput?.value) || 0;
                    used += w * s;
                });
                return used;
            }

            modalProductSelect.addEventListener('change', function() {
                const productId = this.value;
                modalPeriodSelect.innerHTML = '<option value="">-- Pilih Periode Panen --</option>';
                modalPackagesContainer.innerHTML = '<div class="col-12 text-muted small">Pilih produk dan periode panen terlebih dahulu.</div>';
                modalAddPackageBtn.disabled = true;
                packageCount = 0;
                document.getElementById('modal-harvest-info')?.classList.add('d-none');

                if (!productId) {
                    modalPeriodSelect.disabled = true;
                    return;
                }

                modalPeriodSelect.disabled = false;
                modalPeriodSelect.innerHTML = '<option value="">Loading...</option>';

                fetch(`/admin/products/{{ session('admin_route_code') }}/sell/planting-periods/${productId}`)
                    .then(res => res.json())
                    .then(data => {
                        modalPeriodSelect.innerHTML = '<option value="">-- Pilih Periode Panen --</option>';
                        if (data.length === 0) {
                            modalPeriodSelect.innerHTML = '<option value="">Tidak ada periode panen tersedia</option>';
                            modalPeriodSelect.disabled = true;
                            return;
                        }
                        data.forEach(period => {
                            const opt = document.createElement('option');
                            opt.value = period.planting_period_id;
                            opt.textContent = `${period.period_code} | Sisa: ${period.remaining_kg} Kg`;
                            opt.dataset.harvestKg   = period.harvest_yield_kg;
                            opt.dataset.remainingKg = period.remaining_kg;
                            modalPeriodSelect.appendChild(opt);
                        });
                    })
                    .catch(() => {
                        modalPeriodSelect.innerHTML = '<option value="">Gagal memuat data</option>';
                        modalPeriodSelect.disabled = true;
                    });
            });

            modalPeriodSelect.addEventListener('change', function() {
                modalPackagesContainer.innerHTML = '';
                packageCount = 0;
                modalAddPackageBtn.disabled = false;

                if (!this.value) {
                    modalAddPackageBtn.disabled = true;
                    document.getElementById('modal-harvest-info')?.classList.add('d-none');
                    return;
                }

                const selectedOpt = this.options[this.selectedIndex];
                const harvestKg   = parseFloat(selectedOpt.dataset.harvestKg || 0);
                const remainingKg = parseFloat(selectedOpt.dataset.remainingKg || 0);
                updateCreateHarvestBanner(harvestKg, 0, remainingKg);

                addModalPackageRow(harvestKg);
            });

            modalAddPackageBtn.addEventListener('click', function() {
                const selectedOpt = modalPeriodSelect.options[modalPeriodSelect.selectedIndex];
                const harvestKg   = parseFloat(selectedOpt?.dataset.harvestKg || 0);
                addModalPackageRow(harvestKg);
            });

            function addModalPackageRow(harvestKg = 0) {
                packageCount++;
                const row = document.createElement('div');
                row.className = 'col-12 package-row';
                row.innerHTML = `
                    <div class="row g-2 align-items-end p-2 border rounded bg-light mb-2">
                        <div class="col-3">
                            <label class="form-label fw-semibold text-secondary" style="font-size:11px;">VARIAN (SATUAN)</label>
                            <select name="packages[${packageCount}][unit_id]" class="form-select form-modern-input py-1" required>
                                @foreach($units as $u)
                                    <option value="{{ $u->unit_id }}">{{ $u->unit_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2">
                            <label class="form-label fw-semibold text-secondary" style="font-size:11px;">BOBOT (KG)</label>
                            <input type="number" step="0.01" name="packages[${packageCount}][weight_in_kg]" class="form-control form-modern-input py-1 create-weight-input" required placeholder="0.5">
                        </div>
                        <div class="col-3">
                            <label class="form-label fw-semibold text-secondary" style="font-size:11px;">HARGA (RP)</label>
                            <input type="number" name="packages[${packageCount}][price]" class="form-control form-modern-input py-1" required placeholder="15000">
                        </div>
                        <div class="col-2">
                            <label class="form-label fw-semibold text-secondary d-flex align-items-center gap-1" style="font-size:11px;">
                                STOK
                                <span class="create-max-hint text-success fw-normal" style="font-size:10px;"></span>
                            </label>
                            <input type="number" name="packages[${packageCount}][stock]" class="form-control form-modern-input py-1 create-stock-input" required placeholder="10">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-outline-danger btn-sm w-100 remove-package-btn h-100">Hapus</button>
                        </div>
                    </div>
                `;
                modalPackagesContainer.appendChild(row);
                if (window.initTomSelect) window.initTomSelect();

                const weightInput = row.querySelector('.create-weight-input');
                const stockInput  = row.querySelector('.create-stock-input');
                const maxHint     = row.querySelector('.create-max-hint');

                function recalcCreateMaxHint() {
                    const w = parseFloat(weightInput.value) || 0;
                    if (w <= 0 || harvestKg <= 0) { maxHint.textContent = ''; return; }
                    const otherUsed = getCreateUsedKgFromRows() - ((parseFloat(stockInput.value) || 0) * w);
                    const selectedOpt = modalPeriodSelect.options[modalPeriodSelect.selectedIndex];
                    const periodRemaining = parseFloat(selectedOpt?.dataset.remainingKg || 0);
                    const avail = Math.max(0, periodRemaining - otherUsed);
                    const maxStock = Math.floor(avail / w);
                    maxHint.textContent = `(maks. ${maxStock})`;
                    stockInput.max = maxStock;
                }

                weightInput.addEventListener('input', recalcCreateMaxHint);
                stockInput.addEventListener('input', () => {
                    recalcCreateMaxHint();
                    // Update banner
                    const selectedOpt = modalPeriodSelect.options[modalPeriodSelect.selectedIndex];
                    const hKg   = parseFloat(selectedOpt?.dataset.harvestKg || 0);
                    const rKgBase = parseFloat(selectedOpt?.dataset.remainingKg || 0);
                    const newUsed = getCreateUsedKgFromRows();
                    updateCreateHarvestBanner(hKg, newUsed, rKgBase - newUsed);
                });

                row.querySelector('.remove-package-btn').addEventListener('click', function() {
                    row.remove();
                    const selectedOpt = modalPeriodSelect.options[modalPeriodSelect.selectedIndex];
                    const hKg    = parseFloat(selectedOpt?.dataset.harvestKg || 0);
                    const rKgBase = parseFloat(selectedOpt?.dataset.remainingKg || 0);
                    const newUsed = getCreateUsedKgFromRows();
                    updateCreateHarvestBanner(hKg, newUsed, rKgBase - newUsed);
                });
            }

            // Media Box Logic
            window.previewMedia = function(input) {
                const box = input.closest('.tf-sell-media-box');
                const previewContainer = box.querySelector('.tf-sell-preview-container');
                previewContainer.innerHTML = '';
                
                if (input.files && input.files[0]) {
                    box.classList.add('has-file');
                    const file = input.files[0];
                    const url = URL.createObjectURL(file);
                    
                    if (file.type.startsWith('video/')) {
                        const video = document.createElement('video');
                        video.src = url;
                        video.muted = true;
                        video.autoplay = true;
                        video.loop = true;
                        video.playsInline = true;
                        previewContainer.appendChild(video);
                    } else {
                        const img = document.createElement('img');
                        img.src = url;
                        previewContainer.appendChild(img);
                    }
                } else {
                    box.classList.remove('has-file');
                }
            };

            window.handleAdditionalMedia = function(input) {
                previewMedia(input);
                
                const container = document.getElementById('additional-media-container');
                const box = input.closest('.tf-sell-media-box');
                const removeBtn = box.querySelector('.remove-media');
                
                if (input.files && input.files[0]) {
                    if(removeBtn) removeBtn.classList.remove('d-none');
                    
                    const allBoxes = container.querySelectorAll('.additional-tf-sell-media-box');
                    if (box === allBoxes[allBoxes.length - 1]) {
                        addEmptyAdditionalMediaBox();
                    }
                } else {
                    if(removeBtn) removeBtn.classList.add('d-none');
                }
            };

            window.addEmptyAdditionalMediaBox = function() {
                const container = document.getElementById('additional-media-container');
                const box = document.createElement('div');
                box.className = 'tf-sell-media-box additional-tf-sell-media-box';
                box.innerHTML = `
                    <input type="file" name="images[]" accept="image/*,video/*" onchange="handleAdditionalMedia(this)">
                    <span class="material-symbols-outlined icon">add</span>
                    <div class="tf-sell-preview-container"></div>
                    <button type="button" class="btn-close remove-media d-none" aria-label="Close" onclick="removeMediaBox(this)"></button>
                `;
                container.appendChild(box);
            };

            window.removeMediaBox = function(btn) {
                const box = btn.closest('.tf-sell-media-box');
                const container = document.getElementById('additional-media-container');
                
                box.remove();
                
                // Ensure at least one empty box exists
                const allBoxes = container.querySelectorAll('.additional-tf-sell-media-box');
                if (allBoxes.length === 0) {
                    addEmptyAdditionalMediaBox();
                } else {
                    const lastBox = allBoxes[allBoxes.length - 1];
                    const lastInput = lastBox.querySelector('input[type="file"]');
                    if (lastInput.files && lastInput.files.length > 0) {
                        addEmptyAdditionalMediaBox();
                    }
                }
            };

            // Modal Detail
            const modalDetail = document.getElementById('modalDetail');
            if (modalDetail) {
                modalDetail.addEventListener('show.bs.modal', function(event) {
                    const button = event.relatedTarget;
                    const productName = button.getAttribute('data-product-name');
                    const category = button.getAttribute('data-category');
                    const packages = JSON.parse(button.getAttribute('data-packages') || '[]');
                    const media = JSON.parse(button.getAttribute('data-media') || '[]');

                    document.getElementById('detail-product-name').textContent = productName;
                    document.getElementById('detail-category').textContent = category;

                    const packagesBody = document.getElementById('detail-packages-body');
                    packagesBody.innerHTML = '';
                    if (packages.length === 0) {
                        packagesBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Belum ada varian</td></tr>';
                    } else {
                        packages.forEach(pkg => {
                            const unitName = units.find(u => u.unit_id == pkg.unit_id)?.unit_name || '-';
                            const priceFormatted = new Intl.NumberFormat('id-ID').format(pkg.price);
                            packagesBody.innerHTML += `
                                <tr>
                                    <td>${unitName}</td>
                                    <td>${pkg.weight_in_kg}</td>
                                    <td>Rp${priceFormatted}</td>
                                    <td>${pkg.stock}</td>
                                </tr>
                            `;
                        });
                    }

                    const mediaGrid = document.getElementById('detail-media-grid');
                    mediaGrid.innerHTML = '';
                    if (media.length === 0) {
                        mediaGrid.innerHTML = '<div class="col-12 text-muted small">Belum ada media</div>';
                    } else {
                        media.forEach(m => {
                            const assetBaseUrl = "{{ asset('') }}";
                            const cleanFileUrl = m.file_url.replace(/^\//, '');
                            const finalUrl = m.file_url.startsWith('http') ? m.file_url : assetBaseUrl + cleanFileUrl;

                            if (m.media_type === 'photo') {
                                mediaGrid.innerHTML += `<div class="col-3"><img src="${finalUrl}" class="img-fluid rounded border" style="height: 100px; object-fit: cover;"></div>`;
                            } else {
                                mediaGrid.innerHTML += `<div class="col-3"><div class="bg-dark text-white rounded d-flex align-items-center justify-content-center" style="height: 100px;"><span class="material-symbols-outlined">videocam</span></div></div>`;
                            }
                        });
                    }
                });
            }

            // Modal Delete
            const modalDelete = document.getElementById('modalDelete');
            if (modalDelete) {
                modalDelete.addEventListener('show.bs.modal', function(event) {
                    const button = event.relatedTarget;
                    const productName = button.getAttribute('data-product-name');
                    const productId = button.getAttribute('data-product-id');
                    document.getElementById('delete-product-name').textContent = productName;
                    document.getElementById('form-delete').action = `/admin/products/{{ session('admin_route_code') }}/sell/${productId}`;
                });
            }
            // Modal Edit Logic
            const modalEdit = document.getElementById('modalEdit');
            const editPackagesContainer = document.getElementById('edit-packages-container');
            const editExistingMediaContainer = document.getElementById('edit-existing-media-container');
            const formEdit = document.getElementById('form-edit');
            let editNewPackageCount = 0;

            if (modalEdit) {
                modalEdit.addEventListener('show.bs.modal', function(event) {
                    const button = event.relatedTarget;
                    const productId   = button.getAttribute('data-product-id');
                    const productName = button.getAttribute('data-product-name');
                    const packages    = JSON.parse(button.getAttribute('data-packages') || '[]');
                    const media       = JSON.parse(button.getAttribute('data-media') || '[]');
                    const harvestKg   = parseFloat(button.getAttribute('data-harvest-kg') || 0);
                    const remainingKg = parseFloat(button.getAttribute('data-remaining-kg') || 0);

                    formEdit.action = `/admin/products/{{ session('admin_route_code') }}/sell/${productId}`;
                    document.getElementById('edit-product-name-display').value = productName;

                    // Update banner sisa stok
                    const usedKg = harvestKg - remainingKg;
                    document.getElementById('edit-harvest-kg-display').textContent  = harvestKg.toFixed(2);
                    document.getElementById('edit-used-kg-display').textContent     = usedKg.toFixed(2);
                    const remEl = document.getElementById('edit-remaining-kg-display');
                    remEl.textContent = remainingKg.toFixed(2);
                    remEl.closest('span.fw-bold').className = remainingKg <= 0 ? 'fw-bold text-danger' : 'fw-bold text-success';

                    // Populate existing packages
                    editPackagesContainer.innerHTML = '';
                    
                    // Remove old hidden deleted inputs
                    formEdit.querySelectorAll('input[name="deleted_packages[]"]').forEach(el => el.remove());
                    formEdit.querySelectorAll('input[name="deleted_media[]"]').forEach(el => el.remove());
                    
                    // Reset new packages counter
                    editNewPackageCount = 0;
                    
                    // Reset media addition container
                    const addMediaContainer = document.getElementById('edit-additional-media-container');
                    addMediaContainer.innerHTML = '';
                    addEmptyEditAdditionalMediaBox();

                    // Helper hitung used kg dari semua baris edit yang tampil
                    function getEditUsedKgFromRows(excludeRow) {
                        let used = 0;
                        editPackagesContainer.querySelectorAll('.package-row').forEach(r => {
                            if (r === excludeRow) return;
                            const w = parseFloat(r.querySelector('.edit-weight-input')?.value) || 0;
                            const s = parseFloat(r.querySelector('.edit-stock-input')?.value) || 0;
                            used += w * s;
                        });
                        return used;
                    }

                    function refreshEditBanner() {
                        const newUsed = getEditUsedKgFromRows(null);
                        const newRemaining = Math.max(0, harvestKg - newUsed);
                        document.getElementById('edit-used-kg-display').textContent = newUsed.toFixed(2);
                        const remEl2 = document.getElementById('edit-remaining-kg-display');
                        remEl2.textContent = newRemaining.toFixed(2);
                        remEl2.closest('span.fw-bold').className = newRemaining <= 0 ? 'fw-bold text-danger' : 'fw-bold text-success';
                    }

                    packages.forEach(pkg => {
                        const row = document.createElement('div');
                        row.className = 'col-12 package-row edit-existing-package';
                        
                        let unitOptions = units.map(u => `<option value="${u.unit_id}" ${u.unit_id == pkg.unit_id ? 'selected' : ''}>${u.unit_name}</option>`).join('');
                        
                        row.innerHTML = `
                            <div class="row g-2 align-items-end p-2 border rounded bg-light mb-2">
                                <div class="col-3">
                                    <label class="form-label fw-semibold text-secondary" style="font-size:11px;">VARIAN (SATUAN)</label>
                                    <select name="existing_packages[${pkg.package_id}][unit_id]" class="form-select form-modern-input py-1" required>
                                        ${unitOptions}
                                    </select>
                                </div>
                                <div class="col-2">
                                    <label class="form-label fw-semibold text-secondary" style="font-size:11px;">BOBOT (KG)</label>
                                    <input type="number" step="0.01" name="existing_packages[${pkg.package_id}][weight_in_kg]" class="form-control form-modern-input py-1 edit-weight-input" value="${pkg.weight_in_kg}" required>
                                </div>
                                <div class="col-3">
                                    <label class="form-label fw-semibold text-secondary" style="font-size:11px;">HARGA (RP)</label>
                                    <input type="number" name="existing_packages[${pkg.package_id}][price]" class="form-control form-modern-input py-1" value="${pkg.price}" required>
                                </div>
                                <div class="col-2">
                                    <label class="form-label fw-semibold text-secondary d-flex align-items-center gap-1" style="font-size:11px;">
                                        STOK
                                        <span class="edit-max-hint text-success fw-normal" style="font-size:10px;"></span>
                                    </label>
                                    <input type="number" name="existing_packages[${pkg.package_id}][stock]" class="form-control form-modern-input py-1 edit-stock-input" value="${pkg.stock}" required>
                                </div>
                                <div class="col-2">
                                    <button type="button" class="btn btn-outline-danger btn-sm w-100 h-100" onclick="removeExistingPackage(this, ${pkg.package_id})">Hapus</button>
                                </div>
                            </div>
                        `;
                        editPackagesContainer.appendChild(row);
                        if (window.initTomSelect) window.initTomSelect();

                        const weightInput = row.querySelector('.edit-weight-input');
                        const stockInput  = row.querySelector('.edit-stock-input');
                        const maxHint     = row.querySelector('.edit-max-hint');

                        function recalcEditMaxHint() {
                            const w = parseFloat(weightInput.value) || 0;
                            if (w <= 0 || harvestKg <= 0) { maxHint.textContent = ''; return; }
                            const otherUsed = getEditUsedKgFromRows(row);
                            const avail     = Math.max(0, harvestKg - otherUsed);
                            const maxStock  = Math.floor(avail / w);
                            maxHint.textContent = `(maks. ${maxStock})`;
                            stockInput.max = maxStock;
                        }

                        weightInput.addEventListener('input', () => { recalcEditMaxHint(); refreshEditBanner(); });
                        stockInput.addEventListener('input', () => { recalcEditMaxHint(); refreshEditBanner(); });
                        recalcEditMaxHint();
                    });

                    // Populate existing media
                    editExistingMediaContainer.innerHTML = '';
                    if (media.length === 0) {
                        editExistingMediaContainer.innerHTML = '<div class="col-12 text-muted small w-100">Belum ada media.</div>';
                    } else {
                        media.forEach(m => {
                            const assetBaseUrl = "{{ asset('') }}";
                            const cleanFileUrl = m.file_url.replace(/^\//, '');
                            const finalUrl = m.file_url.startsWith('http') ? m.file_url : assetBaseUrl + cleanFileUrl;
                            
                            const mediaItem = document.createElement('div');
                            mediaItem.className = 'position-relative border rounded p-1 edit-media-item';
                            mediaItem.style.width = '100px';
                            mediaItem.style.backgroundColor = '#f8fafc';
                            
                            let mediaPreview = '';
                            if (m.media_type === 'photo') {
                                mediaPreview = `<img src="${finalUrl}" class="rounded" style="width:100%; height:80px; object-fit:cover;">`;
                            } else {
                                mediaPreview = `<video src="${finalUrl}" class="rounded" style="width:100%; height:80px; object-fit:cover;" muted autoplay loop playsinline></video>`;
                            }
                            
                            mediaItem.innerHTML = `
                                ${mediaPreview}
                                <button type="button" class="btn-close remove-media" aria-label="Close" style="position:absolute; top: -6px; right: -6px; font-size:10px; background-color:white; box-shadow:0 2px 4px rgba(0,0,0,0.1); padding:4px; border:1px solid #e2e8f0; z-index:5;" onclick="removeExistingMedia(this, ${m.product_media_id})"></button>
                                <div class="mt-1 text-center">
                                    <div class="form-check form-check-inline m-0">
                                        <input class="form-check-input" type="radio" name="main_media_id" value="${m.product_media_id}" id="mainMedia${m.product_media_id}" ${m.is_main ? 'checked' : ''} style="transform: scale(0.8);">
                                        <label class="form-check-label text-muted" for="mainMedia${m.product_media_id}" style="font-size: 0.65rem;">Utama</label>
                                    </div>
                                </div>
                            `;
                            editExistingMediaContainer.appendChild(mediaItem);
                        });
                    }
                });
            }

            document.getElementById('edit-add-package-btn')?.addEventListener('click', function() {
                editNewPackageCount++;
                const row = document.createElement('div');
                row.className = 'col-12 package-row edit-new-package';
                
                let unitOptions = units.map(u => `<option value="${u.unit_id}">${u.unit_name}</option>`).join('');

                // Ambil harvestKg dari banner yang sedang ditampilkan
                const hKg = parseFloat(document.getElementById('edit-harvest-kg-display')?.textContent || 0);
                
                row.innerHTML = `
                    <div class="row g-2 align-items-end p-2 border rounded bg-light mb-2 border-success" style="border-left: 4px solid #10b981 !important;">
                        <div class="col-3">
                            <label class="form-label fw-semibold text-secondary" style="font-size:11px;">VARIAN BARU (SATUAN)</label>
                            <select name="new_packages[${editNewPackageCount}][unit_id]" class="form-select form-modern-input py-1" required>
                                ${unitOptions}
                            </select>
                        </div>
                        <div class="col-2">
                            <label class="form-label fw-semibold text-secondary" style="font-size:11px;">BOBOT (KG)</label>
                            <input type="number" step="0.01" name="new_packages[${editNewPackageCount}][weight_in_kg]" class="form-control form-modern-input py-1 edit-weight-input" required placeholder="0.5">
                        </div>
                        <div class="col-3">
                            <label class="form-label fw-semibold text-secondary" style="font-size:11px;">HARGA (RP)</label>
                            <input type="number" name="new_packages[${editNewPackageCount}][price]" class="form-control form-modern-input py-1" required placeholder="15000">
                        </div>
                        <div class="col-2">
                            <label class="form-label fw-semibold text-secondary d-flex align-items-center gap-1" style="font-size:11px;">
                                STOK
                                <span class="edit-max-hint text-success fw-normal" style="font-size:10px;"></span>
                            </label>
                            <input type="number" name="new_packages[${editNewPackageCount}][stock]" class="form-control form-modern-input py-1 edit-stock-input" required placeholder="10">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-outline-danger btn-sm w-100 h-100" onclick="this.closest('.package-row').remove(); refreshEditBannerGlobal();">Batal</button>
                        </div>
                    </div>
                `;
                document.getElementById('edit-packages-container').appendChild(row);
                if (window.initTomSelect) window.initTomSelect();

                const weightInput = row.querySelector('.edit-weight-input');
                const stockInput  = row.querySelector('.edit-stock-input');
                const maxHint     = row.querySelector('.edit-max-hint');
                const editPkgContainer = document.getElementById('edit-packages-container');

                function getEditAllUsedKg(excludeRow) {
                    let used = 0;
                    editPkgContainer.querySelectorAll('.package-row').forEach(r => {
                        if (r === excludeRow) return;
                        const w = parseFloat(r.querySelector('.edit-weight-input')?.value) || 0;
                        const s = parseFloat(r.querySelector('.edit-stock-input')?.value) || 0;
                        used += w * s;
                    });
                    return used;
                }

                function recalcNewPkgMaxHint() {
                    const w = parseFloat(weightInput.value) || 0;
                    if (w <= 0 || hKg <= 0) { maxHint.textContent = ''; return; }
                    const otherUsed = getEditAllUsedKg(row);
                    const avail     = Math.max(0, hKg - otherUsed);
                    const maxStock  = Math.floor(avail / w);
                    maxHint.textContent = `(maks. ${maxStock})`;
                    stockInput.max = maxStock;
                }

                weightInput.addEventListener('input', () => { recalcNewPkgMaxHint(); refreshEditBannerGlobal(); });
                stockInput.addEventListener('input', () => { recalcNewPkgMaxHint(); refreshEditBannerGlobal(); });
            });

            // Fungsi global untuk refresh banner dari luar closure
            window.refreshEditBannerGlobal = function() {
                const hKg = parseFloat(document.getElementById('edit-harvest-kg-display')?.textContent || 0);
                let used = 0;
                document.querySelectorAll('#edit-packages-container .package-row').forEach(r => {
                    const w = parseFloat(r.querySelector('.edit-weight-input')?.value) || 0;
                    const s = parseFloat(r.querySelector('.edit-stock-input')?.value) || 0;
                    used += w * s;
                });
                const remaining = Math.max(0, hKg - used);
                const usedEl = document.getElementById('edit-used-kg-display');
                const remEl  = document.getElementById('edit-remaining-kg-display');
                if (usedEl) usedEl.textContent = used.toFixed(2);
                if (remEl) {
                    remEl.textContent = remaining.toFixed(2);
                    remEl.closest('span.fw-bold').className = remaining <= 0 ? 'fw-bold text-danger' : 'fw-bold text-success';
                }
            };

            window.removeExistingPackage = function(btn, pkgId) {
                if(confirm('Yakin ingin menghapus varian ini? Jika varian ini memiliki transaksi, proses simpan akan gagal.')) {
                    btn.closest('.package-row').remove();
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'deleted_packages[]';
                    hiddenInput.value = pkgId;
                    document.getElementById('form-edit').appendChild(hiddenInput);
                    refreshEditBannerGlobal();
                }
            };

            window.removeExistingMedia = function(btn, mediaId) {
                if(confirm('Hapus media ini?')) {
                    btn.closest('.edit-media-item').remove();
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'deleted_media[]';
                    hiddenInput.value = mediaId;
                    document.getElementById('form-edit').appendChild(hiddenInput);
                }
            };

            window.handleEditAdditionalMedia = function(input) {
                previewMedia(input);
                const container = document.getElementById('edit-additional-media-container');
                const box = input.closest('.tf-sell-media-box');
                const removeBtn = box.querySelector('.remove-media');
                
                if (input.files && input.files[0]) {
                    if(removeBtn) removeBtn.classList.remove('d-none');
                    const allBoxes = container.querySelectorAll('.edit-additional-tf-sell-media-box');
                    if (box === allBoxes[allBoxes.length - 1]) {
                        addEmptyEditAdditionalMediaBox();
                    }
                } else {
                    if(removeBtn) removeBtn.classList.add('d-none');
                }
            };

            window.addEmptyEditAdditionalMediaBox = function() {
                const container = document.getElementById('edit-additional-media-container');
                const box = document.createElement('div');
                box.className = 'tf-sell-media-box edit-additional-tf-sell-media-box';
                box.innerHTML = `
                    <input type="file" name="images[]" accept="image/*,video/*" onchange="handleEditAdditionalMedia(this)">
                    <span class="material-symbols-outlined icon">add</span>
                    <div class="tf-sell-preview-container"></div>
                    <button type="button" class="btn-close remove-media d-none" aria-label="Close" onclick="removeEditMediaBox(this)"></button>
                `;
                container.appendChild(box);
            };

            window.removeEditMediaBox = function(btn) {
                const box = btn.closest('.tf-sell-media-box');
                const container = document.getElementById('edit-additional-media-container');
                box.remove();
                
                const allBoxes = container.querySelectorAll('.edit-additional-tf-sell-media-box');
                if (allBoxes.length === 0) {
                    addEmptyEditAdditionalMediaBox();
                } else {
                    const lastBox = allBoxes[allBoxes.length - 1];
                    const lastInput = lastBox.querySelector('input[type="file"]');
                    if (lastInput.files && lastInput.files.length > 0) {
                        addEmptyEditAdditionalMediaBox();
                    }
                }
            };
        });
    </script>

    <script>
        // ================= FILTER KATEGORI & PENCARIAN (CLIENT-SIDE) =================
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput    = document.getElementById('search-input');
            const categoryFilter = document.getElementById('category-filter');

            function applyFilters() {
                const query          = (searchInput?.value || '').toLowerCase().trim();
                const selectedCat    = categoryFilter?.value || '';
                const rows           = document.querySelectorAll('.product-row');
                let   visibleIndex   = 1;

                rows.forEach(row => {
                    const name      = row.getAttribute('data-product-name') || '';
                    const catId     = row.getAttribute('data-category-id') || '';
                    const matchName = name.includes(query);
                    const matchCat  = selectedCat === '' || catId === selectedCat;

                    if (matchName && matchCat) {
                        row.style.display = '';
                        const cell = row.querySelector('.row-index-number');
                        if (cell) cell.textContent = visibleIndex++;
                    } else {
                        row.style.display = 'none';
                    }
                });

                // Tampilkan empty-row hanya jika semua baris tersembunyi
                const emptyRow = document.querySelector('.empty-row');
                if (emptyRow) {
                    emptyRow.style.display = visibleIndex === 1 ? '' : 'none';
                }
            }

            searchInput?.addEventListener('input', applyFilters);
            categoryFilter?.addEventListener('change', applyFilters);

            applyFilters();
        });
    </script>
@endsection