{% extends 'super_admin_templates/base.html' %}
{% block content %}

<!-- Start::app-content -->
<style type="text/css">
</style>

<script>
    function filterMerchants(merchantTypeId, merchantSelectId) {
        const merchantType = document.getElementById(merchantTypeId).value;
        const merchantSelect = document.getElementById(merchantSelectId);
        const options = merchantSelect.options;

        for (let i = 0; i < options.length; i++) {
            const option = options[i];
            if (option.value === "") continue; // Skip the default option
            const showOption = option.getAttribute('data-type') === merchantType || merchantType === "";
            option.style.display = showOption ? 'block' : 'none';
        }
    }
</script>

<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Reports</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Balance Reports</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <!-- Start::Tabs -->
                    <div class="card-header">
                        <div class="card-title">
                            Balance Reports List
                        </div>
                    </div>
                    <div class="card-body">
                        {% with messages = get_flashed_messages() %}
                        {% if messages %}
                        <ul class="flashes">
                            {% for message in messages %}
                            <h2><b>
                                    <center style="color:green">{{ message }}</center>
                                </b></h2>
                            {% endfor %}
                        </ul>
                        {% endif %}
                        {% endwith %}
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>
                        <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block" role="tablist">
                            <!-- {% if 'edit' in session.get('creditToWalletPermissions', []) %} -->
                            {% if redirectval == "payinBalanceReports" %}
                            <a class="nav-link active" data-bs-toggle="tab" role="tab" aria-current="page" href="#payin"
                                aria-selected="true">Payin Balance Reports</a>
                            {% else %}
                            <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page" href="#payin"
                                aria-selected="true">Payin Balance Reports</a>
                            {% endif %}
                            <!-- {% endif %} -->
                            <!-- {% if 'edit' in session.get('debitFromWalletPermissions', []) %} -->
                            {% if redirectval == "payoutBalanceReports" %}
                            <a class="nav-link active" data-bs-toggle="tab" role="tab" href="#payout"
                                aria-selected="false">Payout Balance Reports</a>
                            {% else %}
                            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#payout"
                                aria-selected="false">Payout Balance Reports</a>
                            {% endif %}
                            <!-- {% endif %} -->

                        </nav>

                        <div class="tab-content" id="myTabContent">
                            <!-- Payin Tab -->
                            <div class="tab-pane {% if redirectval == 'payinBalanceReports' %}show active{% endif %} text-muted" id="payin" role="tabpanel" aria-labelledby="payin-tab">
                                <div class="card custom-card mt-3">
                                    <div class="card-body">
                                        <center>
                                            {% if error %}
                                            <h2><b><span style="color:RED">{{ error }}</span></b></h2>
                                            {% endif %}
                                        </center>
                        
                                        <form method="POST" action="{{ url_for('velocity_rule_engines.payin_balance_reports') }}" class="row gy-2 gx-3 align-items-center mb-4">
                                            <input type="hidden" name="redirectTo" value="payinBalanceReports">
                                            <div class="col-auto">
                                                <select class="form-select" name="payin_merchantType" id="selectPayinMerchant" required onchange="filterMerchants('selectPayinMerchant', 'payinMerchantSelect')">
                                                    <option value="">Select Merchant Type</option>
                                                    {% for type in ['Super Distributor', 'Master Distributor', 'Area Distributor', 'Retailer'] %}
                                                        <option value="{{ type }}" {% if payin_merchantType == type %}selected{% endif %}>{{ type }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <input type="text" class="form-control flatpickrdate" name="payin_selectedDate" value="{{ payin_selectedDate }}" placeholder="Select Date" required>
                                            </div>
                                            <div class="col-auto">
                                                <select class="form-select" name="payin_merchantId" id="payinMerchantSelect">
                                                    <option value="">Select Merchant</option>
                                                    {% for each_merchant in merchantsList %}
                                                    <option value="{{ each_merchant.id }}" data-type="{{ each_merchant.merchantType }}" {% if each_merchant.id == payin_merchantId %}selected{% endif %}>
                                                        {{ each_merchant.fullName }} - {{ each_merchant.phoneNumber }}
                                                    </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <button type="submit" class="btn btn-primary">Search</button>
                                            </div>
                                        </form>
                        
                                        <div class="table-responsive">
                                            <table id="datatable-basic" class="table text-nowrap">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th scope="col">S.No</th>
                                                        <th scope="col">User Name</th>
                                                        <th scope="col">Parent Name</th>
                                                        <th scope="col">Merchant Type</th>
                                                        <th scope="col">Transaction Date</th>
                                                        <th scope="col">Balance Amount (₹)</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for report in final_payin_transaction_Data %}
                                                    <tr>
                                                        <td>{{ loop.index }}</td>
                                                        <td>{{ report.userName }}</td>
                                                        <td>{{ report.parentName }}</td>
                                                        <td>{{ report.merchantType }}</td>
                                                        <td>{{ report.createdOn }}</td>
                                                        <td>{{ report.latest_amount }}</td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                            {% with messages = get_flashed_messages() %}
                                            {% if messages %}
                                            <ul class="flashes">
                                                {% for message in messages %}
                                                <h2><b><span style="color:green">{{ message }}</span></b></h2>
                                                {% endfor %}
                                            </ul>
                                            {% endif %}
                                            {% endwith %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                            <!-- Payout Tab -->
                            <div class="tab-pane {% if redirectval == 'payoutBalanceReports' %}show active{% endif %} text-muted" id="payout" role="tabpanel" aria-labelledby="payout-tab">
                                <div class="card custom-card mt-3">
                                    <div class="card-body">
                                        <center>
                                            {% if error %}
                                            <h2><b><span style="color:RED">{{ error }}</span></b></h2>
                                            {% endif %}
                                        </center>
                        
                                        <form method="POST" action="{{ url_for('velocity_rule_engines.payout_balance_reports') }}" class="row gy-2 gx-3 align-items-center mb-4">
                                            <input type="hidden" name="redirectTo" value="payoutBalanceReports">
                                            <div class="col-auto">
                                                <select class="form-select" name="payout_merchantType" onchange="filterMerchants('selectPayoutMerchant', 'payoutMerchantSelect')" id="selectPayoutMerchant" required>
                                                    <option value="">Select Merchant Type</option>
                                                    {% for type in ['Super Distributor', 'Master Distributor', 'Area Distributor', 'Retailer'] %}
                                                        <option value="{{ type }}" {% if payout_merchantType == type %}selected{% endif %}>{{ type }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <input type="text" class="form-control flatpickrdate" name="payout_selectedDate" value="{{ payout_selectedDate }}" placeholder="Select Date" required>
                                            </div>
                                            <div class="col-auto">
                                                <select class="form-select" name="payout_merchantId" id="payoutMerchantSelect">
                                                    <option value="">Select Merchant</option>
                                                    {% for each_merchant in merchantsList %}
                                                    <option value="{{ each_merchant.id }}" data-type="{{ each_merchant.merchantType }}" {% if each_merchant.id == payout_merchantId %}selected{% endif %}>
                                                        {{ each_merchant.fullName }} - {{ each_merchant.phoneNumber }}
                                                    </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <button type="submit" class="btn btn-primary">Search</button>
                                            </div>
                                        </form>
                        
                                        <div class="table-responsive">
                                            <table id="datatable-basic" class="table text-nowrap">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th scope="col">S.No</th>
                                                        <th scope="col">User Name</th>
                                                        <th scope="col">Parent Name</th>
                                                        <th scope="col">Merchant Type</th>
                                                        <th scope="col">Transaction Date</th>
                                                        <th scope="col">Payout Balance Amount (₹)</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for report in final_transaction_Data %}
                                                    <tr>
                                                        <td>{{ loop.index }}</td>
                                                        <td>{{ report.userName }}</td>
                                                        <td>{{ report.parentName }}</td>
                                                        <td>{{ report.merchantType }}</td>
                                                        <td>{{ report.createdOn }}</td>
                                                        <td>{{ report.latest_amount }}</td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                            {% with messages = get_flashed_messages() %}
                                            {% if messages %}
                                            <ul class="flashes">
                                                {% for message in messages %}
                                                <h2><b><span style="color:green">{{ message }}</span></b></h2>
                                                {% endfor %}
                                            </ul>
                                            {% endif %}
                                            {% endwith %}
                                        </div>
                        
                                        <!-- Pagination -->
                                        <div class="col-sm-12 col-md-12 mt-3">
                                            <nav aria-label="Page navigation" class="pagination-style-1">
                                                <ul class="pagination mb-0">
                                                    {% if pagination %}
                                                    <div class="pagination">
                                                        {{ pagination.links }}
                                                    </div>
                                                    {% endif %}
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                </div>
            </div>
        </div>
        </div>
        </div>
        <!-- End::app-content -->

        {% endblock %}