{% extends "admin/base.html" %}
{% load static %}
{% load currency_filters %}


{% block page_title %}Daftar Event{% endblock %}

{% block extra_css %}
<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between">
        <div class="flex-1 min-w-0">
            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                <i class="fas fa-calendar-alt mr-2 text-blue-600"></i>
                Daftar Event
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Kelola semua event HMI
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'event_admin:event_create' %}" 
               class="inline-flex items-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-plus mr-2"></i>
                Tambah Event
            </a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-4">
            <form method="get" class="space-y-3">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <!-- Search -->
                    <div>
                        <label for="search" class="block text-xs font-medium text-gray-700 mb-1">Cari Event</label>
                        <input type="text" name="search" id="search" 
                               value="{{ request.GET.search }}"
                               placeholder="Judul, lokasi..."
                               class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <!-- Status Filter -->
                    <div>
                        <label for="status" class="block text-xs font-medium text-gray-700 mb-1">Status</label>
                        <select name="status" id="status" 
                                class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Semua Status</option>
                            <option value="draft" {% if request.GET.status == 'draft' %}selected{% endif %}>Draft</option>
                            <option value="published" {% if request.GET.status == 'published' %}selected{% endif %}>Published</option>
                            <option value="ongoing" {% if request.GET.status == 'ongoing' %}selected{% endif %}>Ongoing</option>
                            <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
                            <option value="cancelled" {% if request.GET.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                        </select>
                    </div>
                    
                    <!-- Harga Minimum -->
                    <div>
                        <label for="harga_min" class="block text-xs font-medium text-gray-700 mb-1">Harga Minimum</label>
                        <div class="relative">
                            <span class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-xs font-medium">Rp</span>
                            <input type="text" 
                                   name="harga_min" 
                                   id="harga_min" 
                                   value="{% if request.GET.harga_min %}{{ request.GET.harga_min|number_idr }}{% endif %}"
                                   placeholder="0"
                                   class="w-full pl-8 pr-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-blue-500 focus:border-blue-500"
                                   data-original-value="{% if request.GET.harga_min %}{{ request.GET.harga_min }}{% else %}0{% endif %}">
                        </div>
                    </div>
                    
                    <!-- Harga Maksimum -->
                    <div>
                        <label for="harga_max" class="block text-xs font-medium text-gray-700 mb-1">Harga Maksimum</label>
                        <div class="relative">
                            <span class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-xs font-medium">Rp</span>
                            <input type="text" 
                                   name="harga_max" 
                                   id="harga_max" 
                                   value="{% if request.GET.harga_max %}{{ request.GET.harga_max|number_idr }}{% endif %}"
                                   placeholder="0"
                                   class="w-full pl-8 pr-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-blue-500 focus:border-blue-500"
                                   data-original-value="{% if request.GET.harga_max %}{{ request.GET.harga_max }}{% else %}0{% endif %}">
                        </div>
                    </div>
                </div>
                
                <div class="flex gap-2">
                    <button type="submit" 
                            class="inline-flex items-center px-3 py-1.5 border border-transparent rounded text-xs font-medium text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-search mr-1"></i>
                        Filter
                    </button>
                    <a href="{% url 'event_admin:event_list' %}" 
                       class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded text-xs font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-times mr-1"></i>
                        Clear
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Events List -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    <i class="fas fa-list mr-2 text-gray-400"></i>
                    Events ({{ events.count }})
                </h3>
            </div>
            
            {% if events %}
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                {% for event in events %}
                <div class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <!-- Event Image -->
                    <div class="relative h-48 bg-gradient-to-br from-blue-50 to-indigo-100">
                        {% if event.gambar_utama %}
                            <img src="{{ event.gambar_utama.url }}" 
                                 alt="{{ event.judul }}" 
                                 class="w-full h-full object-cover">
                        {% else %}
                            <!-- Dummy SVG for events without image -->
                            <div class="w-full h-full flex items-center justify-center">
                                <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                        {% endif %}
                        
                        <!-- Status Badge -->
                        <div class="absolute top-3 right-3">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                                {% if event.status == 'published' %}bg-green-500 text-white
                                {% elif event.status == 'ongoing' %}bg-yellow-500 text-white
                                {% elif event.status == 'completed' %}bg-blue-500 text-white
                                {% elif event.status == 'cancelled' %}bg-red-500 text-white
                                {% else %}bg-gray-500 text-white{% endif %}">
                                {{ event.get_status_display }}
                            </span>
                        </div>
                        
                        <!-- Featured Badge -->
                        {% if event.is_featured %}
                        <div class="absolute top-3 left-3">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-500 text-white">
                                <i class="fas fa-star mr-1"></i>
                                Featured
                            </span>
                        </div>
                        {% endif %}
                    </div>
                    
                    <!-- Event Content -->
                    <div class="p-4">
                        <h4 class="text-sm font-semibold text-gray-900 line-clamp-2 mb-2">{{ event.judul }}</h4>
                        
                        <div class="space-y-2 text-xs text-gray-600">
                            <div class="flex items-center">
                                <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
                                <span class="truncate">{{ event.lokasi }}</span>
                            </div>
                            
                            <div class="flex items-center">
                                <i class="fas fa-calendar mr-2 text-gray-400"></i>
                                <span>{{ event.tanggal_mulai|date:"M d, Y" }}</span>
                            </div>
                            
                            <div class="flex items-center">
                                <i class="fas fa-clock mr-2 text-gray-400"></i>
                                <span>{{ event.tanggal_mulai|date:"H:i" }}</span>
                            </div>
                            
                            {% if event.kuota %}
                            <div class="flex items-center">
                                <i class="fas fa-users mr-2 text-gray-400"></i>
                                <span>{{ event.kuota }} peserta</span>
                            </div>
                            {% endif %}
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="mt-4 flex flex-col gap-2">
                            <a href="{% url 'event_admin:event_detail' event.id %}" 
                               class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                <i class="fas fa-eye mr-1"></i>
                                View
                            </a>
                            <div class="flex gap-1">
                                <a href="{% url 'event_admin:event_edit' event.id %}" 
                                   class="flex-1 inline-flex items-center justify-center px-2 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{% url 'event_admin:event_registrations' event.id %}" 
                                   class="flex-1 inline-flex items-center justify-center px-2 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-users"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-12">
                <i class="fas fa-calendar-times text-4xl text-gray-300 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No events found</h3>
                <p class="text-gray-500 mb-4">Try adjusting your filters or create a new event.</p>
                <a href="{% url 'event_admin:event_create' %}" 
                   class="inline-flex items-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">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah Event Pertama
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    {% if events.has_other_pages %}
    <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
        <div class="flex-1 flex justify-between">
            <div class="flex items-center">
                <p class="text-xs text-gray-700">
                    Menampilkan {{ events.start_index }} - {{ events.end_index }} dari {{ events.paginator.count }} event
                </p>
            </div>
            <div class="flex items-center space-x-2">
                {% if events.has_previous %}
                <a href="?page={{ events.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
                   class="inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-chevron-left mr-1"></i>
                    Previous
                </a>
                {% endif %}
                
                <div class="flex space-x-1">
                    {% for num in events.paginator.page_range %}
                        {% if events.number == num %}
                        <span class="inline-flex items-center px-2 py-1 border border-gray-300 bg-blue-50 text-xs font-medium text-blue-600 rounded">
                            {{ num }}
                        </span>
                        {% elif num > events.number|add:'-2' and num < events.number|add:'2' %}
                        <a href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
                           class="inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                            {{ num }}
                        </a>
                        {% endif %}
                    {% endfor %}
                </div>
                
                {% if events.has_next %}
                <a href="?page={{ events.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
                   class="inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                    Next
                    <i class="fas fa-chevron-right ml-1"></i>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// Format harga input dengan format Indonesia (titik sebagai pemisah ribuan)
function formatHargaInput(input) {
    // Hapus semua karakter non-digit
    let value = input.value.replace(/[^\d]/g, '');
    
    // Format dengan titik sebagai pemisah ribuan
    if (value) {
        value = parseInt(value).toLocaleString('id-ID');
        input.value = value;
    } else {
        input.value = '';
    }
}

// Konversi harga yang diformat kembali ke angka untuk submit
function convertHargaToNumber(input) {
    let value = input.value.replace(/[^\d]/g, '');
    if (value) {
        input.value = value;
    } else {
        input.value = '';
    }
}

// Inisialisasi format harga saat halaman dimuat
document.addEventListener('DOMContentLoaded', function() {
    const hargaMinInput = document.getElementById('harga_min');
    const hargaMaxInput = document.getElementById('harga_max');
    
    // Format nilai awal jika sudah ada
    if (hargaMinInput && hargaMinInput.value) {
        formatHargaInput(hargaMinInput);
    }
    if (hargaMaxInput && hargaMaxInput.value) {
        formatHargaInput(hargaMaxInput);
    }
    
    // Format saat user mengetik
    if (hargaMinInput) {
        hargaMinInput.addEventListener('input', function() {
            formatHargaInput(this);
        });
        
        hargaMinInput.addEventListener('blur', function() {
            formatHargaInput(this);
        });
    }
    
    if (hargaMaxInput) {
        hargaMaxInput.addEventListener('input', function() {
            formatHargaInput(this);
        });
        
        hargaMaxInput.addEventListener('blur', function() {
            formatHargaInput(this);
        });
    }
    
    // Konversi ke angka saat form di-submit
    const filterForm = document.querySelector('form[method="get"]');
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            if (hargaMinInput) {
                convertHargaToNumber(hargaMinInput);
            }
            if (hargaMaxInput) {
                convertHargaToNumber(hargaMaxInput);
            }
        });
    }
});
</script>
{% endblock %}