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

{% block title %}Daftar 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">Daftar Kegiatan</h1>
                <p class="text-green-100">{{ kegiatan.nama }}</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-user-plus text-3xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Kegiatan 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 Kegiatan</h3>
        <div class="space-y-4">
            <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">{{ kegiatan.nama }}</p>
                    <p class="text-sm text-gray-600">{{ kegiatan.tanggal|date:"d M Y" }} • {{ kegiatan.jam_mulai }} - {{ kegiatan.jam_selesai }}</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">{{ kegiatan.lokasi }}</span>
            </div>
            <div class="flex items-center space-x-2">
                <i class="fas fa-users text-purple-600"></i>
                <span class="text-sm text-gray-600">{{ kegiatan.terdaftar }}/{{ kegiatan.kuota }} peserta terdaftar</span>
            </div>
        </div>
    </div>

    <!-- Registration 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 Pendaftaran</h3>
            
            <div>
                <label for="motivasi" class="block text-sm font-medium text-gray-700 mb-2">
                    Motivasi Mengikuti Kegiatan
                </label>
                <textarea id="motivasi" name="motivasi" rows="4" required
                          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 motivasi Anda untuk mengikuti kegiatan ini..."></textarea>
            </div>

            <div>
                <label for="harapan" class="block text-sm font-medium text-gray-700 mb-2">
                    Harapan dari Kegiatan
                </label>
                <textarea id="harapan" name="harapan" 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="Apa yang Anda harapkan dari kegiatan ini?"></textarea>
            </div>

            <div>
                <label for="kontribusi" class="block text-sm font-medium text-gray-700 mb-2">
                    Kontribusi yang Dapat Diberikan
                </label>
                <textarea id="kontribusi" name="kontribusi" 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="Kontribusi apa yang dapat Anda berikan untuk kegiatan ini?"></textarea>
            </div>

            <div>
                <label for="pengalaman" class="block text-sm font-medium text-gray-700 mb-2">
                    Pengalaman Terkait
                </label>
                <textarea id="pengalaman" name="pengalaman" 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="Ceritakan pengalaman Anda yang relevan dengan kegiatan ini"></textarea>
            </div>

            <div>
                <label for="transportasi" class="block text-sm font-medium text-gray-700 mb-2">
                    Transportasi
                </label>
                <select id="transportasi" name="transportasi" required
                        class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    <option value="">Pilih transportasi</option>
                    <option value="sendiri">Kendaraan Pribadi</option>
                    <option value="umum">Transportasi Umum</option>
                    <option value="carpool">Carpool</option>
                    <option value="lainnya">Lainnya</option>
                </select>
            </div>

            <div>
                <label for="kebutuhan_khusus" class="block text-sm font-medium text-gray-700 mb-2">
                    Kebutuhan Khusus
                </label>
                <textarea id="kebutuhan_khusus" name="kebutuhan_khusus" rows="2"
                          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="Jika ada kebutuhan khusus (makanan, aksesibilitas, dll)"></textarea>
            </div>

            <!-- Terms and Conditions -->
            <div class="flex items-start space-x-3">
                <input type="checkbox" id="terms" class="mt-1 h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" required>
                <label for="terms" class="text-sm text-gray-700">
                    Saya menyetujui <a href="#" class="text-green-600 hover:text-green-700 underline">syarat dan ketentuan</a> pendaftaran kegiatan ini
                </label>
            </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-user-plus mr-2"></i>
                Daftar Kegiatan
            </button>
        </form>
    </div>

    <!-- Kegiatan Details -->
    <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">Detail Kegiatan</h3>
        <div class="space-y-3">
            <div class="flex items-start space-x-3">
                <i class="fas fa-info-circle text-blue-600 mt-1"></i>
                <div>
                    <p class="font-medium text-gray-900">Deskripsi</p>
                    <p class="text-sm text-gray-600">{{ kegiatan.deskripsi }}</p>
                </div>
            </div>
            
            <div class="flex items-start space-x-3">
                <i class="fas fa-clock text-green-600 mt-1"></i>
                <div>
                    <p class="font-medium text-gray-900">Jadwal</p>
                    <p class="text-sm text-gray-600">{{ kegiatan.tanggal|date:"d M Y" }} • {{ kegiatan.jam_mulai }} - {{ kegiatan.jam_selesai }}</p>
                </div>
            </div>
            
            <div class="flex items-start space-x-3">
                <i class="fas fa-map-marker-alt text-red-600 mt-1"></i>
                <div>
                    <p class="font-medium text-gray-900">Lokasi</p>
                    <p class="text-sm text-gray-600">{{ kegiatan.lokasi }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Registration Status -->
    <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">Status Pendaftaran</h3>
        <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-users text-blue-600"></i>
                    <span class="font-medium text-gray-900">Kuota Tersedia</span>
                </div>
                <span class="text-blue-600 font-bold">{{ kegiatan.kuota|add:"-"|add:kegiatan.terdaftar }} slot</span>
            </div>
            
            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-calendar-check text-green-600"></i>
                    <span class="font-medium text-gray-900">Status</span>
                </div>
                <span class="text-green-600 font-bold">Buka Pendaftaran</span>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <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">Aksi Cepat</h3>
        <div class="grid grid-cols-2 gap-3">
                <a href="{% url 'anggota:event_list' %}" class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-calendar-alt text-blue-600 text-xl"></i>
                <span class="font-medium text-gray-900">Lihat Semua Kegiatan</span>
            </a>
            <a href="{% url 'anggota:absensi' %}" class="flex items-center space-x-3 p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-calendar-check text-green-600 text-xl"></i>
                <span class="font-medium text-gray-900">Absensi</span>
            </a>
        </div>
    </div>
</div>

<script>
    // Form validation
    const form = document.querySelector('form');
    const motivasi = document.getElementById('motivasi');
    const terms = document.getElementById('terms');

    form.addEventListener('submit', function(e) {
        if (!motivasi.value.trim()) {
            e.preventDefault();
            alert('Motivasi mengikuti kegiatan harus diisi!');
            motivasi.focus();
            return;
        }
        
        if (!terms.checked) {
            e.preventDefault();
            alert('Anda harus menyetujui syarat dan ketentuan!');
            terms.focus();
            return;
        }
    });

    // Auto-resize textareas
    const textareas = document.querySelectorAll('textarea');
    textareas.forEach(textarea => {
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        });
    });
</script>
{% endblock %}