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

{% block title %}Event Registrations - {{ event.judul }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-6 md:p-8 mb-8 text-white shadow-lg">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <div class="mb-4 md:mb-0">
                <h1 class="text-2xl md:text-3xl font-bold mb-2">{{ event.judul }}</h1>
                <p class="text-blue-100 text-sm md:text-base">Kelola Pendaftar Event</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{% url 'event_admin:event_detail' event.id %}" 
                   class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali ke Detail
                </a>
                <a href="{% url 'event_admin:event_analytics' event.id %}" 
                   class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
                    <i class="fas fa-chart-bar mr-2"></i>
                    Analytics
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-md p-4 text-center border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
            <div class="text-2xl md:text-3xl font-bold text-blue-600 mb-1">{{ total_registrations }}</div>
            <div class="text-xs md:text-sm text-gray-600">Total Pendaftar</div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-4 text-center border-l-4 border-green-500 hover:shadow-lg transition-shadow">
            <div class="text-2xl md:text-3xl font-bold text-green-600 mb-1">{{ approved_count }}</div>
            <div class="text-xs md:text-sm text-gray-600">Disetujui</div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-4 text-center border-l-4 border-yellow-500 hover:shadow-lg transition-shadow">
            <div class="text-2xl md:text-3xl font-bold text-yellow-600 mb-1">{{ pending_count }}</div>
            <div class="text-xs md:text-sm text-gray-600">Menunggu</div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-4 text-center border-l-4 border-red-500 hover:shadow-lg transition-shadow">
            <div class="text-2xl md:text-3xl font-bold text-red-600 mb-1">{{ rejected_count }}</div>
            <div class="text-xs md:text-sm text-gray-600">Ditolak</div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-4 text-center border-l-4 border-emerald-500 hover:shadow-lg transition-shadow">
            <div class="text-2xl md:text-3xl font-bold text-emerald-600 mb-1">{{ paid_count }}</div>
            <div class="text-xs md:text-sm text-gray-600">Sudah Bayar</div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-4 text-center border-l-4 border-orange-500 hover:shadow-lg transition-shadow">
            <div class="text-2xl md:text-3xl font-bold text-orange-600 mb-1">{{ unpaid_count }}</div>
            <div class="text-xs md:text-sm text-gray-600">Belum Bayar</div>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="bg-white rounded-xl shadow-md p-4 md:p-6 mb-6">
        <form method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-search mr-1"></i> Cari Pendaftar
                    </label>
                    <input type="text" name="search" value="{{ search_query }}" 
                           placeholder="Nama, Email, No. Telepon, Instansi..."
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-filter mr-1"></i> Filter Status
                    </label>
                    <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Semua Status</option>
                        <option value="approved" {% if status_filter == 'approved' %}selected{% endif %}>Disetujui</option>
                        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Menunggu</option>
                        <option value="rejected" {% if status_filter == 'rejected' %}selected{% endif %}>Ditolak</option>
                    </select>
                </div>
                <div class="flex items-end gap-2">
                    <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 transition-colors font-medium">
                        <i class="fas fa-filter mr-2"></i>Filter
                    </button>
                    <a href="{% url 'event_admin:event_registrations' event.id %}" 
                       class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
    
    <!-- Registrations Table -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Pendaftar</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Kontak</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Instansi</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Pembayaran</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tanggal Daftar</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for registration in registrations %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-4">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-semibold mr-3">
                                    {{ registration.nama_lengkap|first|upper }}
                                </div>
                                <div>
                                    <div class="text-sm font-semibold text-gray-900">{{ registration.nama_lengkap }}</div>
                                    {% if registration.peserta %}
                                    <div class="text-xs text-gray-500">
                                        <i class="fas fa-user-check mr-1"></i>Anggota
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="text-sm text-gray-900">
                                <div class="flex items-center mb-1">
                                    <i class="fas fa-envelope text-gray-400 mr-2 text-xs"></i>
                                    {{ registration.email }}
                                </div>
                                {% if registration.no_telepon %}
                                <div class="flex items-center text-gray-600">
                                    <i class="fas fa-phone text-gray-400 mr-2 text-xs"></i>
                                    {{ registration.no_telepon }}
                                </div>
                                {% endif %}
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="text-sm text-gray-900">
                                {{ registration.instansi|default:"-" }}
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            {% if registration.status == 'approved' %}
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    Disetujui
                                </span>
                            {% elif registration.status == 'rejected' %}
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800 border border-red-200">
                                    <i class="fas fa-times-circle mr-1"></i>
                                    Ditolak
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 border border-yellow-200">
                                    <i class="fas fa-clock mr-1"></i>
                                    Menunggu
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            {% if event.biaya_pendaftaran > 0 %}
                                {% if registration.bukti_pembayaran %}
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 border border-emerald-200">
                                        <i class="fas fa-check-circle mr-1"></i>
                                        Sudah Bayar
                                    </span>
                                    {% if registration.payment_status == 'verified' %}
                                        <div class="text-xs text-emerald-600 mt-1">
                                            <i class="fas fa-check-double mr-1"></i>Terverifikasi
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 border border-orange-200">
                                        <i class="fas fa-exclamation-circle mr-1"></i>
                                        Belum Bayar
                                    </span>
                                {% endif %}
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-200">
                                    <i class="fas fa-gift mr-1"></i>
                                    Gratis
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            <div class="flex items-center">
                                <i class="fas fa-calendar-alt mr-2 text-gray-400"></i>
                                {{ registration.created_at|date:"d M Y" }}
                            </div>
                            <div class="text-xs text-gray-400 mt-1">
                                {{ registration.created_at|date:"H:i" }}
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex items-center space-x-2 flex-wrap gap-1">
                                <a href="{% url 'event_admin:registration_detail' registration.id %}" 
                                   class="inline-flex items-center px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors text-xs font-medium"
                                   title="Lihat Detail">
                                    <i class="fas fa-eye mr-1"></i>
                                    Detail
                                </a>
                                <a href="{% url 'event_admin:registration_edit' registration.id %}" 
                                   class="inline-flex items-center px-3 py-1.5 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 transition-colors text-xs font-medium"
                                   title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% if registration.status != 'approved' %}
                                <button type="button" 
                                        onclick="showApproveModal({{ registration.id }}, '{{ registration.nama_lengkap }}')"
                                        class="inline-flex items-center px-3 py-1.5 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors text-xs font-medium"
                                        title="Setujui">
                                    <i class="fas fa-check"></i>
                                </button>
                                {% endif %}
                                {% if registration.status != 'rejected' %}
                                <button type="button" 
                                        onclick="showRejectModal({{ registration.id }}, '{{ registration.nama_lengkap }}')"
                                        class="inline-flex items-center px-3 py-1.5 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors text-xs font-medium"
                                        title="Tolak">
                                    <i class="fas fa-times"></i>
                                </button>
                                {% endif %}
                                {% if registration.no_telepon %}
                                    {% if registration.status == 'approved' or registration.status == 'pending' %}
                                    <a href="{% url 'event_admin:whatsapp_custom' registration.id 'approved' %}" 
                                       target="_blank"
                                       class="inline-flex items-center px-3 py-1.5 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-xs font-medium"
                                       title="WhatsApp: Terima">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                    {% endif %}
                                    {% if registration.status == 'rejected' or registration.status == 'pending' %}
                                    <a href="{% url 'event_admin:whatsapp_custom' registration.id 'rejected' %}" 
                                       target="_blank"
                                       class="inline-flex items-center px-3 py-1.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-xs font-medium"
                                       title="WhatsApp: Tolak">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                    {% endif %}
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-users text-5xl mb-4 text-gray-300"></i>
                                <p class="text-lg font-medium text-gray-500 mb-2">Tidak ada pendaftar ditemukan</p>
                                <p class="text-sm text-gray-400">Coba ubah filter atau kata kunci pencarian</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    {% if registrations.has_other_pages %}
    <div class="bg-white rounded-xl shadow-md px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 mt-6">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if registrations.has_previous %}
                <a href="?page={{ registrations.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                   class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-chevron-left mr-2"></i>Sebelumnya
                </a>
            {% endif %}
            {% if registrations.has_next %}
                <a href="?page={{ registrations.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                   class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Selanjutnya<i class="fas fa-chevron-right ml-2"></i>
                </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700">
                    Menampilkan <span class="font-medium">{{ registrations.start_index }}</span> sampai <span class="font-medium">{{ registrations.end_index }}</span> dari <span class="font-medium">{{ registrations.paginator.count }}</span> hasil
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    {% if registrations.has_previous %}
                    <a href="?page={{ registrations.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <span class="sr-only">Previous</span>
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}
                    
                    {% for num in registrations.paginator.page_range %}
                        {% if registrations.number == num %}
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
                                {{ num }}
                            </span>
                        {% elif num > registrations.number|add:'-3' and num < registrations.number|add:'3' %}
                            <a href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                               class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                {{ num }}
                            </a>
                        {% endif %}
                    {% endfor %}
                    
                    {% if registrations.has_next %}
                    <a href="?page={{ registrations.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <span class="sr-only">Next</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Approve Modal -->
