{% extends "exams/base.html" %}
{% load static %}

{% block content %}
<div class="container-fluid px-4 mt-4">
    
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">
                <i class="fas fa-chart-line text-primary me-2"></i>
                Project Progress: {{ project.name }}
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-calendar me-1"></i>{{ project.year }} | 
                <i class="fas fa-graduation-cap me-1"></i>{{ project.academic_level.name }}
            </p>
        </div>
        <div>
            <a href="{% url 'exams:project_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Projects
            </a>
        </div>
    </div>

    <!-- Summary Cards - Hide when printing -->
    <div class="row mb-4 no-print">
        <!-- Schools Summary -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                <i class="fas fa-school me-1"></i> Schools
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ schools_with_scores }} / {{ total_schools }}
                            </div>
                            <div class="mt-2">
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar bg-primary" role="progressbar" 
                                         style="width: {{ completion_percent }}%"></div>
                                </div>
                                <small class="text-muted">{{ completion_percent }}% Complete</small>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-school fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Completed Schools -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                <i class="fas fa-check-circle me-1"></i> Completed Schools
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ schools_completed }} / {{ total_schools }}
                            </div>
                            <div class="mt-2">
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar bg-success" role="progressbar" 
                                         style="width: {{ completed_percent }}%"></div>
                                </div>
                                <small class="text-muted">{{ completed_percent }}% Complete</small>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Students Summary -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                <i class="fas fa-users me-1"></i> Students
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ students_with_scores }} / {{ total_students }}
                            </div>
                            <div class="mt-2">
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar bg-info" role="progressbar" 
                                         style="width: {{ student_completion_percent }}%"></div>
                                </div>
                                <small class="text-muted">{{ student_completion_percent }}% Complete</small>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scores Summary -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                <i class="fas fa-chart-bar me-1"></i> Scores Entered
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ total_scores_entered|default:"0" }}
                            </div>
                            <div class="mt-2">
                                <small class="text-muted">
                                    Avg {{ avg_scores_per_school }} per school
                                </small>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Schools Progress Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center no-print">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-table me-2"></i>Schools Progress Details
            </h6>
            <div>
                <button onclick="printOnlyTable();" class="btn btn-sm btn-secondary me-2">
                    <i class="fas fa-print me-1"></i> Print Table
                </button>
                <a href="?export=excel" class="btn btn-sm btn-success">
                    <i class="fas fa-file-excel me-1"></i> Export to Excel
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" width="100%" cellspacing="0" id="progressTable">
                    <thead class="table-gradient">
                        <tr>
                            <th style="color: white !important; background: transparent; width: 50px;">#</th>
                            <th style="color: white !important; background: transparent;">School Code</th>
                            <th style="color: white !important; background: transparent;">School Name</th>
                            <th style="color: white !important; background: transparent;">District</th>
                            <th style="color: white !important; background: transparent; width: 80px;">Students</th>
                            <th style="color: white !important; background: transparent; width: 100px;">With Scores</th>
                            <th style="color: white !important; background: transparent; width: 80px;">Scores</th>
                            <th style="color: white !important; background: transparent; width: 100px;">Avg/Student</th>
                            <th style="color: white !important; background: transparent; width: 120px;">Progress</th>
                            <th style="color: white !important; background: transparent; width: 120px;">Status</th>
                            <th style="color: white !important; background: transparent; width: 100px;" class="no-print">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for school_data in school_progress_list %}
                        <tr>
                            <td class="text-center">{{ school_data.rank }}</td>
                            <td>{{ school_data.school.school_code }}</td>
                            <td>{{ school_data.school.name_short }}</td>
                            <td>{{ school_data.school.district.name }}</td>
                            <td class="text-center">{{ school_data.total_students }}</td>
                            <td class="text-center">{{ school_data.students_with_scores }}</td>
                            <td class="text-center">{{ school_data.scores_entered }}</td>
                            <td class="text-center">{{ school_data.avg_subjects }}</td>
                            <td style="width: 120px;">
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar bg-{{ school_data.status_color }}" 
                                         role="progressbar" 
                                         style="width: {{ school_data.completion_percent }}%">
                                    </div>
                                </div>
                                <small>{{ school_data.completion_percent }}%</small>
                            </td>
                            <td>
                                <span class="badge bg-{{ school_data.status_color }}">
                                    <i class="fas fa-{{ school_data.status_icon }} me-1"></i>
                                    {{ school_data.status }}
                                </span>
                            </td>
                            <td class="text-center no-print">
                                <a href="{% url 'exams:project_school_summary_html' project.project_code school_data.school.school_code %}" 
                                   class="btn btn-sm btn-primary" title="View School">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'exams:school_results_upload' project.project_code school_data.school.school_code %}" 
                                   class="btn btn-sm btn-success" title="Upload Results">
                                    <i class="fas fa-upload"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="11" class="text-center py-5">
                                <i class="fas fa-inbox fa-3x mb-3 text-muted"></i>
                                <p class="text-muted">No schools found in this project.</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination - Hide when printing -->
            {% if page_obj.has_other_pages %}
            <div class="d-flex justify-content-center mt-4 no-print">
                <nav>
                    <ul class="pagination">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                                    <i class="fas fa-chevron-left"></i> Previous
                                </a>
                            </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                                    Next <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    .table-gradient {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        color: white;
    }
    .table-gradient th {
        color: white !important;
        font-weight: 600;
        padding: 12px;
        border: none;
        background: transparent !important;
    }
    .card {
        border-radius: 12px;
        overflow: hidden;
    }
    .border-left-primary {
        border-left: 4px solid #4e73df;
    }
    .border-left-success {
        border-left: 4px solid #1cc88a;
    }
    .border-left-info {
        border-left: 4px solid #36b9cc;
    }
    .border-left-warning {
        border-left: 4px solid #f6c23e;
    }
    .progress {
        border-radius: 10px;
        background-color: #e9ecef;
    }
    
    /* Print styles - ONLY table prints */
    @media print {
        /* Hide everything except the table */
        body * {
            visibility: hidden;
        }
        
        /* Make table and its contents visible */
        .card, .card-body, .table-responsive, #progressTable,
        #progressTable * {
            visibility: visible;
        }
        
        /* Position table at top of page */
        .card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
        }
        
        .card-body {
            padding: 0;
        }
        
        /* Hide pagination, buttons, headers, action columns */
        .no-print, .pagination, .card-header, .btn, 
        .pagination *, .card-header *, .actions-column,
        th:last-child, td:last-child {
            display: none !important;
        }
        
        /* Keep table header visible */
        .table-gradient {
            background: #2a5298 !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        
        /* Keep badges and progress bars visible */
        .badge, .progress-bar {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        
        /* Ensure table borders are visible */
        table, th, td {
            border: 1px solid #ddd !important;
            border-collapse: collapse !important;
        }
        
        /* Remove URLs from links */
        a[href]:after {
            content: none !important;
        }
    }
</style>

<script>
    function printOnlyTable() {
        // Store original title
        var originalTitle = document.title;
        
        // Get the table
        var table = document.getElementById('progressTable');
        
        // Create print window
        var printWindow = window.open('', '_blank');
        
        // Write HTML content
        printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>${originalTitle} - Progress Report</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
                <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
                <style>
                    body {
                        padding: 20px;
                        font-family: Arial, sans-serif;
                    }
                    .print-header {
                        text-align: center;
                        margin-bottom: 20px;
                    }
                    .print-header h2 {
                        margin: 0;
                        color: #1e3c72;
                    }
                    .print-header p {
                        margin: 5px 0;
                        color: #666;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        margin-top: 20px;
                    }
                    th, td {
                        border: 1px solid #ddd;
                        padding: 8px;
                        text-align: left;
                    }
                    th {
                        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
                        color: white;
                        font-weight: bold;
                    }
                    .text-center {
                        text-align: center;
                    }
                    .badge {
                        display: inline-block;
                        padding: 3px 8px;
                        border-radius: 4px;
                        color: white;
                        font-size: 12px;
                    }
                    .bg-success { background-color: #28a745; }
                    .bg-warning { background-color: #ffc107; color: #333; }
                    .bg-secondary { background-color: #6c757d; }
                    .progress {
                        background-color: #e9ecef;
                        border-radius: 4px;
                        height: 8px;
                        overflow: hidden;
                    }
                    .progress-bar {
                        height: 100%;
                        border-radius: 4px;
                    }
                    .bg-success { background-color: #28a745; }
                    .bg-primary { background-color: #007bff; }
                    .bg-warning { background-color: #ffc107; }
                    .bg-secondary { background-color: #6c757d; }
                    small {
                        font-size: 10px;
                    }
                    @media print {
                        body {
                            padding: 0;
                            margin: 0;
                        }
                        .no-print {
                            display: none;
                        }
                        th {
                            background: #2a5298 !important;
                            -webkit-print-color-adjust: exact;
                            print-color-adjust: exact;
                        }
                        .badge, .progress-bar {
                            -webkit-print-color-adjust: exact;
                            print-color-adjust: exact;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="print-header">
                    <h2>Project Progress Report</h2>
                    <p><strong>{{ project.name }}</strong> ({{ project.year }})</p>
                    <p>{{ project.academic_level.name }}</p>
                    <hr>
                </div>
                ${table.outerHTML}
                <div class="print-footer" style="text-align: center; margin-top: 20px; font-size: 12px; color: #666;">
                    <p>Generated on: ${new Date().toLocaleString()}</p>
                </div>
            </body>
            </html>
        `);
        
        printWindow.document.close();
        
        // Wait for content to load then print
        printWindow.onload = function() {
            printWindow.print();
            printWindow.onafterprint = function() {
                printWindow.close();
            };
        };
    }
</script>
{% endblock %}