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

<style type="text/css">
    .pagination-page-info {
        padding: .6em;
        padding-left: 0;
        width: 40em;
        margin: .5em;
        margin-left: 0;
        font-size: 12px;
    }

    .pagination-page-info b {
        color: black;
        background: #6aa6ed;
        padding-left: 2px;
        padding: .1em .25em;
        font-size: 150%;
    }

    /* Right-side popup slide-in effect */
    .right-modal .modal-dialog {
        position: fixed;
        margin: auto;
        width: 600px;
        height: 100%;
        right: 0;
        top: 0;
        bottom: 0;
        left: auto;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.3s ease-out;
    }

    .right-modal .modal.fade.show .modal-dialog {
        transform: translate3d(0, 0, 0);
    }


    .title-header-background {
        background-color: #21003F !important;
    }

    .title-header-background h5 {
        color: #f3f3f3 !important;
    }

    .model-content {
        background-color: #FAF4FF !important;
    }

    .modal-body {
        height: 80vh;
        overflow-y: auto;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .spinning {
        animation: spin 1s linear infinite;
    }

    .centered {
        text-align: center;
    }
</style>

<!-- Start::app-content -->
<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">Utility Transaction Reports</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Utility Transaction Reports List
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <form method="GET" action="{{ url_for('admin_reports.utility_transaction_reports') }}"
                                    class="row gy-2 gx-3 align-items-center mb-4">
                                    <div class="col-auto">
                                        <input type="text" class="form-control flatpickrdate" value="{{startDate}}"
                                            name="startDate" id="startDate" placeholder="Select start date">
                                        {% for error in form.startDate.errors %}
                                        <span class="text-danger">{{ error }}</span><br>
                                        {% endfor %}
                                    </div>

                                    <div class="col-auto">
                                        <input type="text" class="form-control flatpickrdate" value="{{endDate}}"
                                            name="endDate" id="endDate" placeholder="Select end date">
                                        {% for error in form.endDate.errors %}
                                        <span class="text-danger">{{ error }}</span><br>
                                        {% endfor %}
                                    </div>

                                    <div class="col-auto">
                                        <select class="form-select" id="selectStatus" name="selectStatus">
                                            <option value="All" {% if selectStatus=="All" %} selected {% endif %}>Select
                                                status
                                            </option>
                                            <option value="Success" {% if selectStatus=="Success" %} selected {% endif
                                                %}>Success</option>
                                            <option value="Processing" {% if selectStatus=="Processing" %} selected {%
                                                endif %}>Processing</option>
                                            <option value="Failed" {% if selectStatus=="Failed" %} selected {% endif %}>
                                                Failed</option>
                                        </select>
                                        {% for error in form.selectStatus.errors %}
                                        <span class="text-danger">{{ error }}</span><br>
                                        {% endfor %}
                                    </div>

                                    <div class="col-auto">
                                        <select class="form-control chosen-select" name="merchantId" id="single-default">
                                            <option value="">Select merchant</option>
                                            {% for each_merchant in merchantsList %}
                                            <option value="{{each_merchant.id}}" {% if each_merchant.id | string ==merchantId
                                                %}selected{% endif %}>{{each_merchant.fullName}} -
                                                {{each_merchant.phoneNumber}}</option>
                                            {% endfor %}

                                        </select>
                                        {% for error in form.merchantId.errors %}
                                        <span class="text-danger">{{ error }}</span><br>
                                        {% endfor %}
                                    </div>

                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{url_for('admin_reports.utility_transaction_reports')}}"><button
                                                type="button" class="btn btn-warning">Reset</button></a>
                                    </div>

                                    <div class="col-auto">
                                        <a
                                            href="{{url_for('admin_reports.admin_download_utility_transaction_csv_reports',startDate=startDate,endDate=endDate,selectStatus=selectStatus,merchantId=merchantId)}}"><button
                                                type="button"  title="Click to download" class="btn btn-secondary"><i
                                                    class="ri-file-excel-line"></i></button></a>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Add some space -->
                        <div class="mt-3"></div>
                        <!-- End space -->
                        <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">Merchant Name</th>
                                        <th scope="col">Txn.Id</th>
                                        <th scope="col">Category</th>
                                        <th scope="col">Service</th>
                                        <th scope="col">Operator</th>
                                        <th scope="col">Number</th>
                                        <th scope="col">Amount(₹)</th>
                                        <th scope="col">Grand Total(₹)</th>
                                        <th scope="col">Total Charges(₹)</th>
                                        <th scope="col">Margin</th>
                                        <th scope="col">Channel</th>
                                        <th scope="col">Payment Status</th>
                                        <th scope="col">BBPS Payment Status</th>
                                        <th scope="col">Refund Status</th>
                                        <th scope="col">Requested Date</th>
                                        <th scope="col">Updated Date</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">View</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if utilityList %}
                                    {% for each_utility in utilityList %}
                                    <tr>
                                        <td>{{ each_utility.snoCount}}</td>

                                        {% if each_utility.userName %}
                                        <td>{{ each_utility.userName }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}

                                        {% if each_utility.txnID %}
                                        <td>{{ each_utility.txnID }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.categoryName %}
                                        <td>{{ each_utility.categoryName }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.serviceName %}
                                        <td>{{ each_utility.serviceName }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.operatorName %}
                                        <td>{{ each_utility.operatorName }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.number %}
                                        <td>{{ each_utility.number }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}

                                        {% if each_utility.amount %}
                                        <td>{{ each_utility.amount }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.totalAmount %}
                                        <td>{{ each_utility.totalAmount }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.charge %}
                                        <td>{{ each_utility.charge }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.margin %}
                                        <td>{{ each_utility.margin }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_utility.channel %}
                                        <td>{{ each_utility.channel }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}

                                        {% if each_utility.paymentStatus == "Success" %}
                                        <td class="extended"><button class="btn btn-sm btn-success" type="button">{{
                                                each_utility.paymentStatus }}</button></td>
                                        {% elif each_utility.paymentStatus == "Processing" %}
                                        <td class="extended">
                                            <button class="btn btn-sm btn-warning" type="button" id="status-display-{{each_utility.id}}">{{
                                                each_utility.paymentStatus }}
                                            </button>
                                            <span style="cursor: pointer;"
                                                class="text-dark fw-semibold fs-20 lh-1 vertical-bottom"
                                                
                                                onClick="getPaymentStatus('{{each_utility.id}}')"><i
                                                    class='bx bx-refresh'></i></span>
                                        </td>
                                        {% elif each_utility.paymentStatus == "Failed" %}
                                        <td><button class="btn btn-sm btn-danger" type="button">{{
                                                each_utility.paymentStatus }}</button></td>
                                        {% else %}
                                        <td>{{ each_utility.paymentStatus }}</td>
                                        {% endif %}

                                        {% if each_utility.bbpsPaymentStatus == "Success" %}
                                        <td><button class="btn btn-sm btn-success" type="button">{{
                                                each_utility.bbpsPaymentStatus }}</button></td>
                                        {% elif each_utility.bbpsPaymentStatus == "Processing" %}
                                        <td><button class="btn btn-sm btn-warning" type="button">{{
                                                each_utility.bbpsPaymentStatus }}</button></td>
                                        {% elif each_utility.bbpsPaymentStatus == "Failed" %}
                                        <td>
                                            <div style="display: flex; gap: 5px;">
                                                <button class="btn btn-sm  btn-danger bbpsPaymentStatus"
                                                    type="button">{{each_utility.bbpsPaymentStatus }}</button>

                                                {% if each_utility.refundStatus != "Successful Refund" %}
                                                <button class="btn btn-sm rounded-circle" type="button"
                                                    title="Retry Payment" data-transaction-id="{{ each_utility.id  }}"
                                                    onclick="retryPayment('{{ each_utility.id }}', this)"
                                                    style="width: 32px; height: 32px; padding: 0; display: flex; justify-content: center; align-items: center; background-color: lightgrey; color: red;">

                                                    <svg class="refresh-icon" xmlns="http://www.w3.org/2000/svg"
                                                        width="15" height="15" viewBox="0 0 24 24" fill="none"
                                                        stroke="red" stroke-width="1" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path d="M1 4v6h6" />
                                                        <path d="M23 20v-6h-6" />
                                                        <path d="M3.51 9a9 9 0 0114.13-3.36L23 10" />
                                                        <path d="M20.49 15a9 9 0 01-14.13 3.36L1 14" />
                                                    </svg>

                                                </button>
                                                {% endif %}
                                            </div>
                                            <span class="text-danger small retry-error-message"
                                                data-error-id="{{ each_utility.id }}"></span>
                        </div>
                        </td>
                        {% else %}
                        <td>{{ each_utility.bbpsPaymentStatus }}</td>
                        {% endif %}

                        {% if each_utility.refundStatus == "Success" %}
                        <td><button class="btn btn-sm btn-success" type="button">
                                {{ each_utility.refundStatus }}</button></td>

                        {% elif each_utility.refundStatus == "Processing" %}
                        <td><button class="btn btn-sm btn-warning" type="button">{{
                                each_utility.refundStatus }}</button></td>
                        {% elif each_utility.refundStatus == "Refund Status" %}
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <button class="btn btn-sm btn-danger failedBtn" type="button"
                                    data-transaction-id="{{ each_utility.id }}" data-txnids="{{ each_utility.txnID }}"
                                    data-amount="{{ each_utility.amount }}" data-bs-toggle="modal"
                                    data-bs-target="#otpModal"
                                    onclick="viewRefundDetailsStatus('{{ each_utility.id }}')">
                                    {{ each_utility.refundStatus }}
                                </button>
                               
                            </div>
                        </td>
                        {% elif each_utility.refundStatus == "Successful Refund" %}
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <!-- Main Status Button -->
                                <button class="btn btn-sm btn-success" type="button">
                                    {{ each_utility.refundStatus }}
                                </button>

                                <!-- Eye Icon Button (only icon triggers the API) -->
                                <a href="javascript:void(0);"
                                    class="btn btn-icon btn-sm btn-success-transparent rounded-pill open-refund-details"
                                    title="View Refund Details">
                                    <i class="ri-eye-line" onclick="viewRefundDetails('{{ each_utility.id }}')"></i>
                                </a>
                            </div>
                        </td>

                        {% else %}
                        <td>{{ each_utility.refundStatus }}</td>
                        {% endif %}

                        <td>{{ each_utility.requestedDate}}</td>
                        <td>{{ each_utility.updatedDate}}</td>
                        {% if each_utility.status == "Success" %}
                        <td>
                            <button class="btn btn-sm btn-success " type="button">

                                {{ each_utility.status
                                }}</button>
                        </td>
                        {% else %}
                        <td><button class="btn btn-sm btn-danger Sbton" type="button"
                                data-txid-id="{{ each_utility.id }}">{{ each_utility.status
                                }}</button></td>
                        {% endif %}
                        <td>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-success-transparent rounded-pill open-utility-modal"
                                data-bs-toggle="modal" data-bs-target="#viewTaskModal"
                                data-status="{{ each_utility.status }}" data-username="{{ each_utility.userName }}"
                                data-txnid="{{ each_utility.txnID }}" data-category="{{ each_utility.categoryName }}"
                                data-service="{{ each_utility.serviceName }}"
                                data-operator="{{ each_utility.operatorName }}" data-number="{{ each_utility.number }}"
                                data-amount="{{ each_utility.amount }}"
                                data-totalamount="{{ each_utility.totalAmount }}"
                                data-charge="{{ each_utility.charge }}" data-margin="{{ each_utility.margin }}"
                                data-channel="{{ each_utility.channel }}"
                                data-requesteddate="{{ each_utility.requestedDate }}"
                                data-updateddate="{{ each_utility.updatedDate }}">
                                <i class="ri-eye-line"></i>
                            </a>

                        </td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="18" style="text-align: center;">No Data Found</td>
                        </tr>
                        {% endif %}
                        </tbody>
                        {% 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 %}
                        </table>
                    </div>

                    <!-- Add some space -->
                    <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>
                    <!-- End space -->
                </div>
            </div>
        </div>
    </div>
