    <% breadcrumb_add t("payment_methods"), settings_payment_method_settings_path, settings_payment_method_settings_path, t("views.btn.#{action_name}") %>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
        <div class="card">
            <div class="body">
            <%= simple_form_for([:settings, @settings_payment_method_setting]) do |f| %>
            <%= f.error_notification %>

            <div class="form-inputs p-l-15">
                <%= f.input :payment_method %>
                <%= f.input :is_active %>
                <%= f.input :gateway_communication_type, collection: [ "Api", "Device", "Manual"] %>
                <%= f.input :gateway_url, required: true %>
                <%= f.input :auth_token, required: true %>
                <%= f.input :merchant_account_id, required: true %>

                <!-- JSON Key-Value Editor -->
                <div class="form-group">
                <%= f.label :additional_parameters, 'Additional Parameters (Key-Value Pairs)' %>
                <div id="json-fields">
                    <% if @settings_payment_method_setting.additional_parameters.present? %>
                    <% JSON.parse(@settings_payment_method_setting.additional_parameters).each do |key, value| %>
                        <div class="key-value-pair row mb-2">
                        <div class="col-md-5">
                            <input type="text" name="param_keys[]" class="form-control" placeholder="Key" value="<%= key %>">
                        </div>
                        <div class="col-md-5">
                            <input type="text" name="param_values[]" class="form-control" placeholder="Value" value="<%= value %>">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger remove-field">Remove</button>
                        </div>
                        </div>
                    <% end %>
                    <% else %>
                    <div class="key-value-pair row mb-2">
                        <div class="col-md-5">
                        <input type="text" name="param_keys[]" class="form-control" placeholder="Key">
                        </div>
                        <div class="col-md-5">
                        <input type="text" name="param_values[]" class="form-control" placeholder="Value">
                        </div>
                        <div class="col-md-2">
                        <button type="button" class="btn btn-danger remove-field">Remove</button>
                        </div>
                    </div>
                    <% end %>
                </div>

                <button type="button" id="add-field" class="btn btn-primary mt-2">
                    <i class="material-icons">add</i> Add Parameter
                </button>

                <%= f.hidden_field :additional_parameters, id: 'additional-parameters-json' %>
                </div>

            </div>

            <div class="form-actions p-l-15">
                <%= f.submit "Submit", class: 'btn btn-primary submitBtn btn-lg waves-effect' %>
            </div>
            <% end %>
            </div>
        </div>
        </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="card">
        <div class="body">
            <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
            <p>
            1) <%= t("views.right_panel.detail.payment_method") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.payment_method_txt") %> <br>
            2) <%= t("views.right_panel.detail.is_active") %> - <%= t("views.right_panel.detail.checkbox") %> <%= t("views.right_panel.detail.for") %> <%= t("views.right_panel.detail.is_active_txt") %> <br>
            3) <%= t("views.right_panel.detail.gateway") %> <%= t("views.right_panel.detail.comm_type") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.gateway_txt") %> <%= t("views.right_panel.detail.comm_type_txt") %> <br>
            4) <%= t("views.right_panel.detail.gateway") %> <%= t("views.right_panel.detail.url_txt") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.gateway_txt") %> <%= t("views.right_panel.detail.url_txt") %> <br>
            5) <%= t("views.right_panel.detail.auth_token") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.auth_token_txt") %>  <br>
            6) <%= t("views.right_panel.detail.merchant_account") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.merchant_account_txt") %>  <br>
            7) <%= t("views.right_panel.detail.additional_parameters") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.additional_parameters_txt") %>  <br>
            </p>
            <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
            <p>
            1) <%= t("views.right_panel.button.submit") %> - <%= t("views.right_panel.detail.submit_btn_txt") %> <%= t("views.right_panel.detail.payment_method_txt") %> <br>
            </p>
            <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
            <p>
            1) <%= t("views.right_panel.button.home") %> - <%= t("views.right_panel.detail.home_txt") %> <br>
            2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.payment_method_txt") %> <br>
            </p>
        </div>
        </div>
    </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    const jsonFields = document.getElementById('json-fields');
    const jsonOutput = document.getElementById('additional-parameters-json');

    document.getElementById('add-field').addEventListener('click', function() {
        const newPair = document.createElement('div');
        newPair.className = 'key-value-pair row mb-2';
        newPair.innerHTML = `
        <div class="col-md-5">
            <input type="text" name="param_keys[]" class="form-control" placeholder="Key">
        </div>
        <div class="col-md-5">
            <input type="text" name="param_values[]" class="form-control" placeholder="Value">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-danger remove-field">Remove</button>
        </div>
        `;
        jsonFields.appendChild(newPair);
        attachRemoveListener(newPair);
        attachInputListeners(newPair);
    });

    function attachRemoveListener(element) {
        const removeBtn = element.querySelector('.remove-field');
        if (removeBtn) {
        removeBtn.addEventListener('click', function() {
            element.remove();
            updateJsonOutput();
        });
        }
    }

    function attachInputListeners(element) {
        element.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', updateJsonOutput);
        });
    }

    function updateJsonOutput() {
        const keys = document.querySelectorAll('input[name="param_keys[]"]');
        const values = document.querySelectorAll('input[name="param_values[]"]');
        const data = {};
        let hasData = false;

        keys.forEach((keyInput, index) => {
        const key = keyInput.value.trim();
        const value = values[index]?.value.trim() || '';

        if (key) {
            data[key] = value;
            hasData = true;
        }
        });

        jsonOutput.value = hasData ? JSON.stringify(data) : '';
    }

    document.querySelectorAll('.key-value-pair').forEach(pair => {
        attachRemoveListener(pair);
        attachInputListeners(pair);
    });

    updateJsonOutput();

    document.querySelector('form').addEventListener('submit', function(e) {
        updateJsonOutput();
        if (!confirm('Are you sure you want to save these parameters?')) {
        e.preventDefault();
        }
    });
    });
    </script>

    <!--  <script type="text/javascript">
    $(function() {
        $(document).on('click', '#payment_method_setting_gateway_communication_type', function(event){
        if ($(this).val() == "Api") {
            $('.submitBtn').attr("disabled", true);
        }else{
            $('.submitBtn').removeAttr("disabled");
        }
        });
        $( "#payment_method_setting_gateway_url" ).keypress(function() {

        });
    });
    </script>

    -->
