{% extends 'super_admin_templates/base.html' %}
{% block 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">Bbps Configuration</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"><a href="{{ url_for('user_managements.manage_users_list') }}">Bbps Configuration List</a></li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">Bbps Setup Configuration</div>
                    </div>
                    <div class="card-body">
                        <div class="flashes">
                        <center>
                            {% if error %}
                                <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>
                        {% with messages = get_flashed_messages(with_categories=true) %}
                            {% if messages %}
                                {% for category, message in messages %}
                                    <h2><b><center style="color:{% if category == 'success' %}green{% elif category == 'danger' %}red{% else %}orange{% endif %};">{{ message }}</center></b></h2>
                                {% endfor %}
                            {% endif %}
                        {% endwith %}
                        </div>

                        <style>
                        .nav-style-6 .nav-link {
                            color: #6aa6ed;
                            border-radius: 0.25rem;
                            margin: 0 2px;
                            font-weight: 500;
                            background: #f8f9fa;
                            border: 1px solid #dee2e6;
                            transition: background 0.2s, color 0.2s;
                        }
                        .nav-style-6 .nav-link.active, .nav-style-6 .show > .nav-link {
                            background-color: #6aa6ed;
                            color: #fff;
                            border-color: #6aa6ed;
                        }
                        .nav-style-6 .nav-link:hover {
                            background: #e2e6ea;
                            color: #0056b3;
                        }
                        </style>

                        <!-- Tabs Navigation -->
                        <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block" role="tablist">
                            <a class="nav-link active" data-bs-toggle="tab" href="#bbpsTab" aria-selected="true">BBPS</a>
                            <a class="nav-link" data-bs-toggle="tab" href="#prepaidTab" aria-selected="false">Prepaid</a>
                        </nav>

                        <!-- Tabs Content -->
                        <div class="tab-content" id="tabContent">
                            <!-- BBPS Tab -->
                            <div class="tab-pane fade show active p-3" id="bbpsTab" role="tabpanel">
                                <form id="bbpsForm" method="POST" action="{{ url_for('prepaid_mobile_setup.prepaid_mobile_setup_list') }}" enctype="multipart/form-data">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" id="latitude_bbps" name="latitude">
                                    <input type="hidden" id="longitude_bbps" name="longitude">
                                    <input type="hidden" name="serviceType" value="BBPS">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="checkbox" value="True" name="enablePrepaid" id="enablePrepaid_bbps"
                                                    {% if bbpsMobileSetupDict.enablePrepaid %} checked {% endif %}>
                                                &nbsp;<label>Bbps Enable</label>
                                            </div>

                                            <div id="enablePrepaiddiv_bbps" style="display:none;">
                                                <div class="form-group">
                                                    <label>Bbps Provider Api</label>
                                                    <select class="form-control chosen-select" name="prepaidProviderId" id="prepaidProviderId_bbps" >
                                                        <option value="">Select bbps provider api</option>
                                                        {% for each_prepaid_api in bbpsApiList %}
                                                            <option value="{{ each_prepaid_api.id }}" {% if each_prepaid_api.id == bbpsMobileSetupDict.prepaidProviderId %}selected{% endif %}>{{ each_prepaid_api.apiName }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span id="prepaidProviderId_error_bbps" class="error text-danger"></span>
                                                </div>

                                                <div class="form-group">
                                                    <label> Payment Gateway Api</label>
                                                    <select class="form-control chosen-select" name="prepaidPgId" id="prepaidPgId_bbps" >
                                                        <option value="">Select payin payment gateway</option>
                                                        {% for each_payin_api in payinApisList %}
                                                            <option value="{{ each_payin_api.id }}" {% if each_payin_api.id == bbpsMobileSetupDict.prepaidPgId %}selected{% endif %}>{{ each_payin_api.apiName }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span id="prepaidPgId_error_bbps" class="error text-danger"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer justify-content-between">
                                        <span id="errorMessage_bbps" class="error text-danger"></span>
                                        <button type="submit" class="btn btn-primary form_submit">Submit BBPS</button>
                                    </div>
                                </form>
                            </div>

                            <!-- Prepaid Tab -->
                            <div class="tab-pane fade p-3" id="prepaidTab" role="tabpanel">
                                <form id="prepaidForm" method="POST" action="{{ url_for('prepaid_mobile_setup.prepaid_mobile_setup_list') }}" enctype="multipart/form-data">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                     <input type="hidden" id="latitude_prepaid" name="latitude">
                                    <input type="hidden" id="longitude_prepaid" name="longitude">
                                    <input type="hidden" name="serviceType" value="Prepaid">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="checkbox" value="True" name="enablePrepaid" id="enablePrepaid_prepaid"
                                                    {% if prepaidMobileSetupDict.enablePrepaid %} checked {% endif %}>
                                                &nbsp;<label>Prepaid Enable</label>
                                            </div>

                                            <div id="enablePrepaiddiv_prepaid" style="display:none;">
                                                <div class="form-group">
                                                    <label>Prepaid Provider Api</label>
                                                    <select class="form-control chosen-select" name="prepaidProviderId" id="prepaidProviderId_prepaid" >
                                                        <option value="">Select prepaid provider api</option>
                                                        {% for each_prepaid_api in prepaidApisList %}
                                                            <option value="{{ each_prepaid_api.id }}" {% if each_prepaid_api.id == prepaidMobileSetupDict.prepaidProviderId %}selected{% endif %}>{{ each_prepaid_api.apiName }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span id="prepaidProviderId_error_prepaid" class="error text-danger"></span>
                                                </div>

                                                <div class="form-group">
                                                    <label>Payin</label>
                                                    <select class="form-control chosen-select" name="prepaidPgId" id="prepaidPgId_prepaid" >
                                                        <option value="">Select payin payment gateway</option>
                                                        {% for each_payin_api in payinApisList %}
                                                            <option value="{{ each_payin_api.id }}" {% if each_payin_api.id == prepaidMobileSetupDict.prepaidPgId %}selected{% endif %}>{{ each_payin_api.apiName }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span id="prepaidPgId_error_prepaid" class="error text-danger"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer justify-content-between">
                                        <span id="errorMessage_prepaid" class="error text-danger"></span>
                                        <button type="submit" class="btn btn-primary form_submit">Submit Prepaid</button>
                                    </div>
                                </form>
                            </div>
                        </div> <!-- tab-content end -->
                    </div> <!-- card-body end -->
                </div> <!-- card end -->
            </div>
        </div>
    </div>
</div>

<!-- jQuery Validation Script -->
<script>
$(document).ready(function() {

    function toggleFields(checkboxId, divId) {
        var checkbox = $('#' + checkboxId);
        var div = $('#' + divId);

        if (checkbox.is(':checked')) {
            div.show();
        } else {
            div.hide();
        }

        checkbox.on('change', function() {
            if ($(this).is(':checked')) {
                div.show();
            } else {
                div.hide();
            }
        });
    }

    toggleFields('enablePrepaid_bbps', 'enablePrepaiddiv_bbps');
    toggleFields('enablePrepaid_prepaid', 'enablePrepaiddiv_prepaid');

    // Save active tab on click
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        var activeTab = $(e.target).attr('href'); // activated tab
        sessionStorage.setItem('activeTab', activeTab);
    });

    // Set the active tab on page reload
    var activeTab = sessionStorage.getItem('activeTab');
    if (activeTab) {
        var tabTrigger = new bootstrap.Tab(document.querySelector('a[href="' + activeTab + '"]'));
        tabTrigger.show();
    }

    // BBPS Form Validation
    $("#bbpsForm").validate({
        rules: {
            prepaidProviderId: { required: "#enablePrepaid_bbps:checked" },
            prepaidPgId: { required: "#enablePrepaid_bbps:checked" }
        },
        messages: {
            prepaidProviderId: { required: "Please select a prepaid provider." },
            prepaidPgId: { required: "Please select a Payin gateway." }
        },
        submitHandler: function(form, event) {
            $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                function (lat, lng) {
                   
                    $(form).find('input[name="latitude"]').val(lat);
                    $(form).find('input[name="longitude"]').val(lng);
                    $.ajax({
                        url: $(form).attr('action'),
                        type: "POST",
                        data: $(form).serialize(),
                        xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                        success: function(response) {
                            if (response.responseStatus == 1 || response.responseStatus == 4) {
                                form.reset();
                                location.reload();
                            } else if (response.responseStatus == 0) {
                                $('.form_submit').prop('disabled', false);
        				        $('#newLoadingModel').hide();
                                $.each(response.result, function(key, value) {
                                    $('#' + key + '_error_bbps').text(value);
                                });
                            } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
        				        $('#newLoadingModel').hide();
                                $('#errorMessage_bbps').text(response.result);
                            } else {
                                location.reload();
                            }
                        },
                                    error: function (xhr) {
                                        // You can also reload page after error (e.g. CSRF token mismatch)
                                        location.reload();
                                    }
                    });
                },
            function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                alert("Location access is required to proceed. Please enable it in your browser.");
                        }
                    );
                }    

            });

    // Prepaid Form Validation
    $("#prepaidForm").validate({
        rules: {
            prepaidProviderId: { required: "#enablePrepaid_prepaid:checked" },
            prepaidPgId: { required: "#enablePrepaid_prepaid:checked" }
        },
        messages: {
            prepaidProviderId: { required: "Please select a prepaid provider." },
            prepaidPgId: { required: "Please select a Payin gateway." }
        },
        submitHandler: function(form, event) {
            $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                function (lat, lng) {
                   
                    $(form).find('input[name="latitude"]').val(lat);
                    $(form).find('input[name="longitude"]').val(lng);
                    $.ajax({
                        url: $(form).attr('action'),
                        type: "POST",
                        data: $(form).serialize(),
                        xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                        success: function(response) {
                            if (response.responseStatus == 1 || response.responseStatus == 4) {
                                form.reset();
                                location.reload();
                            } else if (response.responseStatus == 0) {
                                $('.form_submit').prop('disabled', false);
        				        $('#newLoadingModel').hide();
                                $.each(response.result, function(key, value) {
                                    $('#' + key + '_error_prepaid').text(value);
                                });
                            } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
        				        $('#newLoadingModel').hide();
                                $('#errorMessage_prepaid').text(response.result);
                            } else {
                                location.reload();
                            }
                        },
                                    error: function (xhr) {
                                        // You can also reload page after error (e.g. CSRF token mismatch)
                                        location.reload();
                                    }
                    });
                },
                function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                alert("Location access is required to proceed. Please enable it in your browser.");
                        }
                    );
                }

            });

        });
</script>


{% endblock %}