</div>
<!--End::row-1 -->

</div>
</div>
<!-- End::app-content -->
<!-- Refund Details Modal -->
<div class="modal fade" id="refundDetailsModal" tabindex="-1" aria-labelledby="refundDetailsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content model-content">
            <div class="modal-header" style="color: #2c3189 !important; background-color: #2c3189;">
                <h5 class="modal-title" id="refundDetailsModalLabel"  style="color: #ffffff !important;">Refund Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="height: 35vh;">
                <p><strong>Transaction ID:</strong> <span id="refundtransactionId"></span></p>
                <p><strong>Bank Referance Number:</strong> <span id="refundbankRefNum"></span></p>
                <p><strong>UTR Number:</strong> <span id="refundUTR_No"></span></p>
                <p><strong>Mode:</strong> <span id="refundmode"></span></p>
                <p><strong>Action:</strong> <span id="refundaction"></span></p>
                <p><strong>Amount:</strong> <span id="refundamount"></span></p>
                <p><strong>Refund Status:</strong> <span id="refundrefundStatus"></span></p>
            </div>

            <div class="modal-footer justify-content-between">
                <span id="statuserrorMessageeror" class="text-danger fw-bold small"></span>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="otpModal" tabindex="-1" aria-labelledby="otpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="otpForm">
            <div class="modal-content">
                <div class="modal-header" style="color: #2c3189 !important; background-color: #2c3189;">
                    <h5 class="modal-title" id="otpModalLabel" style="color: #ffffff !important;">OTP Verification</h5>
                </div>
                <div class="modal-body" style="height: 45vh;">
                    <p>Transaction ID: <span id="txnIdDisplay"></span></p>
                    <p>Amount: ₹<span id="amountDisplay"></span></p>
                    <input type="hidden" id="mongoId" name="mongoId" value="" />

                    <div class="form-group mt-3">
                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="otpSection"
                            data-mail-type="Profile Setup">Generate
                            OTP</button>
                        <input type="hidden" id="otpLogidotpSection" name="otpLogid">
                    </div>

                    <div class="form-group mt-3 otp-section" data-index="otpSection" style="display: none;">
                        <label for="otpCodeotpSection">Enter OTP*</label>
                        <input type="text" class="form-control otp-input" id="otpCodeotpSection" name="otpCode"
                            placeholder="Enter OTP" maxlength="6" />
                        <button type="button" class="btn btn-primary verifyOtpBtn" data-index="otpSection">Verify
                            OTP</button>
                        <button type="button" class="btn btn-secondary resendOtpBtn" data-index="otpSection">Resend
                            OTP</button>

                        <span id="otpTimerotpSection" class="text-muted"
                            style="display:none; margin-left: 10px;"></span>
                        <div id="otpMessageotpSection" class="text-danger mt-2"></div>
                    </div>
                </div>
                <div class="refund-status mt-7 p-6 border rounded">
                    <div class="modal-header" id="refundStatusHeader"
                        style="color: #7479e2 !important; background-color: #c8caf3;">
                        <h5 class="modal-title" id="otpModalLabel" style="color: #ffffff !important;">Refund Initiate Status</h5>
                    </div>

                    <div class="modal-body" id="refundStatusBody" style="height: 25vh;">
                        <p><strong>Status:</strong> <span id="status"></span></p>
                        <p><strong>Transaction Id:</strong> <span id="transactionId"></span></p>
                        <p><strong>BankRefNo:</strong> <span id="bankRefNo"></span></p>
                        <p><strong>Refund Massage:</strong> <span id="refundMassage"></span></p>
                        <p><strong>Error Code:</strong> <span id="errorCode"></span></p>
                    </div>
                    <span id="statuserror" class="text-danger fw-bold small"></span>
                </div>

                <div class="modal-footer justify-content-between">
                    <span id="errorMessage" class="error"></span>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary updateBtn" id="updateBtnotpSection"
                        disabled>Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Update Bank Modal -->
