{% extends "base.html" %}

{% block title %}Kerugian Stok - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Catat Kerugian Stok (Loss){% endblock %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Form Input (Kiri) -->
    <div class="lg:col-span-1 bg-white rounded-lg shadow-md p-4 h-fit border-t-4 border-red-600">
        <h3 class="font-bold text-lg mb-4 text-gray-800 flex items-center">
            <i class="fas fa-heart-broken mr-2 text-red-600"></i>Catat Kerugian
        </h3>
        
        <form method="POST">
            <!-- Pilih Produk -->
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Cari Produk</label>
                <select name="product_id" id="product_select" class="w-full border border-gray-300 rounded-lg p-2 text-sm" required>
                    <option value="">-- Pilih Produk --</option>
                    {% for p in products %}
                        <!-- Menyiapkan data units dalam format JSON di atribut data-units -->
                        {% set unit_list = [] %}
                        {% for u in p.units %}
                            {% set _ = unit_list.append({'nama': u.nama_satuan, 'qty': u.jumlah_konversi}) %}
                        {% endfor %}
                        <option value="{{ p.id }}" 
                                data-baseunit="{{ p.satuan or 'Pcs' }}" 
                                data-units='{{ unit_list|tojson }}'>
                            {{ p.kode_barang }} - {{ p.nama_barang }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <!-- Qty dan Satuan -->
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Jumlah & Satuan</label>
                <div class="flex gap-2">
                    <input type="number" name="qty" required min="1" 
                           class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"
                           placeholder="Jml">
                    
                    <select name="satuan" id="unit_select" class="w-32 border border-gray-300 rounded-lg px-2 py-2 text-sm bg-gray-50 focus:ring-2 focus:ring-red-500" required>
                        <option value="">- Satuan -</option>
                    </select>
                </div>
                <!-- Hidden input untuk menyimpan faktor konversi yang terpilih -->
                <input type="hidden" name="konversi" id="konversi_input" value="1">
            </div>

            <!-- Alasan -->
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Alasan</label>
                <select name="alasan" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                    <option value="Expired">Kadaluarsa (Expired)</option>
                    <option value="Rusak">Rusak / Pecah</option>
                    <option value="Hilang">Hilang / Selisih Stok</option>
                    <option value="Konsumsi Sendiri">Konsumsi Sendiri</option>
                    <option value="Lainnya">Lainnya</option>
                </select>
            </div>

            <!-- Keterangan -->
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-1">Keterangan Tambahan</label>
                <textarea name="keterangan" rows="3" 
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"
                          placeholder="Contoh: Pecah di gudang belakang"></textarea>
            </div>

            <button type="submit" class="w-full bg-red-600 text-white py-2.5 rounded-lg font-bold hover:bg-red-700 transition-colors shadow-lg">
                <i class="fas fa-save mr-2"></i>Simpan Kerugian
            </button>
        </form>
    </div>

    <!-- Tabel Riwayat (Kanan) -->
    <div class="lg:col-span-2 bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
            <h3 class="font-bold text-gray-800">Riwayat Kerugian Barang</h3>
            <span class="text-xs text-gray-500">50 Transaksi Terakhir</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="bg-gray-100 text-gray-600 uppercase font-semibold">
                    <tr>
                        <th class="p-4">Tanggal</th>
                        <th class="p-4">Produk</th>
                        <th class="p-4 text-center">Jumlah Hilang</th>
                        <th class="p-4 text-right">Nilai Rugi (HPP)</th>
                        <th class="p-4">Alasan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for loss in losses %}
                    <tr class="hover:bg-red-50 transition-colors">
                        <td class="p-4 text-gray-600">
                            {{ loss.tanggal.strftime('%d/%m/%y') }}
                            <div class="text-[10px]">{{ loss.tanggal.strftime('%H:%M') }}</div>
                        </td>
                        <td class="p-4">
                            <div class="font-bold text-gray-900">{{ loss.product.nama_barang }}</div>
                            <div class="text-xs text-gray-500">{{ loss.product.kode_barang }}</div>
                        </td>
                        <td class="p-4 text-center">
                            <span class="bg-red-100 text-red-700 px-2 py-1 rounded font-bold">
                                -{{ loss.qty }} {{ loss.satuan }}
                            </span>
                            {% if loss.qty_konversi > 1 %}
                            <div class="text-[10px] text-gray-400 mt-1">
                                (= {{ loss.qty * loss.qty_konversi }} {{ loss.product.satuan }})
                            </div>
                            {% endif %}
                        </td>
                        <td class="p-4 text-right font-medium text-gray-800">
                            Rp {{ "{:,.0f}".format(loss.total_rugi) }}
                        </td>
                        <td class="p-4">
                            <span class="inline-block px-2 py-1 text-[10px] font-bold uppercase rounded border 
                                {% if loss.alasan == 'Expired' %} bg-orange-50 text-orange-700 border-orange-200
                                {% elif loss.alasan == 'Rusak' %} bg-red-50 text-red-700 border-red-200
                                {% else %} bg-gray-50 text-gray-700 border-gray-200 {% endif %}">
                                {{ loss.alasan }}
                            </span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="p-10 text-center text-gray-400">
                            <i class="fas fa-check-circle text-5xl mb-3 text-green-200"></i>
                            <p>Tidak ada riwayat kerugian barang.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Include jQuery & Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // 1. Inisialisasi Select2
        const productSelect = $('#product_select').select2({
            placeholder: "-- Cari Nama / Kode Barang --",
            allowClear: true,
            width: '100%'
        });

        // 2. Event saat Produk berubah
        productSelect.on('change', function() {
            const selectedOption = $(this).find(':selected');
            const unitSelect = $('#unit_select');
            const konversiInput = $('#konversi_input');

            // Reset dropdown satuan
            unitSelect.empty();
            unitSelect.append('<option value="">- Satuan -</option>');

            if (!$(this).val()) return;

            // Ambil data dari atribut data-
            const baseUnit = selectedOption.data('baseunit');
            const unitsData = selectedOption.data('units'); // Otomatis diparse jadi array oleh jQuery

            // Tambahkan Satuan Dasar
            unitSelect.append(`<option value="${baseUnit}" data-konversi="1">${baseUnit} (Dasar)</option>`);

            // Tambahkan Satuan Konversi (Multi Unit)
            if (unitsData && unitsData.length > 0) {
                unitsData.forEach(u => {
                    unitSelect.append(`<option value="${u.nama}" data-konversi="${u.qty}">${u.nama}</option>`);
                });
            }

            // Pilih satuan dasar secara default
            unitSelect.val(baseUnit);
            konversiInput.val(1);
        });

        // 3. Event saat Satuan berubah
        $('#unit_select').on('change', function() {
            const selectedUnit = $(this).find(':selected');
            const konversi = selectedUnit.data('konversi') || 1;
            $('#konversi_input').val(konversi);
        });
    });
</script>
{% endblock %}