{% extends "../base.html" %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load custom_filters %}

{% block page_title %}Financial Dashboard{% endblock %}

{% block content %}
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-dashboard"></i> Financial Dashboard</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                        <li><a href="#" onclick="refreshDashboard()"><i class="fa fa-refresh"></i> Refresh</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#sendRemindersModal"><i class="fa fa-bell"></i> Send Reminders</a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">

                    {% if dashboard_data %}
                    <div class="comm-header">
                        <div class="comm-intro">
                            <div class="comm-title">Financial Dashboard</div>
                            <div class="text-muted">Track collections, budgets, and outstanding balances.</div>
                        </div>
                        <div class="comm-actions">
                            <a href="#" onclick="refreshDashboard()" class="btn btn-default"><i class="fa fa-refresh"></i> Refresh</a>
                            <a href="#" data-toggle="modal" data-target="#sendRemindersModal" class="btn btn-warning"><i class="fa fa-bell"></i> Send Reminders</a>
                        </div>
                    </div>

                    <!-- KPI Cards -->
                    <div class="row" style="margin-bottom: 30px;">
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-icon success"><i class="fa fa-percentage"></i></div>
                                <div>
                                    <div class="stat-label">Collection Rate</div>
                                    <div class="stat-value">{{ dashboard_data.collection_rate }}%</div>
                                    <div class="stat-note">Of total fees billed</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-icon warning"><i class="fa fa-chart-pie"></i></div>
                                <div>
                                    <div class="stat-label">Budget Utilization</div>
                                    <div class="stat-value">{{ dashboard_data.budget_utilization }}%</div>
                                    <div class="stat-note">Of allocated budget</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-icon info"><i class="fa fa-money"></i></div>
                                <div>
                                    <div class="stat-label">Total Collected</div>
                                    <div class="stat-value">UGX {{ dashboard_data.total_collected|intcomma }}</div>
                                    <div class="stat-note">{{ dashboard_data.current_term }} - {{ dashboard_data.current_year }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-icon danger"><i class="fa fa-exclamation-triangle"></i></div>
                                <div>
                                    <div class="stat-label">Outstanding</div>
                                    <div class="stat-value">UGX {{ dashboard_data.total_billed|subtract:dashboard_data.total_collected|intcomma }}</div>
                                    <div class="stat-note">Fees pending</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row -->
                    <div class="row" style="margin-bottom: 30px;">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fa fa-line-chart"></i> Monthly Collection vs Expenditure Trend</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="monthlyTrendChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fa fa-pie-chart"></i> Budget Distribution</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="budgetChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="row" style="margin-bottom: 30px;">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fa fa-bolt"></i> Quick Actions</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <a href="{% url 'expenditure_page' %}" class="btn btn-primary btn-block">
                                                <i class="fa fa-plus"></i> Add Expenditure
                                            </a>
                                        </div>
                                        <div class="col-md-3">
                                            <a href="{% url 'bank_reconciliation' %}" class="btn btn-info btn-block">
                                                <i class="fa fa-bank"></i> Bank Reconciliation
                                            </a>
                                        </div>
                                        <div class="col-md-3">
                                            <a href="{% url 'financial_summary_report' %}" class="btn btn-success btn-block">
                                                <i class="fa fa-file-pdf-o"></i> Generate Report
                                            </a>
                                        </div>
                                        <div class="col-md-3">
                                            <a href="{% url 'export_financial_data' %}?type=quickbooks" class="btn btn-warning btn-block">
                                                <i class="fa fa-download"></i> Export Data
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fa fa-clock-o"></i> Recent Expenditures</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Description</th>
                                                    <th>Amount</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for expenditure in recent_expenditures %}
                                                <tr>
                                                    <td>{{ expenditure.date_incurred|date:"M d" }}</td>
                                                    <td>{{ expenditure.description|truncatechars:30 }}</td>
                                                    <td>UGX {{ expenditure.amount|intcomma }}</td>
                                                    <td>
                                                        <span class="badge badge-{{ expenditure.payment_status|lower }}">
                                                            {{ expenditure.payment_status }}
                                                        </span>
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted">
                                                        No recent expenditures
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fa fa-bell"></i> Pending Approvals</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Department</th>
                                                    <th>Amount</th>
                                                    <th>Approver</th>
                                                    <th>Level</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for approval in pending_approvals %}
                                                <tr>
                                                    <td>{{ approval.expenditure.budget_item.department }}</td>
                                                    <td>UGX {{ approval.expenditure.amount|intcomma }}</td>
                                                    <td>{{ approval.current_approver.get_full_name|default:approval.current_approver.username }}</td>
                                                    <td>{{ approval.approval_level }}/{{ approval.max_approval_level }}</td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted">
                                                        No pending approvals
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% else %}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body text-center">
                                    <h4><i class="fa fa-info-circle"></i> No Data Available</h4>
                                    <p class="text-muted">Please select an academic year and term to view dashboard data.</p>
                                    <a href="{% url 'financial_summary_report' %}" class="btn btn-primary">
                                        <i class="fa fa-cog"></i> Setup Financial Data
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>

    <!-- Send Reminders Modal -->
    <div class="modal fade" id="sendRemindersModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Send Payment Reminders</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form method="post" action="{% url 'send_payment_reminders' %}">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="reminder_type">Reminder Type</label>
                            <select name="reminder_type" class="form-control" required>
                                <option value="upcoming_deadline">Upcoming Deadline (7 days)</option>
                                <option value="overdue">Overdue Payments</option>
                                <option value="final_notice">Final Notice (30+ days overdue)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <small class="form-text text-muted">
                                This will send notifications to all students with outstanding fees matching the selected criteria.
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Send Reminders</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        .comm-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#f8fafc;border:1px solid #e6edf5;border-radius:12px;padding:14px 16px;margin-bottom:14px;}
        .comm-title{font-weight:600;color:#334155;margin-bottom:4px;}
        .comm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

        .stat-card{background:#fff;border:1px solid #e6edf5;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,0.04);}    
        .stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;}
        .stat-icon.success{background:#22c55e;}
        .stat-icon.warning{background:#f59e0b;}
        .stat-icon.info{background:#38bdf8;}
        .stat-icon.danger{background:#ef4444;}
        .stat-label{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
        .stat-value{font-size:16px;font-weight:700;color:#1f2a44;line-height:1.2;}
        .stat-note{font-size:11px;color:#94a3b8;}
    </style>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function refreshDashboard() {
            location.reload();
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Initialize charts when page loads
            {% if dashboard_data and dashboard_data.monthly_collection %}
            initMonthlyTrendChart();
            {% endif %}
            {% if dashboard_data %}
            initBudgetChart();
            {% endif %}
        });

        function initMonthlyTrendChart() {
            const ctx = document.getElementById('monthlyTrendChart').getContext('2d');
            const monthlyTrendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [
                        {% for month in dashboard_data.monthly_collection %}
                        '{{ month.month|date:"M Y" }}'{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                    ],
                    datasets: [{
                        label: 'Collection',
                        data: [
                            {% for month in dashboard_data.monthly_collection %}
                            {{ month.total }}{% if not forloop.last %}, {% endif %}
                            {% endfor %}
                        ],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.1
                    }, {
                        label: 'Expenditure',
                        data: [
                            {% for month in dashboard_data.monthly_expenditure %}
                            {{ month.total|default:0 }}{% if not forloop.last %}, {% endif %}
                            {% endfor %}
                        ],
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return 'UGX ' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }

        function initBudgetChart() {
            {% if dashboard_data %}
            const budgetSpent = {{ dashboard_data.total_expenditure }};
            const budgetRemaining = {{ dashboard_data.total_budget|subtract:dashboard_data.total_expenditure }};
            {% else %}
            const budgetSpent = 0;
            const budgetRemaining = 0;
            {% endif %}
            const budgetCtx = document.getElementById('budgetChart').getContext('2d');
            const budgetChart = new Chart(budgetCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Spent', 'Remaining'],
                    datasets: [{
                        data: [budgetSpent, budgetRemaining],
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(75, 192, 192)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }
    </script>

{% endblock %}