{% extends "base.html" %}

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

    <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 or tables.laying %}
    <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>
            <li class="nav-item">
                <button class="nav-link" id="laying-tab" data-bs-toggle="tab" data-bs-target="#laying"
                    type="button">Laying
                    & Bedding Comparison</button>
        </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 class="tab-pane fade" id="laying" role="tabpanel">
                <div class="table-responsive" style="max-height: 500px;">
                    {{ tables.laying|safe }}
                </div>

            </div>
        </div>
        {% endif %}

    </div>
    {% endblock %}