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

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

{% block content %}
<div class="space-y-4 lg:space-y-6">
    <!-- Header -->
    <div class="bg-white shadow rounded-lg p-4 lg:p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h1 class="text-xl lg:text-2xl font-bold text-gray-900">Notifikasi</h1>
                <p class="text-gray-600 text-sm lg:text-base mt-1">Kelola semua notifikasi sistem</p>
            </div>
            <div class="mt-4 lg:mt-0">
                <button onclick="markAllRead()" 
                        class="inline-flex items-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-double mr-2"></i>
                    Tandai Semua Dibaca
                </button>
            </div>
        </div>
    </div>

    <!-- Notifications List -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-4 lg:px-6 lg:py-6">
            {% if notifications %}
                <div class="space-y-3">
                    {% for notification in notifications %}
                    <div class="notification-item flex items-start p-3 lg:p-4 rounded-lg border {% if not notification.is_read %}bg-blue-50 border-blue-200{% else %}bg-gray-50 border-gray-200{% endif %}">
                        <div class="flex-shrink-0">
                            {% if notification.notification_type == 'info' %}
                                <i class="fas fa-info-circle text-blue-500 text-lg lg:text-xl"></i>
                            {% elif notification.notification_type == 'success' %}
                                <i class="fas fa-check-circle text-green-500 text-lg lg:text-xl"></i>
                            {% elif notification.notification_type == 'warning' %}
                                <i class="fas fa-exclamation-triangle text-yellow-500 text-lg lg:text-xl"></i>
                            {% elif notification.notification_type == 'error' %}
                                <i class="fas fa-times-circle text-red-500 text-lg lg:text-xl"></i>
                            {% endif %}
                        </div>
                        <div class="ml-3 flex-1">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h3 class="text-sm lg:text-base font-medium {% if not notification.is_read %}text-gray-900{% else %}text-gray-700{% endif %}">
                                        {{ notification.title }}
                                    </h3>
                                    <p class="text-xs lg:text-sm text-gray-600 mt-1">
                                        {{ notification.message }}
                                    </p>
                                    <p class="text-xs text-gray-500 mt-2">
                                        {{ notification.created_at|date:"d M Y H:i" }}
                                    </p>
                                </div>
                                {% if not notification.is_read %}
                                <button onclick="markAsRead({{ notification.id }})" 
                                        class="ml-2 text-xs text-blue-600 hover:text-blue-500">
                                    <i class="fas fa-check"></i>
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-8">
                    <i class="fas fa-bell-slash text-gray-400 text-4xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Tidak ada notifikasi</h3>
                    <p class="text-gray-600">Semua notifikasi sudah dibaca atau belum ada notifikasi baru.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
function markAsRead(notificationId) {
    fetch(`/admin/notifications/${notificationId}/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();
        }
    })
    .catch(error => {
        console.error('Error marking notification as read:', error);
    });
}

function markAllRead() {
    fetch('/admin/notifications/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();
        }
    })
    .catch(error => {
        console.error('Error marking all notifications as read:', error);
    });
}
</script>
{% endblock %}