<div class="modal fade right-modal" id="viewTaskModal" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-slide" role="document">
        <div class="modal-content">
            <div class="modal-header title-header-background">
                <h5 class="modal-title" id="updateTaskLabel">View Utility Transaction Details</h5>
            </div>
            <div class="modal-body">
                <table class="table-responsive table text-nowrap">
                    <tbody>
                        <tr>
                            <th>Status:</th>
                            <td id="modalStatus"></td>
                        </tr>
                        <tr>
                            <th>Merchant Name:</th>
                            <td id="modalUserName"></td>
                        </tr>
                        <tr>
                            <th>Txn.Id:</th>
                            <td id="modalTxnID"></td>
                        </tr>
                        <tr>
                            <th>Category:</th>
                            <td id="modalCategory"></td>
                        </tr>
                        <tr>
                            <th>Service:</th>
                            <td id="modalService"></td>
                        </tr>
                        <tr>
                            <th>Operator:</th>
                            <td id="modalOperator"></td>
                        </tr>
                        <tr>
                            <th>Number:</th>
                            <td id="modalNumber"></td>
                        </tr>
                        <tr>
                            <th>Amount:</th>
                            <td id="modalAmount"></td>
                        </tr>
                        <tr>
                            <th>Grand Total:</th>
                            <td id="modalTotalAmount"></td>
                        </tr>
                        <tr>
                            <th>Total Charges:</th>
                            <td id="modalCharge"></td>
                        </tr>
                        <tr>
                            <th>Margin:</th>
                            <td id="modalMargin"></td>
                        </tr>
                        <tr>
                            <th>Channel:</th>
                            <td id="modalChannel"></td>
                        </tr>
                        <tr>
                            <th>Requested Date:</th>
                            <td id="modalRequestedDate"></td>
                        </tr>
                        <tr>
                            <th>Updated Date:</th>
                            <td id="modalUpdatedDate"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- End Update Bank Modal -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const viewButtons = document.querySelectorAll(".open-utility-modal");

        viewButtons.forEach(button => {
            button.addEventListener("click", () => {
                document.getElementById("modalStatus").textContent = button.dataset.status || "";
                document.getElementById("modalUserName").textContent = button.dataset.username || "";
                document.getElementById("modalTxnID").textContent = button.dataset.txnid || "";
                document.getElementById("modalCategory").textContent = button.dataset.category || "";
                document.getElementById("modalService").textContent = button.dataset.service || "";
                document.getElementById("modalOperator").textContent = button.dataset.operator || "";
                document.getElementById("modalNumber").textContent = button.dataset.number || "";
                document.getElementById("modalAmount").textContent = button.dataset.amount || "";
                document.getElementById("modalTotalAmount").textContent = button.dataset.totalamount || "";
                document.getElementById("modalCharge").textContent = button.dataset.charge || "";
                document.getElementById("modalMargin").textContent = button.dataset.margin || "";
                document.getElementById("modalChannel").textContent = button.dataset.channel || "";
                document.getElementById("modalRequestedDate").textContent = button.dataset.requesteddate || "";
                document.getElementById("modalUpdatedDate").textContent = button.dataset.updateddate || "";
            });
        });
    });
