{% extends "admin_base.html" %}
{% load static %}

{% block content %}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
    .growth-positive {
        color: #10B981;
    }
    .growth-negative {
        color: #EF4444;
    }
    .table-container {
        overflow-x: auto;
    }
    @media (max-width: 640px) {
        .table-container {
            width: 100%;
            margin-bottom: 15px;
            overflow-y: hidden;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            border: 1px solid #ddd;
        }
    }
    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .pagination a {
        margin: 0 5px;
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .pagination .current {
        font-weight: bold;
        margin: 0 5px;
        padding: 5px 10px;
    }
</style>

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-6">Site Analytics Dashboard</h1>
    
    <!-- Total Views Card -->
    <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-8" role="alert">
        <p class="font-bold">Total Site Views</p>
        <p class="text-3xl">{{ total_views|default:0 }}</p>
    </div>
    
    <!-- General Pages Section -->
    <div class="mb-12">
        <h2 class="text-xl font-semibold mb-4">General Pages Analytics</h2>
        <div class="table-container">
            <table class="min-w-full bg-white rounded-lg overflow-hidden" id="generalTable">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="py-3 px-4 text-left cursor-pointer" onclick="sortTable(0, 'generalTable')">Page Name</th>
                        <th class="py-3 px-4 text-left cursor-pointer" onclick="sortTable(1, 'generalTable', 'number')">Total Views</th>
                        <th class="py-3 px-4 text-left cursor-pointer" onclick="sortTable(2, 'generalTable', 'number')">Unique Views</th>
                        <th class="py-3 px-4 text-left">Last Month ({{ last_month }})</th>
                        <th class="py-3 px-4 text-left">This Month ({{ current_month }})</th>
                        <th class="py-3 px-4 text-left">Growth</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for page in general_pages %}
                    <tr class="hover:bg-gray-50">
                        <td class="py-3 px-4">{{ page.page_name }}</td>
                        <td class="py-3 px-4">{{ page.total_views|default:0 }}</td>
                        <td class="py-3 px-4">{{ page.unique_views|default:0 }}</td>
                        <td class="py-3 px-4">{{ page.last_month_views|default:0 }}</td>
                        <td class="py-3 px-4">{{ page.this_month_views|default:0 }}</td>
                        <td class="py-3 px-4 {% if page.growth >= 0 %}growth-positive{% else %}growth-negative{% endif %}">
                            {{ page.growth|floatformat:1 }}%
                            {% if page.growth >= 0 %}
                                ↑
                            {% else %}
                                ↓
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="py-4 px-4 text-center text-gray-500">No general page data available</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination for General Pages -->
        <div class="pagination">
            {% if general_pages.has_other_pages %}
                {% if general_pages.has_previous %}
                    <a href="?page={{ general_pages.previous_page_number }}">&laquo;</a>
                {% endif %}
                
                <span class="current">
                    Page {{ general_pages.number }} of {{ general_pages.paginator.num_pages }}
                </span>
                
                {% if general_pages.has_next %}
                    <a href="?page={{ general_pages.next_page_number }}">&raquo;</a>
                {% endif %}
            {% endif %}
        </div>
    </div>
    
    <!-- Blog Pages Section -->
    <div class="mb-12">
        <h2 class="text-xl font-semibold mb-4">Blog Pages Analytics</h2>
        <div class="table-container">
            <table class="min-w-full bg-white rounded-lg overflow-hidden" id="blogTable">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="py-3 px-4 text-left cursor-pointer" onclick="sortTable(0, 'blogTable')">Blog Post</th>
                        <th class="py-3 px-4 text-left cursor-pointer" onclick="sortTable(1, 'blogTable', 'number')">Total Views</th>
                        <th class="py-3 px-4 text-left cursor-pointer" onclick="sortTable(2, 'blogTable', 'number')">Unique Views</th>
                        <th class="py-3 px-4 text-left">Last Month ({{ last_month }})</th>
                        <th class="py-3 px-4 text-left">This Month ({{ current_month }})</th>
                        <th class="py-3 px-4 text-left">Growth</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for page in blog_pages %}
                    <tr class="hover:bg-gray-50">
                        <td class="py-3 px-4">{{ page.page_name|cut:"blog_" }}</td>
                        <td class="py-3 px-4">{{ page.total_views|default:0 }}</td>
                        <td class="py-3 px-4">{{ page.unique_views|default:0 }}</td>
                        <td class="py-3 px-4">{{ page.last_month_views|default:0 }}</td>
                        <td class="py-3 px-4">{{ page.this_month_views|default:0 }}</td>
                        <td class="py-3 px-4 {% if page.growth >= 0 %}growth-positive{% else %}growth-negative{% endif %}">
                            {{ page.growth|floatformat:1 }}%
                            {% if page.growth >= 0 %}
                                ↑
                            {% else %}
                                ↓
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="py-4 px-4 text-center text-gray-500">No blog page data available</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination for Blog Pages -->
        <div class="pagination">
            {% if blog_pages.has_other_pages %}
                {% if blog_pages.has_previous %}
                    <a href="?page={{ blog_pages.previous_page_number }}">&laquo;</a>
                {% endif %}
                
                <span class="current">
                    Page {{ blog_pages.number }} of {{ blog_pages.paginator.num_pages }}
                </span>
                
                {% if blog_pages.has_next %}
                    <a href="?page={{ blog_pages.next_page_number }}">&raquo;</a>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>

<script>
    function sortTable(columnIndex, tableId, type = 'string') {
        const table = document.getElementById(tableId);
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));
        const header = table.querySelectorAll('thead th')[columnIndex];
        const isAscending = header.getAttribute('data-sort') !== 'asc';
        
        // Reset all headers
        table.querySelectorAll('thead th').forEach(th => {
            th.removeAttribute('data-sort');
        });
        
        // Set current header
        header.setAttribute('data-sort', isAscending ? 'asc' : 'desc');
        
        rows.sort((a, b) => {
            const aValue = a.cells[columnIndex].textContent.trim();
            const bValue = b.cells[columnIndex].textContent.trim();
            
            if (type === 'number') {
                const numA = parseFloat(aValue.replace(/,/g, '')) || 0;
                const numB = parseFloat(bValue.replace(/,/g, '')) || 0;
                return isAscending ? numB - numA : numA - numB;
            } else {
                return isAscending 
                    ? bValue.localeCompare(aValue)
                    : aValue.localeCompare(bValue);
            }
        });
        
        // Reattach sorted rows
        rows.forEach(row => tbody.appendChild(row));
    }
    
    // Initial sort by total views (column 1)
    document.addEventListener('DOMContentLoaded', function() {
        sortTable(1, 'generalTable', 'number');
        sortTable(1, 'blogTable', 'number');
    });
</script>
{% endblock %}