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

{% block title %}Notifikasi - HMI Anggota{% endblock %}

{% block content %}
<div class="px-4 py-6 space-y-6">
    <!-- Header -->
    <div class="hmi-green rounded-2xl p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">Notifikasi</h1>
                <p class="text-green-100">{{ unread_count }} notifikasi belum dibaca</p>
            </div>
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                <i class="fas fa-bell text-3xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Filter Tabs -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div class="flex space-x-2">
            <button class="flex-1 py-2 px-4 bg-green-600 text-white rounded-lg text-sm font-medium">
                Semua
            </button>
            <button class="flex-1 py-2 px-4 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-200">
                Belum Dibaca
            </button>
            <button class="flex-1 py-2 px-4 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-200">
                Sudah Dibaca
            </button>
        </div>
    </div>

    <!-- Notifications List -->
    <div class="space-y-3">
        {% for notification in notifications %}
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 {% if not notification.is_read %}border-l-4 border-l-green-500{% endif %}">
            <div class="flex items-start space-x-3">
                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0
                    {% if notification.notification_type == 'success' %}bg-green-100
                    {% elif notification.notification_type == 'warning' %}bg-yellow-100
                    {% elif notification.notification_type == 'error' %}bg-red-100
                    {% else %}bg-blue-100{% endif %}">
                    <i class="fas fa-{% if notification.notification_type == 'success' %}check-circle{% elif notification.notification_type == 'warning' %}exclamation-triangle{% elif notification.notification_type == 'error' %}times-circle{% else %}info-circle{% endif %} 
                        text-{% if notification.notification_type == 'success' %}green{% elif notification.notification_type == 'warning' %}yellow{% elif notification.notification_type == 'error' %}red{% else %}blue{% endif %}-600"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                            <h3 class="font-semibold text-gray-900 {% if not notification.is_read %}font-bold{% endif %}">
                                {{ notification.title }}
                            </h3>
                            <p class="text-sm text-gray-600 mt-1">{{ notification.message }}</p>
                        </div>
                        {% if not notification.is_read %}
                        <div class="w-2 h-2 bg-green-500 rounded-full flex-shrink-0 ml-2"></div>
                        {% endif %}
                    </div>
                    <div class="flex items-center justify-between mt-3">
                        <span class="text-xs text-gray-500">{{ notification.created_at|date:"d M Y H:i" }}</span>
                        <div class="flex space-x-2">
                            {% if not notification.is_read %}
                            <button class="text-xs text-green-600 hover:text-green-700 font-medium" onclick="markAsRead({{ notification.id }})">
                                Tandai Dibaca
                            </button>
                            {% endif %}
                            <button class="text-xs text-gray-500 hover:text-gray-700">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="text-center py-12 text-gray-500">
            <i class="fas fa-bell-slash text-6xl mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Tidak ada notifikasi</h3>
            <p class="text-gray-600">Belum ada notifikasi untuk Anda</p>
        </div>
        {% endfor %}
    </div>

    <!-- Mark All as Read -->
    {% if notifications %}
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <i class="fas fa-check-double text-green-600"></i>
                <span class="font-medium text-gray-900">Tandai Semua Dibaca</span>
            </div>
            <button class="bg-green-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-green-700 transition-colors" onclick="markAllAsRead()">
                Tandai Semua
            </button>
        </div>
    </div>
    {% endif %}

    <!-- Notification Settings -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Pengaturan Notifikasi</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-envelope text-blue-600"></i>
                    <span class="font-medium text-gray-900">Email Notifikasi</span>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer" checked>
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                </label>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-mobile-alt text-green-600"></i>
                    <span class="font-medium text-gray-900">Push Notifikasi</span>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer" checked>
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                </label>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-sms text-yellow-600"></i>
                    <span class="font-medium text-gray-900">SMS Notifikasi</span>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                </label>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Aksi Cepat</h3>
        <div class="grid grid-cols-2 gap-3">
            <a href="{% url 'anggota:dashboard' %}" class="flex items-center space-x-3 p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-home text-green-600 text-xl"></i>
                <span class="font-medium text-gray-900">Dashboard</span>
            </a>
            <a href="{% url 'anggota:pengaturan' %}" class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-cog text-blue-600 text-xl"></i>
                <span class="font-medium text-gray-900">Pengaturan</span>
            </a>
        </div>
    </div>
</div>

<script>
    // Mark notification as read
    function markAsRead(notificationId) {
        fetch(`/anggota/notifikasi/${notificationId}/read/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Remove unread indicator
                const notification = document.querySelector(`[data-notification-id="${notificationId}"]`);
                if (notification) {
                    notification.classList.remove('border-l-green-500');
                    notification.querySelector('.font-bold').classList.remove('font-bold');
                    notification.querySelector('.bg-green-500').remove();
                }
                // Reload page to update counts
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    // Mark all notifications as read
    function markAllAsRead() {
        const unreadNotifications = document.querySelectorAll('[data-notification-id]');
        unreadNotifications.forEach(notification => {
            const notificationId = notification.getAttribute('data-notification-id');
            markAsRead(notificationId);
        });
    }

    // Filter functionality
    const filterButtons = document.querySelectorAll('button');
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from all buttons
            filterButtons.forEach(btn => {
                btn.classList.remove('bg-green-600', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            
            // Add active class to clicked button
            this.classList.remove('bg-gray-100', 'text-gray-600');
            this.classList.add('bg-green-600', 'text-white');
            
            // Here you would implement the actual filtering logic
            // For now, this is just visual feedback
        });
    });
</script>
{% endblock %}