{% extends 'super_admin_templates/base.html' %}
{% set path = "patterns_configuarations" %}
{% set subpath = "create_pattern" %}
{% block content %}
<!-- Content Wrapper. Contains page 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%;
    }

    select option:first-child {
        color: #000;
        /* grey for placeholders */
    }

    select:invalid {
        color: #000;
        /* force placeholder to stay grey on load */
    }

    select:valid {
        color: #000;
        /* normal black once a real value is chosen */
    }

    select option {
        color: #000;
        /* fallback color for all other options */
    }

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



<script>
    function openUpdateModal(pattern) {
        $('#verifyDiv').hide();
        $('#updateGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        // Set the form action URL using the ID
        const updatePatternBaseURL = "{{ url_for('patterns_configuarations.update_pattern', patternId='__ID__') }}";
        resetFormDataNew('updatePatternForm');
        const formAction = updatePatternBaseURL.replace('__ID__', pattern.id);
        document.getElementById('updatePatternForm').action = formAction;


        document.getElementById('defaultVerificationId').value = pattern.id || '';
        console.log("((((((((((((((((((((((((pattern))))))))))))))))))))))))", pattern);

        // Populate form fields
        document.getElementById('editName').value = pattern.name || '';
        document.getElementById('editRank').value = pattern.rank || '';
        document.getElementById('editDescription').value = pattern.description || '';
        document.getElementById('editCode').value = pattern.code || '';
        document.getElementById('editUserPermissionId').value = pattern.userPermissionId || '';
        $('#editUserPermissionId').trigger('chosen:updated');
        document.getElementById('editDefaultProfile').checked = pattern.defaultProfile === true;



        document.getElementById('editPayinEnable').checked = pattern.payinEnable === true;
        if (pattern.payinEnable) {
            document.getElementById('payinupdateList').style.display = 'block';
            document.getElementById('editDefaultPayinPaymentGatewayId').value = pattern.defaultPayinPaymentGatewayId || '';
            $('#editDefaultPayinPaymentGatewayId').trigger('chosen:updated');

        } else {
            document.getElementById('payinupdateList').style.display = 'none';
        }

        document.getElementById('editPayoutEnable').checked = pattern.payoutEnable === true;
        if (pattern.payoutEnable) {
            document.getElementById('payoutIdsList').style.display = 'block';
            document.getElementById('editPayoutPaymentGatewayId').value = pattern.payoutPaymentGatewayId || '';
            $('#editPayoutPaymentGatewayId').trigger('chosen:updated');
        } else {
            document.getElementById('payoutIdsList').style.display = 'none';

        }

        // Set the values for the multi-select dropdown (payinPaymentGatewaysList)
        // const payinPaymentGatewaysList = pattern.payinPaymentGatewaysList || [];
        // console.log("Raw value:", payinPaymentGatewaysList);
        // console.log("Type:", typeof payinPaymentGatewaysList);

        // // Get the select element
        // const selectElement = document.getElementById('editPayinPaymentGatewaysList');
        // const options = selectElement.options;
        // console.log("options:", options);

        // // Loop through options and select the ones that match the given values
        // for (let option of options) {
        //     if (payinPaymentGatewaysList.includes(option.value)) {
        //         option.selected = true;
        //     } else {
        //         option.selected = false;
        //     }
        // }
        // $(selectElement).trigger('chosen:updated');
        const modal = new bootstrap.Modal(document.getElementById('updateTask'));
        modal.show();
    }

</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">Merchant Profile</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 justify-content-between">
                        <div class="card-title">
                            Merchant Profile List
                        </div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('patternPermissions', []) %}
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3"
                                data-bs-toggle="modal" data-bs-target="#addtask"
                                onclick="resetFormDataNew('addPatternForm');openaddModal({})">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Profile
                            </button>
                            {% endif %}
                        </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('patterns_configuarations.get_patterns_configuarations_list')}}"
                                    class="row gy-2 gx-3 align-items-center mb-4">
                                    <input type="hidden" name="profilePage" value="{{ request.args.get('profilePage', 1) }}">
                        
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{ProfileSearchElement}}"
                                            name="ProfileSearchElement" id="autoSizingInput"
                                            pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" minlength="3" maxlength="75"
                                            title="Pattern Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                            placeholder="Search...">
                                    </div>

                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                    <div class="col-auto">
                                        <a
                                            href="{{url_for('patterns_configuarations.get_patterns_configuarations_list')}}"><button
                                                type="button" class="btn btn-warning">Reset</button></a>
                                    </div>
                                    {% for error in form.ProfileSearchElement.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span>
                                    {% endfor %}
                                </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">Profile Name</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Default Profile</th>
                                        <th scope="col">Payin Enable</th>
                                        <th scope="col">Payout Enable</th>
                                        <th scope="col">Created By</th>
                                        <th scope="col">Created On</th>
                                        {% if 'edit' in session.get('patternPermissions', []) %}
                                            <th scope="col">Status</th>
                                            <th scope="col">Action</th>
                                        {% endif %}
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if patternsList %}
                                    {% for each_pattern in patternsList %}
                                    <tr>
                                        <td>{{ snoCount + loop.index}}</td>

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

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

                                        <td>{{each_pattern.defaultProfile}}</td>
                                        <td>{{each_pattern.payinEnable}}</td>
                                        <td>{{each_pattern.payoutEnable}}</td>

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


                                        {% if each_pattern.createdOn %}
                                        <td>{{each_pattern.createdOn.strftime('%d-%m-%Y %I:%M %p')}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if 'edit' in session.get('patternPermissions', []) %}
                                        <td>
                                            <!-- {% if each_pattern.actionText == "Active" %}
                                                    <a class="btn btn-sm btn-success" href="{{ url_for('patterns_configuarations.update_pattern_status', patternId=each_pattern.id) }}">{{each_pattern.actionText}}</a>
                                                {% else %}
                                                    <a class="btn btn-sm btn-warning" href="{{ url_for('patterns_configuarations.update_pattern_status', patternId=each_pattern.id) }}">{{each_pattern.actionText}}</a>
                                                {% endif %} -->


                                            {% if each_pattern.status == 1 %}
                                            <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal"
                                                data-bs-target="#remarkModal{{ loop.index }}">
                                                Active
                                            </button>
                                            {% else %}
                                            <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal"
                                                data-bs-target="#remarkModal{{ loop.index }}">
                                                Deactive
                                            </button>
                                            {% endif %}

                                            <div class="modal fade" id="remarkModal{{ loop.index }}" tabindex="-1"
                                                role="dialog" aria-labelledby="remarkModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="remarkModalLabel">Provide
                                                                Remark*</h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form method="POST"
                                                                action="{{ url_for('patterns_configuarations.update_pattern_status', patternId=each_pattern.id) }}"
                                                                enctype="multipart/form-data" name="remarkPatternForm"
                                                                data-index="{{loop.index}}"
                                                                class="remarkPatternFormClass"
                                                                id="remarkPatternForm{{ loop.index }}">
                                                                <input type="hidden" name="csrf_token"
                                                                    value="{{ csrf_token() }}">
                                                                     <input type="hidden" id="latitude_status" name="latitude">
                                                                    <input type="hidden" id="longitude_status" name="longitude">
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <label for="remark">Remark*</label>
                                                                                <input type="text" class="form-control"
                                                                                    id="remark" name="remark"
                                                                                    minlength="1" maxlength="100"
                                                                                    pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$" title="Only alphanumeric and special characters @#$()+_-/"
                                                                                    placeholder="Enter remark" required>
                                                                                <span
                                                                                    id="remark{{loop.index}}_status_error"
                                                                                    class="error"></span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="modal-footer justify-content-between">
                                                                    <span id="remarkErrorMessage" class="error"></span>
                                                                    <button type="button" class="btn btn-default"
                                                                        data-bs-dismiss="modal">Close</button>
                                                                    <button type="submit" class="btn btn-primary"
                                                                        id="form_submit">Submit</button>

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


                                        </td>
                                        {% endif %}

                                        {% if 'edit' in session.get('patternPermissions', []) %}
                                        <td>
                                            <a href="javascript:void(0);" title="Click here to edit" onclick='openUpdateModal({
                                               "id": "{{ each_pattern.id }}",
                                               "userPermissionId": "{{ each_pattern.userPermissionId.id }}",
                                               "name": {{ each_pattern.name | tojson }},
                                               "rank": {{ each_pattern.rank | tojson }},
                                               "code": {{ each_pattern.code | tojson }},
                                               "description": {{ each_pattern.description | tojson }},
                                                "payinPaymentGatewaysList": [
                                                    {% for each in each_pattern.payinPaymentGatewaysList %}
                                                        "{{ each.id }}" {% if not loop.last %}, {% endif %}
                                                    {% endfor %}
                                                ],
                                                "defaultProfile": {{ each_pattern.defaultProfile | tojson }},
                                                "payinEnable": {{ each_pattern.payinEnable | tojson }},
                                                "defaultPayinPaymentGatewayId": "{{ each_pattern.defaultPayinPaymentGatewayId.id }}",
                                                "payoutEnable": {{ each_pattern.payoutEnable | tojson }},
                                                "payoutPaymentGatewayId": "{{ each_pattern.payoutPaymentGatewayId.id }}",
                                              
                                             
                                           })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                                                <i class="ri-edit-line"></i>
                                            </a>
                                        </td>
                                        {% endif %}
                                    </tr>
                                    {% endfor %}
                                    {% else %}
                                    <tr>
                                        <td colspan="12" style="text-align: center;">No Data Found</td>
                                    </tr>
                                    {% endif %}
                                </tbody>
                                <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 == "error" %}
                                    <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-5 mt-3">
                                <nav aria-label="Page navigation" class="pagination-style-1">
                                  <ul class="pagination mb-0">
                                      <li class="page-item disabled">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="ri-arrow-left-s-line align-middle"></i>
                                          </a>
                                      </li>
                                      <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                                      <li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
                                      <li class="page-item">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="bi bi-three-dots"></i>
                                          </a>
                                      </li>
                                      <li class="page-item"><a class="page-link" href="javascript:void(0);">21</a></li>
                                      <li class="page-item">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="ri-arrow-right-s-line align-middle"></i>
                                          </a>
                                      </li>
                                  </ul>
                              </nav>
                            </div> -->
                        <!-- End 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 profilePagination %}
                                    <div class="pagination">
                                        {{ profilePagination.links }}
                                    </div>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-1 -->

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

