{% 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 includeUsersList = $('#includeUsersList');
        const excludeUsersList = $('#excludeUsersList');


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

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

        }
    }
    function toggleDivVisibility() {
            var dropdown = document.getElementById("usersListType");
            var usersListDiv = document.getElementById("usersListDiv");

            console.log(dropdown)
            console.log(dropdown.value)
            console.log(usersListDiv)

            // Check if "Specific" is selected in the dropdown
            if (dropdown.value === "Specific") {
                usersListDiv.style.display = "block";  // Show the second div
            } else {
                usersListDiv.style.display = "none";  // Hide the second div
            }
        }
        

</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 Management</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">User Wise Payin Payout Update</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">
                            User Wise Payin Payout Update
                        </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="POST" name="adduserForm" id="adduserForm"
                                    action="{{ url_for('user_managements.userwise_payin_payout_update') }}"
                                    class="row gy-2 gx-3 align-items-center mb-4">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" id="latitude_add" name="latitude">
                                    <input type="hidden" id="longitude_add" name="longitude">
                                    <div class="col-auto form-group" id="usersListTypeDiv">
                                        <label for="usersListType">Users List Type</label>
                                        <select class="form-select" name="usersListType"
                                            id="usersListType" data-placeholder="Select Users List Type" 
                                            onchange="toggleDivVisibility()" required>
                                             <option>Select</option>
                                            <option value="All">All</option>
                                            <option value="Specific">Specific</option>
                                        </select>
                                        <span id="usersListType_error" class="error"></span>
                                    </div>
                                   
                                    <div class="col-auto form-group" id="usersListDiv" style="display: none;">
                                        <label for="usersList">Users List</label>
                                        <select class="form-select chosen-select" name="usersList"
                                            id="usersList" data-placeholder="Select users" multiple>
                                            {% for each_user in usersList %}
                                            <option value="{{each_user.userId}}">{{each_user.userName}} - {{each_user.mobileNumber}}
                                            </option>
                                            {% endfor %}
                                        </select>
                                        <span id="usersList_error" class="error"></span>
                                    </div>
                                    <div class="col-auto form-group" id="walletTypeDiv">
                                        <label for="walletType">Wallet Type</label>
                                        <select class="form-select" name="walletType"
                                            id="walletType" data-placeholder="Select wallet type" required>
                                             <option>Select</option>
                                            <option value="Both">Both</option>
                                            <option value="Payin">Payin</option>
                                            <option value="Payout">Payout</option>
                                        </select>
                                        <span id="walletType_error" class="error"></span>
                                    </div>
                                    <div class="col-auto form-group" id="statusTypeDiv">
                                        <label for="statusType">Status Type</label>
                                        <select class="form-select" name="statusType"
                                            id="statusType" data-placeholder="Select Status Type" required>
                                             <option>Select</option>
                                            <option value="True">Enable</option>
                                            <option value="False">Disable</option>
                                        </select>
                                        <span id="statusType_error" class="error"></span>
                                    </div>
                                    

                                    <div class="form-group mt-3">
                                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="add" data-mail-type="User Registration">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" 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="User Registration">Resend OTP</button>
                                        </div>
                                        <div id="otpMessageadd" class="text-danger mt-2"></div>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="modal-footer justify-content-between">
                                        <button type="submit" class="btn btn-primary form_submit" id="updateBtnadd" disabled>Update</button>
                                    </div> 
                                    {% for error in form.usersListType.errors %}
                                    <span class="text-danger">{{ error }}</span><br>
                                    {% endfor %}
                                    {% for error in form.usersList.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}
                                    {% for error in form.walletType.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}
                                    {% for error in form.statusType.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}

                                </form>
                            </div>
                        </div>
                        <div class="mt-3"></div>
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table text-nowrap">
                                <div class = "flashes">
                                {% with messages = get_flashed_messages(with_categories=true) %}
                                {% if messages %}
                                    {% for category, message in messages %}
                                        {% if category == "success" %}
                                            <h2><b><center style="color:green">{{ message }}</center></b></h2>
                                        {% elif category == "danger" %}
                                            <h2><b><center style="color:red">{{ message }}</center></b></h2>
                                        {% else %}
                                            <h2><b><center style="color:orange">{{ message }}</center></b></h2>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            {% endwith %}
                            </div>
                            </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 -->


<script type="text/javascript">
    
    $(document).ready(function () {
        
    $('#adduserForm').validate({
        rules: {
                usersListType: {
                  required: true,
                },
                walletType: {
                  required: true,
                },
                statusType: {
                  required: true,
                },
            },
          messages: {
            usersListType: {
                required:'Please select the type of users list.',
            },
            walletType: {
                required: 'Please choose a wallet type.',
            },
            statusType: {
                required:'Please select a status type.',
               
            },

          },
        submitHandler: function(form, event) {
    event.preventDefault();

    $('.form_submit').prop('disabled', true);
    $('#newLoadingModel').show();
    $('.error').text('');
    $('#errorMessage').text('');

    getLocationAndProceed(
        function(lat, lng) {
            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);

            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize(),
                xhrFields: {
                    withCredentials: true
                },
                success: function(response) {
                    console.log("in submit handler", 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();
                        $('#errorMessage').text(response.result);
                    } else {
                        location.reload();
                    }
                },
                error: function(xhr) {
                    location.reload();
                }
            });
        },
        function() {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required. Please enable it in your browser.");
        }
    );
}
    });
});
</script>

{% endblock %}