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

{% block title %}{{ title }} - Admin Panel{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
    .preview-container {
        max-width: 1200px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .preview-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        text-align: center;
    }
    
    .preview-content {
        padding: 2rem;
    }
    
    .info-card {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-left: 4px solid;
        transition: all 0.3s ease;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .status-badge {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .status-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.6s;
    }
    
    .status-badge:hover::before {
        left: 100%;
    }
    
    .media-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .media-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
    }
    
    .media-item:hover {
        transform: scale(1.05);
    }
    
    .media-item img, .media-item video {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    
    .action-button {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .action-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .action-button:hover::before {
        left: 100%;
    }
    
    .action-button:hover {
        transform: translateY(-2px) scale(1.05);
    }
</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-external-link-alt mr-2 text-purple-600"></i>
                Preview Event
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Tampilan preview event untuk pengguna
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'event_admin:list' %}" 
               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 action-button">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali
            </a>
            <a href="{% url 'event_admin:detail' event.pk %}" 
               class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 action-button">
                <i class="fas fa-eye mr-2"></i>
                Detail
            </a>
            <a href="{% url 'event_admin:edit' event.pk %}" 
               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 action-button">
                <i class="fas fa-edit mr-2"></i>
                Edit
            </a>
        </div>
    </div>
    
    <!-- Preview Container -->
    <div class="preview-container">
        <!-- Preview Header -->
        <div class="preview-header">
            <div class="flex items-center justify-center mb-4">
                {% if event.gambar_utama %}
                    <img src="{{ event.gambar_utama.url }}" alt="{{ event.judul }}" class="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg mr-4">
                {% else %}
                    <div class="w-20 h-20 rounded-full bg-white bg-opacity-20 flex items-center justify-center border-4 border-white shadow-lg mr-4">
                        <i class="fas fa-calendar-alt text-white text-2xl"></i>
                    </div>
                {% endif %}
                <div class="text-left">
                    <h1 class="text-3xl font-bold mb-2">{{ event.judul }}</h1>
                    <p class="text-lg opacity-90">{{ event.get_kategori_display }}</p>
                </div>
            </div>
            
            <div class="flex flex-wrap items-center justify-center gap-4">
                <span class="status-badge
                            {% if event.status == 'published' %}bg-green-500 text-white
                            {% elif event.status == 'ongoing' %}bg-blue-500 text-white
                            {% elif event.status == 'completed' %}bg-gray-500 text-white
                            {% elif event.status == 'cancelled' %}bg-red-500 text-white
                            {% else %}bg-yellow-500 text-white{% endif %}">
                    <i class="fas fa-circle mr-2"></i>
                    {{ event.get_status_display }}
                </span>
                
                {% if event.is_featured %}
                <span class="status-badge bg-yellow-500 text-white">
                    <i class="fas fa-star mr-2"></i>
                    Event Unggulan
                </span>
                {% endif %}
                
                {% if event.is_online %}
                <span class="status-badge bg-blue-500 text-white">
                    <i class="fas fa-globe mr-2"></i>
                    Event Online
                </span>
                {% endif %}
                
                <span class="status-badge bg-purple-500 text-white">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    {{ event.lokasi }}
                </span>
            </div>
        </div>
        
        <!-- Preview Content -->
        <div class="preview-content">
            <!-- Event Description -->
            <div class="mb-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                    Tentang Event
                </h2>
                {% if event.deskripsi_singkat %}
                    <p class="text-lg text-gray-700 mb-4">{{ event.deskripsi_singkat }}</p>
                {% endif %}
                <div class="prose max-w-none">
                    {{ event.deskripsi|safe }}
                </div>
            </div>
            
            <!-- Event Details -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="info-card border-l-blue-500">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <i class="fas fa-calendar text-blue-500 mr-2"></i>
                        Waktu & Tanggal
                    </h3>
                    <div class="space-y-2">
                        <div>
                            <span class="text-sm text-gray-600">Mulai:</span>
                            <span class="text-sm font-medium text-gray-900 ml-2">{{ event.tanggal_mulai|date:"d M Y, H:i" }}</span>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">Selesai:</span>
                            <span class="text-sm font-medium text-gray-900 ml-2">{{ event.tanggal_selesai|date:"d M Y, H:i" }}</span>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">Batas Pendaftaran:</span>
                            <span class="text-sm font-medium text-gray-900 ml-2">{{ event.batas_pendaftaran|date:"d M Y, H:i" }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="info-card border-l-green-500">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                        <i class="fas fa-users text-green-500 mr-2"></i>
                        Informasi Pendaftaran
                    </h3>
                    <div class="space-y-2">
                        <div>
                            <span class="text-sm text-gray-600">Kuota:</span>
                            <span class="text-sm font-medium text-gray-900 ml-2">{{ event.pendaftaran_set.count }}/{{ event.kuota }} peserta</span>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">Harga:</span>
                            <span class="text-sm font-medium text-gray-900 ml-2">
                                {% if event.tipe == 'gratis' %}
                                    <span class="text-green-600">Gratis</span>
                                {% else %}
                                    <span class="text-blue-600">Rp {{ event.harga|number_idr }}</span>
                                {% endif %}
                            </span>
                        </div>
                        {% if event.biaya_pendaftaran > 0 %}
                        <div>
                            <span class="text-sm text-gray-600">Biaya Pendaftaran:</span>
                            <span class="text-sm font-medium text-gray-900 ml-2">Rp {{ event.biaya_pendaftaran|number_idr }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Location Info -->
            <div class="info-card border-l-purple-500 mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                    <i class="fas fa-map-marker-alt text-purple-500 mr-2"></i>
                    Lokasi Event
                </h3>
                <div class="space-y-2">
                    <div>
                        <span class="text-sm text-gray-600">Lokasi:</span>
                        <span class="text-sm font-medium text-gray-900 ml-2">{{ event.lokasi }}</span>
                    </div>
                    {% if event.alamat_lengkap %}
                    <div>
                        <span class="text-sm text-gray-600">Alamat Lengkap:</span>
                        <span class="text-sm font-medium text-gray-900 ml-2">{{ event.alamat_lengkap }}</span>
                    </div>
                    {% endif %}
                    {% if event.is_online and event.link_meeting %}
                    <div>
                        <span class="text-sm text-gray-600">Link Meeting:</span>
                        <a href="{{ event.link_meeting }}" target="_blank" class="text-sm font-medium text-blue-600 hover:text-blue-800 ml-2">
                            {{ event.link_meeting }}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Media Gallery -->
            {% if event.gambar_event.all or event.video_event.all %}
            <div class="mb-8">
                <h3 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-images text-purple-500 mr-2"></i>
                    Galeri Media
                </h3>
                <div class="media-gallery">
                    {% for gambar in event.gambar_event.all %}
                    <div class="media-item">
                        <img src="{{ gambar.gambar.url }}" alt="{{ gambar.caption|default:event.judul }}">
                        {% if gambar.caption %}
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
                            {{ gambar.caption }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% for video in event.video_event.all %}
                    <div class="media-item">
                        <video controls>
                            <source src="{{ video.video.url }}" type="video/mp4">
                            Browser tidak mendukung video.
                        </video>
                        {% if video.caption %}
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
                            {{ video.caption }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            <!-- Social Media Links -->
            {% if event.tiktok_url or event.youtube_url %}
            <div class="info-card border-l-orange-500 mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                    <i class="fas fa-share-alt text-orange-500 mr-2"></i>
                    Media Sosial
                </h3>
                <div class="flex flex-wrap gap-4">
                    {% if event.tiktok_url %}
                    <a href="{{ event.tiktok_url }}" target="_blank" 
                       class="inline-flex items-center px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors">
                        <i class="fab fa-tiktok mr-2"></i>
                        TikTok
                    </a>
                    {% endif %}
                    {% if event.youtube_url %}
                    <a href="{{ event.youtube_url }}" target="_blank" 
                       class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                        <i class="fab fa-youtube mr-2"></i>
                        YouTube
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            <!-- Panitia Info -->
            {% if event.ketua_panitia or event.panitia.all %}
            <div class="info-card border-l-indigo-500 mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                    <i class="fas fa-users-cog text-indigo-500 mr-2"></i>
                    Panitia Event
                </h3>
                <div class="space-y-3">
                    {% if event.ketua_panitia %}
                    <div>
                        <span class="text-sm text-gray-600">Ketua Panitia:</span>
                        <span class="text-sm font-medium text-gray-900 ml-2">{{ event.ketua_panitia.nama_lengkap }}</span>
                    </div>
                    {% endif %}
                    {% if event.panitia.all %}
                    <div>
                        <span class="text-sm text-gray-600">Anggota Panitia:</span>
                        <div class="mt-2">
                            {% for panitia in event.panitia.all %}
                                <span class="inline-block bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded-full mr-2 mb-2">
                                    {{ panitia.nama_lengkap }}
                                </span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            <!-- Contact Info -->
            {% if event.kontak_person or event.no_telepon or event.email_kontak %}
            <div class="info-card border-l-green-500 mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                    <i class="fas fa-phone text-green-500 mr-2"></i>
                    Informasi Kontak
                </h3>
                <div class="space-y-2">
                    {% if event.kontak_person %}
                    <div>
                        <span class="text-sm text-gray-600">Kontak Person:</span>
                        <span class="text-sm font-medium text-gray-900 ml-2">{{ event.kontak_person }}</span>
                    </div>
                    {% endif %}
                    {% if event.no_telepon %}
                    <div>
                        <span class="text-sm text-gray-600">No. Telepon:</span>
                        <span class="text-sm font-medium text-gray-900 ml-2">{{ event.no_telepon }}</span>
                    </div>
                    {% endif %}
                    {% if event.email_kontak %}
                    <div>
                        <span class="text-sm text-gray-600">Email:</span>
                        <span class="text-sm font-medium text-gray-900 ml-2">{{ event.email_kontak }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            <!-- Call to Action -->
            <div class="text-center bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-8">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Tertarik dengan Event Ini?</h3>
                <p class="text-gray-600 mb-6">Daftar sekarang dan jangan lewatkan kesempatan ini!</p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 action-button">
                        <i class="fas fa-user-plus mr-2"></i>
                        Daftar Sekarang
                    </button>
                    <button class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 action-button">
                        <i class="fas fa-share mr-2"></i>
                        Bagikan Event
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}