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

{% block title %}Kelola Pendaftaran Event - Admin Panel{% endblock %}
{% block page_title %}Kelola Pendaftaran Event{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-3 sm:px-6 sm:py-4">
            <div class="flex items-center justify-between">
                <h1 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-clipboard-list mr-2 text-blue-200"></i>
                    Kelola Pendaftaran Event
                </h1>
                <div class="text-blue-200 text-sm">
                    Total: {{ pendaftaran.paginator.count }} pendaftaran
                </div>
            </div>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-gray-500 to-gray-600 px-4 py-3 sm:px-6 sm:py-4">
            <h3 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-filter mr-2 text-gray-200"></i>
                Filter & Pencarian
            </h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="info-card rounded-lg p-4 border-l-4 border-blue-500">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-search text-blue-500 mr-1"></i>Pencarian
                    </label>
                    <input type="text" name="search" value="{{ search_query }}" 
                           placeholder="Cari nama, email, atau event..." 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="info-card rounded-lg p-4 border-l-4 border-green-500">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-flag text-green-500 mr-1"></i>Status
                    </label>
                    <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option value="">Semua Status</option>
                        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
                        <option value="approved" {% if status_filter == 'approved' %}selected{% endif %}>Approved</option>
                        <option value="rejected" {% if status_filter == 'rejected' %}selected{% endif %}>Rejected</option>
                        <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    </select>
                </div>
                <div class="info-card rounded-lg p-4 border-l-4 border-purple-500">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calendar-alt text-purple-500 mr-1"></i>Event
                    </label>
                    <select name="event" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option value="">Semua Event</option>
                        {% for event in events %}
                        <option value="{{ event.id }}" {% if event_filter == event.id|stringformat:"s" %}selected{% endif %}>
                            {{ event.judul|truncatechars:50 }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit" 
                            class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 action-button">
                        <i class="fas fa-search mr-2"></i>
                        Filter
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Pendaftaran List -->
    <div class="bg-white shadow-lg rounded-xl border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 py-3 sm:px-6 sm:py-4">
            <h3 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-list mr-2 text-green-200"></i>
                Daftar Pendaftaran
            </h3>
        </div>
        
        {% if pendaftaran %}
        <div class="p-4 sm:p-6">
            <!-- Desktop Table -->
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Peserta</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kontak</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for item in pendaftaran %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                            <i class="fas fa-user text-gray-600"></i>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ item.nama_lengkap }}</div>
                                        <div class="text-sm text-gray-500">{{ item.peserta.nama_lengkap }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ item.event.judul|truncatechars:40 }}</div>
                                <div class="text-sm text-gray-500">{{ item.event.tanggal_mulai|date:"d M Y" }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ item.email }}</div>
                                <div class="text-sm text-gray-500">{{ item.no_telepon }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-badge
                                            {% if item.status == 'approved' %}bg-green-100 text-green-800
                                            {% elif item.status == 'rejected' %}bg-red-100 text-red-800
                                            {% elif item.status == 'cancelled' %}bg-gray-100 text-gray-800
                                            {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                                    <i class="fas fa-circle mr-1 text-xs"></i>
                                    {{ item.get_status_display }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ item.created_at|date:"d M Y H:i" }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <button onclick="updateStatus({{ item.id }}, 'approved')" 
                                            class="text-green-600 hover:text-green-900 action-button" title="Approve">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button onclick="updateStatus({{ item.id }}, 'rejected')" 
                                            class="text-red-600 hover:text-red-900 action-button" title="Reject">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    <button onclick="viewDetail({{ item.id }})" 
                                            class="text-blue-600 hover:text-blue-900 action-button" title="Detail">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- Mobile Cards -->
            <div class="md:hidden space-y-4">
                {% for item in pendaftaran %}
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex items-center">
                            <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center mr-3">
                                <i class="fas fa-user text-gray-600"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-semibold text-gray-900">{{ item.nama_lengkap }}</h4>
                                <p class="text-xs text-gray-500">{{ item.peserta.nama_lengkap }}</p>
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium status-badge
                                    {% if item.status == 'approved' %}bg-green-100 text-green-800
                                    {% elif item.status == 'rejected' %}bg-red-100 text-red-800
                                    {% elif item.status == 'cancelled' %}bg-gray-100 text-gray-800
                                    {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                            {{ item.get_status_display }}
                        </span>
                    </div>
                    
                    <div class="space-y-2 mb-3">
                        <div class="text-sm">
                            <span class="font-medium text-gray-700">Event:</span>
                            <span class="text-gray-600">{{ item.event.judul|truncatechars:30 }}</span>
                        </div>
                        <div class="text-sm">
                            <span class="font-medium text-gray-700">Email:</span>
                            <span class="text-gray-600">{{ item.email }}</span>
                        </div>
                        <div class="text-sm">
                            <span class="font-medium text-gray-700">Tanggal:</span>
                            <span class="text-gray-600">{{ item.created_at|date:"d M Y H:i" }}</span>
                        </div>
                    </div>
                    
                    <div class="flex space-x-2">
                        <button onclick="updateStatus({{ item.id }}, 'approved')" 
                                class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-transparent text-xs font-medium rounded text-white bg-green-600 hover:bg-green-700 action-button">
                            <i class="fas fa-check mr-1"></i>Approve
                        </button>
                        <button onclick="updateStatus({{ item.id }}, 'rejected')" 
                                class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-transparent text-xs font-medium rounded text-white bg-red-600 hover:bg-red-700 action-button">
                            <i class="fas fa-times mr-1"></i>Reject
                        </button>
                        <button onclick="viewDetail({{ item.id }})" 
                                class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-transparent text-xs font-medium rounded text-white bg-blue-600 hover:bg-blue-700 action-button">
                            <i class="fas fa-eye mr-1"></i>Detail
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- Pagination -->
            {% if pendaftaran.has_other_pages %}
            <div class="mt-6 flex items-center justify-between">
                <div class="text-sm text-gray-700">
                    Menampilkan {{ pendaftaran.start_index }} sampai {{ pendaftaran.end_index }} dari {{ pendaftaran.paginator.count }} pendaftaran
                </div>
                <div class="flex space-x-1">
                    {% if pendaftaran.has_previous %}
                    <a href="?page={{ pendaftaran.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if event_filter %}&event={{ event_filter }}{% endif %}" 
                       class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}
                    
                    {% for num in pendaftaran.paginator.page_range %}
                    {% if pendaftaran.number == num %}
                    <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md">{{ num }}</span>
                    {% elif num > pendaftaran.number|add:'-3' and num < pendaftaran.number|add:'3' %}
                    <a href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if event_filter %}&event={{ event_filter }}{% endif %}" 
                       class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">{{ num }}</a>
                    {% endif %}
                    {% endfor %}
                    
                    {% if pendaftaran.has_next %}
                    <a href="?page={{ pendaftaran.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if event_filter %}&event={{ event_filter }}{% endif %}" 
                       class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
        {% else %}
        <div class="p-6 text-center">
            <i class="fas fa-clipboard-list text-4xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Tidak ada pendaftaran</h3>
            <p class="text-gray-500">Belum ada pendaftaran event yang ditemukan.</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function updateStatus(pendaftaranId, status) {
    if (confirm('Apakah Anda yakin ingin mengubah status pendaftaran ini?')) {
        fetch(`/admin/pendaftaran/${pendaftaranId}/update-status/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                'status': status
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Terjadi kesalahan: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat mengupdate status');
        });
    }
}

function viewDetail(pendaftaranId) {
    // Redirect to detail page or open modal
    window.open(`/admin/pendaftaran/${pendaftaranId}/`, '_blank');
}
</script>
{% endblock %}