{% block content %}

    {% set providerCodeBlackList = [
        'beyond',
        'multipointorders', 
        'wizell', 
        'prestashop', 
        'ribeiro', 
        'gbp', 
        'Megatone', 
        'sftp'
        ] 
    %}

    <div class="box">
        <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, {'attr':{'data-code':form.vars.data.proveedor.codigo}}) }}
                            <input type="hidden" name="prov" value="{{ prov }}"> 
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="form-group">
                                        {{ form_label(form.proveedor,'Proveedor:'|trans) }}
                                        {{ form_widget(form.proveedor, {'attr':{'class':'form-control','placeholder':'Proveedor'} }) }}
                                        {{ form_errors(form.proveedor, {'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-6 col-lg-6 {% 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-6 col-lg-6 {% 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-6 col-lg-6 {% 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-6 col-lg-6 {% 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-6 col-lg-6 {% 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-6 col-lg-6 {% 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-md-6 col-lg-6 {% 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 col-lg-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-6 col-lg-6 {% 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 {% if config.oauthUrl != 1 %}hidden{% endif %}">
                                    <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-6 col-lg-6 {% if (config.ordersHost != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.ordersHost,'URL para órdenes:'|trans) }}
                                        {{ form_widget(form.ordersHost, {'attr':{'class':'form-control','placeholder':'Url para el impacto de las órdenes'} }) }}
                                        {{ form_errors(form.ordersHost, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.port != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.port,'Puerto:'|trans) }}
                                        {{ form_widget(form.port, {'attr':{'class':'form-control','placeholder':'Puerto'} }) }}
                                        {{ form_errors(form.port, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.id_webservice != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.id_webservice,'Id WebService:'|trans) }}
                                        {{ form_widget(form.id_webservice, {'attr':{'class':'form-control','placeholder':'Id WebService'} }) }}
                                        {{ form_errors(form.id_webservice, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.languageid != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.language_id,'Id Lenguaje:'|trans) }}
                                        {{ form_widget(form.language_id, {'attr':{'class':'form-control','placeholder':'Id Lenguaje'} }) }}
                                        {{ form_errors(form.language_id, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.moneda != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.moneda,'ID Moneda:'|trans) }}
                                        {{ form_widget(form.moneda, {'attr':{'class':'form-control','placeholder':'ID Moneda'} }) }}
                                        {{ form_errors(form.moneda, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.tipoFactura != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.tipoFactura,'Tipo de factura:'|trans) }}
                                        {{ form_widget(form.tipoFactura, {'attr':{'class':'form-control','placeholder':'Tipo de factura'} }) }}
                                        {{ form_errors(form.tipoFactura, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.numeroSucursal != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.numeroSucursal,'Número de sucursal:'|trans) }}
                                        {{ form_widget(form.numeroSucursal, {'attr':{'class':'form-control','placeholder':'Número de sucursal'} }) }}
                                        {{ form_errors(form.numeroSucursal, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.deposito != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.deposito,'Depósito de stock:'|trans) }}
                                        {{ form_widget(form.deposito, {'attr':{'class':'form-control','placeholder':'Depósito de stock'} }) }}
                                        {{ form_errors(form.deposito, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 {% if (config.idEmpresa != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.idEmpresa,'ID de empresa:'|trans) }}
                                        {{ form_widget(form.idEmpresa, {'attr':{'class':'form-control','placeholder':'ID de empresa'} }) }}
                                        {{ form_errors(form.idEmpresa, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 {% if (config.connected != 1 ) %}hidden{% endif %}">
                                    <div class="form-group">
                                        {{ form_label(form.connected,'Conectado:'|trans) }}
                                        {{ form_widget(form.connected, {'attr':{'class':'form-control','placeholder':'Conectado'} }) }}
                                        {{ form_errors(form.connected, {'attr':{'class':'form-control'} }) }}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        {{ form_errors(form) }}
                                    </div>
                                </div>

                                {% if form.vars.data.proveedor.codigo in providerCodeBlackList %}
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <span class="label label-default" style="float: left;">Campos a sincronizar</span>
                                    <hr>
                                    {# black_list elements container #}
                                    <div id="flex-inputs-container" class="row flex-inputs-container"
                                         style="visibility: hidden; padding: .5rem;"></div>
                                    <hr>
                                </div>
                                {% endif %}

                            </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="text-right">
                                {# {{ form_rest(form) }} #}
                                {{ form_widget(form.submit) }}
                                {{ form_end(form, {'render_rest': false}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

<script type="text/javascript">
    $(document).ready(function() {
        $('.multiselect').each((e,i) => { 
            $('#'+i.id).select2({
                width: '100%',
                containerCssClass: 'cfj-inputs-shadow',
                placeholder: "Seleccione una o más opciones",
            }); 
        })
    });
</script>
{# El js de esta vista ahora se encuentra en: /public/js/EmpresaProveedores/providerConfigHelper.js #}