{% extends "core/base.html" %}
{% load static %}
{% block title %}Notifications - SwiftPOS{% endblock %}
{% block topbar_title %}Notifications{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <!-- Page Header -->
    <div class="sp-page-header">
        <div>
            <h1 class="sp-page-title"><i class="fas fa-bell"></i>Notifications</h1>
            <p class="sp-page-subtitle">
                {% if unread_count %}{{ unread_count }} unread notification{{ unread_count|pluralize }}{% else %}All caught up!{% endif %}
            </p>
        </div>
    </div>

    {% if page_obj %}
    <div class="d-flex flex-column gap-2">
        {% for notif in page_obj %}
        <div class="card border-0 shadow-sm notif-card {% if not notif.is_read %}border-start border-3 {% if notif.notification_type == 'danger' %}border-danger{% elif notif.notification_type == 'warning' %}border-warning{% elif notif.notification_type == 'success' %}border-success{% else %}border-primary{% endif %}{% else %}opacity-70{% endif %}"
             id="notif-{{ notif.id }}">
            <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
                <div class="notif-icon text-center" style="min-width:36px;">
                    <i class="fas {{ notif.icon|default:'fa-bell' }}
                        {% if notif.notification_type == 'danger' %}text-danger{% elif notif.notification_type == 'warning' %}text-warning{% elif notif.notification_type == 'success' %}text-success{% else %}text-primary{% endif %}"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="fw-semibold small">{{ notif.title }}</div>
                    <div class="text-muted small">{{ notif.message }}</div>
                </div>
                <div class="d-flex flex-column align-items-end gap-1">
                    <small class="text-muted">{{ notif.created_at|timesince }} ago</small>
                    {% if not notif.is_read %}
                    <button class="btn btn-xs btn-outline-secondary mark-notif-read"
                            data-id="{{ notif.id }}"
                            data-url="{% url 'analytics:notification_read' notif.id %}"
                            style="font-size:0.7rem;padding:2px 6px;">
                        Mark read
                    </button>
                    {% endif %}
                    {% if notif.url %}
                    <a href="{{ notif.url }}" class="btn btn-xs btn-outline-primary" style="font-size:0.7rem;padding:2px 6px;">View</a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
    <nav class="mt-4">
        <ul class="pagination justify-content-center mb-0">
            {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
            {% endif %}
            <li class="page-item disabled"><span class="page-link">{{ page_obj.number }}/{{ page_obj.paginator.num_pages }}</span></li>
            {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    {% else %}
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5">
            <i class="fas fa-bell-slash fa-3x text-muted opacity-25 d-block mb-3"></i>
            <p class="text-muted mb-0">No notifications yet.</p>
        </div>
    </div>
    {% endif %}
</div>

{% block extra_css %}
<style>
.opacity-70 { opacity: 0.65; }
.notif-card { transition: transform 0.15s; }
.notif-card:hover { transform: translateX(2px); }
</style>
{% endblock %}

<script>
document.querySelectorAll('.mark-notif-read').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.dataset.id;
        const url = this.dataset.url;
        const card = document.getElementById(`notif-${id}`);
        fetch(url, {
            method: 'POST',
            headers: {'X-CSRFToken': '{{ csrf_token }}'}
        })
        .then(r => r.json())
        .then(() => {
            card.classList.add('opacity-70');
            card.classList.remove('border-start','border-3','border-danger','border-warning','border-success','border-primary');
            this.remove();
        });
    });
});
</script>
{% endblock %}