{% extends "base.html" %}

{% block title %}Data Produk - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Data Produk & Layanan{% endblock %}

{% block content %}
<div class="space-y-4">
    
    <!-- WIDGET TOTAL ASET -->
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md p-4 border-l-4 border-indigo-600 flex justify-between items-center">
        <div>
            <h4 class="font-bold text-gray-800 text-sm sm:text-base">Total Nilai Aset (Stok Fisik)</h4>
            <p class="text-xs text-gray-500">Akumulasi (Stok × Harga Pokok)</p>
        </div>
        <div class="text-right">
            <h3 class="text-lg sm:text-2xl font-bold text-indigo-700">Rp {{ "{:,.0f}".format(total_asset_value) }}</h3>
        </div>
    </div>

    <div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
        <!-- Header -->
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-blue-100">
            <div class="flex flex-col space-y-3 sm:space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
                <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">
                    <i class="fas fa-box text-blue-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                    Daftar Produk
                </h3>
                <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full lg:w-auto">
                    <!-- Form Filter & Search -->
                    <form method="GET" class="flex flex-col sm:flex-row gap-2 flex-1 lg:flex-none">
                        
                        <!-- Dropdown Filter Kategori -->
                        <div class="relative min-w-[150px]">
                            <select name="category" onchange="this.form.submit()" 
                                    class="w-full pl-3 pr-8 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 appearance-none bg-white">
                                <option value="">Semua Kategori</option>
                                {% for cat in categories %}
                                    <option value="{{ cat }}" {% if cat == selected_category %}selected{% endif %}>
                                        {{ cat }}
                                    </option>
                                {% endfor %}
                            </select>
                            <i class="fas fa-filter absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none"></i>
                        </div>

                        <!-- Input Search -->
                        <div class="relative flex-1">
                            <input type="text" name="search" value="{{ search }}" 
                                   placeholder="Cari produk..." 
                                   class="w-full lg:w-48 pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                        </div>
                    </form>
                    
                    <!-- Export CSV (semua role boleh) -->
                    <a href="{{ url_for('products_export') }}"
                       class="bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap text-sm h-[38px] self-end sm:self-auto inline-flex items-center"
                       title="Export semua produk & jasa ke CSV">
                        <i class="fas fa-file-export mr-1 sm:mr-2"></i>Export
                    </a>

                    <!-- Tombol Tambah & Import (HANYA JIKA BUKAN KASIR) -->
                    {% if current_user.role != 'Kasir' %}
                    <button type="button" onclick="openModal('importModal')"
                            class="bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap text-sm h-[38px] self-end sm:self-auto">
                        <i class="fas fa-file-import mr-1 sm:mr-2"></i>Import
                    </button>
                    <button onclick="openModal('addModal')"
                            class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap text-sm h-[38px] self-end sm:self-auto">
                        <i class="fas fa-plus mr-1 sm:mr-2"></i>Tambah
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Mobile Card View -->
        <div class="block lg:hidden divide-y divide-gray-100">
            {% for product in products.items %}
            <div class="p-3 hover:bg-gray-50 active:bg-gray-100 transition-colors {% if not product.is_service and product.stok <= product.stok_minimum %}bg-red-50 hover:bg-red-100{% endif %}">
                <div class="flex justify-between items-start mb-2">
                    <div class="flex-1 min-w-0 pr-2">
                        <div class="flex items-center gap-2 mb-1">
                            <h4 class="text-sm font-bold text-gray-900 truncate">{{ product.nama_barang }}</h4>
                            {% if product.is_service %}
                            <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-purple-100 text-purple-700">Jasa</span>
                            {% else %}
                            <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-blue-100 text-blue-700">Produk</span>
                            {% endif %}
                        </div>
                        <p class="text-xs text-blue-600 mb-1 font-semibold">
                            {{ product.kategori or '-' }}
                        </p>
                        <p class="text-xs text-gray-500 mb-1">
                            <i class="fas fa-barcode text-gray-400 mr-1"></i>{{ product.kode_barang }}
                        </p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="text-xs text-gray-500 mb-0.5">Stok</p>
                        {% if product.is_service %}
                            <span class="text-xs font-bold text-gray-400">-</span>
                        {% else %}
                            {% if product.stok <= product.stok_minimum %}
                            <span class="px-2 py-1 text-xs font-bold rounded-full bg-red-100 text-red-800">
                                {{ product.stok_display }} <i class="fas fa-exclamation-triangle"></i>
                            </span>
                            {% else %}
                            <span class="text-xs font-bold text-gray-900">{{ product.stok_display }}</span>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-2 text-xs mb-2">
                    <div class="bg-gray-100 p-1.5 rounded">
                        <p class="text-gray-500">Harga Ecer ({{ product.satuan }})</p>
                        <p class="font-semibold text-gray-800">Rp {{ "{:,.0f}".format(product.harga_ecer) }}</p>
                    </div>
                    <div class="bg-gray-100 p-1.5 rounded">
                        <p class="text-gray-500">Harga Grosir</p>
                        <p class="font-semibold text-gray-800">Rp {{ "{:,.0f}".format(product.harga_grosir) }}</p>
                    </div>
                </div>
                
                {% if current_user.role != 'Kasir' %}
                <div class="flex justify-end gap-3 pt-2 border-t border-gray-200">
                    <!-- Siapkan Data Unit untuk Edit -->
                    {% set unit_data = [] %}
                    {% for u in product.units %}
                        {% set _ = unit_data.append({'nama': u.nama_satuan, 'qty': u.jumlah_konversi, 'ecer': u.harga_ecer, 'grosir': u.harga_grosir, 'barcode': u.barcode}) %}
                    {% endfor %}

                    <button onclick='editProduct({{ product.id }}, "{{ product.kode_barang }}", "{{ product.nama_barang }}", "{{ product.kategori or '' }}", "{{ product.satuan }}", {{ product.harga_pokok | int }}, {{ product.harga_ecer }}, {{ product.harga_grosir }}, {{ product.stok }}, {{ product.stok_minimum }}, "{{ product.barcode or '' }}", {{ "true" if product.is_service else "false" }}, {{ unit_data|tojson }})' 
                            class="text-blue-600 hover:text-blue-700 active:text-blue-800 p-1.5 transition-colors">
                        <i class="fas fa-edit text-sm"></i>
                    </button>
                    <a href="{{ url_for('delete_product', id=product.id) }}" 
                       onclick="return confirm('Yakin ingin menghapus produk ini?')"
                       class="text-red-600 hover:text-red-700 active:text-red-800 p-1.5 transition-colors">
                        <i class="fas fa-trash text-sm"></i>
                    </a>
                </div>
                {% endif %}
            </div>
            {% else %}
            <div class="p-8 text-center text-gray-400">
                <i class="fas fa-inbox text-4xl mb-2"></i>
                <p class="text-sm">Belum ada data produk</p>
            </div>
            {% endfor %}
        </div>

        <!-- Desktop Table View -->
        <div class="hidden lg:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tipe</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Kode</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Nama Barang</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Kategori</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Satuan Dasar</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Stok</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Harga Ecer</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Harga Grosir</th>
                        
                        {% if current_user.role != 'Kasir' %}
                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for product in products.items %}
                    <tr class="hover:bg-gray-50 {% if not product.is_service and product.stok <= product.stok_minimum %}bg-red-50 hover:bg-red-100{% endif %}">
                        <td class="px-6 py-4">
                            {% if product.is_service %}
                            <span class="px-2 py-1 text-xs font-bold rounded-full bg-purple-100 text-purple-700">Jasa</span>
                            {% else %}
                            <span class="px-2 py-1 text-xs font-bold rounded-full bg-blue-100 text-blue-700">Produk</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ product.kode_barang }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ product.nama_barang }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ product.kategori or '-' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ product.satuan }}</td>
                        <td class="px-6 py-4">
                            {% if product.is_service %}
                                <span class="text-gray-400">-</span>
                            {% else %}
                                {% if product.stok <= product.stok_minimum %}
                                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800" title="{{ product.stok_display }}">
                                    {{ product.stok_display }} <i class="fas fa-exclamation-triangle"></i>
                                </span>
                                {% else %}
                                <span class="text-xs font-semibold text-gray-900">{{ product.stok_display }}</span>
                                {% endif %}
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-900">Rp {{ "{:,.0f}".format(product.harga_ecer) }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">Rp {{ "{:,.0f}".format(product.harga_grosir) }}</td>
                        
                        {% if current_user.role != 'Kasir' %}
                        <td class="px-6 py-4 text-center">
                            {% set unit_data = [] %}
                            {% for u in product.units %}
                                {% set _ = unit_data.append({'nama': u.nama_satuan, 'qty': u.jumlah_konversi, 'ecer': u.harga_ecer, 'grosir': u.harga_grosir, 'barcode': u.barcode}) %}
                            {% endfor %}

                            <button onclick='editProduct({{ product.id }}, "{{ product.kode_barang }}", "{{ product.nama_barang }}", "{{ product.kategori or '' }}", "{{ product.satuan }}", {{ product.harga_pokok | int }}, {{ product.harga_ecer }}, {{ product.harga_grosir }}, {{ product.stok }}, {{ product.stok_minimum }}, "{{ product.barcode or '' }}", {{ "true" if product.is_service else "false" }}, {{ unit_data|tojson }})' 
                                    class="text-blue-600 hover:text-blue-800 mr-3 p-1">
                                <i class="fas fa-edit"></i>
                            </button>
                            <a href="{{ url_for('delete_product', id=product.id) }}" 
                               onclick="return confirm('Yakin ingin menghapus produk ini?')"
                               class="text-red-600 hover:text-red-800 p-1">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                        {% endif %}
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="{% if current_user.role != 'Kasir' %}9{% else %}8{% endif %}" class="px-6 py-8 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
                            <p>Belum ada data produk</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if products.pages > 1 %}
        <div class="p-3 sm:p-4 lg:p-6 border-t border-gray-200 bg-gray-50">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
                <p class="text-xs sm:text-sm text-gray-600 text-center sm:text-left">
                    {{ products.per_page * (products.page - 1) + 1 }} - 
                    {{ [products.per_page * products.page, products.total]|min }} dari {{ products.total }}
                </p>
                <div class="flex space-x-1 sm:space-x-2">
                    {% if products.has_prev %}
                    <a href="?page={{ products.prev_num }}{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}" 
                       class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}
                    {% for page_num in products.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                        {% if page_num %}
                            <a href="?page={{ page_num }}{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}" 
                               class="px-2 sm:px-3 py-1 text-sm border rounded {% if page_num == products.page %}bg-blue-600 text-white border-blue-600{% else %}border-gray-300 hover:bg-gray-100 active:bg-gray-200{% endif %}">
                                {{ page_num }}
                            </a>
                        {% endif %}
                    {% endfor %}
                    {% if products.has_next %}
                    <a href="?page={{ products.next_num }}{% if search %}&search={{ search }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}" 
                       class="px-2 sm:px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 active:bg-gray-200">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Import CSV Modal -->
<div id="importModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-xl max-h-[95vh] overflow-y-auto">
        <div class="p-4 border-b border-gray-200 sticky top-0 bg-white z-10 flex justify-between items-center">
            <h3 class="text-base sm:text-lg font-bold text-gray-800">
                <i class="fas fa-file-import text-amber-500 mr-1"></i> Import Produk / Jasa (CSV)
            </h3>
            <button type="button" onclick="closeModal('importModal')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ url_for('products_import') }}" enctype="multipart/form-data" class="p-4 sm:p-6 space-y-4">
            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 text-xs text-amber-800">
                <p class="font-semibold mb-1"><i class="fas fa-info-circle mr-1"></i>Format kolom wajib:</p>
                <code class="block text-[11px] leading-5">kode_barang, nama_barang, kategori, satuan, harga_pokok, harga_ecer, harga_grosir, stok, stok_minimum, is_service, barcode</code>
                <p class="mt-2"><b>is_service</b>: isi <code>Ya</code> untuk jasa, <code>Tidak</code> untuk produk fisik.<br>
                Baris dengan <b>kode_barang</b> yang sudah ada akan di-update.</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Pilih File CSV *</label>
                <input type="file" name="csv_file" accept=".csv" required
                       class="w-full text-sm border border-gray-300 rounded-lg file:bg-gray-100 file:border-0 file:px-3 file:py-2 file:mr-2 file:text-sm">
            </div>
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 pt-2 border-t">
                <a href="{{ url_for('products_import_template') }}"
                   class="text-sm text-blue-600 hover:text-blue-700 inline-flex items-center">
                    <i class="fas fa-download mr-1"></i> Unduh template CSV
                </a>
                <div class="flex gap-2">
                    <button type="button" onclick="closeModal('importModal')"
                            class="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>
                    <button type="submit"
                            class="px-4 py-2 text-sm bg-amber-500 hover:bg-amber-600 text-white rounded-lg font-semibold">
                        <i class="fas fa-upload mr-1"></i> Import
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Add Modal -->
<div id="addModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-3xl max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">Tambah Produk Baru</h3>
        </div>
        <form method="POST" action="{{ url_for('add_product') }}" class="p-3 sm:p-4 lg:p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                
                <!-- PILIH JENIS PRODUK -->
                <div class="md:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jenis *</label>
                    <select name="jenis_produk" id="add_jenis_produk" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-50" onchange="toggleStokInput(this, 'add')">
                        <option value="Produk">Produk Fisik (Dengan Stok)</option>
                        <option value="Jasa">Jasa / Layanan (Tanpa Stok)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Kode Barang *</label>
                    <input type="text" name="kode_barang" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Barcode</label>
                    <div class="flex gap-2">
                        <input type="text" name="barcode" id="add_barcode"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                               placeholder="Scan atau input barcode">
                        <button type="button" onclick="startScanner('add_barcode')" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 shadow-sm transition-all">
                            <i class="fas fa-camera"></i>
                        </button>
                    </div>
                </div>

                <!-- Scanner Container Add -->
                <div id="add_barcode_scanner" class="hidden md:col-span-2 overflow-hidden rounded-lg border-2 border-indigo-300 relative bg-black mt-2">
                    <div id="add_reader" style="width: 100%;"></div>
                    <button type="button" onclick="stopScanner('add_barcode_scanner')" class="absolute top-2 right-2 bg-red-600 text-white p-2 rounded-full z-10 opacity-70">
                        <i class="fas fa-times text-xs"></i>
                    </button>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Nama Barang *</label>
                    <input type="text" name="nama_barang" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Kategori</label>
                    <input type="text" name="kategori" placeholder="Makanan, Minuman, Obat, dll"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Satuan Terkecil *</label>
                    <input type="text" name="satuan" required placeholder="Pcs, Batang, Butir, dll"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Ini adalah satuan dasar untuk stok.</p>
                </div>

                <!-- SECTION HARGA -->
                <div class="md:col-span-2 bg-gray-50 rounded-lg border border-gray-200 p-3 sm:p-4">
                    <p class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3 pb-2 border-b border-gray-200">
                        <i class="fas fa-tags mr-1"></i> Pengaturan Harga <span class="font-normal normal-case text-gray-400">(per Satuan Terkecil)</span>
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <div class="flex items-center gap-1.5 mb-1.5">
                                <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 uppercase tracking-wide">Modal</span>
                                <label class="text-xs sm:text-sm font-semibold text-gray-700">Harga Pokok *</label>
                            </div>
                            <input type="number" name="harga_pokok" required step="0.01"
                                   class="w-full px-3 py-2 text-sm border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-400 bg-white">
                            <p class="text-[10px] text-gray-400 mt-1"><i class="fas fa-info-circle mr-0.5"></i>Harga beli / harga modal</p>
                        </div>
                        <div>
                            <div class="flex items-center gap-1.5 mb-1.5">
                                <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-green-100 text-green-700 uppercase tracking-wide">Jual Ecer</span>
                                <label class="text-xs sm:text-sm font-semibold text-gray-700">Harga Ecer *</label>
                            </div>
                            <input type="number" name="harga_ecer" required step="0.01"
                                   class="w-full px-3 py-2 text-sm border border-green-300 rounded-lg focus:ring-2 focus:ring-green-400 bg-white">
                            <p class="text-[10px] text-gray-400 mt-1"><i class="fas fa-user mr-0.5"></i>Harga jual ke pelanggan biasa</p>
                        </div>
                        <div>
                            <div class="flex items-center gap-1.5 mb-1.5">
                                <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 uppercase tracking-wide">Jual Grosir</span>
                                <label class="text-xs sm:text-sm font-semibold text-gray-700">Harga Grosir *</label>
                            </div>
                            <input type="number" name="harga_grosir" required step="0.01"
                                   class="w-full px-3 py-2 text-sm border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-400 bg-white">
                            <p class="text-[10px] text-gray-400 mt-1"><i class="fas fa-users mr-0.5"></i>Harga jual ke sub agen / grosir</p>
                        </div>
                    </div>
                </div>

                <!-- CONTAINER STOK -->
                <div id="stok_container_add" class="contents">
                    <div>
                        <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Stok Awal (Satuan Terkecil)</label>
                        <input type="number" name="stok" value="0" 
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Stok Minimum</label>
                        <input type="number" name="stok_minimum" value="10" 
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <!-- MULTI SATUAN -->
                <div id="multi_unit_section_add" class="md:col-span-2 border-t pt-4 mt-2">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-bold text-gray-800">Satuan Bertingkat (Opsional)</label>
                        <button type="button" onclick="addUnitRow('add')" class="text-xs bg-green-100 text-green-700 px-3 py-1.5 rounded hover:bg-green-200 font-semibold border border-green-200">
                            <i class="fas fa-plus mr-1"></i> Tambah Satuan
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">Contoh: Satuan Besar "Slop", Isi "10" (artinya 1 Slop = 10 Pcs).</p>
                    
                    <div id="add_unit_container" class="space-y-2">
                        <!-- Baris input akan ditambahkan di sini oleh JS -->
                    </div>
                </div>

            </div>
            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6 border-t pt-4">
                <button type="button" onclick="customCloseModal('addModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">Batal</button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Simpan</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="modal fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-2 sm:p-4">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-2xl w-full max-w-3xl max-h-[95vh] overflow-y-auto">
        <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 sticky top-0 bg-white z-10">
            <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">Edit Produk</h3>
        </div>
        <form id="editForm" method="POST" class="p-3 sm:p-4 lg:p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                
                <!-- EDIT JENIS PRODUK -->
                <div class="md:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Jenis *</label>
                    <select name="jenis_produk" id="edit_jenis_produk" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-50" onchange="toggleStokInput(this, 'edit')">
                        <option value="Produk">Produk Fisik (Dengan Stok)</option>
                        <option value="Jasa">Jasa / Layanan (Tanpa Stok)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Kode Barang *</label>
                    <input type="text" name="kode_barang" id="edit_kode" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Barcode</label>
                    <div class="flex gap-2">
                        <input type="text" name="barcode" id="edit_barcode" 
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <button type="button" onclick="startScanner('edit_barcode')" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 shadow-sm transition-all">
                            <i class="fas fa-camera"></i>
                        </button>
                    </div>
                </div>

                <!-- Scanner Container Edit -->
                <div id="edit_barcode_scanner" class="hidden md:col-span-2 overflow-hidden rounded-lg border-2 border-indigo-300 relative bg-black mt-2">
                    <div id="edit_reader" style="width: 100%;"></div>
                    <button type="button" onclick="stopScanner('edit_barcode_scanner')" class="absolute top-2 right-2 bg-red-600 text-white p-2 rounded-full z-10 opacity-70">
                        <i class="fas fa-times text-xs"></i>
                    </button>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Nama Barang *</label>
                    <input type="text" name="nama_barang" id="edit_nama" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Kategori</label>
                    <input type="text" name="kategori" id="edit_kategori" placeholder="Makanan, Minuman, Obat, dll"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Satuan Terkecil *</label>
                    <input type="text" name="satuan" id="edit_satuan" required 
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <!-- SECTION HARGA -->
                <div class="md:col-span-2 bg-gray-50 rounded-lg border border-gray-200 p-3 sm:p-4">
                    <p class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3 pb-2 border-b border-gray-200">
                        <i class="fas fa-tags mr-1"></i> Pengaturan Harga <span class="font-normal normal-case text-gray-400">(per Satuan Terkecil)</span>
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <div class="flex items-center gap-1.5 mb-1.5">
                                <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 uppercase tracking-wide">Modal</span>
                                <label class="text-xs sm:text-sm font-semibold text-gray-700">Harga Pokok *</label>
                            </div>
                            <input type="number" name="harga_pokok" id="edit_pokok" required step="0.01"
                                   class="w-full px-3 py-2 text-sm border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-400 bg-white">
                            <p class="text-[10px] text-gray-400 mt-1"><i class="fas fa-info-circle mr-0.5"></i>Harga beli / harga modal</p>
                        </div>
                        <div>
                            <div class="flex items-center gap-1.5 mb-1.5">
                                <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-green-100 text-green-700 uppercase tracking-wide">Jual Ecer</span>
                                <label class="text-xs sm:text-sm font-semibold text-gray-700">Harga Ecer *</label>
                            </div>
                            <input type="number" name="harga_ecer" id="edit_ecer" required step="0.01"
                                   class="w-full px-3 py-2 text-sm border border-green-300 rounded-lg focus:ring-2 focus:ring-green-400 bg-white">
                            <p class="text-[10px] text-gray-400 mt-1"><i class="fas fa-user mr-0.5"></i>Harga jual ke pelanggan biasa</p>
                        </div>
                        <div>
                            <div class="flex items-center gap-1.5 mb-1.5">
                                <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 uppercase tracking-wide">Jual Grosir</span>
                                <label class="text-xs sm:text-sm font-semibold text-gray-700">Harga Grosir *</label>
                            </div>
                            <input type="number" name="harga_grosir" id="edit_grosir" required step="0.01"
                                   class="w-full px-3 py-2 text-sm border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-400 bg-white">
                            <p class="text-[10px] text-gray-400 mt-1"><i class="fas fa-users mr-0.5"></i>Harga jual ke sub agen / grosir</p>
                        </div>
                    </div>
                </div>

                <!-- CONTAINER STOK EDIT -->
                <div id="stok_container_edit" class="contents">
                    <div>
                        <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Stok (Dalam Satuan Terkecil)</label>
                        <input type="number" name="stok" id="edit_stok" 
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">Stok Minimum</label>
                        <input type="number" name="stok_minimum" id="edit_min" 
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <!-- MULTI SATUAN EDIT -->
                <div id="multi_unit_section_edit" class="md:col-span-2 border-t pt-4 mt-2">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-bold text-gray-800">Satuan Bertingkat (Opsional)</label>
                        <button type="button" onclick="addUnitRow('edit')" class="text-xs bg-green-100 text-green-700 px-3 py-1.5 rounded hover:bg-green-200 font-semibold border border-green-200">
                            <i class="fas fa-plus mr-1"></i> Tambah Satuan
                        </button>
                    </div>
                    
                    <div id="edit_unit_container" class="space-y-2">
                        <!-- Baris input akan di-render di sini oleh JS -->
                    </div>
                </div>

            </div>
            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 mt-4 sm:mt-6 border-t pt-4">
                <button type="button" onclick="customCloseModal('editModal')" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100">Batal</button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Update</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Include Library Scanner -->
<script src="https://unpkg.com/html5-qrcode"></script>

<script>
let html5QrCode;

// Fungsi Feedback Suara
function playBeep() {
    const beep = new Audio('https://www.soundjay.com/button/beep-07.wav');
    beep.play().catch(err => console.log("Audio block:", err));
}

// Fungsi Feedback Getar
function triggerVibrate() {
    if (navigator.vibrate) {
        navigator.vibrate(200);
    }
}

function startScanner(targetInputId) {
    const isAdd = targetInputId === 'add_barcode';
    const containerId = isAdd ? 'add_barcode_scanner' : 'edit_barcode_scanner';
    const readerId = isAdd ? 'add_reader' : 'edit_reader';
    
    const container = document.getElementById(containerId);
    container.classList.remove('hidden');
    
    if (html5QrCode && html5QrCode.isScanning) {
        html5QrCode.stop().catch(() => {});
    }

    html5QrCode = new Html5Qrcode(readerId);
    const config = { 
        fps: 15, 
        qrbox: { width: 250, height: 150 }, 
        aspectRatio: 1.0 
    };

    html5QrCode.start(
        { facingMode: "environment" }, 
        config, 
        (decodedText) => {
            playBeep();
            triggerVibrate();
            document.getElementById(targetInputId).value = decodedText;
            stopScanner(containerId);
        }
    ).catch(err => {
        alert("Gagal akses kamera. Pastikan izin diberikan dan gunakan HTTPS.");
        container.classList.add('hidden');
    });
}

function stopScanner(containerId) {
    if (html5QrCode) {
        html5QrCode.stop().then(() => {
            document.getElementById(containerId).classList.add('hidden');
        }).catch(() => {
            document.getElementById(containerId).classList.add('hidden');
        });
    } else {
        const container = document.getElementById(containerId);
        if(container) container.classList.add('hidden');
    }
}

function customCloseModal(id) {
    closeModal(id); 
    stopScanner('add_barcode_scanner');
    stopScanner('edit_barcode_scanner');
}

// Toggle field Stok & Multi Unit berdasarkan Pilihan Jasa/Produk
function toggleStokInput(selectElement, type) {
    const containerId = type === 'add' ? 'stok_container_add' : 'stok_container_edit';
    const unitSectionId = type === 'add' ? 'multi_unit_section_add' : 'multi_unit_section_edit';
    
    const container = document.getElementById(containerId);
    const unitSection = document.getElementById(unitSectionId);
    
    if (selectElement.value === 'Jasa') {
        container.classList.add('hidden');
        container.classList.remove('contents');
        unitSection.classList.add('hidden');
    } else {
        container.classList.remove('hidden');
        container.classList.add('contents');
        unitSection.classList.remove('hidden');
    }
}

// --- FUNGSI MULTI SATUAN ---

function addUnitRow(type) {
    const containerId = type === 'add' ? 'add_unit_container' : 'edit_unit_container';
    renderUnitRow(containerId);
}

function renderUnitRow(containerId, data = null) {
    const container = document.getElementById(containerId);
    
    const nama = data ? data.nama : '';
    const qty = data ? data.qty : '';
    const ecer = data ? data.ecer : '';
    const grosir = data ? data.grosir : '';
    const barcode = (data && data.barcode !== null) ? data.barcode : '';
    
    const html = `
    <div class="grid grid-cols-12 gap-2 mb-2 bg-gray-50 p-2 rounded border border-gray-200 shadow-sm relative group">
        <div class="col-span-3">
            <label class="text-[10px] text-gray-500 font-semibold uppercase">Nama Satuan</label>
            <input type="text" name="unit_nama[]" value="${nama}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500" placeholder="Contoh: Slop">
        </div>
        <div class="col-span-2">
            <label class="text-[10px] text-gray-500 font-semibold uppercase">Isi (Pcs)</label>
            <input type="number" name="unit_konversi[]" value="${qty}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500" placeholder="10">
        </div>
        <div class="col-span-2">
            <label class="text-[10px] text-gray-500 font-semibold uppercase">Harga Ecer</label>
            <input type="number" name="unit_harga_ecer[]" value="${ecer}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500" placeholder="Rp">
        </div>
        <div class="col-span-2">
            <label class="text-[10px] text-gray-500 font-semibold uppercase">Harga Grosir</label>
            <input type="number" name="unit_harga_grosir[]" value="${grosir}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500" placeholder="Rp">
        </div>
        <div class="col-span-2">
            <label class="text-[10px] text-gray-500 font-semibold uppercase">Barcode</label>
            <input type="text" name="unit_barcode[]" value="${barcode}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500" placeholder="Scan...">
        </div>
        <div class="col-span-1 flex items-end justify-center">
            <button type="button" onclick="this.closest('.grid').remove()" class="text-red-500 hover:text-red-700 bg-white border border-red-200 rounded p-1.5 shadow-sm transition-colors mb-[2px]">
                <i class="fas fa-trash-alt text-xs"></i>
            </button>
        </div>
        <!-- Hidden Inputs default -->
        <input type="hidden" name="unit_harga_pokok[]" value="0">
    </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
}

function editProduct(id, kode, nama, kategori, satuan, pokok, ecer, grosir, stok, min, barcode, is_service, units = []) {
    document.getElementById('editForm').action = `/products/edit/${id}`;
    document.getElementById('edit_kode').value = kode;
    document.getElementById('edit_barcode').value = barcode || '';
    document.getElementById('edit_nama').value = nama;
    document.getElementById('edit_kategori').value = kategori || '';
    document.getElementById('edit_satuan').value = satuan;
    document.getElementById('edit_pokok').value = pokok;
    document.getElementById('edit_ecer').value = ecer;
    document.getElementById('edit_grosir').value = grosir;
    document.getElementById('edit_stok').value = stok;
    document.getElementById('edit_min').value = min;

    // Set dropdown jenis & trigger toggle
    const select = document.getElementById('edit_jenis_produk');
    select.value = is_service ? 'Jasa' : 'Produk';
    toggleStokInput(select, 'edit');
    
    // Populate Units
    const unitContainer = document.getElementById('edit_unit_container');
    unitContainer.innerHTML = ''; // Clear existing
    
    if (units && units.length > 0) {
        units.forEach(u => {
            renderUnitRow('edit_unit_container', u);
        });
    }
    
    openModal('editModal');
}
</script>
{% endblock %}