{% extends 'super_admin_templates/base.html' %}
{% set path = "api_master" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style>
    .readonly-dropdown {
        pointer-events: none;
        background-color: #f5f5f5;
        user-select: none;
        opacity: 0.6;
    }

    .hidden {
        display: none;
    }
</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">API Switches</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">API Switches List</li>
                    </ol>
                </nav>
            </div>
        </div>

        {% 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 %}

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">API Switches</div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Start: Search Form Section -->
                            <form method="POST" action="{{ url_for('api_master.api_switches_list') }}" class="row gy-2 gx-3 align-items-center mb-4" id="searchForm">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                                <!-- Wallet Type -->
                                <div class="col-md-3">
                                    <label for="walletType">Wallet Type*</label>
                                    <select class="form-control" name="walletType" id="walletType" required>
                                        <option value="">Select Wallet Type*</option>
                                        <option value="Payout">Payout</option>
                                        <option value="PaymentGateway">Payin</option>
                                    </select>
                                </div>

                                <!-- Profile Name -->
                                <div class="col-md-4">
                                    <label for="profileIdsList">Profile Name*</label>
                                    <select class="form-control col-sm-4" data-trigger name="profileIdsList[]" id="choices-multiple-remove-button" multiple required>
                                        <option value="">Select Profile*</option>
                                        {% for each_user in patternsList %}
                                            <option value="{{ each_user.id }}">{{ each_user.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- API Name -->
                                <div class="col-md-4" id="apisList">
                                    <div class="form-group">
                                        <label for="apiId">API Name</label>
                                        <select class="form-control" name="apiId" id="apiId">
                                            <option value="">Select API Name</option>
                                            {% for each_api in apisList %}
                                                <option value="{{ each_api.id }}">{{ each_api.apiName }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <!-- Switch API Name -->
                                <div class="col-md-4" id="payoutList">
                                    <div class="form-group">
                                        <label for="switchapiId">Switch API Name</label>
                                        <select class="form-control" name="switchapiId" id="switchapiId">
                                            <option value="">Select Switch API Name</option>
                                            {% for each_api in apisList %}
                                                <option value="{{ each_api.id }}">{{ each_api.apiName }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="col-md-12">
                                    <div class="form-group mt-3">
                                        <button type="submit" class="btn btn-primary" id="form_submit">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <center>
                        {% if error %}
                        <h2><b>
                                <center style="color:RED">{{ error }}</center>
                            </b></h2>
                        {% endif %}
                    </center>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- End::app-content -->

<!-- jQuery and AJAX script -->
<script>
    $(document).ready(function () {
        // When walletType is changed
        $('#walletType').on('change', function () {
            var walletType = $(this).val();
            var csrfToken = $('input[name="csrf_token"]').val()
            // Make an AJAX call to fetch the APIs for the selected walletType
            $.ajax({
                url: "{{ url_for('api_master.dynamic_apis_list') }}",  // Ensure this URL is correct for AJAX
                method: 'POST',
                data: { walletType: walletType,"csrf_token": csrfToken },
                success: function (response) {
                    // Populate the apiId and switchapiId dropdowns
                    var apiSelect = $('#apiId');
                    var switchApiSelect = $('#switchapiId');
                    apiSelect.empty();  // Clear existing options
                    switchApiSelect.empty();  // Clear existing options
                    
                    apiSelect.append('<option value="">Select API Name</option>');
                    switchApiSelect.append('<option value="">Select Switch API Name</option>');

                    // Populate the new options
                    $.each(response.apisList, function (index, api) {
                        apiSelect.append('<option value="' + api.id + '">' + api.apiName + '</option>');
                        switchApiSelect.append('<option value="' + api.id + '">' + api.apiName + '</option>');
                    });
                },
                error: function () {
                    alert('Failed to load APIs. Please try again.');
                }
            });
        });
    });
</script>

{% endblock %}