<div id="approveModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 transform transition-all">
        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                Setujui Pendaftaran
            </h3>
            <button onclick="closeApproveModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="mb-6">
            <p class="text-gray-700 mb-2">Yakin ingin menyetujui pendaftaran:</p>
            <p class="font-semibold text-gray-900" id="approveName"></p>
        </div>
        <div class="flex justify-end space-x-3">
            <button onclick="closeApproveModal()" 
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium">
                Batal
            </button>
            <button onclick="confirmApprove()" 
                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
                <i class="fas fa-check mr-2"></i>Setujui
            </button>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 transform transition-all">
        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-times-circle text-red-500 mr-2"></i>
                Tolak Pendaftaran
            </h3>
            <button onclick="closeRejectModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="mb-4">
            <p class="text-gray-700 mb-2">Yakin ingin menolak pendaftaran:</p>
            <p class="font-semibold text-gray-900 mb-4" id="rejectName"></p>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Alasan Penolakan <span class="text-red-500">*</span>
            </label>
            <textarea id="rejectReason" 
                      rows="4" 
                      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
                      placeholder="Masukkan alasan penolakan..."></textarea>
            <p class="text-xs text-gray-500 mt-1">Alasan penolakan wajib diisi</p>
        </div>
        <div class="flex justify-end space-x-3">
            <button onclick="closeRejectModal()" 
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium">
                Batal
            </button>
            <button onclick="confirmReject()" 
                    class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium">
                <i class="fas fa-times mr-2"></i>Tolak
            </button>
        </div>
    </div>
