{% extends base_template %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="small-box bg-green">
            <div class="inner">
                <h3>GHS {{ totalDonations|number_format(2) }}</h3>
                <p>Gross Donations Collected</p>
            </div>
            <div class="icon"><i class="fa fa-money"></i></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-red">
            <div class="inner">
                <h3>GHS {{ totalPaidOut|number_format(2) }}</h3>
                <p>Net Disbursed to Campaigns</p>
            </div>
            <div class="icon"><i class="fa fa-upload"></i></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>GHS {{ totalCommissions|number_format(2) }}</h3>
                <p>Platform Fees Collected</p>
            </div>
            <div class="icon"><i class="fa fa-cut"></i></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3>GHS {{ systemBalance|number_format(2) }}</h3>
                <p>Current Escrow Liquidity</p>
            </div>
            <div class="icon"><i class="fa fa-bank"></i></div>
        </div>
    </div>
</div>

<div class="box box-solid box-primary">
    <div class="box-header with-border">
        <h3 class="box-title"><i class="fa fa-shield"></i> Management Accountability Audit</h3>
    </div>
    <div class="box-body no-padding table-responsive">
        <table class="table table-hover table-bordered">
            <thead class="bg-gray">
                <tr>
                    <th>Campaign & Status</th>
                    <th>Governance</th>
                    <th>Funding Progress</th>
                    <th>Collected</th>
                    <th>Net Disbursed</th>
                    <th>Fees/Comm.</th>
                    <th>Pending Payouts</th>
                    <th>Current Balance</th>
                    <th>Milestones</th>
                </tr>
            </thead>
            <tbody>
                {% for audit in campaignAudits %}
                <tr>
                    <td>
                        <strong>{{ audit.title }}</strong><br>
                        <small class="label label-default">{{ audit.status|upper }}</small>
                    </td>
                    <td class="text-center">
                        {% if audit.hasGovernance %}
                            <i class="fa fa-check-circle text-green" title="Treasurer & Auditor Assigned"></i>
                        {% else %}
                            <i class="fa fa-warning text-red" title="Missing critical finance roles"></i>
                        {% endif %}
                        <br><small>{{ audit.donors }} Donors</small>
                    </td>
                    <td style="min-width: 150px;">
                        {% set perc = audit.target > 0 ? (audit.collected / audit.target * 100) : 0 %}
                        <div class="progress progress-xs active">
                            <div class="progress-bar progress-bar-success progress-bar-striped" style="width: {{ perc }}%"></div>
                        </div>
                        <small>{{ perc|number_format(1) }}% of GHS {{ audit.target|number_format }}</small>
                    </td>
                    <td class="text-bold text-green">{{ audit.collected|number_format(2) }}</td>
                    <td class="text-blue">{{ audit.disbursed|number_format(2) }}</td>
                    <td class="text-muted">{{ audit.fees|number_format(2) }}</td>
                    <td class="text-orange">
                        {% if audit.pending > 0 %}
                            <strong>{{ audit.pending|number_format(2) }}</strong>
                        {% else %}-{% endif %}
                    </td>
                    <td class="bg-info text-bold">
                        GHS {{ audit.balance|number_format(2) }}
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar progress-bar-aqua" style="width: {{ audit.milestoneProgress }}%"></div>
                        </div>
                        <small>{{ audit.milestoneProgress|number_format(0) }}% Work Done</small>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="box-footer">
        <p class="text-muted">
            <i class="fa fa-info-circle"></i> <strong>Escrow Liquidity</strong> represents the total cash held in the system across all campaign balances. 
            <strong>Fees</strong> are calculated based on commissions deducted during the payout process.
        </p>
    </div>
</div>
{% endblock %}