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

<style type="text/css">

</style>
<script>
    function handleRadioChange(selectedValue) {
        const includeDropdown = $('#includeUsersDropdown');
        const excludeDropdown = $('#excludeUsersDropdown');
        const includeProfilesList = $('#includeProfilesList');
        const excludeProfilesList = $('#excludeProfilesList');


        if (selectedValue ===  'includeButton') {
            excludeDropdown.css('display', 'none');
            includeDropdown.css('display', 'block');
            excludeProfilesList.val('');
            excludeProfilesList.trigger("chosen:updated");

        } else if (selectedValue === 'excludeButton') {
            includeDropdown.css('display', 'none');
            excludeDropdown.css('display', 'block');
            includeProfilesList.val('');
            includeProfilesList.trigger("chosen:updated");

        }
    }
    function fetchAndPopulatePatterns() {
        const selectedPayouts = $('#existingPayoutsIdsList').val(); // Get selected pattern IDs
        var csrfToken = $('input[name="csrf_token"]').val()

        console.log("In fetch ", selectedPayouts, selectedPayouts.length)
        if (selectedPayouts.length > 0) {
            // Make AJAX call to fetch users
            console.log("In fetch ")
            $.ajax({
                url: "{{url_for('patterns_configuarations.get_payout_patterns_list')}}", // Replace with your endpoint
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({
                    existingPayoutsIds: selectedPayouts,// Send the selected pattern IDs
                    "csrf_token": csrfToken
                }),
                success: function (response) {
                    if (response.responseStatus === 1) {
                        const includeDropdown = $('#includeProfilesList');
                        const excludeDropdown = $('#excludeProfilesList');

                        includeDropdown.empty();
                        excludeDropdown.empty();
                        // Populate the dropdowns with users
                        response.payoutPatternsList.forEach(function (pattern) {
                            includeDropdown.append(`<option value="${pattern.id}">${pattern.patternName}</option>`);
                            excludeDropdown.append(`<option value="${pattern.id}">${pattern.patternName}</option>`);
                        });
                        includeDropdown.trigger("chosen:updated");
                        excludeDropdown.trigger("chosen:updated");
                    }
                },
                error: function () {
                    console.error('Unable to fetch users for the selected patterns.');
                }
            });
        } else {
            // Clear dropdowns if no pattern is selected
            $('#includeProfilesList, #excludeProfilesList').empty().append('<option value="">No users available</option>');
        }
    }

</script>


<!-- 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">Merchant Profile</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">Switch Profile Payout</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">
                            Switch Profile Payout
                        </div>

                    </div>

                    <div class="card-body">
                        <div class = "flashes">
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>
                        </div>

                        <div class="row">
                            {% if 'edit' in session.get('switchprofilePermissions', []) %}
                            <div class="col-xl-12">
                                <form method="POST"
                                    action="{{ url_for('patterns_configuarations.bulk_payout_update') }}"
                                    class="row gy-2 gx-3 align-items-center mb-4" name="payoutdata" id="payoutdata">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" id="latitude" name="latitude">
                                    <input type="hidden" id="longitude" name="longitude">
                                    <div class="col-auto form-group" id="existingPayoutsIdsListDiv">
                                        <label for="existingPayoutsIdsList">Existing Payout Api*</label>
                                        <select class="form-control chosen-select" name="existingPayoutsIdsList"
                                            id="existingPayoutsIdsList" data-placeholder="Select payout api" multiple
                                            onchange="fetchAndPopulatePatterns(this)">
                                            {% for each_payout in existingPayoutsList %}
                                            <option value="{{each_payout.apiId}}">{{each_payout.apiName}}
                                            </option>
                                            {% endfor %}
                                        </select>
                                        <span id="existingPayoutsIdsList_error" class="error"></span>
                                    </div>
                                    <div class="col-auto form-group" id="newApiId">
                                        <label for="newApiId">New Payout Api*</label>
                                        <select class="form-control chosen-select" name="newApiId" id="newApiId"
                                            data-placeholder="Select profile" required>
                                            <option value=""></option>
                                            {% for each_payout in existingPayoutsList %}
                                            <option value="{{each_payout.apiId}}">{{each_payout.apiName}}
                                            </option>
                                            {% endfor %}
                                        </select>
                                        <span id="newApiId_error" class="error"></span>
                                    </div>
                                    <div class="col-auto form-group">
                                        <label for="includeButton">Include Profile</label>
                                        <input type="radio" name="manageRadioButton" value="includeButton"
                                            onchange="handleRadioChange('includeButton')">

                                        <label for="excludeButton">Exclude Profile</label>
                                        <input type="radio" name="manageRadioButton" value="excludeButton"
                                            onchange="handleRadioChange('excludeButton')">
                                    </div>

                                    <div class="col-auto" id="includeUsersDropdown" style="display: none;">
                                        <label for="includeProfilesList">Include Profile List</label>
                                        <select class="form-control chosen-select" name="includeProfilesList"
                                            id="includeProfilesList" data-placeholder="Select include profile" multiple>
                                        </select>
                                    </div>
                                    <div class="col-auto" id="excludeUsersDropdown" style="display: none;">
                                        <label for="excludeProfilesList">Exclude Profile List</label>
                                        <select class="form-control chosen-select" name="excludeProfilesList"
                                            id="excludeProfilesList" data-placeholder="Select exclude profile" multiple>
                                        </select>
                                    </div>

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

                                    <div class="form-group mt-3 otp-section" data-index="add" style="display: none;">
                                        <label for="otpCodeadd">Enter OTP*</label>
                                        <input type="text" class="form-control otp-input" id="otpCodeadd" name="otpCode"
                                          pattern="^\d+$" title="only numerics are allowed"   placeholder="Enter otp">
                                        <div class="mt-2">
                                            <button type="button" class="btn btn-primary verifyOtpBtn"
                                                data-index="add">Verify OTP</button>
                                            <button type="button" class="btn btn-secondary resendOtpBtn"
                                                data-index="add" data-mail-type="Profile Setup">Resend OTP</button>
                                        </div>
                                        <div id="otpMessageadd" class="text-danger mt-2"></div>
                                         <span id="otpCode_error" class="error"></span>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="modal-footer" style="justify-content: flex-start;padding: 1rem 0.5rem;">
                                    <button type="submit" class="btn btn-primary updateBtn" id="updateBtnadd" disabled>Update</button>
                                    
                                    <a href="{{ url_for('patterns_configuarations.bulk_payout_update') }}" class="btn btn-warning">
                                        Reset
                                    </a>
                                </div>

                                    <!-- <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    </div> -->
                                </form>
                            </div>
                            {% endif %}
                        </div>
                        <div class="mt-3"></div>
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table text-nowrap">

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

<script type="text/javascript">

$(document).ready(function () {
    $('#payoutdata').validate({
        // Now correctly targets the form
        rules: {
            'existingPayoutsIdsList': {
                required: true,
                minlength: 1
            },
            'newApiId': {
                required: true
            }
        },
        messages: {
            'existingPayoutsIdsList': {
                required: 'Please select at least one existing profile.',
                minlength: 'Please select at least one profile.'
            },
            'newApiId': {
                required: 'Please select a new profile.'
            }
        },
        submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (lat, lng) => {
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);

                        let formData = new FormData(form);
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            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").text(value);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#EditErrorMessage').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 %}