{% extends "base.html" %}

{% block title %}Tax Report{% endblock %}

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4><i class="bi bi-calculator"></i> Tax Report</h4>
    </div>

    <!-- FILTERS -->
    <form method="get" class="row g-3 mb-4">

        <div class="col-md-3">
            <select name="mode" class="form-select">
                <option value="mri" {% if mode == "mri" %}selected{% endif %}>MRI (7.5%)</option>
                <option value="annual" {% if mode == "annual" %}selected{% endif %}>Annual</option>
            </select>
        </div>

        <div class="col-md-3">
            <select name="company" class="form-select">
                <option value="false">Individual</option>
                <option value="true">Company</option>
            </select>
        </div>

        <div class="col-md-3">
            <input type="date" name="start_date" class="form-control">
        </div>

        <div class="col-md-3">
            <input type="date" name="end_date" class="form-control">
        </div>

        <div class="col-md-12">
            <button class="btn btn-primary w-100">Apply</button>
        </div>

    </form>

    <!-- KPI -->
    <div class="row g-3 mb-4">

        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Gross Income</h6>
                    <h4>KES {{ tax.gross_income|default_if_none:0 }}</h4>
                </div>
            </div>
        </div>

        {% if mode == "annual" %}
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Allowable Expenses</h6>
                    <h4>KES {{ tax.expenses|default_if_none:0 }}</h4>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Taxable Income</h6>
                    <h4>KES {{ tax.taxable_income|default_if_none:0 }}</h4>
                </div>
            </div>
        </div>

    </div>

    <!-- TAX RESULT -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">

            <h5>Tax Summary</h5>

            <p><strong>Tax Mode:</strong> {{ mode|upper }}</p>
            <p><strong>Tax Payable:</strong> KES {{ tax.tax_due|default_if_none:0 }}</p>

        </div>
    </div>

    <!-- BREAKDOWN -->
    <div class="card shadow-sm">
        <div class="card-body">

            <h6>Calculation Breakdown</h6>

            {% if mode == "mri" %}
                <p>Tax = Gross Rent × 7.5%</p>
            {% else %}
                <p>Tax = Net Income × Applicable Rate</p>
                <p>Rate:
                    {% if tax.is_company %}
                        30% (Corporate)
                    {% else %}
                        Graduated Individual
                    {% endif %}
                </p>
            {% endif %}

        </div>
    </div>

</div>

{% endblock %}