{% extends 'super_admin_templates/base.html' %}
{% set path = "Thirdparty_sites" %}
{% set subpath = "create_site" %}
{% 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%;
    }
    .centered {
        text-align: center;
    }
</style>


<script>
    function openUpdateModal(site) {
    // Set the form action URL using the ID
    const updatesiteBaseURL = "{{ url_for('third_party_integrations.update_site', siteId='__ID__') }}";
    const formAction = updatesiteBaseURL.replace('__ID__', site.id);
    document.getElementById('updateSiteForm').action = formAction;
    resetFormDataNew('updateSiteForm');

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

    // Populate form fields
    document.getElementById('editname').value = site.name || '';
    document.getElementById('editipAddress').value = site.ipAddress || '';
    document.getElementById('edittrnIdentifier').value = site.trnIdentifier || '';
   
    document.getElementById('editenablePayin').checked = site.enablePayin === true;
    if (site.enablePayin) {
        document.getElementById('payinupdateList').style.display = 'block';
        // document.getElementById('editpayinPaymentGatewayId').value = site.payinPaymentGatewayId || '';
    } else {
        document.getElementById('payinupdateList').style.display = 'none';
    }
    document.getElementById('editpayinWebhook').value = site.payinWebhook || '';
     
    document.getElementById('editenablePayout').checked = site.enablePayout === true;
    if (site.enablePayout) {
        document.getElementById('payoutIdsList').style.display = 'block';
        // document.getElementById('editpayoutPaymentGatewayId').value = site.payoutPaymentGatewayId || '';
    } else {
        document.getElementById('payoutIdsList').style.display = 'none';

    }
    document.getElementById('editpayoutWebhook').value = site.payoutWebhook || '';
    document.getElementById('editpayoutVAWebhook').value = site.payoutVAWebhook || '';
    document.getElementById('editpayoutValidationWebhook').value = site.payoutValidationWebhook || '';
    document.getElementById('editpayoutAlertsWebhook').value = site.payoutAlertsWebhook || '';

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

        // Get the select element
        const selectElement = document.getElementById('editpayinPaymentGatewayId');
        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 payoutPaymentGatewaysList = site.payoutPaymentGatewaysList || [];
        console.log("Raw value:", payoutPaymentGatewaysList);
        console.log("Type:", typeof payoutPaymentGatewaysList);

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

        // Loop through options and select the ones that match the given values
        for (let optiona of optionschoo) {
        if (payoutPaymentGatewaysList.includes(optiona.value)) {
            optiona.selected = true;
        } else {
            optiona.selected = false;
        }
        }
        $(selectElementtwo).trigger('chosen:updated');
    const modal = new bootstrap.Modal(document.getElementById('updateSite'));
    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">Third Party Integrations</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">Third Party Integrations</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">
                            Sites List
                        </div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('thirdPartyIntegrationPermissions', []) %}
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3"
                                data-bs-toggle="modal" data-bs-target="#addSiteModal"  onClick="resetFormData1('addthirdForm')">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Site
                            </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="POST" action="{{ url_for('third_party_integrations.get_sites_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="autoSizingInput"
                                            placeholder="Search...">
                                    </div>
                                    
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                </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">Site Name</th>
                                        <!-- <th scope="col">IP Address</th> -->
                                        <!-- <th scope="col">API Key</th> -->
                                        <th scope="col">Payin Names </th>
                                        <th scope="col">Payout Names</th>
                                        <th scope="col">Keys</th>
                                        <th scope="col">Created On</th>
                                        {% if 'edit' in session.get('thirdPartyIntegrationPermissions', []) %}
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                         {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                     {% if sitesList %}
                                    {% for each_site in sitesList %}
                                    <tr>
                                        <td>{{ snoCount + loop.index}}</td>

                                        {% if each_site.name %}
                                        <td>{{ each_site.name }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        
                                        <!-- <td>{{ each_site.ipAddress }}</td> -->
                                        <!-- <td>{{ each_site.apiKey }}</td> -->
                                         
                                        <td>
                                            {% if each_site.enablePayin == True %}
                                            {{ each_site.payinNames }}
                                            {% else %}
                                            {{each_site.enablePayin}}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if each_site.enablePayout == True %}
                                            {{ each_site.payoutNames }}
                                            {% else %}
                                            {{each_site.enablePayout}}
                                            {% endif %}
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-icon btn-sm btn-warning-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#viewSiteModal{{ loop.index }}">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        
                                            <div class="modal fade" id="viewSiteModal{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="viewSiteModalLabel" 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="viewSiteModalLabel">Site Parameters</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <div class="row">
                                                                    <div class="col-md-6 mb-3">
                                                                        <label for="ipAddress">IP Address</label>
                                                                        <input type="text" class="form-control" value="{{ each_site.ipAddress }}" readonly>
                                                                    </div>
                                                                    <div class="col-md-6 mb-3">
                                                                        <label for="apiKey">API Key</label>
                                                                        <input type="text" class="form-control" value="{{ each_site.apiKey }}" readonly>
                                                                    </div>
                                                                    <div class="col-md-6 mb-3">
                                                                        <label for="secretKey">Secret Key</label>
                                                                        <input type="text" class="form-control" value="{{ each_site.secretKey }}" readonly>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        

                                        <td>{{ each_site.createdOn }}</td>

                                        {% if 'edit' in session.get('thirdPartyIntegrationPermissions', []) %}
                                        <td>
                                            {% if each_site.status == 1 %}
                                            <form method="POST"
                                                action="{{ url_for('third_party_integrations.update_site_status',siteId=each_site.id,profilePage=profilePage) }}" >
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" name="siteId" value="{{ each_site.id }}">
                                                <input type="hidden" name="status" value="deactivate">
                                               
                                                <button type="submit" class="btn btn-sm btn-success">Active</button>
                                            </form> 
                                           
                                            {% else %}
                                            
                                            <form method="POST"
                                                action="{{ url_for('third_party_integrations.update_site_status',siteId=each_site.id,profilePage=profilePage) }}">
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" name="siteId" value="{{ each_site.id }}">
                                                <input type="hidden" name="status" value="activate">
                                                <button type="submit" class="btn btn-sm btn-warning">Inactive</button>
                                            </form> 
                                            {% endif %}
                                        </td>

                                        {% endif %}
                                        <td>
                                            {% if 'edit' in session.get('thirdPartyIntegrationPermissions', []) %}
                                            <a href="javascript:void(0);"
                                           onclick='openUpdateModal({
                                               "id": "{{ each_site.id }}",
                                               "name": {{ each_site.name | tojson }},
                                               "ipAddress": {{ each_site.ipAddress | tojson }},
                                               "trnIdentifier": {{ each_site.trnIdentifier | tojson }}, 
                                                "enablePayin": {{ each_site.enablePayin | tojson }},
                                                "payinPaymentGatewayId": "{{ each_site.payinPaymentGatewayId.id }}",
                                                "payinWebhook": {{ each_site.payinWebhook | tojson }}, 
                                                "enablePayout": {{ each_site.enablePayout | tojson }},
                                                "payoutPaymentGatewayId": "{{ each_site.payoutPaymentGatewayId.id }}",
                                                "payoutWebhook": {{ each_site.payoutWebhook | tojson }}, 
                                                "payoutVAWebhook": {{ each_site.payoutVAWebhook | tojson }}, 
                                                "payoutValidationWebhook": {{ each_site.payoutValidationWebhook | tojson }}, 
                                                "payoutAlertsWebhook": {{ each_site.payoutAlertsWebhook | tojson }}, 
                                                "payinPaymentGatewaysList": {{ each_site.payinPaymentGatewaysList | tojson }}, 
                                                "payoutPaymentGatewaysList": {{each_site.payoutPaymentGatewaysList | tojson }},
                                           })'
                                           class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                                           <i class="ri-edit-line"></i>
                                           </a>
                                             {% endif %}
                                        </td>
                                        
                                    </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 == "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>
                        <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 Site Modal -->
