{% extends '@Core/base.html.twig' %}
{% block javascript %}
    {{ parent() }}
{% endblock %}

{% block sectionTitle %}Subsección de información [ {{ websiteConfig.websiteTitle }} ]{% endblock %}

{% block sectionActions %}
{% endblock %}

{% block breadcrumbLinks %}
    <li><a class="" href="{{ path('website_list') }}">Listado de websites</a></li>
    <li><a class="" href="{{ path('website_menu', {"id": websiteConfig.id}) }}">Menu gestión web</a></li>
    <li class="active">Subsección de información</li>
{% endblock %}

{% block content %}
<div class="panel-body">
    <div class="panel panel-flat">
        <div class="panel-body">
            {% form_theme form 'bootstrap_3_layout.html.twig' %}
            {{ form_start(form, {'attr' : {'id' : 'formSubsectionInfoConfig'}}) }}
            {{ form_errors(form) }}

            <div class="row">
                <div class="col-xs-11">
                    {% for icon in icons %}
                        <div class="col-xs-1 text-center">
                            <input type="radio" name="info_icon" value="{{ icon.id }}" {% if infoSubsectionConfig.getIcon %} {%  if infoSubsectionConfig.getIcon.getDescription == icon.description %} checked="checked" {% endif %}{% endif %}>
                            <br>
                            <label><i class="{{ icon.description }} icon_color" style="font-size: 4em; color: #000000"></i></label>
                        </div>
                    {% endfor %}
                </div>
                <div class="col-xs-1">
                    <div>
                        {{ form_label(form.color) }}
                    </div>
                    {{ form_widget(form.color) }}
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    {{ form_label(form.title) }}
                    {{ form_widget(form.title) }}
                </div>
                <div class="col-xs-6">
                    {{ form_label(form.sort) }}
                    {{ form_widget(form.sort) }}
                </div>
            </div>

            <div class="col-xs-6 hidden">
                {{ form_label(form.websiteConfig) }}
                {{ form_widget(form.websiteConfig) }}
            </div>


            {{ form_label(form.text) }}
            {{ form_widget(form.text) }}

            {{ form_end(form) }}

            <div class="panel-footer">
                <div class="text-right">
                    <button type="button" class="btn-rounded btn bg-color3" onclick="saveSubsectionInfoConfig()"><i class="icon-download position-left"></i>Guardar</button>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
    <script>
        $(document).ready(function(){
            $('#websiteInfoSubsectionForm_color').spectrum({
                preferredFormat: "hex",
                showInput: true,
                chooseText: "Elegir",
                cancelText: "Cancelar",
                change: function(color) {
                    $('.icon_color').css('color', color.toHexString());
                }
            })

            {% if color %}
                $('.icon_color').css('color', '{{ color }}');
            {% endif %}
        });

        function saveSubsectionInfoConfig() {

            $('#websiteInfoSubsectionForm_text').val($('#websiteInfoSubsectionForm_text').code());
            var form = $('#formSubsectionInfoConfig').serialize();
            var route = Routing.generate('save_subsection_info_config', {'form' : form});

            $.get(route, function () {

            }).done(function (result) {
                window.location.href = '{{ path('info_subsection',{'id':websiteConfig.id}) }}';
            }).fail(function (error) {
                console.log(error.responseText);
            })
        }
    </script>
{% endblock %}