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

{% block title %}{{ notification.title }} - Notifications - AdTlas{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'notifications:list' %}">Notifications</a></li>
        <li class="breadcrumb-item active">{{ notification.title|truncatechars:30 }}</li>
    </ol>
</nav>
{% endblock %}

{% block extra_css %}
<style>
    .notification-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .notification-content {
        line-height: 1.8;
    }
    .notification-meta {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
    }
    .action-button {
        transition: all 0.3s ease;
    }
    .action-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <!-- Notification Header -->
        <div class="notification-header">
            <div class="d-flex align-items-start justify-content-between">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center mb-2">
                        <i class="{{ notification.notification_type.icon }} fa-2x me-3"></i>
                        <div>
                            <h1 class="h3 mb-0">{{ notification.title }}</h1>
                            <p class="mb-0 opacity-75">{{ notification.notification_type.name }}</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mt-3">
                        {% if not notification.is_read %}
                        <span class="badge bg-warning me-2">
                            <i class="fas fa-circle me-1"></i>Unread
                        </span>
                        {% else %}
                        <span class="badge bg-success me-2">
                            <i class="fas fa-check me-1"></i>Read
                        </span>
                        {% endif %}
                        
                        {% if notification.notification_type.priority >= 4 %}
                        <span class="badge bg-danger me-2">
                            <i class="fas fa-exclamation-triangle me-1"></i>High Priority
                        </span>
                        {% endif %}
                        
                        <span class="badge bg-light text-dark">
                            <i class="fas fa-clock me-1"></i>{{ notification.created_at|timesince }} ago
                        </span>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="d-flex flex-column gap-2">
                    {% if not notification.is_read %}
                    <button type="button" class="btn btn-light action-button" id="markReadBtn">
                        <i class="fas fa-check me-1"></i>Mark as Read
                    </button>
                    {% endif %}
                    
                    {% if not notification.is_archived %}
                    <button type="button" class="btn btn-outline-light action-button" id="archiveBtn">
                        <i class="fas fa-archive me-1"></i>Archive
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Notification Content -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-file-alt me-2"></i>Message
                </h5>
            </div>
            <div class="card-body">
                <div class="notification-content">
                    {{ notification.message|linebreaks }}
                </div>
                
                {% if notification.action_url %}
                <div class="mt-4">
                    <a href="{{ notification.action_url }}" class="btn btn-primary action-button">
                        <i class="fas fa-external-link-alt me-1"></i>Take Action
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Additional Data -->
        {% if notification.data %}
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-info-circle me-2"></i>Additional Information
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        {% for key, value in notification.data.items %}
                        <tr>
                            <td class="fw-bold text-capitalize">{{ key|title }}</td>
                            <td>{{ value }}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Related Object -->
        {% if notification.content_object %}
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-link me-2"></i>Related Item
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="mb-1">{{ notification.content_type.model|title }}</h6>
                        <p class="text-muted mb-0">{{ notification.content_object }}</p>
                    </div>
                    {% if notification.content_object.get_absolute_url %}
                    <a href="{{ notification.content_object.get_absolute_url }}" class="btn btn-outline-primary">
                        <i class="fas fa-eye me-1"></i>View
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Notification Meta -->
        <div class="notification-meta">
            <h6 class="fw-bold mb-3">
                <i class="fas fa-info-circle me-2"></i>Notification Details
            </h6>
            
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label fw-bold">Type</label>
                    <div class="d-flex align-items-center">
                        <i class="{{ notification.notification_type.icon }} text-{{ notification.notification_type.color }} me-2"></i>
                        <span>{{ notification.notification_type.name }}</span>
                    </div>
                </div>
                
                <div class="col-6">
                    <label class="form-label fw-bold">Priority</label>
                    <div>
                        {% if notification.notification_type.priority == 5 %}
                        <span class="badge bg-danger">Critical</span>
                        {% elif notification.notification_type.priority == 4 %}
                        <span class="badge bg-warning">High</span>
                        {% elif notification.notification_type.priority == 3 %}
                        <span class="badge bg-info">Normal</span>
                        {% elif notification.notification_type.priority == 2 %}
                        <span class="badge bg-secondary">Low</span>
                        {% else %}
                        <span class="badge bg-light text-dark">Very Low</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="col-6">
                    <label class="form-label fw-bold">Status</label>
                    <div>
                        {% if notification.is_archived %}
                        <span class="badge bg-secondary">Archived</span>
                        {% elif notification.is_read %}
                        <span class="badge bg-success">Read</span>
                        {% else %}
                        <span class="badge bg-warning">Unread</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="col-12">
                    <label class="form-label fw-bold">Created</label>
                    <div>
                        <i class="fas fa-calendar me-1"></i>
                        {{ notification.created_at|date:"M d, Y" }}
                        <br>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>
                            {{ notification.created_at|time:"g:i A" }}
                        </small>
                    </div>
                </div>
                
                {% if notification.read_at %}
                <div class="col-12">
                    <label class="form-label fw-bold">Read</label>
                    <div>
                        <i class="fas fa-calendar-check me-1"></i>
                        {{ notification.read_at|date:"M d, Y" }}
                        <br>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>
                            {{ notification.read_at|time:"g:i A" }}
                        </small>
                    </div>
                </div>
                {% endif %}
                
                {% if notification.expires_at %}
                <div class="col-12">
                    <label class="form-label fw-bold">Expires</label>
                    <div>
                        <i class="fas fa-calendar-times me-1"></i>
                        {{ notification.expires_at|date:"M d, Y" }}
                        <br>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>
                            {{ notification.expires_at|time:"g:i A" }}
                        </small>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-bolt me-2"></i>Quick Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'notifications:list' %}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Notifications
                    </a>
                    
                    {% if not notification.is_read %}
                    <button type="button" class="btn btn-success" id="markReadBtn2">
                        <i class="fas fa-check me-1"></i>Mark as Read
                    </button>
                    {% endif %}
                    
                    {% if not notification.is_archived %}
                    <button type="button" class="btn btn-warning" id="archiveBtn2">
                        <i class="fas fa-archive me-1"></i>Archive
                    </button>
                    {% endif %}
                    
                    <button type="button" class="btn btn-danger" id="deleteBtn">
                        <i class="fas fa-trash me-1"></i>Delete
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Related Notifications -->
        {% if related_notifications %}
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-layer-group me-2"></i>Related Notifications
                </h6>
            </div>
            <div class="card-body">
                {% for related in related_notifications %}
                <div class="d-flex align-items-start mb-3">
                    <i class="{{ related.notification_type.icon }} text-{{ related.notification_type.color }} me-2 mt-1"></i>
                    <div class="flex-grow-1">
                        <a href="{% url 'notifications:detail' related.pk %}" class="text-decoration-none">
                            <div class="fw-bold">{{ related.title|truncatechars:40 }}</div>
                        </a>
                        <small class="text-muted">{{ related.created_at|timesince }} ago</small>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Mark notification as read
