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

{% block title %}
{% if action == 'create' %}Buat Absensi - Admin Panel{% else %}Edit Absensi - Admin Panel{% endif %}
{% endblock %}

{% block extra_css %}
{% if form %}{{ form.media.css }}{% endif %}
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-4">
                <div class="flex-1 min-w-0">
                    <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-{% if action == 'create' %}plus{% else %}edit{% endif %} text-blue-600 mr-3"></i>
                        {% if action == 'create' %}Buat Absensi{% else %}Edit Absensi{% endif %}
                    </h1>
                    <p class="mt-1 text-sm text-gray-500">
                        {% if action == 'create' %}Buat absensi baru untuk kegiatan yang akan diikuti anggota{% else %}Edit data absensi yang sudah ada{% endif %}
                    </p>
                </div>
                <div class="mt-4 sm:mt-0">
                    <a href="{% url 'admin_panel:anggota_absen_list' %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Form Section -->
            <div class="lg:col-span-2">
                <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-3 sm:px-6">
                        <h3 class="text-lg font-semibold text-white flex items-center">
                            <i class="fas fa-form mr-2 text-blue-200"></i>
                            Form Absensi
                        </h3>
                    </div>
                    <div class="p-4 sm:p-6">
                        <form method="POST" enctype="multipart/form-data" class="space-y-6">
                            {% csrf_token %}
                            
                            {% if form %}
                            <!-- Display form errors -->
                            {% if form.non_field_errors %}
                            <div class="bg-red-50 border border-red-200 rounded-md 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">Error</h3>
                                        <div class="mt-2 text-sm text-red-700">
                                            {{ form.non_field_errors }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                            <!-- Kegiatan & Event ID -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <!-- Kegiatan -->
                                <div>
                                    <label for="{{ form.nama_kegiatan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.nama_kegiatan.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.nama_kegiatan }}
                                    {% if form.nama_kegiatan.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.nama_kegiatan.errors.0 }}</p>
                                    {% endif %}
                                </div>

                                <!-- Event ID -->
                                <div>
                                    <label for="{{ form.event_id.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.event_id.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.event_id }}
                                    {% if form.event_id.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.event_id.errors.0 }}</p>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Kode Absensi & Tanggal Event -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <!-- Kode Absensi -->
                                <div>
                                    <label for="{{ form.kode.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.kode.label }} <span class="text-red-500">*</span>
                                        <span class="text-xs text-gray-500 font-normal ml-2">(Otomatis)</span>
                                    </label>
                                    {{ form.kode }}
                                    {% if form.kode.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.kode.errors.0 }}</p>
                                    {% endif %}
                                    <p class="mt-1 text-xs text-gray-500">Kode akan dibuat otomatis dari nama kegiatan dan tahun</p>
                                </div>

                                <!-- Tanggal Event -->
                                <div>
                                    <label for="{{ form.tanggal_kegiatan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.tanggal_kegiatan.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.tanggal_kegiatan }}
                                    {% if form.tanggal_kegiatan.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.tanggal_kegiatan.errors.0 }}</p>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Jam Mulai & Selesai Event -->
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <!-- Jam Mulai -->
                                <div>
                                    <label for="{{ form.jam_mulai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.jam_mulai.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.jam_mulai }}
                                    {% if form.jam_mulai.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.jam_mulai.errors.0 }}</p>
                                    {% endif %}
                                </div>

                                <!-- Jam Selesai -->
                                <div>
                                    <label for="{{ form.jam_selesai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ form.jam_selesai.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.jam_selesai }}
                                    {% if form.jam_selesai.errors %}
                                    <p class="mt-1 text-sm text-red-600">{{ form.jam_selesai.errors.0 }}</p>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Lokasi Kegiatan -->
                                <div>
                                <label for="{{ form.lokasi_kegiatan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.lokasi_kegiatan.label }} <span class="text-red-500">*</span>
                                    </label>
                                {{ form.lokasi_kegiatan }}
                                {% if form.lokasi_kegiatan.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.lokasi_kegiatan.errors.0 }}</p>
                                {% endif %}
                            </div>

                            <!-- Deskripsi Event -->
                            <div>
                                <label for="{{ form.deskripsi_kegiatan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    {{ form.deskripsi_kegiatan.label }} <span class="text-red-500">*</span>
                                </label>
                                {{ form.deskripsi_kegiatan }}
                                {% if form.deskripsi_kegiatan.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.deskripsi_kegiatan.errors.0 }}</p>
                                {% endif %}
                            </div>
                            {% else %}
                            <div class="bg-red-50 border border-red-200 rounded-md p-4">
                                <p class="text-sm text-red-700">Form tidak tersedia. Silakan refresh halaman.</p>
                            </div>
                            {% endif %}

                            <!-- Submit Button -->
                            <div class="flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-200">
                                <a href="{% url 'admin_panel:anggota_absen_list' %}" 
                                   class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                                    <i class="fas fa-times mr-2"></i>
                                    Batal
                                </a>
                                <button type="submit" 
                                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    <i class="fas fa-save mr-2"></i>
                                    {% if action == 'create' %}Simpan{% else %}Update{% endif %}
                                </button>
                            </div>
                        </form>
                </div>
            </div>
        </div>

            <!-- Sidebar Info -->
            <div class="lg:col-span-1">
                <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                    <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 py-3">
                        <h3 class="text-lg font-semibold text-white flex items-center">
                            <i class="fas fa-info-circle mr-2 text-green-200"></i>
                            Informasi
                        </h3>
                    </div>
                    <div class="p-4 sm:p-6 space-y-4">
                        <!-- Tips Pengisian -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-blue-800 flex items-center mb-2">
                                <i class="fas fa-lightbulb mr-2"></i>
                                Tips Membuat Absensi
                            </h4>
                            <ul class="text-sm text-blue-700 space-y-1">
                                <li>• Masukkan nama kegiatan dengan jelas</li>
                                <li>• Masukkan Event ID yang unik</li>
                                <li>• Buat kode absensi yang mudah diingat</li>
                                <li>• Tentukan tanggal dan jam event</li>
                                <li>• Isi lokasi dengan jelas</li>
                                <li>• Deskripsi event akan membantu anggota</li>
                                <li>• Absensi akan muncul di halaman anggota</li>
                            </ul>
                        </div>

                        <!-- Perhatian -->
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-yellow-800 flex items-center mb-2">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                Perhatian
                            </h4>
                            <p class="text-sm text-yellow-700">
                                Pastikan data yang diisi sudah benar sebelum menyimpan. 
                                Absensi yang dibuat akan muncul di halaman anggota untuk diisi.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if form %}{{ form.media.js }}{% endif %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate kode absensi (nama kegiatan + tahun)
    const kodeAbsensiInput = document.getElementById('id_kode');
    const namaKegiatanInput = document.getElementById('id_nama_kegiatan');
    const tanggalKegiatanInput = document.getElementById('id_tanggal_kegiatan');
    
    if (kodeAbsensiInput && namaKegiatanInput && tanggalKegiatanInput) {
    function generateKodeAbsensi() {
        if (namaKegiatanInput.value && tanggalKegiatanInput.value) {
                // Ambil nama kegiatan (hapus spasi, ambil 3-5 karakter pertama)
                let nama = namaKegiatanInput.value.trim().replace(/\s+/g, '').toUpperCase();
                if (nama.length > 5) {
                    nama = nama.substring(0, 5);
                }
                
                // Ambil tahun dari tanggal
                const tahun = tanggalKegiatanInput.value.substring(0, 4);
                
                // Gabungkan: NAMAKEGIATAN + TAHUN
                const kode = nama + tahun;
            kodeAbsensiInput.value = kode;
            } else if (namaKegiatanInput.value) {
                // Jika hanya nama kegiatan yang diisi, set placeholder
                kodeAbsensiInput.value = '';
        }
    }
    
    namaKegiatanInput.addEventListener('input', generateKodeAbsensi);
    tanggalKegiatanInput.addEventListener('change', generateKodeAbsensi);
        
        // Jangan generate otomatis saat halaman dimuat untuk create mode
        // Hanya generate jika user sudah mengisi nama dan tanggal
    }
    
    // Auto-fill jam selesai based on jam mulai
    const jamMulaiInput = document.getElementById('id_jam_mulai');
    const jamSelesaiInput = document.getElementById('id_jam_selesai');
    
    if (jamMulaiInput && jamSelesaiInput) {
    jamMulaiInput.addEventListener('change', function() {
        if (this.value && !jamSelesaiInput.value) {
            const jamMulai = new Date('2000-01-01 ' + this.value);
            jamMulai.setHours(jamMulai.getHours() + 2); // Tambah 2 jam
            const jamSelesai = jamMulai.toTimeString().substring(0, 5);
            jamSelesaiInput.value = jamSelesai;
        }
    });
    }
});
</script>
{% endblock %}