<div class="modal fade" id="addSiteModal" 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 Site</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('third_party_integrations.add_site') }}" id="addthirdForm" name="addthirdForm"
                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">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Site Name*</label>
                        <input type="text" class="form-control" id="name" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Site Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/." placeholder="Enter site name"
                           required >
                            <span id="name_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="ipAddress">IP Address*</label>
                        <input type="text" class="form-control" id="ipAddress" pattern="^\d+(\.\d+)*$" title="IP Address contains only numeric characters and allows multiple dots." name="ipAddress"
                            placeholder="Enter ip address" required>
                            <span id="ipAddress_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="ipAddress">Transaction Identifier*</label>
                        <input type="text" class="form-control" id="trnIdentifier" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Transaction Identifier contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/." name="trnIdentifier"
                            placeholder="Enter transaction identifier" required>
                            <span id="trnIdentifier_error" class="error"></span>
                    </div>

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

                    <div class="col-md-12">
                        <div class="form-group" id="payinEnableList" style="display: none">
                            <div>
                            <label for="payinPaymentGatewayId">Payin Payment Gateways*</label>
                            <select class="form-control chosen-select" name="payinPaymentGatewayId"
                            id="payinPaymentGatewayId" multiple >
                                <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="payinPaymentGatewayId_error" class="error"></span>
                            </div>
                            <div class="form-group">
                                <label for="payInWebhook">Payin Webhook*</label>
                                <input type="text" class="form-control" id="payInWebhook" name="payinWebhook"
                                    placeholder="Enter payin webhook url">
                                    <span id="payinWebhook_error" class="error"></span>
                            </div>
                            
                        </div>
                    </div>

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

                    <div class="col-md-12">
                        <div class="form-group" id="payoutEnableList" style="display: none">
                            <div>
                            <label for="payoutPaymentGatewayId">Payout Payment Gateway*</label>
                            <select class="form-control chosen-select" name="payoutPaymentGatewayId"
                            id="payoutPaymentGatewayId" multiple >
                                <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="payoutPaymentGatewayId_error" class="error"></span>
                            </div>
                            <div class="form-group">
                                <label for="payOutWebhook">Payout Webhook*</label>
                                <input type="text" class="form-control" id="payoutWebhook" name="payoutWebhook"
                                    placeholder="Enter payout webhook url">    
                            <span id="payoutWebhook_error" class="error"></span>
                            </div>
                            

                            <div class="form-group">
                                <label for="payoutVAWebhook">VA Assigned Webhook*</label>
                                <input type="text" class="form-control" id="payoutVAWebhook" name="payoutVAWebhook"
                                    placeholder="Enter payout va list webhook url">
                                    <span id="payoutVAWebhook_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="payoutValidationWebhook">VA Validation Webhook*</label>
                                <input type="text" class="form-control" id="payoutValidationWebhook" name="payoutValidationWebhook"
                                    placeholder="Enter va validation webhook url">
                                    <span id="payoutValidationWebhook_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="payoutAlertsWebhook">VA Alerts Webhook*</label>
                                <input type="text" class="form-control" id="payoutAlertsWebhook" name="payoutAlertsWebhook"
                                    placeholder="Enter va alerts webhook url">
                                    <span id="payoutAlertsWebhook_error" class="error"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary form_submit">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Site Modal -->


