{% extends "base.html" %}

{% block content %}
<div class="container-fluid mt-4">
    <h2 class="mb-4">File Comparison</h2>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
    {% endif %}
    {% endwith %}

    <div class="card p-4 shadow-sm mb-5">
        <form method="POST">
            <label class="form-label fw-bold">RA Bill No</label>
            <input type="text" name="RA_Bill_No" class="form-control mb-3" value="{{ ra_val }}" required>

            <div class="row">
                <div class="col-md-6">
                    <button type="submit" name="action" value="preview" class="btn btn-secondary w-100">Preview
                        Data</button>
                </div>
                <div class="col-md-6">
                    <button type="submit" name="action" value="download" class="btn btn-primary w-100">Download Excel
                        Report</button>
                </div>
            </div>
        </form>
    </div>

    {% if tables.tr or tables.mh or tables.dc %}
    <div class="card shadow-sm p-3">
        <h4 class="mb-3">Comparison Preview</h4>

        <ul class="nav nav-tabs" id="reportTabs" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" id="tr-tab" data-bs-toggle="tab" data-bs-target="#tr"
                    type="button">Tr.Ex Comparison</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="mh-tab" data-bs-toggle="tab" data-bs-target="#mh" type="button">Mh.Ex
                    Comparison</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="dc-tab" data-bs-toggle="tab" data-bs-target="#dc" type="button">MH & DC
                    Comparison</button>
            </li>
        </ul>

        <div class="tab-content mt-3" id="reportTabsContent">
            <div class="tab-pane fade show active" id="tr" role="tabpanel">
                <div class="table-responsive" style="max-height: 500px;">
                    {{ tables.tr|safe }}
                </div>
            </div>
            <div class="tab-pane fade" id="mh" role="tabpanel">
                <div class="table-responsive" style="max-height: 500px;">
                    {{ tables.mh|safe }}
                </div>
            </div>
            <div class="tab-pane fade" id="dc" role="tabpanel">
                <div class="table-responsive" style="max-height: 500px;">
                    {{ tables.dc|safe }}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}