{% extends 'base.html' %}

{% block title %}Screening History | DiabeScreen{% endblock %}

{% block extra_head %}
<style>
    /* History Page Specific Styles */
    .history-header {
        background: linear-gradient(135deg, #0b2b40 0%, #124e5f 100%);
        padding: 2rem 2rem 1.8rem 2rem;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .history-header::before {
        content: "📋";
        position: absolute;
        right: -20px;
        bottom: -20px;
        font-size: 8rem;
        opacity: 0.08;
        pointer-events: none;
    }

    .history-header h1 {
        font-size: 1.8rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 0.5rem;
    }

    .history-header h1 i {
        font-size: 1.8rem;
        background: rgba(255,255,255,0.15);
        padding: 10px;
        border-radius: 16px;
    }

    .history-header p {
        opacity: 0.85;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .stats-summary {
        display: flex;
        gap: 1rem;
        margin-top: 1.2rem;
        flex-wrap: wrap;
    }

    .stat-pill {
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        padding: 0.4rem 1rem;
        border-radius: 30px;
        font-size: 0.8rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Search & Filter Bar */
    .filter-bar {
        padding: 1.5rem 2rem;
        background: #f8fafc;
        border-bottom: 1px solid #e9edf2;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }

    .search-box {
        flex: 1;
        min-width: 200px;
        position: relative;
    }

    .search-box i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #8ba0ae;
        font-size: 0.9rem;
    }

    .search-box input {
        width: 100%;
        padding: 0.7rem 1rem 0.7rem 2.5rem;
        border: 2px solid #e2e8f0;
        border-radius: 2rem;
        font-size: 0.9rem;
        font-family: 'Inter', sans-serif;
        transition: all 0.2s;
        background: white;
    }

    .search-box input:focus {
        outline: none;
        border-color: #2c7a5e;
        box-shadow: 0 0 0 3px rgba(44, 122, 94, 0.1);
    }

    .filter-group {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

    .filter-select {
        padding: 0.7rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 2rem;
        background: white;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .filter-select:focus {
        outline: none;
        border-color: #2c7a5e;
    }

    .reset-btn {
        background: #eef2f7;
        border: none;
        padding: 0.7rem 1.2rem;
        border-radius: 2rem;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #1a4d5f;
    }

    .reset-btn:hover {
        background: #e2e8f0;
        transform: translateY(-1px);
    }

    /* Modern Table Design */
    .table-container {
        padding: 0 2rem 2rem 2rem;
        overflow-x: auto;
    }

    .history-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: white;
        border-radius: 1.2rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .history-table thead tr {
        background: linear-gradient(135deg, #f1f5f9 0%, #e9edf2 100%);
    }

    .history-table th {
        padding: 1rem 1.2rem;
        text-align: left;
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #1a4d5f;
        border-bottom: 2px solid #dce5ec;
    }

    .history-table td {
        padding: 1rem 1.2rem;
        border-bottom: 1px solid #eef2f8;
        color: #2c3e44;
        font-size: 0.9rem;
    }

    .history-table tbody tr {
        transition: all 0.2s;
    }

    .history-table tbody tr:hover {
        background: #f8fafc;
        transform: scale(1.01);
    }

    .history-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Risk Badge Styles */
    .risk-badge-small {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0.25rem 0.9rem;
        border-radius: 30px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .risk-high-small {
        background: #fee2e2;
        color: #991b1b;
    }

    .risk-moderate-small {
        background: #ffedd5;
        color: #b45309;
    }

    .risk-low-small {
        background: #dcfce7;
        color: #166534;
    }

    .risk-none-small {
        background: #e0e7ff;
        color: #3730a3;
    }

    /* View Button */
    .view-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #0b2b40;
        color: white;
        padding: 0.4rem 1rem;
        border-radius: 2rem;
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 600;
        transition: all 0.2s;
    }

    .view-btn:hover {
        background: #1c7e54;
        transform: translateX(3px);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 3rem 2rem;
        background: #f8fafc;
        border-radius: 1.2rem;
    }

    .empty-state i {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        color: #1a4d5f;
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: #6c8b9b;
    }

    .empty-state a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 1rem;
        background: #2c7a5e;
        color: white;
        padding: 0.6rem 1.2rem;
        border-radius: 2rem;
        text-decoration: none;
        font-weight: 500;
    }

    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
    }

    .page-link {
        padding: 0.5rem 0.9rem;
        border-radius: 0.5rem;
        text-decoration: none;
        color: #1a4d5f;
        font-weight: 500;
        transition: all 0.2s;
        background: #f1f5f9;
    }

    .page-link:hover {
        background: #2c7a5e;
        color: white;
    }

    .page-link.active {
        background: #2c7a5e;
        color: white;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .filter-bar {
            flex-direction: column;
            align-items: stretch;
            padding: 1rem;
        }
        
        .table-container {
            padding: 0 1rem 1rem 1rem;
        }
        
        .history-header {
            padding: 1.5rem;
        }
        
        .history-table th,
        .history-table td {
            padding: 0.75rem;
            font-size: 0.8rem;
        }
        
        .risk-badge-small {
            padding: 0.2rem 0.6rem;
            font-size: 0.65rem;
        }
        
        .view-btn {
            padding: 0.3rem 0.8rem;
            font-size: 0.7rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="history-header">
    <h1>
        <i class="fas fa-clock-rotate-left"></i>
        Screening History
    </h1>
    <p>
        <i class="fas fa-chart-line"></i> Track your diabetes risk assessments over time
    </p>
    
    {% if patients %}
    <div class="stats-summary">
        <div class="stat-pill">
            <i class="fas fa-database"></i> Total: {{ patients|length }} records
        </div>
        <div class="stat-pill">
            <i class="fas fa-chart-simple"></i> Last 30 days: 
            {% with last30=patients|dictsortreversed:"created_at"|slice:":30"|length %}
                {{ last30 }}
            {% endwith %}
        </div>
    </div>
    {% endif %}
</div>

<div class="filter-bar">
    <div class="search-box">
        <i class="fas fa-search"></i>
        <input type="text" id="searchInput" placeholder="Search by ID or risk level..." onkeyup="filterTable()">
    </div>
    <div class="filter-group">
        <i class="fas fa-filter" style="color: #6c8b9b;"></i>
        <select id="riskFilter" class="filter-select" onchange="filterTable()">
            <option value="all">All Risk Levels</option>
            <option value="high">High Risk</option>
            <option value="moderate">Moderate Risk</option>
            <option value="low">Low Risk</option>
        </select>
        <button class="reset-btn" onclick="resetFilters()">
            <i class="fas fa-undo-alt"></i> Reset
        </button>
    </div>
</div>

<div class="table-container">
    {% if patients %}
    <table class="history-table" id="historyTable">
        <thead>
            <tr>
                <th><i class="fas fa-hashtag"></i> ID</th>
                <th><i class="fas fa-calendar-alt"></i> Age</th>
                <th><i class="fas fa-exclamation-triangle"></i> Risk Level</th>
                <th><i class="fas fa-calendar-day"></i> Date</th>
                <th><i class="fas fa-eye"></i> Action</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            {% for patient in patients %}
            <tr class="history-row" data-risk="{{ patient.risk_level|lower }}" data-id="{{ patient.id }}" data-age="{{ patient.age }}">
                <td><strong>#{{ patient.id }}</strong></td>
                <td>{{ patient.age }} years</td>
                <td>
                    <span class="risk-badge-small 
                        {% if patient.risk_level|lower == 'high' or patient.risk_level|lower == 'high risk' %}risk-high-small
                        {% elif patient.risk_level|lower == 'moderate' or patient.risk_level|lower == 'medium' or patient.risk_level|lower == 'moderate risk' %}risk-moderate-small
                        {% elif patient.risk_level|lower == 'low' or patient.risk_level|lower == 'low risk' %}risk-low-small
                        {% else %}risk-none-small{% endif %}">
                        <i class="fas fa-heartbeat"></i> {{ patient.risk_level }}
                    </span>
                </td>
                <td>
                    <i class="far fa-calendar-alt" style="margin-right: 5px; color: #8ba0ae;"></i>
                    {{ patient.created_at|date:"M d, Y" }}
                    <span style="font-size: 0.7rem; color: #8ba0ae;">
                        {{ patient.created_at|time:"g:i A" }}
                    </span>
                </td>
                <td>
                    <a href="/patient/{{ patient.id }}/" class="view-btn">
                        <i class="fas fa-arrow-right"></i> View Details
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <!-- Simple pagination (optional enhancement) -->
    {% if patients|length > 10 %}
    <div class="pagination" id="pagination">
        <button class="page-link" onclick="prevPage()"><i class="fas fa-chevron-left"></i></button>
        <span id="pageInfo" class="page-link" style="background: transparent; cursor: default;">Page 1</span>
        <button class="page-link" onclick="nextPage()"><i class="fas fa-chevron-right"></i></button>
    </div>
    {% endif %}
    
    {% else %}
    <div class="empty-state">
        <i class="fas fa-folder-open"></i>
        <h3>No Screening Records Found</h3>
        <p>You haven't completed any diabetes risk assessments yet.</p>
        <a href="/">
            <i class="fas fa-stethoscope"></i> Start Your First Screening
        </a>
    </div>
    {% endif %}
</div>

<script>
    // Search and filter functionality
    function filterTable() {
        const searchValue = document.getElementById('searchInput').value.toLowerCase();
        const riskFilter = document.getElementById('riskFilter').value.toLowerCase();
        const rows = document.querySelectorAll('.history-row');
        let visibleCount = 0;
        
        rows.forEach(row => {
            const id = row.getAttribute('data-id');
            const risk = row.getAttribute('data-risk');
            const age = row.getAttribute('data-age');
            
            let matchesSearch = false;
            let matchesRisk = false;
            
            // Search matching (ID, risk, age)
            if (searchValue === '') {
                matchesSearch = true;
            } else {
                if (id.includes(searchValue) || 
                    risk.includes(searchValue) || 
                    age.includes(searchValue)) {
                    matchesSearch = true;
                }
            }
            
            // Risk filter matching
            if (riskFilter === 'all') {
                matchesRisk = true;
            } else {
                if (risk.includes(riskFilter)) {
                    matchesRisk = true;
                }
            }
            
            if (matchesSearch && matchesRisk) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });
        
        // Update visible count in stats if needed
        updateVisibleCount(visibleCount);
        
        // Reset pagination when filtering
        currentPage = 1;
        setupPagination();
    }
    
    function updateVisibleCount(visible) {
        // Optional: Update a small counter
        const statsSummary = document.querySelector('.stats-summary');
        if (statsSummary && !document.querySelector('.filter-count')) {
            const filterStat = document.createElement('div');
            filterStat.className = 'stat-pill filter-count';
            filterStat.innerHTML = '<i class="fas fa-filter"></i> Showing: <span id="visibleCount">' + visible + '</span> records';
            if (!document.querySelector('.filter-count')) {
                statsSummary.appendChild(filterStat);
            }
        }
        const visibleSpan = document.getElementById('visibleCount');
        if (visibleSpan) {
            visibleSpan.textContent = visible;
        }
    }
    
    function resetFilters() {
        document.getElementById('searchInput').value = '';
        document.getElementById('riskFilter').value = 'all';
        filterTable();
    }
    
    // Pagination logic (for better UX with many records)
    let currentPage = 1;
    let rowsPerPage = 10;
    
    function setupPagination() {
        const rows = Array.from(document.querySelectorAll('.history-row')).filter(row => row.style.display !== 'none');
        const totalPages = Math.ceil(rows.length / rowsPerPage);
        
        if (totalPages <= 1) {
            const paginationDiv = document.getElementById('pagination');
            if (paginationDiv) paginationDiv.style.display = 'none';
            return;
        }
        
        const paginationDiv = document.getElementById('pagination');
        if (paginationDiv) paginationDiv.style.display = 'flex';
        
        // Hide all rows first
        rows.forEach(row => row.style.display = 'none');
        
        // Show rows for current page
        const start = (currentPage - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        rows.slice(start, end).forEach(row => row.style.display = '');
        
        // Update page info
        const pageInfo = document.getElementById('pageInfo');
        if (pageInfo) {
            pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
        }
        
        // Update button states
        const prevBtn = document.querySelector('#pagination button:first-child');
        const nextBtn = document.querySelector('#pagination button:last-child');
        if (prevBtn) {
            prevBtn.disabled = currentPage === 1;
            prevBtn.style.opacity = currentPage === 1 ? '0.5' : '1';
        }
        if (nextBtn) {
            nextBtn.disabled = currentPage === totalPages;
            nextBtn.style.opacity = currentPage === totalPages ? '0.5' : '1';
        }
    }
    
    function prevPage() {
        if (currentPage > 1) {
            currentPage--;
            setupPagination();
        }
    }
    
    function nextPage() {
        const rows = Array.from(document.querySelectorAll('.history-row')).filter(row => row.style.display !== 'none');
        const totalPages = Math.ceil(rows.length / rowsPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            setupPagination();
        }
    }
    
    // Initialize pagination on load
    document.addEventListener('DOMContentLoaded', function() {
        if (document.querySelectorAll('.history-row').length > 0) {
            setupPagination();
        }
        
        // Add keyboard shortcut for reset (Alt+R)
        document.addEventListener('keydown', function(e) {
            if (e.altKey && e.key === 'r') {
                resetFilters();
            }
        });
    });
</script>
{% endblock %}