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

{% block title %}{{ notifikasi.judul }} - Sistem Keuangan HMI{% endblock %}
{% block page_title %}Detail Notifikasi{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Back Button -->
    <div class="flex items-center space-x-4">
        <a href="{% url 'keuangan:notifikasi_list' %}" 
           class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            <i class="fas fa-arrow-left mr-2"></i>
            Kembali ke Notifikasi
        </a>
        
        <div class="flex items-center space-x-2">
            {% if not notifikasi.is_read %}
                <button onclick="markAsRead({{ notifikasi.id }})" 
                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <i class="fas fa-check mr-2"></i>
                    Tandai Dibaca
                </button>
            {% endif %}
            
            <button onclick="archiveNotification({{ notifikasi.id }})" 
                    class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                <i class="fas fa-archive mr-2"></i>
                Arsipkan
            </button>
            
            <button onclick="deleteNotification({{ notifikasi.id }})" 
                    class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                <i class="fas fa-trash mr-2"></i>
                Hapus
            </button>
        </div>
    </div>
    
    <!-- Notification Detail Card -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-200 {% if not notifikasi.is_read %}bg-blue-50{% endif %}">
            <div class="flex items-start space-x-4">
                <!-- Notification Icon -->
                <div class="flex-shrink-0">
                    {% if notifikasi.tipe == 'transaksi_baru' %}
                        <div class="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-exchange-alt text-green-600 text-xl"></i>
                        </div>
                    {% elif notifikasi.tipe == 'donasi_baru' %}
                        <div class="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-hand-holding-heart text-purple-600 text-xl"></i>
                        </div>
                    {% elif notifikasi.tipe == 'iuran_telat' %}
                        <div class="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                        </div>
                    {% elif notifikasi.tipe == 'laporan_ready' %}
                        <div class="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-chart-bar text-blue-600 text-xl"></i>
                        </div>
                    {% elif notifikasi.tipe == 'saldo_rendah' %}
                        <div class="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-exclamation-circle text-yellow-600 text-xl"></i>
                        </div>
                    {% elif notifikasi.tipe == 'pengingat' %}
                        <div class="h-12 w-12 bg-indigo-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-bell text-indigo-600 text-xl"></i>
                        </div>
                    {% else %}
                        <div class="h-12 w-12 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-info-circle text-gray-600 text-xl"></i>
                        </div>
                    {% endif %}
                </div>
                
                <!-- Notification Info -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-center space-x-3">
                        <h1 class="text-xl font-semibold text-gray-900">
                            {{ notifikasi.judul }}
                        </h1>
                        
                        <!-- Priority Badge -->
                        {% if notifikasi.prioritas == 'urgent' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                Urgent
                            </span>
                        {% elif notifikasi.prioritas == 'tinggi' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
                                <i class="fas fa-arrow-up mr-1"></i>
                                Tinggi
                            </span>
                        {% elif notifikasi.prioritas == 'sedang' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                <i class="fas fa-minus mr-1"></i>
                                Sedang
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                                <i class="fas fa-arrow-down mr-1"></i>
                                Rendah
                            </span>
                        {% endif %}
                        
                        <!-- Type Badge -->
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                            <i class="fas fa-tag mr-1"></i>
                            {{ notifikasi.get_tipe_display }}
                        </span>
                        
                        <!-- Status Badge -->
                        {% if not notifikasi.is_read %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                <i class="fas fa-circle mr-1"></i>
                                Belum Dibaca
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i>
                                Sudah Dibaca
                            </span>
                        {% endif %}
                    </div>
                    
                    <div class="mt-2 flex items-center space-x-6 text-sm text-gray-500">
                        <span>
                            <i class="fas fa-clock mr-1"></i>
                            Dibuat: {{ notifikasi.created_at|date:"d M Y H:i" }}
                        </span>
                        {% if notifikasi.read_at %}
                            <span>
                                <i class="fas fa-check mr-1"></i>
                                Dibaca: {{ notifikasi.read_at|date:"d M Y H:i" }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Content -->
        <div class="px-6 py-6">
            <div class="prose max-w-none">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Pesan</h3>
                <div class="text-gray-700 whitespace-pre-wrap">{{ notifikasi.pesan }}</div>
            </div>
            
            <!-- Action Button -->
            {% if notifikasi.action_url and notifikasi.action_text %}
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <a href="{{ notifikasi.action_url }}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        {{ notifikasi.action_text }}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Related Information -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Notification Details -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Detail Notifikasi</h3>
            <dl class="space-y-3">
                <div>
                    <dt class="text-sm font-medium text-gray-500">ID Notifikasi</dt>
                    <dd class="mt-1 text-sm text-gray-900">#{{ notifikasi.id }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Tipe</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ notifikasi.get_tipe_display }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Prioritas</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ notifikasi.get_prioritas_display }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {% if notifikasi.is_read %}
                            <span class="text-green-600">Sudah Dibaca</span>
                        {% else %}
                            <span class="text-blue-600">Belum Dibaca</span>
                        {% endif %}
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Tanggal Dibuat</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ notifikasi.created_at|date:"d M Y H:i" }}</dd>
                </div>
                {% if notifikasi.read_at %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tanggal Dibaca</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ notifikasi.read_at|date:"d M Y H:i" }}</dd>
                    </div>
                {% endif %}
            </dl>
        </div>
        
        <!-- Quick Actions -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Aksi Cepat</h3>
            <div class="space-y-3">
                {% if not notifikasi.is_read %}
                    <button onclick="markAsRead({{ notifikasi.id }})" 
                            class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-check mr-2"></i>
                        Tandai Sebagai Dibaca
                    </button>
                {% endif %}
                
                <button onclick="archiveNotification({{ notifikasi.id }})" 
                        class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <i class="fas fa-archive mr-2"></i>
                    Arsipkan Notifikasi
                </button>
                
                <button onclick="deleteNotification({{ notifikasi.id }})" 
                        class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                    <i class="fas fa-trash mr-2"></i>
                    Hapus Notifikasi
                </button>
                
                <a href="{% url 'keuangan:pengaturan_notifikasi' %}" 
                   class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <i class="fas fa-cog mr-2"></i>
                    Pengaturan Notifikasi
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Mark as read
    function markAsRead(notificationId) {
        fetch(`/keuangan/notifikasi/${notificationId}/mark-read/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Terjadi kesalahan: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat memproses permintaan.');
        });
    }
    
    // Archive notification
    function archiveNotification(notificationId) {
        if (confirm('Apakah Anda yakin ingin mengarsipkan notifikasi ini?')) {
            fetch(`/keuangan/notifikasi/${notificationId}/archive/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '{% url "keuangan:notifikasi_list" %}';
                } else {
                    alert('Terjadi kesalahan: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat memproses permintaan.');
            });
        }
    }
    
    // Delete notification
    function deleteNotification(notificationId) {
        if (confirm('Apakah Anda yakin ingin menghapus notifikasi ini? Tindakan ini tidak dapat dibatalkan.')) {
            fetch(`/keuangan/notifikasi/${notificationId}/delete/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '{% url "keuangan:notifikasi_list" %}';
                } else {
                    alert('Terjadi kesalahan: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat memproses permintaan.');
            });
        }
    }
</script>
{% endblock %}