</script>

<script>
    function startSpin(button) {
        const icon = button.querySelector('.refresh-icon');
        icon.classList.add('spinning');
    }

    function stopSpin(button) {
        const icon = button.querySelector('.refresh-icon');
        icon.classList.remove('spinning');
    }

    function retryPayment(transactionId, button) {
        var csrfToken = $('input[name="csrf_token"]').val();
        const statusBtn = $(button).siblings('.bbpsPaymentStatus');
        $('.retry-error-message[data-error-id="' + transactionId + '"]').text('');
        // Immediately show Processing status with warning color
        statusBtn.text('Processing');
        statusBtn
            .removeClass('btn-success btn-danger btn-secondary')
            .addClass('btn-warning');

        startSpin(button);

        $.ajax({
            url: "{{ url_for('admin_reports.bbpspaymentretry') }}",
            type: 'POST',
            contentType: 'application/json',
            headers: {
                'X-CSRFToken': csrfToken
            },
            data: JSON.stringify({ transactionId: transactionId }),
            success: function (data) {
                stopSpin(button);


                if (data.responseStatus === 1) {
                    statusBtn.text('Success');
                    statusBtn
                        .removeClass('btn-warning btn-danger btn-secondary')
                        .addClass('btn-success');
                    button.style.display = 'none';

                    console.log(transactionId)
                    var $failedBtn = $('.failedBtn[data-transaction-id="' + transactionId + '"]');
                    console.log("Refund Button:", $failedBtn);

                    $failedBtn
                        .removeClass('btn-danger')
                        .addClass('btn btn-sm btn-success')
                        .text('Success')
                        .prop('disabled', true);

                    var $successBtn = $('.Sbton[data-txid-id="' + transactionId + '"]');
                    console.log("Refund2 Button:", $successBtn);

                    $successBtn
                        .removeClass('btn-danger btn-warning btn-secondary')
                        .addClass('btn-success')
                        .text('Success')
                        .prop('disabled', true);


                }
                else if (data.responseStatus === 0) {

                    const message = data.result || 'BBPS Payment Failed';
                    $('.retry-error-message[data-error-id="' + transactionId + '"]').text(message);
                    statusBtn
                        .removeClass('btn-warning btn-success btn-secondary')
                        .addClass('btn-danger')
                        .text('Failed');
                    
                    setTimeout(() => {
                            $('.retry-error-message[data-error-id="' + transactionId + '"]').text('');
                        }, 5000);
                    
                }
            },
            error: function (xhr, status, error) {
                stopSpin(button);
                statusBtn.text('Failed');
                statusBtn
                    .removeClass('btn-warning btn-success btn-secondary')
                    .addClass('btn-danger');


                console.error(error);
            }
        });
    }
