{% extends "base/base-back.html.twig" %}
{% block title %}Nueva entrada | Cershop{% endblock %}
{% block metadescription %}Nueva entrada{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block titulo %}Nueva entrada{% endblock %}
{% block contenido %}

<div class="container-fluid">
    <div class="row">
        <div class="col">
            {% if form_errors(form) %}
                <div class="alert alert-danger" role="alert">{{ form_errors(form) }}</div>
            {% endif %}
            {% for flash_message in app.session.flashbag.get('danger') %}
                <div class="alert alert-danger" role="alert">{{ flash_message }}</div>
            {% endfor %}
        </div>
    </div>
        
    <!-- Inicio del formulario -->
    {{ form_start(form, {'action':path('nuevaEntrada'), 'method':'post', 'attr': {'id':'formulario'}}) }}

        <div class="form-group row">
            <div class="form-group col-md-6 col-xl-8">
                <ul class="nav nav-tabs mb-3" id="tabIdioma">
                    {% for idioma in idiomas %}
                    <li class="nav-item">
                        <a class="nav-link{% if loop.first %} active{% endif %}" id="{{ idioma.codigo }}-tab" data-toggle="tab" href="#{{ idioma.codigo }}" role="tab" aria-controls="{{ idioma.codigo }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">{{ idioma.nombre }}</a>
                    </li>
                    {% endfor %}
                </ul>
                <div class="tab-content" id="tabsTraduccion">
                    {% for idioma in idiomas%}
                    <!-- {{ idioma.nombre }} -->
                    <div class="tab-pane fade{% if loop.first %} show active{% endif %}" id="{{ idioma.codigo }}" role="tabpanel" aria-labelledby="{{ idioma.codigo }}-tab">
                        <div class="form-group col">
                            <label for="contenido_titulo_{{ idioma.codigo }}" class="required">Título de la entrada</label>
                            <input type="text" id="contenido_titulo_{{ idioma.codigo }}" name="titulo_{{ idioma.codigo }}" class="form-control" placeholder="Título de la entrada..." value="{{ app.request.get('titulo_'~idioma.codigo) }}">
                        </div>
                        <div class="form-group col">
                            <label for="contenido_cuerpo_{{ idioma.codigo }}" class="required">Contenido de la entrada</label>
                            <textarea id="contenido_cuerpo_{{ idioma.codigo }}" name="cuerpo_{{ idioma.codigo }}" class="form-control ckeditor" rows="15" style="visibility: hidden; display: none;">{{ app.request.get('cuerpo_'~idioma.codigo) }}</textarea>
                        </div>
                        <div class="col">
                            <hr class="divisor-final-formularios">
                            <h6>SEO</h6>
                        </div>
                        <div class="form-group col">                    
                            <label for="contenido_title_seo_{{ idioma.codigo }}">Title <span class="small">| Máximo recomendado 70 caracteres</span></label>
                            <input type="text" id="contenido_title_seo_{{ idioma.codigo }}" name="title_seo_{{ idioma.codigo }}" class="form-control" placeholder="Title de la entrada..." value="{{ app.request.get('title_seo_'~idioma.codigo) }}">
                        </div>
                        <div class="form-group col">                    
                            <label for="contenido_meta_seo_{{ idioma.codigo }}">Description <span class="small">| Máximo recomendado 156 caracteres</span></label>
                            <input type="text" id="contenido_meta_seo_{{ idioma.codigo }}" name="meta_seo_{{ idioma.codigo }}" class="form-control" placeholder="Description de la entrada..." value="{{ app.request.get('meta_seo_'~idioma.codigo) }}">
                        </div>
                    </div>
                    <!-- /.{{ idioma.nombre }} -->
                    {% endfor %}
                </div>
            </div>
            <div class="form-group col-md-6 col-xl-4">
                <h6 class="required mb-3">Imagen principal</h6>
                <div class="contenedor-multimedia">
                    <div class="miniatura-multimedia">
                        <div class="thumbnail-multimedia">
                            <div class="centrar-multimedia">
                                <img id="miniatura" src="{{ asset('assets/back/images/imagen-principal.jpeg') }}" alt="Sube la imagen principal" class="img-fluid" data-toggle="modal" data-target="#imagenPrincipal">
                            </div>
                        </div>
                    </div>
                </div>
                <p class="small float-left mt-1">Tamaño de imagen recomendado: 1250 x 938px</p>
                <a id="" name="" class="btn btn-xs btn-primary float-right mt-1" data-toggle="modal" data-target="#imagenPrincipal"><i class="fal fa-upload"></i>&ensp; Subir imagen</a>

                <!-- Modal imagen principal -->
                <div class="modal fade" id="imagenPrincipal" tabindex="-1" role="dialog" aria-labelledby="imagenPrincipal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                            <h5 class="modal-title" id="imagenPrincipal">Sube la imagen principal</h5>
                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            </div>
                            <div class="modal-body">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text">Subir</span>
                                    </div>
                                    <div class="custom-file">
                                        {{form_label(form.imagen)}}
                                        {{form_widget(form.imagen)}}
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
                            <a class="btn btn-primary" href="#" data-dismiss="modal">Aceptar</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <div class="form-group col">
                <hr class="divisor-final-formularios">
                {{ form_widget(form.save) }}
                {{ form_widget(form.draft) }}
                <a onclick="javascript: previsualizar();" class="btn float-right ml-2"><i class="far fa-eye" aria-hidden="true"></i> Previsualizar</a>
            </div>
        </div>
        
    {{ form_end(form) }}
    <!-- ./fin del formulario -->
</div>

{% endblock %}

{% block javascript %}
{{ parent() }}
{{ include('js/cambiar-miniatura-contenido.js.twig') }}
<script src="{{ asset('assets/back/js/ckfinder/ckfinder.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/back/js/ckeditor-full/ckeditor.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/back/js/ckeditor-full/adapters/jquery.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    var editor = CKEDITOR.replace('contenido_contenido', {
        filebrowserBrowseUrl: '/assets/back/js/ckfinder/ckfinder.html',
        filebrowserUploadUrl: '/assets/back/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
    });
    CKFinder.setupCKEditor( editor, null, { type: 'Images' } );
    function previsualizar() {
        action = $('#formulario').attr('action');
        idioma = '{{ locale }}';
        $('#formulario').attr('target', '_blank');
        $('#formulario').attr('action', '/'+idioma+'/prev-post');
        $('#formulario').submit();
        $('#formulario').removeAttr('target');
        $('#formulario').attr('action', action);
    }
</script>
{% endblock %}