{% extends 'inventaris/base.html' %}
{% load static %}

{% block title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Barang - Inventaris HMI{% endblock %}
{% block page_title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Barang{% endblock %}
{% block page_subtitle %}{% if form.instance.pk %}Perbarui informasi barang inventaris{% else %}Tambahkan barang baru ke inventaris{% endif %}{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-2 sm:px-4 lg:px-8">
    <!-- Header -->
    <div class="mb-3 sm:mb-4 lg:mb-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 sm:gap-3">
            <div class="flex-1">
                <h1 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900">
                    {% if form.instance.pk %}
                        <i class="fas fa-edit text-warning-600 mr-1.5 sm:mr-2"></i>Edit Barang
                    {% else %}
                        <i class="fas fa-plus-circle text-inventory-600 mr-1.5 sm:mr-2"></i>Tambah Barang Baru
                    {% endif %}
                </h1>
                <p class="mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-600">
                    {% if form.instance.pk %}
                        Perbarui informasi barang "{{ form.instance.nama }}" dalam sistem inventaris
                    {% else %}
                        Isi formulir di bawah untuk menambahkan barang baru ke inventaris HMI
                    {% endif %}
                </p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2">
                <a href="{% url 'inventaris:barang_list' %}" class="btn-secondary text-center text-sm">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali ke Daftar
                </a>
                {% if form.instance.pk %}
                    <a href="{% url 'inventaris:barang_detail' form.instance.pk %}" class="btn-secondary text-center text-sm">
                        <i class="fas fa-eye mr-2"></i>Lihat Detail
                    </a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Form Container -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <form method="post" enctype="multipart/form-data" class="space-y-0" x-data="barangForm()" x-init="init()" id="barang-form">
            {% csrf_token %}

            <!-- Form Header -->
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-3 sm:px-4 lg:px-6 py-3 sm:py-4">
                <div class="flex items-center space-x-2 sm:space-x-3">
                    <div class="w-7 h-7 sm:w-8 sm:h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-clipboard-list text-white text-xs sm:text-sm"></i>
                    </div>
                    <div class="min-w-0 flex-1">
                        <h3 class="text-base sm:text-lg font-semibold text-white">Formulir Data Barang</h3>
                        <p class="text-green-100 text-xs sm:text-sm">Lengkapi semua informasi dengan teliti</p>
                    </div>
                </div>
            </div>

            <!-- Form Content -->
            <div class="px-3 sm:px-4 lg:px-6 py-3 sm:py-4 lg:py-6">
                <!-- Basic Information Section -->
                <div class="mb-4 sm:mb-6 lg:mb-8">
                    <h4 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4 border-b border-gray-200 pb-1.5 sm:pb-2">
                        <i class="fas fa-info-circle text-green-600 mr-2"></i>
                        Informasi Dasar Barang
                    </h4>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 sm:gap-3 lg:gap-4">
                        <!-- Kode Barang -->
                        <div class="sm:col-span-2 lg:col-span-2">
                            <label for="{{ form.kode_barang.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-barcode text-green-600 mr-1"></i>
                                Kode Barang <span class="text-red-500">*</span>
                            </label>
                            <div class="flex flex-col sm:flex-row gap-1.5 sm:gap-2">
                                <div class="flex-1">
                                    {{ form.kode_barang }}
                                </div>
                                <button type="button" id="generate-kode-btn" class="px-4 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200 shadow-md hover:shadow-lg active:scale-95 flex items-center justify-center whitespace-nowrap min-w-[120px] sm:min-w-[140px]" title="Generate Kode Otomatis">
                                    <i class="fas fa-magic mr-2"></i>
                                    <span class="text-sm font-medium">Generate</span>
                                </button>
                            </div>
                            {% if form.kode_barang.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.kode_barang.errors.0 }}</p>
                            {% endif %}
                            <p class="mt-1 text-xs text-gray-500">Pilih kategori terlebih dahulu, lalu klik tombol Generate untuk membuat kode otomatis</p>
                        </div>

                        <!-- Nama Barang -->
                        <div>
                            <label for="{{ form.nama.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-tag text-green-600 mr-1"></i>
                                Nama Barang <span class="text-red-500">*</span>
                            </label>
                            {{ form.nama }}
                            {% if form.nama.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.nama.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Jumlah Barang -->
                        <div>
                            <label for="{{ form.jumlah_barang.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-boxes text-green-600 mr-1"></i>
                                Jumlah Unit <span class="text-red-500">*</span>
                            </label>
                            {{ form.jumlah_barang }}
                            {% if form.jumlah_barang.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.jumlah_barang.errors.0 }}</p>
                            {% endif %}
                            <p class="mt-1 text-xs text-gray-500">Jumlah unit barang yang sama (akan dibuat QR code untuk setiap unit)</p>
                        </div>

                        <!-- Kategori -->
                        <div>
                            <label for="{{ form.kategori.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-folder text-green-600 mr-1"></i>
                                Kategori <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                {{ form.kategori }}
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                                </div>
                            </div>
                            {% if form.kategori.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.kategori.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Merk -->
                        <div>
                            <label for="{{ form.merk.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-trademark text-green-600 mr-1"></i>
                                Merk/Brand
                            </label>
                            <div class="relative">
                                {{ form.merk }}
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                                </div>
                            </div>
                            {% if form.merk.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.merk.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Model -->
                        <div>
                            <label for="{{ form.model.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-cube text-green-600 mr-1"></i>
                                Model/Tipe
                            </label>
                            {{ form.model }}
                            {% if form.model.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.model.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Nomor Seri -->
                        <div>
                            <label for="{{ form.nomor_seri.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-hashtag text-green-600 mr-1"></i>
                                Nomor Seri
                            </label>
                            {{ form.nomor_seri }}
                            {% if form.nomor_seri.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.nomor_seri.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Acquisition Information Section -->
                <div class="mb-4 sm:mb-6 lg:mb-8">
                    <h4 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4 border-b border-gray-200 pb-1.5 sm:pb-2">
                        <i class="fas fa-shopping-cart text-blue-600 mr-2"></i>
                        Informasi Perolehan
                    </h4>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 sm:gap-3 lg:gap-4">
                        <!-- Tahun Perolehan -->
                        <div>
                            <label for="{{ form.tahun_perolehan.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-calendar-alt text-blue-600 mr-1"></i>
                                Tahun Perolehan <span class="text-red-500">*</span>
                            </label>
                            {{ form.tahun_perolehan }}
                            {% if form.tahun_perolehan.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.tahun_perolehan.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Harga Perolehan -->
                        <div>
                            <label for="{{ form.harga_perolehan.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-money-bill-wave text-blue-600 mr-1"></i>
                                Harga Perolehan <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
                                    <span class="text-gray-500 text-sm font-medium">Rp</span>
                                </div>
                                {{ form.harga_perolehan }}
                            </div>
                            {% if form.harga_perolehan.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.harga_perolehan.errors.0 }}</p>
                            {% endif %}
                            <p class="mt-1 text-xs text-gray-500">Masukkan harga perolehan tanpa titik atau koma</p>
                        </div>

                        <!-- Spesifikasi -->
                        <div class="sm:col-span-2 lg:col-span-1">
                            <label for="{{ form.spesifikasi.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-cogs text-blue-600 mr-1"></i>
                                Spesifikasi Teknis
                            </label>
                            {{ form.spesifikasi }}
                            {% if form.spesifikasi.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.spesifikasi.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Status & Location Section -->
                <div class="mb-4 sm:mb-6 lg:mb-8">
                    <h4 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4 border-b border-gray-200 pb-1.5 sm:pb-2">
                        <i class="fas fa-clipboard-check text-orange-600 mr-2"></i>
                        Status & Lokasi
                    </h4>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 sm:gap-3 lg:gap-4">
                        <!-- Kondisi -->
                        <div>
                            <label for="{{ form.kondisi.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-thermometer-half text-orange-600 mr-1"></i>
                                Kondisi Barang <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                {{ form.kondisi }}
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                                </div>
                            </div>
                            {% if form.kondisi.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.kondisi.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Lokasi -->
                        <div>
                            <label for="{{ form.lokasi.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-map-marker-alt text-orange-600 mr-1"></i>
                                Lokasi Penyimpanan <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                {{ form.lokasi }}
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                                </div>
                            </div>
                            {% if form.lokasi.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.lokasi.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Status -->
                        <div>
                            <label for="{{ form.status.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-signal text-orange-600 mr-1"></i>
                                Status Barang <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                {{ form.status }}
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                                </div>
                            </div>
                            {% if form.status.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.status.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Keterangan -->
                        <div class="sm:col-span-2 lg:col-span-3">
                            <label for="{{ form.keterangan.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                                <i class="fas fa-sticky-note text-orange-600 mr-1"></i>
                                Keterangan Tambahan
                            </label>
                            {{ form.keterangan }}
                            {% if form.keterangan.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.keterangan.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Media & Documents Section -->
                <div class="mb-4 sm:mb-6 lg:mb-8">
                    <h4 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4 border-b border-gray-200 pb-1.5 sm:pb-2">
                        <i class="fas fa-images text-purple-600 mr-2"></i>
                        Gambar & Dokumen
                    </h4>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <!-- Gambar Upload -->
                        <div>
                            <label for="{{ form.gambar.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                                <i class="fas fa-camera text-purple-600 mr-1"></i>
                                Gambar Barang
                            </label>
                            
                            <div class="border-2 border-gray-300 border-dashed rounded-lg p-4 hover:border-purple-400 transition-colors">
                                <div class="text-center">
                                    <div id="image-preview-container" class="hidden">
                                        <img id="image-preview" class="mx-auto h-24 w-24 object-cover rounded-lg mb-2" />
                                    </div>
                                    <div id="upload-placeholder">
                                        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                                        <div class="text-sm text-gray-600">
                                            <label for="{{ form.gambar.id_for_label }}" class="cursor-pointer text-purple-600 hover:text-purple-500">
                                                Upload gambar
                                            </label>
                                            {{ form.gambar }}
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">PNG, JPG, JPEG hingga 2MB</p>
                                    </div>
                                </div>
                            </div>

                            {% if form.instance.gambar %}
                                <div class="mt-3 p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <img src="{{ form.instance.gambar.url }}" alt="Current image" class="h-12 w-12 object-cover rounded-lg">
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">Gambar saat ini</p>
                                            <p class="text-xs text-gray-500">Upload gambar baru untuk mengganti</p>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            {% if form.gambar.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.gambar.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <!-- Dokumen Upload -->
                        <div>
                            <label for="{{ form.dokumen.id_for_label }}" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                                <i class="fas fa-file-alt text-purple-600 mr-1"></i>
                                Dokumen Pendukung
                            </label>
                            
                            <div class="border-2 border-gray-300 border-dashed rounded-lg p-4 hover:border-purple-400 transition-colors">
                                <div class="text-center">
                                    <i class="fas fa-file-upload text-2xl text-gray-400 mb-2"></i>
                                    <div class="text-sm text-gray-600">
                                        <label for="{{ form.dokumen.id_for_label }}" class="cursor-pointer text-purple-600 hover:text-purple-500">
                                            Upload dokumen
                                        </label>
                                        {{ form.dokumen }}
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">PDF, DOC, DOCX hingga 5MB</p>
                                </div>
                            </div>

                            {% if form.instance.dokumen %}
                                <div class="mt-3 p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-file-alt text-purple-600"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">Dokumen saat ini</p>
                                            <a href="{{ form.instance.dokumen.url }}" target="_blank" class="text-xs text-purple-600 hover:text-purple-800">
                                                <i class="fas fa-external-link-alt mr-1"></i>Lihat dokumen
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            {% if form.dokumen.errors %}
                                <p class="mt-1 text-xs text-red-600">{{ form.dokumen.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-3 sm:px-4 lg:px-6 py-3 sm:py-4 lg:py-6 bg-gray-50 border-t border-gray-200">
                <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                    <!-- Back Button -->
                    <a href="{% url 'inventaris:barang_list' %}" class="btn-secondary w-full sm:w-auto">
                        <i class="fas fa-arrow-left mr-2"></i>Kembali ke Daftar
                    </a>

                    <!-- Submit Button -->
                    <button type="submit" 
                            class="btn-success w-full sm:w-auto"
                            :disabled="isSubmitting">
                        <template x-if="!isSubmitting">
                            <span>
                                <i class="fas fa-save mr-2"></i>
                                {% if form.instance.pk %}Perbarui{% else %}Simpan{% endif %} Barang
                            </span>
                        </template>
                        <template x-if="isSubmitting">
                            <span class="flex items-center">
                                <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                                Menyimpan...
                            </span>
                        </template>
                    </button>
                </div>

                <!-- Form Errors -->
                {% if form.non_field_errors %}
                    <div class="mt-4 bg-red-50 border border-red-200 rounded-lg p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-red-400"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-red-800">Terjadi kesalahan:</h3>
                                <div class="mt-2 text-sm text-red-700">
                                    {{ form.non_field_errors.0 }}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </form>
    </div>

    <!-- Help Section -->
    <div class="mt-8 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <h4 class="text-lg font-semibold text-blue-800 mb-3">Tips Pengisian Formulir:</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-700">
                    <div>
                        <h5 class="font-semibold mb-2">Informasi Dasar:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Kode barang harus unik dan mengikuti format standar</li>
                            <li>Nama barang harus jelas dan deskriptif</li>
                            <li>Pilih kategori yang paling sesuai</li>
                            <li>Isi nomor seri jika tersedia untuk tracking</li>
                        </ul>
                    </div>
                    <div>
                        <h5 class="font-semibold mb-2">Status & Lokasi:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Kondisi "Baru" untuk barang yang belum pernah digunakan</li>
                            <li>Status "Aktif" berarti barang siap untuk digunakan/dipinjam</li>
                            <li>Pilih lokasi yang spesifik untuk memudahkan pencarian</li>
                            <li>Upload gambar dengan kualitas baik untuk identifikasi</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
{{ form.keterangan.media }}
{% endblock %}

{% block extra_js %}
<script>
// Ensure barangForm is available globally for Alpine.js
(function() {
    // Safely get harga perolehan value from Django template
    var hargaPerolehan = 0;
    {% if form.harga_perolehan.value %}
    try {
        var rawValueStr = '{{ form.harga_perolehan.value|default:"0" }}';
        var rawValue = parseFloat(rawValueStr.replace(/[^\d.-]/g, '')) || 0;
        hargaPerolehan = rawValue;
    } catch(e) {
        hargaPerolehan = 0;
    }
    {% endif %}
    
    window.barangForm = function() {
        return {
            isSubmitting: false,
            hargaPerolehan: hargaPerolehan,

        init() {
            this.setupImagePreview();
            this.setupValidation();
            this.setupDocumentPreview();
        },

        formatHarga() {
            // Format currency display for harga perolehan
            const hargaInput = document.getElementById('{{ form.harga_perolehan.id_for_label }}');
            if (hargaInput && hargaInput.value) {
                const value = parseFloat(hargaInput.value) || 0;
                // Optional: Add formatting display if needed
            }
        },

        setupImagePreview() {
            const imageInput = document.getElementById('{{ form.gambar.id_for_label }}');
            const previewContainer = document.getElementById('image-preview-container');
            const preview = document.getElementById('image-preview');
            const placeholder = document.getElementById('upload-placeholder');

            if (imageInput) {
                imageInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        // Check file size
                        if (file.size > 2 * 1024 * 1024) { // 2MB
                            showError('File Terlalu Besar', 'File gambar terlalu besar. Maksimal 2MB.');
                            e.target.value = '';
                            return;
                        }
                        
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            preview.src = e.target.result;
                            previewContainer.classList.remove('hidden');
                            placeholder.classList.add('hidden');
                        }
                        reader.readAsDataURL(file);
                    }
                });
            }
        },

        setupDocumentPreview() {
            const documentInput = document.getElementById('{{ form.dokumen.id_for_label }}');
            
            if (documentInput) {
                documentInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        // Check file size
                        if (file.size > 5 * 1024 * 1024) { // 5MB
                            showError('File Terlalu Besar', 'File dokumen terlalu besar. Maksimal 5MB.');
                            e.target.value = '';
                            return;
                        }
                        
                        // Check file type
                        const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
                        if (!allowedTypes.includes(file.type)) {
                            showError('Tipe File Tidak Didukung', 'Gunakan PDF, DOC, atau DOCX.');
                            e.target.value = '';
                            return;
                        }
                    }
                });
            }
        },
        
        setupValidation() {
            // Real-time validation
            const form = document.querySelector('form');
            const inputs = form.querySelectorAll('input[required], select[required]');
            
            inputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (!this.value) {
                        this.classList.add('border-red-300');
                    } else {
                        this.classList.remove('border-red-300');
                        this.classList.add('border-green-300');
                    }
                });
            });
        },

    }
    };
})();

// Also define it without window for backward compatibility (must be global for Alpine.js)
function barangForm() {
    return window.barangForm();
}

// Generate kode barang otomatis
function generateKodeBarang() {
    const kategoriSelect = document.getElementById('{{ form.kategori.id_for_label }}');
    const kodeBarangInput = document.getElementById('{{ form.kode_barang.id_for_label }}');
    const generateBtn = document.getElementById('generate-kode-btn');
    
    if (!kategoriSelect || !kategoriSelect.value) {
        showWarning('Pilih Kategori', 'Pilih kategori terlebih dahulu sebelum generate kode');
        if (kategoriSelect) kategoriSelect.focus();
        return;
    }

    // Disable button while generating
    if (generateBtn) {
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    }

    // Call AJAX endpoint
    fetch(`{% url 'inventaris:ajax_generate_kode_barang' %}?kategori_id=${kategoriSelect.value}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.kode_barang) {
                kodeBarangInput.value = data.kode_barang;
                
                // Add visual feedback
                kodeBarangInput.classList.add('border-green-500', 'bg-green-50');
                setTimeout(() => {
                    kodeBarangInput.classList.remove('border-green-500', 'bg-green-50');
                }, 2000);
                
                // Show success notification
                showSuccess('Kode Berhasil Di-generate', `Kode barang: ${data.kode_barang}`, { duration: 3000 });
            } else {
                showError('Gagal Generate', data.error || 'Gagal generate kode barang');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showError('Kesalahan', 'Terjadi kesalahan saat generate kode barang');
        })
        .finally(() => {
            // Re-enable button
            if (generateBtn) {
                generateBtn.disabled = false;
                generateBtn.innerHTML = '<i class="fas fa-magic"></i>';
            }
        });
}

// Auto-set today's date for tahun perolehan
document.addEventListener('DOMContentLoaded', function() {
    const tahunInput = document.getElementById('{{ form.tahun_perolehan.id_for_label }}');
    if (tahunInput && !tahunInput.value) {
        tahunInput.value = new Date().getFullYear();
    }
    
    // Add event listener for generate kode button
    const generateBtn = document.getElementById('generate-kode-btn');
    if (generateBtn) {
        generateBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            generateKodeBarang();
        });
        console.log('Generate kode button event listener attached');
    } else {
        console.error('Generate kode button not found!');
    }
    
    // Handle form submission - set loading state
    const form = document.getElementById('barang-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Get Alpine.js data if available
            try {
                if (typeof Alpine !== 'undefined' && Alpine.$data) {
                    const alpineData = Alpine.$data(form);
                    if (alpineData && typeof alpineData.isSubmitting !== 'undefined') {
                        alpineData.isSubmitting = true;
                    }
                }
            } catch(err) {
                // Alpine.js might not be loaded yet, that's okay
                console.log('Alpine.js not available yet');
            }
        });
    }
});
</script>
{% endblock %}