<!-- Create New Bank Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Profile</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('patterns_configuarations.add_pattern')}}" id="addPatternForm"
                name="addPatternForm" enctype="multipart/form-data">
                <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">
                <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdadd">
                <!-- Add your form fields here -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Profile Name*</label>
                        <input type="text" class="form-control" id="name" name="name"
                            pattern="^(?!\d+$)[a-zA-Z0-9\s@#$()+_\-/.]+$" minlength="3" maxlength="75"
                            title="Profile Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/."
                            placeholder="Enter profile name" required>
                        <span id="name_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="rank">Rank*</label>
                        <input type="number" class="form-control" id="rank" name="rank" placeholder="Enter rank" min="1"
                            step="1" minlength="1" maxlength="6" required>
                        <span id="rank_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="description">Description*</label>
                        <input type="text" class="form-control" id="description" pattern="^(?=.*[a-zA-Z0-9])[\w\s\S]+$"
                            minlength="1" maxlength="150"
                            title="Description can contain alphanumeric with special characters, only special characters and spaces are not allowed."
                            name="description" placeholder="Enter description" required>
                        <span id="description_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="code">Code*</label>
                        <input type="text" class="form-control" id="code" name="code" pattern="^[a-zA-Z0-9_\-\.]+$"
                            title="Code must contain only alphanumeric characters" placeholder="Enter code"
                            minlength="1" maxlength="15" required>
                        <span id="code_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="userPermissionId">User Permission*</label>
                        <select class="form-control chosen-select" name="userPermissionId" id="userPermissionId"
                            required>
                            <option value="">Select</option>
                            {% for each_user_permission in userpermissionsList %}
                            <option value="{{each_user_permission.id}}">{{each_user_permission.permissionName}}</option>
                            {% endfor %}
                        </select>
                        <span id="userPermissionId_error" class="error"></span>
                    </div>

                    <!-- <div class="form-group">
                        <label for="payinPaymentGatewaysList">Payin Payment Gateways*</label>
                        <select class="form-control chosen-select" data-placeholder="Select"
                            name="payinPaymentGatewaysList" multiple>

                            {% for each_payin_pg in transactionAPIsList %}
                            {% if each_payin_pg.transactionType == "PaymentGateway" %}
                            <option value="{{ each_payin_pg.id | string }}">{{ each_payin_pg.apiName }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <span id="payinPaymentGatewaysList_error" class="error"></span>
                    </div> -->

                    <div class="form-group">
                        <input type="checkbox" value="True" name="defaultProfile" id="defaultProfile">
                        <label>Default Profile</label>
                    </div>

                    <div class="col-md-12">
                        <div class="horizontal-checkboxes form-check">
                            <label class="form-check-label" for="payinEnable">Payin Enable</label>
                            <input type="checkbox" class="form-check-input" name="payinEnable" value="True" id="payin"
                                onclick="PayinEnable(this)">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group" id="payinEnableList" style="display: none">
                            <label for="defaultPayinPaymentGatewayId">Payin Payment Gateway*</label>
                            <select class="form-control chosen-select" name="defaultPayinPaymentGatewayId"
                                id="defaultPayinPaymentGatewayId">
                                <option value="">Select</option>
                                {% for each_payin_enable in payinEnableList %}
                                <option value="{{ each_payin_enable.id }}">{{ each_payin_enable.apiName }}</option>
                                {% endfor %}
                            </select>
                            <span id="defaultPayinPaymentGatewayId_error" class="error"></span>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="horizontal-checkboxes form-check">
                            <label class="form-check-label" for="payoutEnable">Payout Enable</label>
                            <input type="checkbox" class="form-check-input" name="payoutEnable" value="True" id="payout"
                                onclick="PayoutEnable(this)">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group" id="payoutEnableList" style="display: none">
                            <label for="defaultPayoutPaymentGatewayId">Payout Payment Gateway*</label>
                            <select class="form-control chosen-select" name="defaultPayoutPaymentGatewayId"
                                id="defaultPayoutPaymentGatewayId">
                                <option value="">Select</option>
                                {% for each_payout_enable in payoutEnableList %}
                                <option value="{{ each_payout_enable.id }}">{{ each_payout_enable.apiName }}</option>
                                {% endfor %}
                            </select>
                            <span id="defaultPayoutPaymentGatewayId_error" class="error"></span>
                        </div>
                    </div>



                    <!-- <div class="horizontal-checkboxes form-check">
                        <label class="form-check-label" for="isUserWise">Is User</label>
                        <input type="checkbox" class="form-check-input" name="isUserWise" value="True">
                    </div>

                      <div class="horizontal-checkboxes form-check">
                        <input type="checkbox" class="form-check-input" name="isAllow" value="True" >
                        <label class="form-check-label" for="isAllow">Is Allow</label>
                      </div>

                      <div class="horizontal-checkboxes form-check">
                        <input type="checkbox" class="form-check-input" name="isCommission" value="True" >
                        <label class="form-check-label" for="isCommission">Is Commission</label>
                      </div>

                      <div class="horizontal-checkboxes form-check">
                        <input type="checkbox" class="form-check-input" name="isSuperDistributor" value="True" >
                        <label class="form-check-label" for="isSuperDistributor">Is Super Distributor</label>
                      </div> -->

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

                    <!-- Submit Button -->
                    <div class="modal-footer justify-content-between">
                        <span id="errorMessage" class="error"></span>
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary updateBtn" id="updateBtnadd"
                            disabled>Submit</button>
                    </div>

                    <!-- <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div> -->
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

<!-- Update Bank Modal -->
<div class="modal fade" id="updateTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel">Update Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" name="updatePatternForm" id="updatePatternForm" enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="defaultVerificationId" id="defaultVerificationId">
                    <input type="hidden" id="latitude_update" name="latitude">
                    <input type="hidden" id="longitude_update" name="longitude">
                    <div class="form-group">
                        <label for="name">Profile Name*</label>
                        <input type="text" class="form-control" id="editName" name="name"
                            pattern="^(?!\d+$)[a-zA-Z0-9\s@#$()+_\-/.]+$"
                            title="Profile Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                            required>
                        <span id="name_edit_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="rank">Rank*</label>
                        <input type="number" class="form-control" id="editRank" name="rank" min="1" step="1" required>
                        <span id="rank_edit_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="description">Description*</label>
                        <input type="text" class="form-control" id="editDescription" name="description"  minlength="1" maxlength="150"
                            pattern="^(?=.*[a-zA-Z0-9])[\w\s\S]+$"
                            title="Description can contain alphanumeric with special characters, only special characters and spaces are not allowed."
                            required>
                        <span id="description_edit__error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="code">Code*</label>
                        <input type="text" class="form-control" id="editCode" name="code" pattern="^[a-zA-Z0-9_\-\.]+$"
                            title="Code must contain only alphanumeric characters" required>
                        <span id="code_edit_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="userPermissionId">User Permission*</label>
                        <select class="form-control chosen-select" id="editUserPermissionId" name="userPermissionId">
                            {% for each_permission in userpermissionsList %}
                            <option value="{{ each_permission.id }}">{{ each_permission.permissionName }}</option>
                            {% endfor %}
                        </select>
                        <span id="userPermissionId_edit_error" class="error"></span>
                    </div>


                    <!-- <div class="form-group">
                        <label for="editPayinPaymentGatewaysList">Payin Payment Gateways*</label>
                        <select class="form-control chosen-select" id="editPayinPaymentGatewaysList"
                            name="payinPaymentGatewaysList" data-placeholder="Select" multiple>
                            {% for each_payin_pg in transactionAPIsList %}
                            {% if each_payin_pg.transactionType == "PaymentGateway" %}
                            <option value="{{ each_payin_pg.id | string }}">{{ each_payin_pg.apiName }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>

                        <span id="payinPaymentGatewaysList_edit_error" class="error"></span>
                    </div> -->


                    <div class="form-group">
                        <input type="checkbox" value="True" name="defaultProfile" id="editDefaultProfile">&nbsp;

                        <label>Default Profile</label>
                    </div>

                    <div class="col-md-6">
                        <div class="horizontal-checkboxes form-check">
                            <label for="payinEnable">Payin Enable</label>
                            <input type="checkbox" class="form-check-input" id="editPayinEnable" name="payinEnable"
                                value="True" onclick="ShowHidePayin(this)">

                        </div>
                    </div>

                    <div class="form-group" id="payinupdateList" style="display: none">
                        <label for="defaultPayinPaymentGatewayId">Payin Payment Gateway Name*</label>
                        <select class="form-control chosen-select" id="editDefaultPayinPaymentGatewayId"
                            name="defaultPayinPaymentGatewayId">
                            <option value="">Select</option>
                            {% for each_payin_enable in payinEnableList %}
                            <option value="{{ each_payin_enable.id|string }}">{{ each_payin_enable.apiName }}</option>
                            {% endfor %}
                        </select>
                        <span id="defaultPayinPaymentGatewayId_edit_error" class="error"></span>
                    </div>



                    <div class="col-md-12">
                        <div class="horizontal-checkboxes form-check">
                            <label for="payoutEnable">Payout Enable</label>
                            <input type="checkbox" class="form-check-input" id="editPayoutEnable" name="payoutEnable"
                                value="True" onclick="ShowHidePayout(this)">
                        </div>
                    </div>

                    <div class="form-group" id="payoutIdsList" style="display: none">
                        <label for="editPayoutPaymentGatewayId">Payout Payment Gateway*</label>
                        <select class="form-control chosen-select" id="editPayoutPaymentGatewayId"
                            name="payoutPaymentGatewayId">
                            <option value="">Select</option>
                            {% for each_payout_pg in transactionAPIsList %}
                            {% if each_payout_pg.transactionType == "Payout" %}
                            <option value="{{ each_payout_pg.id }}">{{ each_payout_pg.apiName }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <span id="payoutPaymentGatewayId_edit_error" class="error"></span>
                    </div>


                    <div class="form-group">
                        <label for="remark">Remark*</label>
                        <input type="text" class="form-control" id="remark" name="remark" required>
                        <span id="remark_edit_error" class="error"></span>
                    </div>

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

                    <div class="form-group mt-3 otp-section" data-index="u" style="display: none;" id="verifyDiv">
                        <label for="otpCodeu">Enter OTP*</label>
                        <input type="text" class="form-control otp-input" id="otpCodeu" name="otpCode"
                            placeholder="Enter otp">
                        <div class="mt-2">
                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="u">Verify
                                OTP</button>
                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="u"
                                data-mail-type="Profile Setup">Resend OTP</button>
                        </div>
                        <div id="otpMessageu" class="text-danger mt-2"></div>
                        <span id="otpCode_error" class="error"></span>
                    </div>

                    <!-- Submit Button -->
                    <div class="modal-footer justify-content-between">
                        <span id="EditErrorMessage" class="error"></span>
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal"
                            id="updateCloseBtn">Close</button>
                        <button type="submit" class="btn btn-primary updateBtn" id="updateBtnu" disabled>Update</button>
                    </div>

                    <!-- Add more edit form fields as needed -->
                    <!--  <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div> -->
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Update Bank Modal -->



<script>
    function ShowHidePayin(checkbox) {
        var payinupdateList = document.getElementById("payinupdateList");
        payinupdateList.style.display = checkbox.checked ? "block" : "none";
    }
</script>

<script>
    function ShowHidePayout(checkbox) {
        var payoutIdsList = document.getElementById("payoutIdsList");
        payoutIdsList.style.display = checkbox.checked ? "block" : "none";
    }
</script>

<script>
    function PayinEnable(payin) {
        var payinEnableList = document.getElementById("payinEnableList");
        payinEnableList.style.display = payin.checked ? "block" : "none";
    }

    function PayoutEnable(payout) {
        var payoutEnableList = document.getElementById("payoutEnableList");
        payoutEnableList.style.display = payout.checked ? "block" : "none";
    }
</script>

<script type="text/javascript">
    

    $(document).ready(function () {
        $('.remarkPatternFormClass').each(function () {
            $(this).validate({
                rules: {
                    remark: {
                        required: true,
                        minlength: 1,
                        maxlength: 100
                    },
                },
                messages: {
                    remark: {
                        required: "Remark is required.",
                        minlength: "Remark must be at least 1 character.",
                        maxlength: "Remark cannot exceed 100 characters."
                    },
                },
                submitHandler: function (form, event) {
                    event.preventDefault();
                    $('.error').text('');

                    getLocationAndProceed(
                        function (lat, lng) {
                            // Inject latitude and longitude values into form inputs
                            $(form).find('input[name="latitude"]').val(lat);
                            $(form).find('input[name="longitude"]').val(lng);

                            var index = $(form).data('index');

                            $.ajax({
                                url: form.action,
                                type: form.method,
                                data: $(form).serialize(),
                                xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                                success: function (response) {
                                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                                        form.reset();
                                        window.location.reload();
                                    } else if (response.responseStatus == 0) {
                                        $.each(response.result, function (key, value) {
                                            $('#' + key + index + "_status_error").text(value);
                                        });
                                    } else if (response.responseStatus == 2) {
                                        $('#remarkErrorMessage').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>



<script type="text/javascript">
    $(document).ready(function () {





        $('#addPatternForm').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 3,
                    maxlength: 75
                },
                rank: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 6
                },
                description: {
                    required: true,
                    minlength: 1,
                    maxlength: 150
                },
                code: {
                    required: true,
                    minlength: 1,
                    maxlength: 15
                },
                userPermissionId: {
                    required: true
                },
                defaultProfile: {
                    // Optional
                },
                // payinPaymentGatewaysList: {
                //     required: true
                // },
                payinEnable: {
                    // Checkbox control
                },
                defaultPayinPaymentGatewayId: {
                    // Controlled dynamically below
                },
                payoutEnable: {
                    // Checkbox control
                },
                defaultPayoutPaymentGatewayId: {
                    // Controlled dynamically below
                },

            },
            messages: {
                name: {
                    required: "Name is required.",
                    minlength: "Name must be at least 3 character.",
                    maxlength: "Name cannot exceed 75 characters."
                },
                rank: {
                    required: "Rank is required.",
                    number: "Rank must be numeric.",
                    minlength: "Rank must be at least 1 character.",
                    maxlength: "Rank cannot exceed 6 digits."
                },
                description: {
                    required: "Description is required.",
                    minlength: "Description must be at least 1 character.",
                    maxlength: "Description cannot exceed 150 characters."
                },
                code: {
                    required: "Code is required.",
                    minlength: "Code must be at least 1 character.",
                    maxlength: "Code cannot exceed 15 characters."
                },
                userPermissionId: {
                    required: "Please select a user permission."
                },
                // payinPaymentGatewaysList: {
                //     required: "Please select a payin payment gateway."
                // },
                defaultPayinPaymentGatewayId: {
                    required: "Please select a payin payment gateway."
                },
                defaultPayoutPaymentGatewayId: {
                    required: "Please select a payout payment gateway."
                },

            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            submitHandler: function (form, event) {
                $('.updateBtn').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) {
                                    $('.updateBtn').prop('disabled', false);
				                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_error").text(value);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.updateBtn').prop('disabled', false);
				                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } else {
                                    location.reload();
                                }
                            },
                            error: function (xhr, status, error) {
                                console.log("Error uploading image: " + error);
                                $('#errorMessage').text("Error uploading image.");
                            }
                        });
                    },
                    function () {
                        $('.form_submit').prop('disabled', false);
                        $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
        });

        // Checkbox Logic for Payin
        $('#payin').on('change', function () {
            if ($(this).is(':checked')) {
                $('#payinEnableList').show();
                $('#defaultPayinPaymentGatewayId').rules('add', {
                    required: true,
                    messages: {
                        required: "Please select a payin payment gateway."
                    }
                });
            } else {
                $('#payinEnableList').hide();
                $('#defaultPayinPaymentGatewayId').rules('remove', 'required');
                $('#defaultPayinPaymentGatewayId').val("");
            }
        });

        // Checkbox Logic for Payout
        $('#payout').on('change', function () {
            if ($(this).is(':checked')) {
                $('#payoutEnableList').show();
                $('#defaultPayoutPaymentGatewayId').rules('add', {
                    required: true,
                    messages: {
                        required: "Please select a payout payment gateway."
                    }
                });
            } else {
                $('#payoutEnableList').hide();
                $('#defaultPayoutPaymentGatewayId').rules('remove', 'required');
                $('#defaultPayoutPaymentGatewayId').val("");
            }
        });

        // Trigger on page load (in case form is pre-filled)
        $('#payin').trigger('change');
        $('#payout').trigger('change');



        $('#updatePatternForm').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 1,
                    maxlength: 75
                },
                rank: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 6
                },
                description: {
                    required: true,
                    minlength: 1,
                    maxlength: 150
                },
                code: {
                    required: true,
                    minlength: 1,
                    maxlength: 15
                },
                userPermissionId: {
                    required: false
                },
                defaultProfile: {
                    // Optional
                },
                // payinPaymentGatewaysList: {
                //     // Optional
                // },
                payinEnable: {
                    // Checkbox control
                },
                defaultPayinPaymentGatewayId: {
                    // Controlled dynamically
                },
                payoutEnable: {
                    // Checkbox control
                },
                defaultPayoutPaymentGatewayId: {
                    // Controlled dynamically
                },
                remark: {
                    required: true,
                    minlength: 1,
                    maxlength: 255
                },
            },
            messages: {
                name: {
                    required: "Name is required.",
                    minlength: "Name must be at least 1 character.",
                    maxlength: "Name cannot exceed 75 characters."
                },
                rank: {
                    required: "Rank is required.",
                    number: "Rank must be numeric.",
                    minlength: "Rank must be at least 1 character.",
                    maxlength: "Rank cannot exceed 6 digits."
                },
                description: {
                    required: "Description is required.",
                    minlength: "Description must be at least 1 character.",
                    maxlength: "Description cannot exceed 150 characters."
                },
                code: {
                    required: "Code is required.",
                    minlength: "Code must be at least 1 character.",
                    maxlength: "Code cannot exceed 15 characters."
                },
                userPermissionId: {
                    required: "Please select a user permission."
                },
                defaultPayinPaymentGatewayId: {
                    required: "Please select a payin payment gateway."
                },
                defaultPayoutPaymentGatewayId: {
                    required: "Please select a payout payment gateway."
                },
                remark: {
                    required: "Remark is required.",
                    minlength: "Remark must be at least 1 character.",
                    maxlength: "Remark cannot exceed 255 characters."
                }
            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
             submitHandler: function (form, event) {
                $('.updateBtn').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) {
                                    $('.updateBtn').prop('disabled', false);
				                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_edit_error").text(value);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.updateBtn').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.");
                    }
                );
            }
        });
    });

        $('#editPayinEnable').on('change', function () {
            if ($(this).is(':checked')) {
                $('#editDefaultPayinPaymentGatewayId').rules('add', {
                    required: true,
                    messages: {
                        required: "Please select a payin payment gateway."
                    }
                });
                $('#payinupdateList').show();
            } else {
                $('#editDefaultPayinPaymentGatewayId').rules('remove', 'required');
                $('#payinupdateList').hide();
            }
        });

        $('#editPayoutEnable').on('change', function () {
            if ($(this).is(':checked')) {
                $('#editPayoutPaymentGatewayId').rules('add', {
                    required: true,
                    messages: {
                        required: "Please select a payout payment gateway."
                    }
                });
                $('#payoutIdsList').show();
            } else {
                $('#editPayoutPaymentGatewayId').rules('remove', 'required');
                $('#payoutIdsList').hide();
            }
        });

        // ✳️ Add this:
        $('#editPayoutPaymentGatewayId').on('change', function () {
            $(this).valid();
        });
        $('#editDefaultPayinPaymentGatewayId').on('change', function () {
            $(this).valid();
        });


</script>



{% endblock %}