</div>

<!-- Success/Error Modal -->
<div id="resultModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 transform transition-all">
        <div class="text-center">
            <div id="resultIcon" class="text-5xl mb-4"></div>
            <h3 id="resultTitle" class="text-xl font-bold mb-2"></h3>
            <p id="resultMessage" class="text-gray-700 mb-6"></p>
            <button onclick="closeResultModal()" 
                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                Tutup
            </button>
        </div>
    </div>
</div>

<script>
let currentRegistrationId = null;
let currentRegistrationName = null;

// Get CSRF token from cookie
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Approve Modal Functions
function showApproveModal(id, name) {
    currentRegistrationId = id;
    currentRegistrationName = name;
    document.getElementById('approveName').textContent = name;
    document.getElementById('approveModal').classList.remove('hidden');
}

function closeApproveModal() {
    document.getElementById('approveModal').classList.add('hidden');
    currentRegistrationId = null;
    currentRegistrationName = null;
}

function confirmApprove() {
    if (!currentRegistrationId) return;
    
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
    button.disabled = true;
    
    // Get CSRF token from modal or form
    const csrfToken = document.querySelector('#approveModal [name=csrfmiddlewaretoken]')?.value || 
                     document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
                     document.querySelector('input[name="csrfmiddlewaretoken"]')?.value ||
                     getCookie('csrftoken');
    
    fetch(`/admin/event/registrations/${currentRegistrationId}/approve/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        closeApproveModal();
        if (data.success) {
            showResultModal('success', 'Berhasil!', data.message || 'Registrasi berhasil disetujui');
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            showResultModal('error', 'Gagal!', data.message || 'Terjadi kesalahan saat menyetujui pendaftaran');
        }
    })
    .catch(error => {
        closeApproveModal();
        showResultModal('error', 'Error!', 'Terjadi kesalahan saat memproses permintaan');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

// Reject Modal Functions
function showRejectModal(id, name) {
    currentRegistrationId = id;
    currentRegistrationName = name;
    document.getElementById('rejectName').textContent = name;
    document.getElementById('rejectReason').value = '';
    document.getElementById('rejectModal').classList.remove('hidden');
}

function closeRejectModal() {
    document.getElementById('rejectModal').classList.add('hidden');
    currentRegistrationId = null;
    currentRegistrationName = null;
    document.getElementById('rejectReason').value = '';
}

function confirmReject() {
    if (!currentRegistrationId) return;
    
    const reason = document.getElementById('rejectReason').value.trim();
    if (!reason) {
        alert('Alasan penolakan harus diisi!');
        return;
    }
    
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
    button.disabled = true;
    
    // Get CSRF token from modal or form
    const csrfToken = document.querySelector('#rejectModal [name=csrfmiddlewaretoken]')?.value || 
                     document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
                     document.querySelector('input[name="csrfmiddlewaretoken"]')?.value ||
                     getCookie('csrftoken');
    
    fetch(`/admin/event/registrations/${currentRegistrationId}/reject/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `reason=${encodeURIComponent(reason)}`
    })
    .then(response => response.json())
    .then(data => {
        closeRejectModal();
        if (data.success) {
            showResultModal('success', 'Berhasil!', data.message || 'Registrasi berhasil ditolak');
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            showResultModal('error', 'Gagal!', data.message || 'Terjadi kesalahan saat menolak pendaftaran');
        }
    })
    .catch(error => {
        closeRejectModal();
        showResultModal('error', 'Error!', 'Terjadi kesalahan saat memproses permintaan');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

// Result Modal Functions
function showResultModal(type, title, message) {
    const modal = document.getElementById('resultModal');
    const icon = document.getElementById('resultIcon');
    const titleEl = document.getElementById('resultTitle');
    const messageEl = document.getElementById('resultMessage');
    
    if (type === 'success') {
        icon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>';
        titleEl.textContent = title;
        titleEl.className = 'text-xl font-bold mb-2 text-green-600';
    } else {
        icon.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i>';
        titleEl.textContent = title;
        titleEl.className = 'text-xl font-bold mb-2 text-red-600';
    }
    
    messageEl.textContent = message;
    modal.classList.remove('hidden');
}

function closeResultModal() {
    document.getElementById('resultModal').classList.add('hidden');
}

// Close modals when clicking outside
document.getElementById('approveModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeApproveModal();
    }
});

document.getElementById('rejectModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeRejectModal();
    }
});

document.getElementById('resultModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeResultModal();
    }
});
</script>
{% endblock %}