$('#markReadBtn, #markReadBtn2').on('click', function() {
    $.ajax({
        url: '{% url "notifications:mark_read" notification.pk %}',
        method: 'POST',
        headers: {
            'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(response) {
            if (response.success) {
                location.reload();
            }
        },
        error: function() {
            alert('Error marking notification as read');
        }
    });
});

// Archive notification
$('#archiveBtn, #archiveBtn2').on('click', function() {
    if (confirm('Archive this notification?')) {
        $.ajax({
            url: '{% url "notifications:archive" notification.pk %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = '{% url "notifications:list" %}';
                }
            },
            error: function() {
                alert('Error archiving notification');
            }
        });
    }
});

// Delete notification
$('#deleteBtn').on('click', function() {
    if (confirm('Are you sure you want to delete this notification? This action cannot be undone.')) {
        $.ajax({
            url: '{% url "notifications:delete" notification.pk %}',
            method: 'DELETE',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = '{% url "notifications:list" %}';
                }
            },
            error: function() {
                alert('Error deleting notification');
            }
        });
    }
});

// Auto-mark as read when page loads (if unread)
{% if not notification.is_read %}
$(document).ready(function() {
    setTimeout(function() {
        $.ajax({
            url: '{% url "notifications:mark_read" notification.pk %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                // Silently mark as read after 3 seconds
            }
        });
    }, 3000);
});
{% endif %}
</script>
{% endblock %}