<!-- Update Site Modal -->
<div class="modal fade" id="updateSite" tabindex="-1" role="dialog"
    aria-labelledby="updateSiteLabel" 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="updateSiteLabel">Update Site</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" name="updateSiteForm" id="updateSiteForm"
                    enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" id="latitude_update" name="latitude">
                    <input type="hidden" id="longitude_update" name="longitude">
                    <input type="hidden" name="defaultVerificationId" id="defaultVerificationId"> 
                    <div class="form-group">
                        <label for="editname">Site Name*</label>
                        <input type="text" class="form-control" id="editname" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Site 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="ipAddress">IP Address*</label>
                        <input type="text" class="form-control" id="editipAddress" name="ipAddress" pattern="^\d+(\.\d+)*$" title="IP Address contains only numeric characters and allows multiple dots." required>
                        <span id="ipAddress_edit_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="trnIdentifier">Transaction Identifier*</label>
                        <input type="text" class="form-control" id="edittrnIdentifier" name="trnIdentifier" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Transaction Identifier contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/." required>
                        <span id="trnIdentifier_edit_error" class="error"></span>
                    </div>
                    <div class="col-md-12">
                        <div class="horizontal-checkboxes form-check">
                            <label class="form-check-label" for="enablePayin">Enable Payin</label>
                            <input type="checkbox" class="form-check-input" id="editenablePayin"
                                name="enablePayin" value="True" onclick="ShowHidePayin(this)">
                        </div>
                    </div>
                    <div class="form-group" id="payinupdateList">
                        <!-- <label for="payinPaymentGatewayId">Payin Payment Gateways</label> -->
                        <!-- <select class="form-control chosen-select"  data-trigger name="payinPaymentGatewayId"
                            id="editpayinPaymentGatewayId" multiple>
                            {% if each_pg in payinEnableList %}
                            <option value="{{ each_pg.id|string }}">{{ each_pg.apiName }}</option>
                            {% endif %}
                        </select>
                        <span id="payinPaymentGatewayId_edit_error" class="error"></span> -->

                        <div>
                        <label for="editpayinPaymentGatewayId">Payin Payment Gateways*</label>
                        <select class="form-control chosen-select" id="editpayinPaymentGatewayId" name="payinPaymentGatewayId" data-placeholder="Select" multiple>
                            {% for each_payin_pg in payinEnableList %}
                                <option value="{{ each_payin_pg.id | string }}">{{ each_payin_pg.apiName }}</option>
                            {% endfor %}
                        </select>
                        
                        <span id="payinPaymentGatewayId_edit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="payinWebhook">Payin Webhook URL</label>
                            <input type="text" class="form-control" id="editpayinWebhook" name="payinWebhook">
                            <span id="payinWebhook_edit_error" class="error"></span>
                        </div>
                      
                    </div>

                    <div class="col-md-12">
                        <div class="horizontal-checkboxes form-check">
                            <label class="form-check-label" for="enablePayout">Enable Payout</label>
                            <input type="checkbox" class="form-check-input" id="editenablePayout"
                                name="enablePayout" value="True" onclick="ShowHidePayout(this)">
                        </div>
                    </div>
                    <div class="form-group" id="payoutIdsList"
                        >
                        <!-- <label for="editpayoutPaymentGatewayId">Payout Payment Gateways*</label>
                        <select class="form-control chosen-select"  data-trigger name="payoutPaymentGatewayId"
                            id="editpayoutPaymentGatewayId" multiple >
                            <option value="">Select</option>
                            {% if each_payout_pg in payoutEnableList %}
                            <option value="{{ each_payout_pg.id }}">{{ each_payout_pg.apiName }}</option>
                            {% endif %}
                        </select> -->
                        <div>
                        <label for="editpayoutPaymentGatewayId">Payout Payment Gateways*</label>
                        <select class="form-control chosen-select" id="editpayoutPaymentGatewayId" name="payoutPaymentGatewayId" data-placeholder="Select" multiple>
                            {% for each_payout_pg in payoutEnableList %}
                                <option value="{{ each_payout_pg.id | string }}">{{ each_payout_pg.apiName }}</option>
                            {% endfor %}
                        </select>
                        <span id="payoutPaymentGatewayId_edit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="payoutWebhook">Payout Webhook URL</label>
                            <input type="text" class="form-control" id="editpayoutWebhook" name="payoutWebhook">
                            <span id="payoutWebhook_edit_error" class="error"></span>
                        </div>
                        
                        <div class="form-group">
                                <label for="payoutVAWebhook">VA Assigned Webhook*</label>
                                <input type="text" class="form-control" id="editpayoutVAWebhook" name="payoutVAWebhook"
                                    placeholder="Enter payout va list webhook url">
                                    <span id="payoutVAWebhook_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="payoutValidationWebhook">VA Validation Webhook*</label>
                                <input type="text" class="form-control" id="editpayoutValidationWebhook" name="payoutValidationWebhook"
                                    placeholder="Enter va validation webhook url">
                                    <span id="payoutValidationWebhook_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="payoutAlertsWebhook">VA Alerts Webhook*</label>
                                <input type="text" class="form-control" id="editpayoutAlertsWebhook" name="payoutAlertsWebhook"
                                    placeholder="Enter va alerts webhook url">
                                    <span id="payoutAlertsWebhook_edit_error" class="error"></span>
                            </div>

                    </div>


                    <div class="modal-footer justify-content-between">
                        <span id="EditErrorMessage" class="error"></span>
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary form_submit">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Update Site Modal -->



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

    function PayoutEnable(payout) {
        const payoutEnableList = document.getElementById("payoutEnableList");
        payoutEnableList.style.display = payout.checked ? 'block' : 'none';
    }

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

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


