{% extends "layout.html" %}

{% block title %}Dashboard - LPEC Finance Management System{% endblock %}

{% block extra_css %}
<style>
    .dashboard-filters {
        background: white;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 25px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 35px;
    }

    .filter-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-bottom: 0;
        align-items: flex-end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        min-width: 150px;
    }

    .filter-label {
        font-size: 12px;
        font-weight: 500;
        color: #555;
        margin-bottom: 4px;
    }

    .filter-select {
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
        height: 36px;
        background-color: #fff;
    }

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

    .filter-actions {
        display: flex;
        gap: 30px;
        /* margin-left: auto; Removed to keep spacing consistent */
    }

    .btn-filter {
        padding: 0 16px;
        height: 36px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-content: center;
        transition: all 0.2s;
    }

    .btn-apply {
        background: #800000;
        color: white;
    }

    .btn-apply:hover {
        background: #600000;
    }

    .btn-reset {
        background: #f5f5f5;
        color: #333;
    }

    .btn-reset:hover {
        background: #e0e0e0;
    }

    /* Stats Grid Styles */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-left: 4px solid var(--theme-teal-dark);
        transition: transform 0.2s;
    }

    .stat-card:hover {
        transform: translateY(-2px);
    }

    .stat-title {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
    }

    .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--theme-teal-dark);
        margin-bottom: 4px;
    }

    .stat-subtitle {
        font-size: 11px;
        color: #999;
    }

    .stat-icon {
        float: right;
        font-size: 32px;
        color: var(--theme-teal-dim);
        opacity: 0.5;
    }

    .charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .chart-card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .chart-title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .chart-container {
        position: relative;
        height: 220px;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-container">
    <div class="page-header">
        <h1 class="page-title">Dashboard</h1>
        <!-- <p class="page-subtitle">Financial Overview and Analytics</p> -->
    </div>

    <!-- Filters Section -->
    <div class="dashboard-filters">
        <div class="filter-grid">
            <div class="filter-group">
                <label class="filter-label">Batch ID</label>
                <select class="filter-select" id="filterBatchId">
                    <option value="">All Batches</option>
                </select>
            </div>

            <div class="filter-group">
                <label class="filter-label">Status</label>
                <select class="filter-select" id="filterStatus">
                    <option value="">All Status</option>
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                    <option value="Dropout">Dropout</option>
                </select>
            </div>

            <div class="filter-group">
                <label class="filter-label">Payment Status</label>
                <select class="filter-select" id="filterPaymentStatus">
                    <option value="">All Payments</option>
                    <option value="Paid">Paid</option>
                    <option value="Pending">Pending</option>
                    <option value="Overdue">Overdue</option>
                    <option value="Partial">Partial Payment</option>
                </select>
            </div>

            <div class="filter-group">
                <label class="filter-label">Month</label>
                <input type="month" class="filter-select" id="filterMonth">
            </div>

            <div class="filter-group">
                <label class="filter-label">Bank</label>
                <select class="filter-select" id="filterBank">
                    <option value="">All Banks</option>
                </select>
            </div>
        </div>

        <div class="filter-actions">
            <button class="btn-filter btn-reset" onclick="resetFilters()">
                <i class="fas fa-redo"></i> Reset
            </button>
            <button class="btn-filter btn-apply" onclick="applyFilters()">
                <i class="fas fa-filter"></i> Apply Filters
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <i class="fas fa-money-bill-wave stat-icon"></i>
            <div class="stat-title">Total Income (Current Month)</div>
            <div class="stat-value" id="statTotalIncome">Rs. 0</div>
            <div class="stat-subtitle">Updated just now</div>
        </div>

        <div class="stat-card">
            <i class="fas fa-users stat-icon"></i>
            <div class="stat-title">Total Students</div>
            <div class="stat-value" id="statTotalStudents">0</div>
            <div class="stat-subtitle">All enrolled students</div>
        </div>

        <div class="stat-card">
            <i class="fas fa-user-check stat-icon"></i>
            <div class="stat-title">Active Students</div>
            <div class="stat-value" id="statActiveStudents">0</div>
            <div class="stat-subtitle">Currently active</div>
        </div>

        <div class="stat-card" style="cursor: pointer;" onclick="window.location.href='/payments/verification'">
            <i class="fas fa-check-double stat-icon" style="color: #ffc107;"></i>
            <div class="stat-title">Pending Verifications</div>
            <div class="stat-value" id="statPendingVerifications" style="color: #ffc107;">0</div>
            <div class="stat-subtitle">Click to review submissions</div>
        </div>

        <div class="stat-card">
            <i class="fas fa-exclamation-triangle stat-icon"></i>
            <div class="stat-title">Overdue Payments</div>
            <div class="stat-value" id="statOverduePayments">0</div>
            <div class="stat-subtitle">Requires attention</div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="charts-grid">
        <div class="chart-card">
            <h3 class="chart-title">Monthly Income Trend</h3>
            <div class="chart-container">
                <canvas id="incomeChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <h3 class="chart-title">Student Status Distribution</h3>
            <div class="chart-container">
                <canvas id="statusChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <h3 class="chart-title">Dropout Statistics</h3>
            <div class="chart-container">
                <canvas id="dropoutChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <h3 class="chart-title">Payment Status Distribution</h3>
            <div class="chart-container">
                <canvas id="paymentStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/static/js/dashboard.js"></script>
{% endblock %}