</script>

<script>
    $(document).ready(function () {
        // When modal shows, clear/reset all fields
        $('#otpModal').on('show.bs.modal', function (event) {
            var csrfToken = $('input[name="csrf_token"]').val();
            var button = $(event.relatedTarget); // Button that triggered the modal
            var txnId = button.data('txnids');
            var amount = button.data('amount');
            var mongoId = button.data('transaction-id')

            console.log(txnId, "txnids")

            // Set transaction info in modal
            $('#txnIdDisplay').text(txnId);
            $('#amountDisplay').text(amount);
            $('#mongoId').text(mongoId);


            // Reset OTP section fields and state
            $('#otpMessageotpSection').text('').removeClass('text-success text-danger');
            $('#otpCodeotpSection').val('');
            $('#otpLogidotpSection').val('');
            $('#updateBtnotpSection').prop('disabled', true);
            $('.generateOtpBtn[data-index="otpSection"]').show().prop('disabled', false).text('Generate OTP');
            $('.verifyOtpBtn[data-index="otpSection"]').show();
            // $('.resendOtpBtn[data-index="otpSection"]').show();
            $('.otp-section[data-index="otpSection"]').hide();
        });

        // Step 1: Generate OTP
        $(document).off('click', '.generateOtpBtn').on('click', '.generateOtpBtn', function () {

            var index = $(this).attr('data-index');
            var mailType = 'Profile Setup';
            var button = $(this);
            var messageBox = $('#otpMessage' + index);

            // Adjust this if needed; for now empty string
            var defaultVerificationId = '';

            $.ajax({
                type: 'POST',
                url: '/api/super_admin/generateOtp',
                data: {
                    action: 'generate',
                    mailType: mailType,
                    defaultVerificationId: defaultVerificationId
                },
                beforeSend: function () {
                    button.prop('disabled', true).text('Generating...');
                },
                success: function (response) {
                    if (response.responseStatus === 1) {
                        $('#otpLogid' + index).val(response.otpCheckId);
                        $('.otp-section[data-index="' + index + '"]').show();

                        // chanchal changes
                        $('.verifyOtpBtn[data-index="' + index + '"]').show();
                        // $('.resendOtpBtn[data-index="' + index + '"]').show();

                        button.hide();
                        messageBox.removeClass('text-danger').addClass('text-success').text('OTP Sent!');
                    } else {
                        alert('Error: ' + response.result);
                        button.prop('disabled', false).text('Generate OTP');
                    }
                },
                error: function (xhr) {
                    console.error('OTP Generation Error:', xhr.responseText);
                    alert('Error: ' + xhr.status + ' ' + xhr.statusText);
                    button.prop('disabled', false).text('Generate OTP');
                }
            });
        });

        // Step 2: Verify OTP & Enable Submit Button
        $(document).off('click', '.verifyOtpBtn').on('click', '.verifyOtpBtn', function () {

            var index = $(this).attr('data-index');
            var otpCode = $('#otpCode' + index).val();
            var otpCheckId = $('#otpLogid' + index).val();

            // Adjust if needed
            var defaultVerificationId = '';

            if (!otpCode.trim() || otpCode.length !== 6) {
                $('#otpMessage' + index).text('Enter a valid 6-digit OTP').addClass('text-danger');
                return;
            }

            $.ajax({
                type: 'POST',
                url: '/api/super_admin/verifyOtp',
                data: { action: 'verify', otpCode: otpCode, otpCheckId: otpCheckId, defaultVerificationId: defaultVerificationId },
                success: function (response) {
                    if (response.responseStatus === 1) {
                        $('#otpMessage' + index).removeClass('text-danger').addClass('text-success').text('OTP Verified!');
                        $('#updateBtn' + index).prop('disabled', false);
                        $('.verifyOtpBtn[data-index="' + index + '"]').hide();
                        // $('.resendOtpBtn[data-index="' + index + '"]').hide();
                    } else {
                        $('#otpMessage' + index).removeClass('text-success').addClass('text-danger').text(response.result);
                    }
                },
                error: function () {
                    $('#otpMessage' + index).removeClass('text-success').addClass('text-danger').text('Error verifying OTP.');
                }
            });
        });

        // Step 3: Resend OTP
        $(document).off('click', '.resendOtpBtn').on('click', '.resendOtpBtn', function () {
            var index = $(this).attr('data-index');
            $('.generateOtpBtn[data-index="' + index + '"]').show().prop('disabled', false).text('Generate OTP');
            $('.generateOtpBtn[data-index="' + index + '"]').click();
        });

        // Submit form event (example)
        $('#otpForm').on('submit', function (e) {

            e.preventDefault();

            if ($('#updateBtnotpSection').prop('disabled')) {
                alert('Please verify OTP before submitting.');
                return;
            }

            var txnId = $('#txnIdDisplay').text();
            var amount = $('#amountDisplay').text();
            var mongoId = $('#mongoId').text();


            console.log("============mongoId============", mongoId)
            var $submitBtn = $('#updateBtnotpSection');
            $submitBtn.prop('disabled', true);

            $.ajax({
                type: 'POST',
                url: "{{ url_for('admin_reports.bbpspaymentrefund') }}",  // Replace with your refund API endpoint
                data: JSON.stringify({ txnId: mongoId, amount: amount }),
                contentType: 'application/json',
                success: function (response) {
                    if (response.responseStatus === 1) {
                        console.log("=============response===========", response)
                        $submitBtn
                            .removeClass('btn-primary')
                            .addClass('btn-success')
                            .text('Successful Refund')
                            .prop('disabled', false);

                        var txnId = $('#mongoId').text();
                        console.log(txnId, "=========*")
                        var $failedBtn = $('.failedBtn[data-transaction-id="' + txnId + '"]');

                        $failedBtn
                            .removeClass('btn-danger')      // remove red color
                            .addClass('btn-success')        // add green color
                            .text('Successful Refund')      // change button text (optional)
                            .prop('disabled', false);


                        var $retryBtn = $('.rounded-circle[data-transaction-id="' + txnId + '"]');
                        $retryBtn.hide();
                        $('.resendOtpBtn[data-index="otpSection"]').hide();
                        $('.generateOtpBtn[data-index="otpSection"]').hide();


                        setTimeout(function () {
                            $('#otpModal').modal('hide');
                            location.reload();
                        }, 3000);
                    }
                    else if (response.responseStatus === 0) {
                        console.log(response.result, "***1*****")

                        const message = response.result || 'Refund failed';
                        $('#errorMessage').text(message).css('color', 'red');
                        $submitBtn.prop('disabled', false);

                        // Clear the error message after 10 seconds
                        setTimeout(() => {
                            $('#errorMessage').text('');
                            $('#otpModal').modal('hide');
                        }, 5000);

                    }
                },
                error: function (xhr, status, error) {
                    alert('Error processing refund: ' + error);
                    $submitBtn.prop('disabled', false);
                }
            });
        });
    });

    function viewRefundDetails(refundId) {
        const csrfToken = $('input[name="csrf_token"]').val();

        console.log("=====refundId======1", refundId)

        $.ajax({
            url: "{{ url_for('admin_reports.bbpspaymentrefundstatus') }}",
            type: "POST",
            contentType: "application/json",
            headers: {
                "X-CSRFToken": csrfToken
            },
            data: JSON.stringify({ refundId: refundId }),
            success: function (data) {
                if (data.responseStatus === 1) {
                    const refundstatus = data.responseData;

                    $('#refundtransactionId').text(refundstatus.transactionId || '');
                    $('#refundbankRefNum').text(refundstatus.bankRefNum || '');
                    $('#refundUTR_No').text(refundstatus.UTR_No || '');
                    $('#refundmode').text(refundstatus.mode || '');
                    $('#refundaction').text(refundstatus.action || '');
                    $('#refundamount').text(refundstatus.amount || '');
                    $('#refundrefundStatus').text(refundstatus.refundStatus || '');

                    
                    // Show modal
                    const modal = new bootstrap.Modal(document.getElementById('refundDetailsModal'));
                    modal.show();
                } else if (data.responseStatus === 0) {
                    const message = data.result || 'Unable to fetch refund details';
                    $('#statuserrorMessageeror').text(message).css('color', 'red');

                    // Open the modal anyway to show the error
                    const modal = new bootstrap.Modal(document.getElementById('refundDetailsModal'));
                    modal.show();
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX Error:", error);
                alert("Server error while fetching refund details.");
            }
        });
    }
    function viewRefundDetailsStatus(refundId) {
        // If using CSRF protection
        const csrfToken = $('input[name="csrf_token"]').val();

        $.ajax({
            url: "{{ url_for('admin_reports.gettransactionrefundStatus')}}",  // POST endpoint
            type: "POST",
            contentType: "application/json",
            headers: {
                "X-CSRFToken": csrfToken
            },
            data: JSON.stringify({ refundId: refundId }),
            success: function (data) {
                if (data.responseStatus === 1) {
                    const refund = data.responseDict;

                    $('#status').text(refund.status || 'N/A');
                    $('#transactionId').text(refund.transactionId || 'N/A');
                    $('#bankRefNo').text(refund.bankRefNo || 'N/A');
                    $('#refundMassage').text(refund.refundMassage || 'N/A');
                    $('#errorCode').text(refund.errorCode || 'N/A');
                } else if (data.responseStatus === 2) {
                    const message = data.result;
                    $('#refundStatusHeader').hide();
                    $('#refundStatusBody').hide();
                    $('#statuserror').text(message).css('color', 'red');

                    // Hide the error after 5 seconds
                    setTimeout(() => {
                        $('#statuserror').text('');
                    }, 5000);
                }
                else if (data.responseStatus === 0) {
                    $('#refundStatusHeader').hide();
                    $('#refundStatusBody').hide();

                    setTimeout(() => {
                        $('#statuserror').text('');
                    }, 5000);
                }
            },
            error: function (xhr, status, error) {
                alert("Server error: " + error);
            }
        });
    }

    function getPaymentStatus(id){
    if (confirm('are you want to check the Status?')) {
        var payload = 'id=' + id
        $.ajax({
            url: '{{url_for("admin_reports.bbps_payment_status_check_admin")}}',
            type: 'post',
            data: payload,
            success: function (response) {
                console.log("((((response))))", response.status)
                if (response.result.status == "success") {
                    $('#status-display-' + id).addClass('btn-success-light').removeClass('btn-warning-light');
                    $('#status-display-' + id).html(response.result.status);
                } else {
                    $('#status-display-' + id).addClass('btn-warning-light').removeClass('btn-success-light');
                    $('#status-display-' + id).html(response.result.status);
                }
                alert(response.result.status);
            }
        });
    } else {
        return false;
    }

    }
</script>


</script>




{% endblock %}