{% extends "admin/base.html" %}

{% block title %}{% if is_edit %}Edit{% else %}Tambah{% endif %} Struktur Kepengurusan HMI{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                {% if is_edit %}Edit{% else %}Tambah{% endif %} Struktur Kepengurusan HMI
            </h1>
            <p class="text-gray-600 mt-1">
                {% if is_edit %}Perbarui informasi pengurus{% else %}Tambahkan pengurus baru{% endif %}
            </p>
        </div>
        <div>
            <a href="{% url 'admin_panel:tentang_hmi:struktur_kepengurusan' %}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Informasi Pengurus</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Data Pribadi -->
                        <div class="mb-6">
                            <h3 class="text-md font-semibold text-gray-800 mb-4 border-b border-gray-200 pb-2">Data Pribadi</h3>
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label for="nama_lengkap" class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap <span class="text-red-500">*</span></label>
                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="nama_lengkap" name="nama_lengkap" value="{% if struktur %}{{ struktur.nama_lengkap }}{% endif %}" required>
                                </div>
                                <div>
                                    <label for="nim" class="block text-sm font-medium text-gray-700 mb-2">NIM</label>
                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="nim" name="nim" value="{% if struktur %}{{ struktur.nim }}{% endif %}" placeholder="Nomor Induk Mahasiswa">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                                    <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="email" name="email" value="{% if struktur %}{{ struktur.email }}{% endif %}" placeholder="email@example.com">
                                </div>
                                <div>
                                    <label for="no_telepon" class="block text-sm font-medium text-gray-700 mb-2">No. Telepon</label>
                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="no_telepon" name="no_telepon" value="{% if struktur %}{{ struktur.no_telepon }}{% endif %}" placeholder="08xxxxxxxxxx">
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="bio" class="block text-sm font-medium text-gray-700 mb-2">Biografi</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                          id="bio" name="bio" rows="3" placeholder="Biografi singkat tentang pengurus...">{% if struktur %}{{ struktur.bio }}{% endif %}</textarea>
                            </div>

                            <div class="mb-4">
                                <label for="foto" class="block text-sm font-medium text-gray-700 mb-2">Foto Pengurus</label>
                                <input type="file" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="foto" name="foto" accept="image/*">
                                {% if struktur and struktur.foto %}
                                <div class="mt-2">
                                    <img src="{{ struktur.foto.url }}" alt="Current photo" class="h-20 w-20 object-cover rounded">
                                    <p class="text-xs text-gray-500 mt-1">Foto saat ini</p>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Data Jabatan -->
                        <div class="mb-6">
                            <h3 class="text-md font-semibold text-gray-800 mb-4 border-b border-gray-200 pb-2">Data Jabatan</h3>
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label for="nama_jabatan" class="block text-sm font-medium text-gray-700 mb-2">Nama Jabatan <span class="text-red-500">*</span></label>
                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="nama_jabatan" name="nama_jabatan" value="{% if struktur %}{{ struktur.nama_jabatan }}{% endif %}" required>
                                </div>
                                <div>
                                    <label for="jenis_jabatan" class="block text-sm font-medium text-gray-700 mb-2">Jenis Jabatan <span class="text-red-500">*</span></label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                            id="jenis_jabatan" name="jenis_jabatan" required>
                                        {% for value, label in jenis_choices %}
                                        <option value="{{ value }}" {% if struktur and struktur.jenis_jabatan == value %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="kategori" class="block text-sm font-medium text-gray-700 mb-2">Kategori Struktur <span class="text-red-500">*</span></label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                        id="kategori" name="kategori" required>
                                    <option value="">Pilih Kategori</option>
                                    {% for kategori in kategori_list %}
                                    <option value="{{ kategori.id }}" {% if struktur and struktur.kategori and struktur.kategori.id == kategori.id %}selected{% endif %}>
                                        {{ kategori.get_level_organisasi_display }} - {{ kategori.nama_kategori }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <p class="text-sm text-gray-500 mt-1">
                                    <a href="{% url 'admin_panel:tentang_hmi:kategori_struktur_create' %}" target="_blank" class="text-blue-600 hover:text-blue-800">
                                        <i class="fas fa-plus mr-1"></i>Tambah Kategori Baru
                                    </a>
                                </p>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label for="periode_mulai" class="block text-sm font-medium text-gray-700 mb-2">Periode Mulai <span class="text-red-500">*</span></label>
                                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="periode_mulai" name="periode_mulai" value="{% if struktur %}{{ struktur.periode_mulai|date:'Y-m-d' }}{% endif %}" required>
                                </div>
                                <div>
                                    <label for="periode_selesai" class="block text-sm font-medium text-gray-700 mb-2">Periode Selesai</label>
                                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="periode_selesai" name="periode_selesai" value="{% if struktur %}{{ struktur.periode_selesai|date:'Y-m-d' }}{% endif %}">
                                    <p class="text-xs text-gray-500 mt-1">Kosongkan jika masih aktif</p>
                                </div>
                            </div>
                        </div>

                        <!-- Struktur Organisasi -->
                        <div class="mb-6">
                            <h3 class="text-md font-semibold text-gray-800 mb-4 border-b border-gray-200 pb-2">Struktur Organisasi</h3>
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label for="parent" class="block text-sm font-medium text-gray-700 mb-2">Jabatan di Atasnya</label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                            id="parent" name="parent">
                                        <option value="">Tidak ada (Jabatan Tertinggi)</option>
                                        {% for parent in parent_options %}
                                        <option value="{{ parent.id }}" {% if struktur and struktur.parent and struktur.parent.id == parent.id %}selected{% endif %}>
                                            {{ parent.nama_lengkap }} - {{ parent.nama_jabatan }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div>
                                    <label for="urutan" class="block text-sm font-medium text-gray-700 mb-2">Urutan</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                           id="urutan" name="urutan" value="{% if struktur %}{{ struktur.urutan }}{% else %}1{% endif %}" min="1">
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="flex items-center">
                                    <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="aktif" name="aktif" 
                                           {% if not struktur or struktur.aktif %}checked{% endif %}>
                                    <label class="ml-2 text-sm text-gray-700" for="aktif">Aktif</label>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-save mr-2"></i>
                                {% if is_edit %}Perbarui{% else %}Simpan{% endif %}
                            </button>
                            <a href="{% url 'admin_panel:tentang_hmi:struktur_kepengurusan' %}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                                <i class="fas fa-times mr-2"></i>Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <!-- Preview Card -->
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Preview Pengurus</h6>
                </div>
                <div class="p-4 sm:p-6 text-center">
                    <div id="photo-preview" class="mb-3">
                        {% if struktur and struktur.foto %}
                        <img src="{{ struktur.foto.url }}" alt="Preview" class="h-24 w-24 object-cover rounded-full mx-auto">
                        {% else %}
                        <div class="h-24 w-24 bg-gray-200 rounded-full mx-auto flex items-center justify-center">
                            <i class="fas fa-user text-2xl text-gray-400"></i>
                        </div>
                        {% endif %}
                    </div>
                    <div id="name-preview" class="font-semibold text-gray-900">{% if struktur %}{{ struktur.nama_lengkap }}{% else %}Nama Pengurus{% endif %}</div>
                    <div id="position-preview" class="text-sm text-gray-600">{% if struktur %}{{ struktur.nama_jabatan }}{% else %}Jabatan{% endif %}</div>
                </div>
            </div>

            <!-- Kategori Management -->
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Kelola Kategori</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <p class="text-sm text-gray-600 mb-4">Tambahkan kategori struktur organisasi baru</p>
                    <a href="{% url 'admin_panel:tentang_hmi:kategori_struktur_create' %}" target="_blank" 
                       class="inline-flex items-center px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm">
                        <i class="fas fa-plus mr-2"></i>Tambah Kategori
                    </a>
                </div>
            </div>

            <!-- Anggota Integration -->
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Integrasi Anggota</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <p class="text-sm text-gray-600 mb-4">Pilih dari data anggota yang sudah ada</p>
                    <select id="anggota-select" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">Pilih Anggota</option>
                        {% for anggota in anggota_list %}
                        <option value="{{ anggota.id }}" data-nama="{{ anggota.nama_lengkap }}" data-nim="{{ anggota.nim }}" data-email="{{ anggota.email }}" data-telepon="{{ anggota.no_telepon }}">
                            {{ anggota.nama_lengkap }} ({{ anggota.nim }})
                        </option>
                        {% endfor %}
                    </select>
                    <button type="button" id="fill-from-anggota" class="mt-2 w-full px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                        <i class="fas fa-user-plus mr-1"></i>Isi Data dari Anggota
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Photo preview
    const fotoInput = document.getElementById('foto');
    const photoPreview = document.getElementById('photo-preview');
    
    fotoInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                photoPreview.innerHTML = `<img src="${e.target.result}" alt="Preview" class="h-24 w-24 object-cover rounded-full mx-auto">`;
            };
            reader.readAsDataURL(this.files[0]);
        }
    });

    // Name and position preview
    const namaInput = document.getElementById('nama_lengkap');
    const jabatanInput = document.getElementById('nama_jabatan');
    const namePreview = document.getElementById('name-preview');
    const positionPreview = document.getElementById('position-preview');
    
    namaInput.addEventListener('input', function() {
        namePreview.textContent = this.value || 'Nama Pengurus';
    });
    
    jabatanInput.addEventListener('input', function() {
        positionPreview.textContent = this.value || 'Jabatan';
    });

    // Fill from anggota
    const anggotaSelect = document.getElementById('anggota-select');
    const fillButton = document.getElementById('fill-from-anggota');
    
    fillButton.addEventListener('click', function() {
        const selectedOption = anggotaSelect.options[anggotaSelect.selectedIndex];
        if (selectedOption.value) {
            document.getElementById('nama_lengkap').value = selectedOption.dataset.nama;
            document.getElementById('nim').value = selectedOption.dataset.nim;
            document.getElementById('email').value = selectedOption.dataset.email;
            document.getElementById('no_telepon').value = selectedOption.dataset.telepon;
            
            // Update preview
            namePreview.textContent = selectedOption.dataset.nama;
        }
    });
});
</script>
{% endblock %}