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

{% block title %}Notifikasi - Sistem Keuangan HMI{% endblock %}
{% block page_title %}Notifikasi{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header dengan Filter -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Semua Notifikasi</h3>
                <p class="text-sm text-gray-600">Kelola notifikasi keuangan Anda</p>
            </div>
            
            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                <!-- Mark All Read Button -->
                <button id="mark-all-read-btn" 
                        class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-check-double mr-2"></i>
                    Tandai Semua Dibaca
                </button>
                
                <!-- Settings Button -->
                <a href="{% url 'keuangan:pengaturan_notifikasi' %}" 
                   class="px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500">
                    <i class="fas fa-cog mr-2"></i>
                    Pengaturan
                </a>
            </div>
        </div>
        
        <!-- Filter Options -->
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Filter by Type -->
            <div>
                <label for="filter-tipe" class="block text-sm font-medium text-gray-700 mb-2">Tipe Notifikasi</label>
                <select id="filter-tipe" name="tipe" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                    <option value="">Semua Tipe</option>
                    <option value="transaksi_baru" {% if tipe == 'transaksi_baru' %}selected{% endif %}>Transaksi Baru</option>
                    <option value="donasi_baru" {% if tipe == 'donasi_baru' %}selected{% endif %}>Donasi Baru</option>
                    <option value="iuran_telat" {% if tipe == 'iuran_telat' %}selected{% endif %}>Iuran Telat</option>
                    <option value="laporan_ready" {% if tipe == 'laporan_ready' %}selected{% endif %}>Laporan Siap</option>
                    <option value="saldo_rendah" {% if tipe == 'saldo_rendah' %}selected{% endif %}>Saldo Rendah</option>
                    <option value="pengingat" {% if tipe == 'pengingat' %}selected{% endif %}>Pengingat</option>
                    <option value="sistem" {% if tipe == 'sistem' %}selected{% endif %}>Sistem</option>
                </select>
            </div>
            
            <!-- Filter by Priority -->
            <div>
                <label for="filter-prioritas" class="block text-sm font-medium text-gray-700 mb-2">Prioritas</label>
                <select id="filter-prioritas" name="prioritas" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                    <option value="">Semua Prioritas</option>
                    <option value="rendah" {% if prioritas == 'rendah' %}selected{% endif %}>Rendah</option>
                    <option value="sedang" {% if prioritas == 'sedang' %}selected{% endif %}>Sedang</option>
                    <option value="tinggi" {% if prioritas == 'tinggi' %}selected{% endif %}>Tinggi</option>
                    <option value="urgent" {% if prioritas == 'urgent' %}selected{% endif %}>Urgent</option>
                </select>
            </div>
            
            <!-- Filter by Status -->
            <div>
                <label for="filter-status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select id="filter-status" name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                    <option value="">Semua Status</option>
                    <option value="unread" {% if status == 'unread' %}selected{% endif %}>Belum Dibaca</option>
                    <option value="read" {% if status == 'read' %}selected{% endif %}>Sudah Dibaca</option>
                </select>
            </div>
        </div>
        
        <!-- Apply Filter Button -->
        <div class="mt-4">
            <button id="apply-filter-btn" 
                    class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                <i class="fas fa-filter mr-2"></i>
                Terapkan Filter
            </button>
        </div>
    </div>
    
    <!-- Notifications List -->
    <div class="bg-white rounded-lg shadow-sm">
        {% if notifikasi %}
            <div class="divide-y divide-gray-200">
                {% for notif in notifikasi %}
                <div class="p-6 hover:bg-gray-50 transition-colors duration-200 {% if not notif.is_read %}bg-blue-50 border-l-4 border-l-blue-500{% endif %}">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center space-x-3">
                                <!-- Notification Icon -->
                                <div class="flex-shrink-0">
                                    {% if notif.tipe == 'transaksi_baru' %}
                                        <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-exchange-alt text-green-600 text-sm"></i>
                                        </div>
                                    {% elif notif.tipe == 'donasi_baru' %}
                                        <div class="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-hand-holding-heart text-purple-600 text-sm"></i>
                                        </div>
                                    {% elif notif.tipe == 'iuran_telat' %}
                                        <div class="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
                                        </div>
                                    {% elif notif.tipe == 'laporan_ready' %}
                                        <div class="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-chart-bar text-blue-600 text-sm"></i>
                                        </div>
                                    {% elif notif.tipe == 'saldo_rendah' %}
                                        <div class="h-8 w-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-exclamation-circle text-yellow-600 text-sm"></i>
                                        </div>
                                    {% elif notif.tipe == 'pengingat' %}
                                        <div class="h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-bell text-indigo-600 text-sm"></i>
                                        </div>
                                    {% else %}
                                        <div class="h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-info-circle text-gray-600 text-sm"></i>
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Notification Content -->
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center space-x-2">
                                        <h4 class="text-sm font-medium text-gray-900 truncate">
                                            {{ notif.judul }}
                                        </h4>
                                        
                                        <!-- Priority Badge -->
                                        {% if notif.prioritas == 'urgent' %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                Urgent
                                            </span>
                                        {% elif notif.prioritas == 'tinggi' %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                Tinggi
                                            </span>
                                        {% elif notif.prioritas == 'sedang' %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                Sedang
                                            </span>
                                        {% else %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                Rendah
                                            </span>
                                        {% endif %}
                                        
                                        <!-- Unread Badge -->
                                        {% if not notif.is_read %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                Baru
                                            </span>
                                        {% endif %}
                                    </div>
                                    
                                    <p class="mt-1 text-sm text-gray-600 line-clamp-2">
                                        {{ notif.pesan }}
                                    </p>
                                    
                                    <div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
                                        <span>
                                            <i class="fas fa-clock mr-1"></i>
                                            {{ notif.created_at|date:"d M Y H:i" }}
                                        </span>
                                        <span>
                                            <i class="fas fa-tag mr-1"></i>
                                            {{ notif.get_tipe_display }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="flex items-center space-x-2 ml-4">
                            {% if notif.action_url and notif.action_text %}
                                <a href="{{ notif.action_url }}" 
                                   class="px-3 py-1 bg-green-600 text-white text-xs font-medium rounded-md hover:bg-green-700">
                                    {{ notif.action_text }}
                                </a>
                            {% endif %}
                            
                            <a href="{% url 'keuangan:notifikasi_detail' notif.id %}" 
                               class="px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded-md hover:bg-gray-700">
                                Detail
                            </a>
                            
                            {% if not notif.is_read %}
                                <button onclick="markAsRead({{ notif.id }})" 
                                        class="px-3 py-1 bg-blue-600 text-white text-xs font-medium rounded-md hover:bg-blue-700">
                                    Tandai Dibaca
                                </button>
                            {% endif %}
                            
                            <button onclick="archiveNotification({{ notif.id }})" 
                                    class="px-3 py-1 bg-yellow-600 text-white text-xs font-medium rounded-md hover:bg-yellow-700">
                                Arsipkan
                            </button>
                            
                            <button onclick="deleteNotification({{ notif.id }})" 
                                    class="px-3 py-1 bg-red-600 text-white text-xs font-medium rounded-md hover:bg-red-700">
                                Hapus
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- Pagination -->
            {% if notifikasi.has_other_pages %}
                <div class="px-6 py-4 border-t border-gray-200">
                    <nav class="flex items-center justify-between">
                        <div class="flex-1 flex justify-between sm:hidden">
                            {% if notifikasi.has_previous %}
                                <a href="?page={{ notifikasi.previous_page_number }}" 
                                   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">
                                    Sebelumnya
                                </a>
                            {% endif %}
                            {% if notifikasi.has_next %}
                                <a href="?page={{ notifikasi.next_page_number }}" 
                                   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
                                </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">{{ notifikasi.start_index }}</span>
                                    sampai
                                    <span class="font-medium">{{ notifikasi.end_index }}</span>
                                    dari
                                    <span class="font-medium">{{ notifikasi.paginator.count }}</span>
                                    hasil
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                    {% if notifikasi.has_previous %}
                                        <a href="?page={{ notifikasi.previous_page_number }}" 
                                           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">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    {% endif %}
                                    
                                    {% for num in notifikasi.paginator.page_range %}
                                        {% if notifikasi.number == num %}
                                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-green-50 text-sm font-medium text-green-600">
                                                {{ num }}
                                            </span>
                                        {% elif num > notifikasi.number|add:'-3' and num < notifikasi.number|add:'3' %}
                                            <a href="?page={{ num }}" 
                                               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 notifikasi.has_next %}
                                        <a href="?page={{ notifikasi.next_page_number }}" 
                                           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">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    {% endif %}
                                </nav>
                            </div>
                        </div>
                    </nav>
                </div>
            {% endif %}
        {% else %}
            <!-- Empty State -->
            <div class="text-center py-12">
                <div class="mx-auto h-12 w-12 text-gray-400">
                    <i class="fas fa-bell-slash text-4xl"></i>
                </div>
                <h3 class="mt-2 text-sm font-medium text-gray-900">Tidak ada notifikasi</h3>
                <p class="mt-1 text-sm text-gray-500">
                    {% if tipe or prioritas or status %}
                        Tidak ada notifikasi yang sesuai dengan filter yang dipilih.
                    {% else %}
                        Belum ada notifikasi untuk Anda.
                    {% endif %}
                </p>
                {% if tipe or prioritas or status %}
                    <div class="mt-6">
                        <a href="{% url 'keuangan:notifikasi_list' %}" 
                           class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                            <i class="fas fa-times mr-2"></i>
                            Hapus Filter
                        </a>
                    </div>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Filter functionality
    document.getElementById('apply-filter-btn').addEventListener('click', function() {
        const tipe = document.getElementById('filter-tipe').value;
        const prioritas = document.getElementById('filter-prioritas').value;
        const status = document.getElementById('filter-status').value;
        
        const params = new URLSearchParams();
        if (tipe) params.append('tipe', tipe);
        if (prioritas) params.append('prioritas', prioritas);
        if (status) params.append('status', status);
        
        window.location.href = '{% url "keuangan:notifikasi_list" %}' + (params.toString() ? '?' + params.toString() : '');
    });
    
    // Mark all as read
    document.getElementById('mark-all-read-btn').addEventListener('click', function() {
        if (confirm('Apakah Anda yakin ingin menandai semua notifikasi sebagai dibaca?')) {
            fetch('{% url "keuangan:notifikasi_mark_all_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.');
            });
        }
    });
    
    // 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) {
                    location.reload();
                } 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) {
                    location.reload();
                } else {
                    alert('Terjadi kesalahan: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat memproses permintaan.');
            });
        }
    }
</script>
{% endblock %}