<script type="text/javascript">
    $(document).ready(function () {
        $('#addthirdForm').validate({
        rules: {
                name: {
                    required: true,
                    minlength: 1,
                    maxlength: 75
                },
                ipAddress: {
                    required: true,
                    minlength: 1,
                    maxlength: 16
                },
                trnIdentifier: {
                    required: true,
                    minlength: 1,
                    maxlength: 32
                },
                enablePayin: {

                },
                payinPaymentGatewayId: {
                },
                payinWebhook: {
                },
                enablePayout: {
           
                },
                payinEnable: {
                  
                },
                payoutPaymentGatewayId: {
                
                },
                payoutWebhook: {
               
                },
                payoutVAWebhook: {
                
                },
                payoutValidationWebhook: {
                 
                },
                payoutAlertsWebhook: {
                   
                },
        },
        messages: {
            name: {
                required: "Site Name is required.",
                minlength: "Site Name must be at least 1 character.",
                maxlength: "Site Name cannot exceed 75 characters."
            },
            ipAddress: {
                required: "ipAddress is required.",
                minlength: "Please enter a Ip Address between 1 and 16 numeric characters",
                maxlength: "Please enter a Ip Address  between 1 and 16 numeric characters"
            },
            trnIdentifier: {
                required: "trnIdentifier is required.",
                minlength: "trnIdentifier must be at least 1 character.",
                maxlength: "trnIdentifier cannot exceed 32 characters."
            },
            enablePayin:{
            },
            payinPaymentGatewayId: {
                required: "payinWebhook is requieed",
            },
            payinWebhook:{
                required: "payinWebhook is requieed",
                minlength: "payinWebhook must be at least 3 character.",
                maxlength: "payinWebhook cannot exceed 75 characters."
            },
            enablePayout: {
            },
            payoutPaymentGatewayId: {
                required: "payinWebhook is requieed",
            },
            payoutWebhook: {
                required:"payoutWebhook is required",
                minlength: "payoutWebhook must be at least 3 character.",
                maxlength: "payoutWebhook cannot exceed 75 characters."
            },
            payoutVAWebhook: {
               minlength: "payoutVAWebhook must be at least 3 character.",
                maxlength: "payoutVAWebhook cannot exceed 75 characters."
            },
            payoutValidationWebhook: {
               minlength: "payoutValidationWebhook must be at least 3 character.",
                maxlength: "payoutValidationWebhook cannot exceed 75 characters."
            },
            payoutAlertsWebhook: {
               minlength: "payoutAlertsWebhook must be at least 3 character.",
                maxlength: "payoutAlertsWebhook cannot exceed 75 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) {
            $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
              function (lat, lng) {
                 
                  $(form).find('input[name="latitude"]').val(lat);
                  $(form).find('input[name="longitude"]').val(lng);
                    $('.error').text('');
                    $.ajax({
                        url: form.action,
                        type: form.method,
                        data: $(form).serialize(),
                        xhrFields: {
                        withCredentials: true   // THIS ensures cookies/session are sent
                            },
                    success: function (response) {
                        console.log("in submit hndler", response)
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                            form.reset();
                            location.reload();

                        } else if (response.responseStatus == 0) {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                            console.log(response)
                            $.each(response.result, function (key, value) {
                                $('#' + key + "_error").text(value)
                            });
                            return false;
                        } else if (response.responseStatus == 2) {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                            $('#errorMessage').text(response.result);
                            return false;
                        } 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.");
                    }
                );
            }
        });

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

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

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


    $('#updateSiteForm').validate({
        rules: {
                name: {
                    required: true,
                    minlength: 1,
                    maxlength: 75
                },
                ipAddress: {
                    required: true,
                    minlength: 1,
                    maxlength: 16
                },
                trnIdentifier: {
                    required: true,
                    minlength: 1,
                    maxlength: 32
                },
                enablePayin: {

                },
                payinPaymentGatewayId: {
                },
                payinWebhook: {
                },
                enablePayout: {
           
                },
                payinEnable: {
                  
                },
                payoutPaymentGatewayId: {
                
                },
                payoutWebhook: {
               
                },
                payoutVAWebhook: {
                
                },
                payoutValidationWebhook: {
                 
                },
                payoutAlertsWebhook: {
                   
                },
        },
        messages: {
            name: {
                required: "Site Name is required.",
                minlength: "Site Name must be at least 1 character.",
                maxlength: "Site Name cannot exceed 75 characters."
            },
            ipAddress: {
                required: "ipAddress is required.",
                minlength: "Please enter a Ip Address between 1 and 16 numeric characters",
                maxlength: "Please enter a Ip Address  between 1 and 16 numeric characters"
            },
            trnIdentifier: {
                required: "trnIdentifier is required.",
                minlength: "trnIdentifier must be at least 1 character.",
                maxlength: "trnIdentifier cannot exceed 32 characters."
            },
            enablePayin:{
            },
            payinPaymentGatewayId: {
                required: "payinWebhook is requieed",
            },
            payinWebhook:{
                required: "payinWebhook is requieed",
                minlength: "payinWebhook must be at least 3 character.",
                maxlength: "payinWebhook cannot exceed 75 characters."
            },
            enablePayout: {
            },
            payoutPaymentGatewayId: {
                required: "payinWebhook is requieed",
            },
            payoutWebhook: {
                required:"payoutWebhook is required",
                minlength: "payoutWebhook must be at least 3 character.",
                maxlength: "payoutWebhook cannot exceed 75 characters."
            },
            payoutVAWebhook: {
               minlength: "payoutVAWebhook must be at least 3 character.",
                maxlength: "payoutVAWebhook cannot exceed 75 characters."
            },
            payoutValidationWebhook: {
               minlength: "payoutValidationWebhook must be at least 3 character.",
                maxlength: "payoutValidationWebhook cannot exceed 75 characters."
            },
            payoutAlertsWebhook: {
               minlength: "payoutAlertsWebhook must be at least 3 character.",
                maxlength: "payoutAlertsWebhook cannot exceed 75 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) {
        $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
            function (lat, lng) {
               
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);
                $('.error').text('');
                $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                            success: function (response) {
                                console.log("in submit hndler", response)
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();

                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    console.log(response)
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_edit_error").text(value)
                                    });
                                    return false;
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    $('#edit_errorMessage').text(response.result);
                                    return false;
                                } 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.");
                                }
                            );
                        }
                     });

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

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

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


});

</script>

<script>


    function resetFormData1(formid) {
    const form = document.getElementById(formid); // Get the form element

    if (!form) return;

    form.reset(); // Reset standard input fields

    // Remove all jQuery Validation plugin error labels
    form.querySelectorAll('label.error').forEach(el => el.remove());

    // Clear all custom error spans
    form.querySelectorAll('span.error').forEach(el => el.innerText = '');

    // Update any chosen dropdowns if present
    $(form).find('.chosen-select').trigger('chosen:updated');
}

</script>

{% endblock %}