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

{% block title %}Analytics - {{ event.judul }}{% 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-chart-line mr-2 text-blue-600"></i>
                Analytics Event
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                {{ event.judul }} - {{ event.tanggal_mulai|date:"d F Y" }}
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'event_admin:event_registrations' event.id %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                <i class="fas fa-list mr-2"></i>
                Lihat Registrasi
            </a>
            <a href="{% url 'event_admin:event_detail' event.id %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                <i class="fas fa-calendar mr-2"></i>
                Detail Event
            </a>
        </div>
    </div>

    <!-- Overview Statistics -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 mb-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-6">Overview</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-2xl p-6 text-center shadow-md hover:shadow-lg transition-shadow">
                <div class="text-4xl md:text-5xl font-bold mb-2">{{ total_registrations }}</div>
                <div class="text-lg opacity-90">Total Registrasi</div>
            </div>
            <div class="bg-gradient-to-br from-green-500 to-emerald-600 text-white rounded-2xl p-6 text-center shadow-md hover:shadow-lg transition-shadow">
                <div class="text-4xl md:text-5xl font-bold mb-2">{{ approved_registrations }}</div>
                <div class="text-lg opacity-90">Disetujui</div>
            </div>
            <div class="bg-gradient-to-br from-yellow-500 to-orange-500 text-white rounded-2xl p-6 text-center shadow-md hover:shadow-lg transition-shadow">
                <div class="text-4xl md:text-5xl font-bold mb-2">{{ pending_registrations }}</div>
                <div class="text-lg opacity-90">Menunggu</div>
            </div>
            <div class="bg-gradient-to-br from-red-500 to-pink-600 text-white rounded-2xl p-6 text-center shadow-md hover:shadow-lg transition-shadow">
                <div class="text-4xl md:text-5xl font-bold mb-2">{{ rejected_registrations }}</div>
                <div class="text-lg opacity-90">Ditolak</div>
            </div>
        </div>
    </div>

    <!-- Registration Status Breakdown -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 mb-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-6">Status Registrasi</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white border-l-4 border-green-500 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow">
                <div class="text-3xl font-bold text-green-600 mb-2">{{ approved_registrations }}</div>
                <div class="text-sm text-gray-600 mb-1">Disetujui</div>
                <div class="text-xs text-gray-500">{{ approved_percentage }}%</div>
            </div>
            <div class="bg-white border-l-4 border-yellow-500 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow">
                <div class="text-3xl font-bold text-yellow-600 mb-2">{{ pending_registrations }}</div>
                <div class="text-sm text-gray-600 mb-1">Menunggu</div>
                <div class="text-xs text-gray-500">{{ pending_percentage }}%</div>
            </div>
            <div class="bg-white border-l-4 border-red-500 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow">
                <div class="text-3xl font-bold text-red-600 mb-2">{{ rejected_registrations }}</div>
                <div class="text-sm text-gray-600 mb-1">Ditolak</div>
                <div class="text-xs text-gray-500">{{ rejected_percentage }}%</div>
            </div>
        </div>
    </div>

    <!-- Payment Statistics -->
    {% if event.harga > 0 %}
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 mb-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-6">Statistik Pembayaran</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div class="bg-green-50 border border-green-200 rounded-lg p-6 hover:bg-green-100 transition-colors">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 text-3xl mr-4"></i>
                    <div>
                        <div class="text-2xl font-bold text-green-600">{{ paid_registrations }}</div>
                        <div class="text-sm text-green-700">Sudah Bayar</div>
                    </div>
                </div>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 hover:bg-yellow-100 transition-colors">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-yellow-500 text-3xl mr-4"></i>
                    <div>
                        <div class="text-2xl font-bold text-yellow-600">{{ unpaid_registrations }}</div>
                        <div class="text-sm text-yellow-700">Belum Bayar</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Payment Progress -->
        <div class="mt-6">
            <div class="flex justify-between items-center mb-2">
                <span class="text-sm font-medium text-gray-700">Progress Pembayaran</span>
                <span class="text-sm text-gray-500">
                    {{ paid_registrations }}/{{ total_registrations }}
                </span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-5 overflow-hidden">
                <div class="bg-gradient-to-r from-green-500 to-emerald-600 h-5 rounded-full transition-all duration-300" style="width: {{ paid_percentage }}%"></div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Registration Timeline -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 mb-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-6 text-center">Timeline Registrasi</h3>
        <div class="h-80 flex items-end justify-between gap-1 p-5 bg-gray-50 rounded-lg">
            {% for data in registrations_by_date %}
            <div class="flex-1 flex flex-col items-center group relative" style="min-width: 20px;">
                <div class="w-full bg-gradient-to-t from-blue-600 to-blue-400 rounded-t transition-all duration-300 hover:from-blue-700 hover:to-blue-500 cursor-pointer group-hover:opacity-80" 
                     style="height: {{ data.height }}px; min-height: 50px;"
                     title="{{ data.count }} registrasi pada {{ data.day|date:'d/m/Y' }}">
                </div>
                <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-xs text-gray-600 whitespace-nowrap">
                    {{ data.day|date:"d/m" }}
                </div>
                <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap pointer-events-none">
                    {{ data.count }} registrasi
                </div>
            </div>
            {% empty %}
            <div class="text-center text-gray-500 w-full py-12">
                <i class="fas fa-chart-bar text-4xl mb-2 text-gray-400"></i>
                <p class="text-gray-600">Belum ada data registrasi</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Export Options -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 mb-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-6">Export Data</h3>
        <div class="flex flex-wrap gap-3">
            <a href="{% url 'event_admin:export_registrations_csv' event.id %}" 
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg">
                <i class="fas fa-file-csv mr-2"></i>
                Export CSV
            </a>
            <button onclick="exportToExcel()" 
                    class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg">
                <i class="fas fa-file-excel mr-2"></i>
                Export Excel
            </button>
            <button onclick="printAnalytics()" 
                    class="inline-flex items-center px-4 py-2 bg-yellow-600 text-white rounded-lg font-semibold hover:bg-yellow-700 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg">
                <i class="fas fa-print mr-2"></i>
                Print Report
            </button>
            <button onclick="shareAnalytics()" 
                    class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-gray-700 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg">
                <i class="fas fa-share mr-2"></i>
                Share
            </button>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 mb-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-6">Aksi Cepat</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="{% url 'event_admin:event_registrations' event.id %}" 
               class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-center hover:bg-blue-100 transition-all duration-200 hover:shadow-md">
                <i class="fas fa-list text-blue-500 text-2xl mb-2"></i>
                <div class="font-semibold text-blue-800">Kelola Registrasi</div>
                <div class="text-sm text-blue-600">Lihat dan kelola semua registrasi</div>
            </a>
            
            <a href="{% url 'event_admin:generate_certificates' event.id %}" 
               class="bg-green-50 border border-green-200 rounded-lg p-4 text-center hover:bg-green-100 transition-all duration-200 hover:shadow-md">
                <i class="fas fa-certificate text-green-500 text-2xl mb-2"></i>
                <div class="font-semibold text-green-800">Generate Sertifikat</div>
                <div class="text-sm text-green-600">Buat sertifikat untuk peserta</div>
            </a>
            
            <a href="{% url 'event:event_detail' event.slug %}" target="_blank"
               class="bg-purple-50 border border-purple-200 rounded-lg p-4 text-center hover:bg-purple-100 transition-all duration-200 hover:shadow-md">
                <i class="fas fa-external-link-alt text-purple-500 text-2xl mb-2"></i>
                <div class="font-semibold text-purple-800">Lihat Event</div>
                <div class="text-sm text-purple-600">Buka halaman public event</div>
            </a>
            
            <a href="{% url 'event_admin:event_detail' event.id %}" 
               class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-center hover:bg-gray-100 transition-all duration-200 hover:shadow-md">
                <i class="fas fa-edit text-gray-500 text-2xl mb-2"></i>
                <div class="font-semibold text-gray-800">Edit Event</div>
                <div class="text-sm text-gray-600">Ubah informasi event</div>
            </a>
        </div>
    </div>
</div>

<script>
function exportToExcel() {
    // This would typically generate an Excel file
    alert('Export to Excel feature will be implemented soon!');
}

function printAnalytics() {
    window.print();
}

function shareAnalytics() {
    if (navigator.share) {
        navigator.share({
            title: 'Event Analytics - {{ event.judul }}',
            text: 'Analytics untuk event {{ event.judul }}',
            url: window.location.href
        });
    } else {
        // Fallback: copy to clipboard
        navigator.clipboard.writeText(window.location.href).then(() => {
            alert('Link berhasil disalin ke clipboard!');
        });
    }
}

// Auto-refresh data every 5 minutes
setInterval(() => {
    location.reload();
}, 300000);
</script>
{% endblock %}