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

{% block title %}Absen Kegiatan - HMI Anggota{% endblock %}

{% block content %}
<div class="px-4 py-6 space-y-6">
    <!-- Header -->
    <div class="hmi-green rounded-2xl p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">Absen Kegiatan</h1>
                <p class="text-green-100">{{ kegiatan.nama|default:"Pilih Kegiatan" }}</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-calendar-check text-3xl text-white"></i>
            </div>
        </div>
    </div>

    {% if absensi %}
    <!-- Absensi Info -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Informasi Absensi</h3>
        <div class="space-y-3">
            <div class="flex items-center space-x-3">
                <i class="fas fa-calendar text-blue-600"></i>
                <div>
                    <p class="font-medium text-gray-900">{{ absensi.nama_kegiatan }}</p>
                    <p class="text-sm text-gray-600">{{ absensi.tanggal_kegiatan|date:"d M Y" }} • {{ absensi.jam_mulai }} - {{ absensi.jam_selesai }}</p>
                <p class="text-xs text-gray-500 mt-1">Kode: {{ absensi.kode }}</p>
                </div>
            </div>
            <div class="flex items-center space-x-2">
                <i class="fas fa-map-marker-alt text-green-600"></i>
                <span class="text-sm text-gray-600">{{ absensi.lokasi_kegiatan }}</span>
            </div>
            {% if absensi.deskripsi_kegiatan %}
            <div class="flex items-start space-x-2">
                <i class="fas fa-info-circle text-blue-600 mt-1"></i>
                <div class="text-sm text-gray-600 prose prose-sm max-w-none">{{ absensi.deskripsi_kegiatan|safe }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Absensi Form -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <form method="post" class="space-y-6">
            {% csrf_token %}
            
            <h3 class="text-lg font-semibold text-gray-900">Form Absensi</h3>
            
            {% if is_already_absent %}
            {% if is_cancelled %}
            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-ban text-red-600"></i>
                    <div>
                        <p class="text-sm font-medium text-red-800">Absensi Anda Ditolak/Dibatalkan</p>
                        <p class="text-xs text-red-600 mt-1">Absensi Anda telah dibatalkan oleh admin. Silakan hubungi admin untuk informasi lebih lanjut.</p>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                    <p class="text-sm text-yellow-800">Anda sudah melakukan absensi untuk kegiatan ini</p>
                </div>
            </div>
            {% endif %}
            {% endif %}

            <div>
                <label for="kode_absensi" class="block text-sm font-medium text-gray-700 mb-2">
                    Kode Absensi
                </label>
                <input type="text" id="kode_absensi" name="kode_absensi" 
                       class="w-full px-3 py-3 border border-gray-300 rounded-lg bg-gray-50 focus:ring-2 focus:ring-green-500 focus:border-green-500"
                       placeholder="Masukkan kode absensi"
                       value="{{ absensi.kode }}" readonly>
                <p class="mt-1 text-xs text-gray-500">Kode absensi akan terisi otomatis</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Status Kehadiran <span class="text-red-500">*</span>
                </label>
                <div class="space-y-2">
                    <label class="flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="status" value="hadir" class="text-green-600 focus:ring-green-500" required>
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-check-circle text-green-600"></i>
                            <span class="font-medium text-gray-900">Hadir</span>
                        </div>
                    </label>
                    <label class="flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="status" value="terlambat" class="text-yellow-600 focus:ring-yellow-500" required>
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-clock text-yellow-600"></i>
                            <span class="font-medium text-gray-900">Terlambat</span>
                        </div>
                    </label>
                    <label class="flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="status" value="tidak_hadir" class="text-red-600 focus:ring-red-500" required>
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-times-circle text-red-600"></i>
                            <span class="font-medium text-gray-900">Tidak Hadir</span>
                        </div>
                    </label>
                </div>
            </div>

            <div id="alasanContainer" class="hidden">
                <label for="alasan" class="block text-sm font-medium text-gray-700 mb-2">
                    Alasan Tidak Hadir
                </label>
                <textarea id="alasan" name="alasan" rows="3"
                          class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                          placeholder="Jelaskan alasan tidak hadir"></textarea>
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                <div class="flex items-start space-x-2">
                    <i class="fas fa-info-circle text-blue-600 mt-0.5"></i>
                    <div class="text-xs text-blue-800">
                        <p class="font-medium mb-1">Informasi:</p>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Jam masuk dan keluar akan terisi otomatis berdasarkan waktu absensi</li>
                            <li>Jika memilih "Tidak Hadir", mohon isi alasan</li>
                        </ul>
                    </div>
            </div>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-green-700 transition-colors">
                <i class="fas fa-calendar-check mr-2"></i>
                Submit Absensi
            </button>
        </form>
    </div>

    {% else %}
    <!-- No Activity Available -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div class="text-center py-8 text-gray-500">
            <i class="fas fa-calendar-times text-6xl mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Tidak ada kegiatan</h3>
            <p class="text-gray-600 mb-4">Belum ada kegiatan yang tersedia untuk absensi</p>
                <a href="{% url 'anggota:event_list' %}" class="bg-green-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                <i class="fas fa-calendar-alt mr-1"></i>
                Lihat Kegiatan
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Available Activities -->
    {% if kegiatan_available %}
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Kegiatan Tersedia</h3>
        <div class="space-y-3">
            {% for kegiatan in kegiatan_available %}
            <a href="{% url 'anggota:absen_event_detail' event.id %}" class="flex items-center space-x-3 p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar text-green-600"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="font-medium text-gray-900 truncate">{{ kegiatan.nama }}</p>
                    <p class="text-sm text-gray-600">{{ kegiatan.tanggal|date:"d M Y" }} • {{ kegiatan.jam_mulai }}</p>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </a>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <!-- No Absensi Available -->
    <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 text-center">
        <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak Ada Absensi</h3>
        <p class="text-gray-600 mb-4">Admin belum membuat absensi untuk hari ini</p>
        <a href="{% url 'anggota:absensi' %}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
            <i class="fas fa-arrow-left mr-2"></i>
            Kembali ke Absensi
        </a>
    </div>
    {% endif %}
</div>

<script>
    // Form validation dan show/hide alasan
    const form = document.querySelector('form');
    if (form) {
        // Show/hide alasan field berdasarkan status
        const statusInputs = document.querySelectorAll('input[name="status"]');
        const alasanContainer = document.getElementById('alasanContainer');
        const alasanField = document.getElementById('alasan');
        
        statusInputs.forEach(input => {
            input.addEventListener('change', function() {
                if (this.value === 'tidak_hadir') {
                    alasanContainer.classList.remove('hidden');
                    alasanField.setAttribute('required', 'required');
                } else {
                    alasanContainer.classList.add('hidden');
                    alasanField.removeAttribute('required');
                    alasanField.value = '';
                }
            });
        });
        
        form.addEventListener('submit', function(e) {
            const status = document.querySelector('input[name="status"]:checked');
            if (!status) {
                e.preventDefault();
                alert('Pilih status kehadiran!');
                return;
            }
            
            // Validasi alasan jika tidak hadir
            if (status.value === 'tidak_hadir') {
                const alasan = alasanField.value.trim();
                if (!alasan) {
                e.preventDefault();
                    alert('Mohon isi alasan jika tidak hadir!');
                    alasanField.focus();
                return;
                }
            }
        });
    }
</script>
{% endblock %}