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

{% block title %}{{ title }} - Admin Panel{% endblock %}
{% block page_title %}{{ title }}{% 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-certificate mr-2 text-yellow-600"></i>
                {{ title }}
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                Detail informasi sertifikat
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="{% url 'admin_panel:sertifikat_edit' sertifikat.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>
            <a href="{% url 'admin_panel:sertifikat_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>
        </div>
    </div>
    
    <!-- Sertifikat Info -->
    <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-yellow-500 to-yellow-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-certificate mr-2 text-yellow-200"></i>
                Informasi Sertifikat
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="info-card rounded-lg p-4 border-l-4 border-blue-500">
                    <div class="text-xs text-gray-500 mb-1">Nomor Sertifikat</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.nomor_sertifikat }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-green-500">
                    <div class="text-xs text-gray-500 mb-1">Tanggal Dibuat</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.created_at|date:"d M Y H:i" }}</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Peserta Info -->
    <div class="bg-white rounded-xl shadow-lg 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">
            <h3 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-user mr-2 text-blue-200"></i>
                Informasi Peserta
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="info-card rounded-lg p-4 border-l-4 border-purple-500">
                    <div class="text-xs text-gray-500 mb-1">Nama Lengkap</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.peserta.nama_lengkap }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-indigo-500">
                    <div class="text-xs text-gray-500 mb-1">Email</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.peserta.email }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-pink-500">
                    <div class="text-xs text-gray-500 mb-1">No. Telepon</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.peserta.no_telepon|default:"-" }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-red-500">
                    <div class="text-xs text-gray-500 mb-1">Status Pendaftaran</div>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        {{ sertifikat.pendaftaran.get_status_display }}
                    </span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Event Info -->
    <div class="bg-white rounded-xl shadow-lg 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-calendar-alt mr-2 text-green-200"></i>
                Informasi Event
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="info-card rounded-lg p-4 border-l-4 border-yellow-500">
                    <div class="text-xs text-gray-500 mb-1">Judul Event</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.event.judul }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-orange-500">
                    <div class="text-xs text-gray-500 mb-1">Kategori</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.event.get_kategori_display }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-teal-500">
                    <div class="text-xs text-gray-500 mb-1">Lokasi</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.event.lokasi }}</div>
                </div>
                
                <div class="info-card rounded-lg p-4 border-l-4 border-cyan-500">
                    <div class="text-xs text-gray-500 mb-1">Tanggal Event</div>
                    <div class="text-lg font-semibold text-gray-900">{{ sertifikat.pendaftaran.event.tanggal_mulai|date:"d M Y" }}</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- File Sertifikat -->
    <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden card-hover">
        <div class="bg-gradient-to-r from-purple-500 to-purple-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-file-pdf mr-2 text-purple-200"></i>
                File Sertifikat
            </h3>
        </div>
        <div class="p-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="flex-shrink-0 h-16 w-16">
                        <div class="h-16 w-16 rounded-lg bg-gradient-to-r from-red-500 to-red-600 flex items-center justify-center border-2 border-white shadow-sm">
                            <i class="fas fa-file-pdf text-white text-xl"></i>
                        </div>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-900">{{ sertifikat.file_sertifikat.name|slice:"12:" }}</div>
                        <div class="text-sm text-gray-500">File sertifikat</div>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <a href="{{ sertifikat.file_sertifikat.url }}" 
                       target="_blank"
                       class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 action-button">
                        <i class="fas fa-eye mr-2"></i>
                        Lihat
                    </a>
                    <a href="{{ sertifikat.file_sertifikat.url }}" 
                       download
                       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-download mr-2"></i>
                        Download
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Action Buttons -->
    <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
        <div class="flex flex-col sm:flex-row items-center justify-end space-y-3 sm:space-y-0 sm:space-x-4">
            <button onclick="deleteItem('{% url 'admin_panel:sertifikat_delete' sertifikat.pk %}', '{{ sertifikat.nomor_sertifikat|escapejs }}')" 
                    class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 action-button transition-all duration-200">
                <i class="fas fa-trash mr-2"></i>
                Hapus Sertifikat
            </button>
            <a href="{% url 'admin_panel:sertifikat_edit' sertifikat.pk %}" 
               class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 action-button transition-all duration-200">
                <i class="fas fa-edit mr-2"></i>
                Edit Sertifikat
            </a>
        </div>
    </div>
</div>

<script>
function deleteItem(url, nama) {
    if (confirm(`Apakah Anda yakin ingin menghapus sertifikat "${nama}"?`)) {
        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.href = '{% url "admin_panel:sertifikat_list" %}';
            } else {
                alert('Gagal menghapus sertifikat: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menghapus sertifikat');
        });
    }
}
</script>
{% endblock %}