{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="mb-1">Bonus Dashboard</h3>
            <p class="text-muted mb-0">Overview of policies, runs, and bonus amounts</p>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-2">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Total Policies</h6>
                    <h3>{{ total_policies }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Active Policies</h6>
                    <h3>{{ active_policies }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Total Runs</h6>
                    <h3>{{ total_runs }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Draft Runs</h6>
                    <h3>{{ draft_runs }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Frozen Runs</h6>
                    <h3>{{ frozen_runs }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Posted Runs</h6>
                    <h3>{{ posted_runs }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Total Bonus of Latest Runs</h6>
                    <h3>₹ {{ '%.2f'|format(grand_total_bonus) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white">
            <h5 class="mb-0">Latest Bonus Runs</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Policy</th>
                            <th>Type</th>
                            <th>FY</th>
                            <th>Payout Month</th>
                            <th>Status</th>
                            <th>Employees</th>
                            <th>Total Amount</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in run_summaries %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td>{{ row.policy_name }}</td>
                            <td>{{ row.bonus_type|title }}</td>
                            <td>{{ row.run.fy_label }}</td>
                            <td>{{ row.run.payout_month }}</td>
                            <td>
                                {% if row.run.status == 'draft' %}
                                    <span class="badge bg-secondary">Draft</span>
                                {% elif row.run.status == 'frozen' %}
                                    <span class="badge bg-warning text-dark">Frozen</span>
                                {% elif row.run.status == 'posted' %}
                                    <span class="badge bg-success">Posted</span>
                                {% else %}
                                    <span class="badge bg-info">{{ row.run.status }}</span>
                                {% endif %}
                            </td>
                            <td>{{ row.employee_count }}</td>
                            <td>₹ {{ '%.2f'|format(row.total_amount) }}</td>
                            <td>
                                <a href="{{ url_for('bonus.view_bonus_run', run_id=row.run.id) }}" class="btn btn-sm btn-outline-primary">
                                    View
                                </a>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="9" class="text-center text-muted">No bonus runs found.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}