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

{% block title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Lokasi - Inventaris HMI{% endblock %}
{% block page_title %}{% if form.instance.pk %}Edit{% else %}Tambah{% endif %} Lokasi{% endblock %}
{% block page_subtitle %}{% if form.instance.pk %}Perbarui lokasi penyimpanan{% else %}Tambahkan lokasi penyimpanan baru{% endif %}{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-2 sm:px-4 lg:px-8">
    <!-- Header -->
    <div class="mb-3 sm:mb-4 lg:mb-8">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 sm:gap-3 lg:gap-4">
            <div class="flex-1">
                <h1 class="text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-900">
                    {% if form.instance.pk %}
                        <i class="fas fa-edit text-warning-600 mr-1.5 sm:mr-2 lg:mr-3"></i>Edit Lokasi
                    {% else %}
                        <i class="fas fa-map-marker-plus text-red-600 mr-1.5 sm:mr-2 lg:mr-3"></i>Tambah Lokasi Baru
                    {% endif %}
                </h1>
                <p class="mt-1 sm:mt-2 text-xs sm:text-sm lg:text-base text-gray-600">
                    {% if form.instance.pk %}
                        Perbarui informasi lokasi "{{ form.instance.nama }}"
                    {% else %}
                        Buat lokasi baru untuk penyimpanan barang inventaris
                    {% endif %}
                </p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                <a href="{% url 'inventaris:lokasi_list' %}" class="btn-secondary text-center">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-3 sm:px-4 lg:px-6 xl:px-8 py-3 sm:py-4 lg:py-6 border-b border-gray-200 bg-gradient-to-r from-red-50 to-red-100">
            <h3 class="text-base sm:text-lg font-semibold text-gray-900">
                <i class="fas fa-map-marker-alt text-red-600 mr-2"></i>
                Informasi Lokasi
            </h3>
            <p class="text-xs sm:text-sm text-gray-600 mt-1">Lengkapi detail lokasi penyimpanan barang</p>
        </div>

        <form method="post" class="px-3 sm:px-4 lg:px-6 xl:px-8 py-3 sm:py-4 lg:py-6 space-y-3 sm:space-y-4 lg:space-y-8">
            {% csrf_token %}

            <!-- Basic Location Info -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-info-circle text-red-600 mr-2"></i>
                    Identitas Lokasi
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2.5 sm:gap-3 lg:gap-4 xl:gap-6">
                    <!-- Kode Lokasi -->
                    <div>
                        <label for="{{ form.kode.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-hashtag text-red-600 mr-1"></i>
                            Kode Lokasi <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            {{ form.kode }}
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                <button type="button" onclick="generateKodeLokasi()" class="text-red-600 hover:text-red-800 pointer-events-auto" title="Generate Kode Otomatis">
                                    <i class="fas fa-magic"></i>
                                </button>
                            </div>
                        </div>
                        {% if form.kode.errors %}
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ form.kode.errors.0 }}
                            </p>
                        {% endif %}
                        <div class="mt-2 text-xs text-gray-500">
                            <i class="fas fa-lightbulb mr-1"></i>
                            Format: G01, G02, R101, dll
                        </div>
                    </div>

                    <!-- Nama Lokasi -->
                    <div>
                        <label for="{{ form.nama.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-map-marker-alt text-red-600 mr-1"></i>
                            Nama Lokasi <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            {{ form.nama }}
                        </div>
                        {% if form.nama.errors %}
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ form.nama.errors.0 }}
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Detailed Location Info -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-building text-red-600 mr-2"></i>
                    Detail Lokasi
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
                    <!-- Gedung -->
                    <div>
                        <label for="{{ form.gedung.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-building text-red-600 mr-1"></i>
                            Gedung/Bangunan
                        </label>
                        <div class="relative">
                            {{ form.gedung }}
                        </div>
                        {% if form.gedung.errors %}
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ form.gedung.errors.0 }}
                            </p>
                        {% endif %}
                    </div>

                    <!-- Lantai -->
                    <div>
                        <label for="{{ form.lantai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-layer-group text-red-600 mr-1"></i>
                            Lantai
                        </label>
                        <div class="relative">
                            {{ form.lantai }}
                        </div>
                        {% if form.lantai.errors %}
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ form.lantai.errors.0 }}
                            </p>
                        {% endif %}
                    </div>

                    <!-- Ruangan -->
                    <div>
                        <label for="{{ form.ruangan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-door-open text-red-600 mr-1"></i>
                            Ruangan
                        </label>
                        <div class="relative">
                            {{ form.ruangan }}
                        </div>
                        {% if form.ruangan.errors %}
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ form.ruangan.errors.0 }}
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Deskripsi -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-align-left text-red-600 mr-2"></i>
                    Deskripsi Lokasi
                </h4>
                <div>
                    <label for="{{ form.deskripsi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Deskripsi Detail
                    </label>
                    <div class="relative">
                        {{ form.deskripsi }}
                    </div>
                    {% if form.deskripsi.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.deskripsi.errors.0 }}
                        </p>
                    {% endif %}
                    <div class="mt-2 text-xs text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Jelaskan detail lokasi untuk memudahkan pencarian barang
                    </div>
                </div>
            </div>

            <!-- Preview Section -->
            <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
                <h4 class="text-md font-semibold text-gray-900 mb-4">
                    <i class="fas fa-eye text-purple-600 mr-2"></i>
                    Preview Lokasi
                </h4>
                <div class="bg-white rounded-lg p-4 border border-gray-200">
                    <div class="flex items-start space-x-4">
                        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-red-600 text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h5 class="font-semibold text-gray-900" id="preview-nama">{{ form.nama.value|default:"[Nama Lokasi]" }}</h5>
                            <p class="text-sm text-gray-500" id="preview-kode">Kode: {{ form.kode.value|default:"[KODE]" }}</p>
                            <div class="mt-2 text-sm text-gray-600">
                                <span id="preview-alamat">
                                    <span id="preview-gedung">{{ form.gedung.value|default:"[Gedung]" }}</span>
                                    <span id="preview-lantai-text">{% if form.lantai.value %}, Lantai {{ form.lantai.value }}{% endif %}</span>
                                    <span id="preview-ruangan-text">{% if form.ruangan.value %}, Ruang {{ form.ruangan.value }}{% endif %}</span>
                                </span>
                            </div>
                            <p class="text-xs text-gray-400 mt-2" id="preview-deskripsi">{{ form.deskripsi.value|default:"[Deskripsi lokasi akan muncul di sini]" }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Errors -->
            {% if form.non_field_errors %}
                <div class="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 %}

            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row items-center justify-end space-y-2 sm:space-y-0 sm:space-x-4 pt-4 sm:pt-6 border-t border-gray-200">
                <a href="{% url 'inventaris:lokasi_list' %}" class="btn-secondary w-full sm:w-auto text-center">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
                <button type="submit" class="btn-primary w-full sm:w-auto text-center">
                    <i class="fas fa-save mr-2"></i>
                    {% if form.instance.pk %}Perbarui{% else %}Simpan{% endif %} Lokasi
                </button>
            </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 Membuat Lokasi:</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">Kode Lokasi:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Gunakan format singkat dan jelas</li>
                            <li>Contoh: G01 (Gedung 01), R101 (Ruang 101)</li>
                            <li>Konsisten dengan sistem penomoran</li>
                        </ul>
                    </div>
                    <div>
                        <h5 class="font-semibold mb-2">Detail Lokasi:</h5>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Isi nama lokasi yang mudah dikenali</li>
                            <li>Spesifikasi gedung, lantai, dan ruangan</li>
                            <li>Deskripsi membantu identifikasi lokasi</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Generate kode lokasi otomatis
function generateKodeLokasi() {
    const gedungInput = document.getElementById('{{ form.gedung.id_for_label }}');
    const lantaiInput = document.getElementById('{{ form.lantai.id_for_label }}');
    const ruanganInput = document.getElementById('{{ form.ruangan.id_for_label }}');
    const kodeInput = document.getElementById('{{ form.kode.id_for_label }}');
    
    let kode = '';
    
    // Generate based on building and floor
    const gedung = gedungInput.value.trim();
    const lantai = lantaiInput.value.trim();
    const ruangan = ruanganInput.value.trim();
    
    if (gedung) {
        // Extract first letter or number from building name
        const gedungCode = gedung.match(/\d+/) ? gedung.match(/\d+/)[0] : gedung.charAt(0).toUpperCase();
        kode = 'G' + gedungCode.padStart(2, '0');
        
        if (lantai) {
            kode += 'L' + lantai;
        }
        
        if (ruangan) {
            const ruanganNum = ruangan.match(/\d+/) ? ruangan.match(/\d+/)[0] : '01';
            kode = 'R' + ruanganNum.padStart(3, '0');
        }
    } else {
        // Default format
        const randomNum = Math.floor(Math.random() * 99) + 1;
        kode = 'LOK' + randomNum.toString().padStart(2, '0');
    }
    
    kodeInput.value = kode;
    updatePreview();
    
    // Visual feedback
    kodeInput.classList.add('border-green-300', 'bg-green-50');
    setTimeout(() => {
        kodeInput.classList.remove('border-green-300', 'bg-green-50');
    }, 2000);
}

// Update preview
function updatePreview() {
    const kode = document.getElementById('{{ form.kode.id_for_label }}').value || '[KODE]';
    const nama = document.getElementById('{{ form.nama.id_for_label }}').value || '[Nama Lokasi]';
    const gedung = document.getElementById('{{ form.gedung.id_for_label }}').value;
    const lantai = document.getElementById('{{ form.lantai.id_for_label }}').value;
    const ruangan = document.getElementById('{{ form.ruangan.id_for_label }}').value;
    const deskripsi = document.getElementById('{{ form.deskripsi.id_for_label }}').value || '[Deskripsi lokasi akan muncul di sini]';
    
    document.getElementById('preview-kode').textContent = `Kode: ${kode}`;
    document.getElementById('preview-nama').textContent = nama;
    
    // Build address string
    let alamat = gedung || '[Gedung]';
    if (lantai) alamat += `, Lantai ${lantai}`;
    if (ruangan) alamat += `, Ruang ${ruangan}`;
    
    document.getElementById('preview-alamat').textContent = alamat;
    document.getElementById('preview-deskripsi').textContent = deskripsi;
}

// Real-time preview updates
document.addEventListener('DOMContentLoaded', function() {
    const inputs = [
        '{{ form.kode.id_for_label }}', 
        '{{ form.nama.id_for_label }}', 
        '{{ form.gedung.id_for_label }}',
        '{{ form.lantai.id_for_label }}',
        '{{ form.ruangan.id_for_label }}',
        '{{ form.deskripsi.id_for_label }}'
    ];
    
    inputs.forEach(inputId => {
        const input = document.getElementById(inputId);
        if (input) {
            input.addEventListener('input', updatePreview);
        }
    });
    
    // Initial preview
    updatePreview();
    
    // Auto-generate kode when building info changes
    const gedungInput = document.getElementById('{{ form.gedung.id_for_label }}');
    const lantaiInput = document.getElementById('{{ form.lantai.id_for_label }}');
    const ruanganInput = document.getElementById('{{ form.ruangan.id_for_label }}');
    
    [gedungInput, lantaiInput, ruanganInput].forEach(input => {
        if (input) {
            input.addEventListener('blur', function() {
                const kodeInput = document.getElementById('{{ form.kode.id_for_label }}');
                if (!kodeInput.value.trim()) {
                    generateKodeLokasi();
                }
            });
        }
    });
});
</script>
{% endblock %}