{% block content %}
    <div class="col-xs-12 col-sm-12 col-md-offset-3 col-lg-offset-3 col-md-6 col-lg-6">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="panel cfj-panel">
                    <div class="panel-heading cfj-deg" style="color: #fff;">
                        Configurar
                    </div>
                    <div class="panel-body">
                        {{ form_start(form) }}
                        <input type="hidden" name="market" value="{{ market }}">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.marketplace,'Marketplace:'|trans) }}
                                    {{ form_widget(form.marketplace, {'attr':{'class':'form-control','placeholder':'Proveedor'} }) }}
                                    {{ form_errors(form.marketplace, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.nombreconfiguracion,'Nombre Configuracion:'|trans) }}
                                    {{ form_widget(form.nombreconfiguracion, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.nombreconfiguracion, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.urlservidor != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.urlservidor,'URL Servidor:'|trans) }}
                                    {{ form_widget(form.urlservidor, {'attr':{'class':'form-control','placeholder':'URL Servidor'} }) }}
                                    {{ form_errors(form.urlservidor, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.sellerCenterServerUrl != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.sellerCenterServerUrl,'URL Servidor Seller-center:'|trans) }}
                                    {{ form_widget(form.sellerCenterServerUrl, {'attr':{'class':'form-control','placeholder':'URL Servidor Seller-center'} }) }}
                                    {{ form_errors(form.sellerCenterServerUrl, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.siteid != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.siteid,'Site Id:'|trans) }}
                                    {{ form_widget(form.siteid, {'attr':{'class':'form-control','placeholder':'Site Id'} }) }}
                                    {{ form_errors(form.siteid, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.usuario != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.usuario,'Usuario:'|trans) }}
                                    {{ form_widget(form.usuario, {'attr':{'class':'form-control','placeholder':'Usuario'} }) }}
                                    {{ form_errors(form.usuario, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.sellerCenterSeller != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.sellerCenterSeller,'Usuario de Seller-center:'|trans) }}
                                    {{ form_widget(form.sellerCenterSeller, {'attr':{'class':'form-control','placeholder':'Usuario de Seller-center'} }) }}
                                    {{ form_errors(form.sellerCenterSeller, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.appid != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.appid,'App Id:'|trans) }}
                                    {{ form_widget(form.appid, {'attr':{'class':'form-control','placeholder':'App Id'} }) }}
                                    {{ form_errors(form.appid, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.clave != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.clave,'Clave Conexion:'|trans) }}
                                    {{ form_widget(form.clave, {'attr':{'class':'form-control','placeholder':'Clave Conexion'} }) }}
                                    {{ form_errors(form.clave, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.key != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.key,'Key:'|trans) }}
                                    {{ form_widget(form.key, {'attr':{'class':'form-control','placeholder':'Key'} }) }}
                                    {{ form_errors(form.key, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.sellerCenterKey != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.sellerCenterKey,'Key de Seller-center:'|trans) }}
                                    {{ form_widget(form.sellerCenterKey, {'attr':{'class':'form-control','placeholder':'Key de Seller-center'} }) }}
                                    {{ form_errors(form.sellerCenterKey, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.expiresin != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.expiresin,'Expires in:'|trans) }}
                                    {{ form_widget(form.expiresin, {'attr':{'class':'form-control','placeholder':'Expires in'} }) }}
                                    {{ form_errors(form.expiresin, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.secretid != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.secretid,'Secret Id:'|trans) }}
                                    {{ form_widget(form.secretid, {'attr':{'class':'form-control','placeholder':'Secret Id'} }) }}
                                    {{ form_errors(form.secretid, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.accesstoken != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.accesstoken,'Access token:'|trans) }}
                                    {{ form_widget(form.accesstoken, {'attr':{'class':'form-control','placeholder':'Access token'} }) }}
                                    {{ form_errors(form.accesstoken, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.sellerCenterAccessToken != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.sellerCenterAccessToken,'Access token de Seller-center:'|trans) }}
                                    {{ form_widget(form.sellerCenterAccessToken, {'attr':{'class':'form-control','placeholder':'Access token de Seller-center'} }) }}
                                    {{ form_errors(form.sellerCenterAccessToken, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.refreshtoken != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.refreshtoken,'Refreshtoken:'|trans) }}
                                    {{ form_widget(form.refreshtoken, {'attr':{'class':'form-control','placeholder':'Refreshtoken'} }) }}
                                    {{ form_errors(form.refreshtoken, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.apisecret != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.apisecret,'Api Secret:'|trans) }}
                                    {{ form_widget(form.apisecret, {'attr':{'class':'form-control','placeholder':'Api Secret'} }) }}
                                    {{ form_errors(form.apisecret, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 hidden">
                                <div class="form-group">
                                    {{ form_label(form.oauthUrl,'URL OAuth:'|trans) }}
                                    {{ form_widget(form.oauthUrl, {'attr':{'class':'form-control','placeholder':'URL OAuth'} }) }}
                                    {{ form_errors(form.oauthUrl, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.descriptionTemplate != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.descriptionTemplate,'Plantilla de Descripción:'|trans) }}
                                    {{ form_widget(form.descriptionTemplate, {'attr':{'class':'form-control','placeholder':'Plantilla de Descripción'} }) }}
                                    {{ form_errors(form.descriptionTemplate, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.officialStoreId != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.officialStoreId,'ID de tienda oficial:'|trans) }}
                                    {{ form_widget(form.officialStoreId, {'attr':{'class':'form-control','placeholder':'ID de tienda oficial'} }) }}
                                    {{ form_errors(form.officialStoreId, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 {% if config.publicationInstitutionalImage != 1 %}hidden{% endif %}">
                                <div class="form-group">
                                    {{ form_label(form.publicationInstitutionalImage,'URL de imagen institucional para las publicaciones:'|trans) }}
                                    {{ form_widget(form.publicationInstitutionalImage, {'attr':{'class':'form-control','placeholder':'URL de la imagen institucional'} }) }}
                                    {{ form_errors(form.publicationInstitutionalImage, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            {% set value = form.publicacionauto.vars.value %}
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-4">
                                <div class="form-group">
                                    {{ form_label(form.publicacionauto,'Publicacion Automatica:'|trans) }}
                                    {{ form_widget(form.publicacionauto, {'attr':
                                        {'class':'form-control'},'value': value
                                    }
                                    ) }}
                                    {{ form_errors(form.publicacionauto, {'attr':{'class':'form-control'}}) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6" hidden>
                                <div class="form-group">
                                    {{ form_label(form.clearStock,'Limpiar Stock:'|trans) }}
                                    {{ form_widget(form.clearStock, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.clearStock, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                        {{ form_label(form.active,'Estado') }}
                                        <br>
                                        <div class="form-group onoffswitch onoffswitch-status onoffswitch-activo" id="check_estatus">
                                            {{ form_widget(form.active, {'attr':{'class':'onoffswitch-checkbox'} }) }}
                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                        {{ form_label(form.synchronizeCatalog,'Sincronizar catálogo') }}
                                        <br>
                                        <div class="form-group onoffswitch onoffswitch-sync onoffswitch-activo">
                                            {{ form_widget(form.synchronizeCatalog, {'attr':{'class':'onoffswitch-checkbox'} }) }}
                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                                </div>
                            </div>
                            
                        </div>
                        
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            
                            {% for key, section in configVars if section.type == 'section'%}
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                    <h3 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{key}}" aria-expanded="true" aria-controls="collapse-{{key}}" style="display:block;">
                                            <div style="display: flex;
                                                justify-content: space-between;
                                                align-items: center;">                                        
                                                <span>{{section.title}}</span>
                                                <span class="caret"></span>
                                            </div>
                                        </a>
                                    </h3>
                                    </div>

                                    <div id="collapse-{{key}}" {% if key == 0 %} class="panel-collapse collapse in" {% else %} class="panel-collapse collapse" {% endif %} role="tabpanel" aria-labelledby="heading-{{key}}">
                                        <div class="panel-body">
                                        {% for field in section.elements %}
                                            <div class="col-xs-12 col-sm-12 col-md-12">
                                                <div class="form-group">
                                                {% if field.type == 'textbox' %}
                                                    <label for={{field.name}}>{{field.label}}</label>
                                                    <input class="form-control" name="config[{{field.name}}]" placeholder="{{field.placeholder}}" value="{{field.value_selected ?? field.default_value }}">
                                                {% elseif field.type == 'textarea' %}
                                                    <label for={{field.name}}>{{field.label}}</label>
                                                    <textarea class="form-control" name="config[{{field.name}}]" placeholder="{{field.placeholder}}">{{field.value_selected ?? field.default_value }}</textarea>
                                                {% elseif field.type == 'select' %}
                                                    <label for={{field.name}}>{{field.label}}</label>
                                                    <select class="form-control" id="{{field.name}}" name="config[{{field.name}}]">
                                                    {% for option in field.values %}
                                                            <option
                                                            {% if field.value_selected is defined %}
                                                            {{(field.value_selected == option.value) ? "selected" : ""}} 
                                                            {% else %}
                                                            {{option.selected ? "selected" : ""}}
                                                            {% endif %}
                                                            value="{{option.value}}" >{{option.pretty_name}}
                                                            </option>
                                                    {% endfor %}
                                                    </select>
                                                {% elseif field.type == 'multiselect' %}
                                                    <label for={{field.name}}>{{field.label}}</label>
                                                    <select class="form-control multiselect" id="{{field.name}}" multiple="multiple" name="config[{{field.name}}][]">
                                                    {% for option in field.values %}
                                                            <option
                                                            {% if field.value_selected is defined %}
                                                            {{(option.value in field.value_selected) ? "selected" : ""}} 
                                                            {% else %}
                                                            {{option.selected ? "selected" : ""}}
                                                            {% endif %}
                                                            value="{{option.value}}" >{{option.pretty_name}}
                                                            </option>
                                                    {% endfor %}
                                                    </select>
                                                {% elseif field.type == 'radio' %}
                                                    <label>{{field.label}}</label> 
                                                    <fieldset class="ml-2">
                                                        {% for radio in field.values %}
                                                            <div>
                                                                <input type="radio" id="{{radio.value}}" name="config[{{field.name}}]" value="{{radio.value}}"
                                                                    {% if field.value_selected is defined %}  
                                                                    {{ (field.value_selected == radio.value) ? "checked" : "" }} 
                                                                    {% else %} 
                                                                    {{ radio.selected ? "checked" : "" }} 
                                                                    {% endif %}
                                                                >
                                                                <label for="{{radio.value}}">{{radio.pretty_name}}</label>
                                                            </div>
                                                        {% endfor %}
                                                    </fieldset>
                                                {% elseif field.type == 'checkbox_group' %}
                                                    <fieldset>
                                                        <label>{{field.label}}</label> 
                                                        {% for checkbox in field.values %}
                                                            <div>
                                                                <input type="checkbox" id="{{checkbox.name}}" name="config[{{field.name}}][]" value="{{checkbox.name}}"
                                                                {% if field.value_selected is defined %} 
                                                                {{ (checkbox.name in field.value_selected) ? "checked" : "" }}
                                                                {% else %} 
                                                                {{ checkbox.selected ? "checked" : "" }}
                                                                {% endif %}
                                                                >
                                                                <label for="{{checkbox.name}}">{{checkbox.pretty_name}}</label>
                                                            </div>
                                                        {% endfor %}
                                                    </fieldset>
                                                {% elseif field.type == 'text' %}
                                                    <div class="p-3 mb-2 bg-{{field.context}} text-white">{{field.content | raw}}</div>
                                                {% else %}
                                                    <p>El campo: {{ field.label }} no pudo ser renderizado. Comunicarse con el soporte de Fulljaus.</p>
                                                {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 text-right">
                            <div class="form-group">
                                <a type="button" id="configOptionsModal" style="display: none;" class="link-styled">Configurar opciones de publicación</a>
                            </div>
                        </div>

                        <div class="col-md-offset-1 col-lg-offset-1 col-xs-12 col-sm-6 col-lg-10 col-md-6 {% if config.auth != 1 %}hidden{% endif %}">
                            <div class="form-group">
                                Antes de guardar, aseguresé de estar logueado en la cuenta de Mercado Libre con la que
                                se va a sincronizar.
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-right">
                            <div class="form-group" style="display: flex; justify-content:right;">
                                
                                {% if form.children.check_connection is defined %}
                                    {{ form_widget(form.check_connection) }} 
                                {% endif %}
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                    {{ form_rest(form) }}
                    {{ form_errors(form) }}
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="response-check-connection" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Prueba de conexión</h4>
                </div>
                <div class="modal-body">
                    <div id="url-div">
                        <label>URL de pedido:</label>
                        <pre aria-hidden="true" style="text-align: left;white-space: pre-line;">
                            <code id="url-request"></code>
                        </pre>
                    </div>
                    <div id="body-div">
                        <label>Mensaje de pedido:</label>
                        <pre aria-hidden="true" style="text-align: left;white-space: pre-line;">
                            <code id="body-request"></code>
                        </pre>
                    </div>
                    <div id="response-div">
                        <label>Respuesta del servicio:</label>
                        <pre aria-hidden="true" style="text-align: left;white-space: pre-line;">
                            <code id="response"></code>
                        </pre>
                    </div>
                    <div id="code-response-div">
                        <label>Código de respuesta del servicio:</label>
                        <pre aria-hidden="true" style="text-align: left;white-space: pre-line;">
                            <code id="code-response"></code>
                        </pre>
                    </div>
                    <div id="curl-request-div">
                        <label>CURL para replicar el error:</label>
                        <pre aria-hidden="true" style="text-align: left;white-space: pre-line;">
                            <code id="curl-request"></code>
                        </pre>
                    </div>
                    <div id="detail-div">
                        <label>Detalles:</label>
                        <pre aria-hidden="true" style="text-align: left;white-space: pre-line;">
                            <code id="detail"></code>
                        </pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function () {
            
            $('.multiselect').each((e,i) => { 
                $('#'+i.id).select2({
                    width: '100%',
                    containerCssClass: 'cfj-inputs-shadow',
                    placeholder: "Seleccione una o más opciones",
                }); 
            });

            var modified = false;
            var submitted = false;
            $("input, textarea, select").change(function () {
                modified = true;
            });

            $('form').on('submit', function (e) {
                e.preventDefault();//stop submit event
                var self = $(this);//this form
                submitted = true;

                // Ejecuto previamente la validación de OAuth
                executeOAuthValidation(function() {
                    if (modified) {
                        swal({
                                title: "¿Esta seguro que desea realizar los cambios?",
                                text: "Esto generará la sincronización con estas nuevas credenciales.",
                                type: "info",
                                showCancelButton: true,
                                confirmButtonColor: "#00a65a",
                                confirmButtonText: "Si",
                                cancelButtonText: "No",
                                closeOnConfirm: true,
                                closeOnCancel: false
                            },
                            function (isConfirm) {
                                if (isConfirm) {
                                    swal("Éxito", "Se ha iniciado el proceso de sincronización con las nuevas credenciales.", "success");
                                    $("form").off("submit");
                                    self.submit();
                                } else {
                                    swal("Info", "Se cancelo el proceso de edicion", "error");
                                    return false;
                                }
                            }
                        );
                    } else {
                        swal("Éxito", "Se ha iniciado el proceso de sincronización con las nuevas credenciales.", "success");
                        $("form").off("submit");
                        self.submit();
                    }
                });
            });

            function executeOAuthValidation(callback) {
                let oAuthUrl = $('#empresa_marketplace_oauthUrl').val();
                if (oAuthUrl == '') {
                    return callback(true);
                }

                let authHostname = getHostname(oAuthUrl);
                let isUpdate = false;

                if ($('input[name="_method"]').val() == 'PUT') {
                    isUpdate = true;
                }

                // Solo muestro el popup de oauth cuando estoy editando un market, no cuando lo creo.
                if (!isUpdate || 'https://auth.megatone.net/connect/token' === oAuthUrl) {
                    return callback(true);
                }

                swal({
                    title: "Autorización requerida",
                    html: true,
                    text: "Antes de guardar, asegúrese de tener sesión iniciada con su cuenta en el sitio <strong>" + authHostname + "</strong>. Se abrirá una pestaña solicitando permisos.",
                    type: "info",
                    confirmButtonColor: "#00a65a",
                    confirmButtonText: "Abrir",
                    cancelButtonText: "Cancelar",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function(isConfirm) {
                    let result = false;
                    if (isConfirm) {
                        $('#empresa_marketplace_oauthUrl').val(
                            prependProtocol(oAuthUrl)
                        );
                        window.open(oAuthUrl + '?seller_id=' + twigParamsObject.sellerId + '&marketplace_config_id=' + extractCompanyMarketplace(), '_blank').focus();
                        result = true;
                    }
                    return callback(result);
                });
            }

            function prependProtocol(url) {
                if (!url.toLowerCase().match(/^[a-zA-Z]+:\/\//)) {
                    return 'https://' + url;
                }

                return url;
            }

            function getHostname(url) {
                var hostname;
                if (url.indexOf("//") > -1) {
                    hostname = url.split('/')[2];
                } else {
                    hostname = url.split('/')[0];
                }
                hostname = hostname.split(':')[0];
                hostname = hostname.split('?')[0];

                return hostname;
            }

            /**
             * Se añade temporalmente este método a pedido de Chama, ya que necesitamos extraer el id de empresa_marketplace
             * para concatenarlo a la URL de OAuth de mercadolibre.
             */
            function extractCompanyMarketplace() {
                let formAction = $('form[name="empresa_marketplace"]').attr('action');
                formAction = formAction.split('/app/marketplace/sistema/marketplaces/update/')[1];
                formAction = formAction.split('?')[0];

                return formAction;
            }
            $('.onoffswitch-status').on('click', function (e) {
                let lastValue = $("#empresa_marketplace_active")[0].value;
                const checkBoxElement = $(e.currentTarget).find('input:checkbox:first');
                const checkBoxStatus = changeStatusToggle(checkBoxElement);
                checkBoxElement.val(checkBoxStatus);
                if(lastValue == 1 && $("#empresa_marketplace_active")[0].value == 0){
                    swal({
                        title: "Aviso importante",
                        html: true,
                        text: "Al desactivar la conexión con el canal, detiene la sincronización de catálogo y el procesamiento de ventas. Las publicaciones que estén en el canal no se verán afectadas, y las ventas generadas no llegarán a Fulljaus. Asegúrese de guardar los cambios.",
                        type: "info",
                        confirmButtonColor: "#00a65a",
                        confirmButtonText: "Continuar",
                        cancelButtonText: "Cancelar",
                        showCancelButton: true,
                        closeOnConfirm: true,
                        closeOnCancel: true
                    }, function(isConfirm) {
                        if (!isConfirm) {
                            checkBoxElement.val(changeStatusToggle(checkBoxElement));
                        }
                    });
                }
            });

            $('.onoffswitch-sync').on('click', function (e) {
                const checkBoxElement = $(e.currentTarget).find('input:checkbox:first');
                const checkBoxStatus = changeStatusToggle(checkBoxElement);
                checkBoxElement.val(checkBoxStatus);
            });

            if($('#empresa_marketplace_check_connection')[0]){
                const checkConnectionButtonText = $('#empresa_marketplace_check_connection')[0].innerText;
                $('#empresa_marketplace_check_connection')[0].innerHTML = `<i class="fa fa-plug" aria-hidden="true"></i> `+ checkConnectionButtonText;
                $('#empresa_marketplace_check_connection').on('click', function(e){
                    $('#empresa_marketplace_check_connection')[0].innerHTML = `<i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>`;
                    const api = globalRoutes.business.marketplace.config.checkConnection;
                    const body = $('[name="empresa_marketplace"]').serializeArray();
                    $.ajax({  
                        type:'POST',
                        url: api,
                        dataType: 'json',
                        data: body
                    })
                    .done((data) => {
                        try{
                            $('#empresa_marketplace_check_connection')[0].innerHTML = `<i class="fa fa-plug" aria-hidden="true"></i> `  +checkConnectionButtonText;
                            if(data.success){
                                swal("Perfecto!", "Las credenciales son correctas", "success");
                            }else{
                                $('#url-request')[0].innerText = data.details.request_url ;
                                $('#body-request')[0].innerText = data.details.request_payload ? JSON.stringify(data.details.request_payload) : '';
                                $('#curl-request')[0].innerText = data.details.request_curl;
                                $('#response')[0].innerText = data.details.response_payload.message;
                                $('#code-response')[0].innerText = data.details.response_code;
                                $('#detail')[0].innerText = data.details.hint;
                                $('#response-check-connection').modal('show');
                            }
                        } catch (error){
                            console.log(error);
                            swal("Error!","No se pudo realizar la verificación de las credenciales, por favor comuniquese con un operador.", "error");                        
                        }
                    })
                    .fail((data) => {
                        $('#empresa_marketplace_check_connection')[0].innerHTML = `<i class="fa fa-plug" aria-hidden="true"></i> `  +checkConnectionButtonText;
                        swal("Error!","No se pudo realizar la verificación de las credenciales, por favor comuniquese con un operador.", "error");
                    })
                })
            }
        });
    </script>
{% endblock %}