{% extends 'admin/layout.html.twig' %}

{% set postLanguage = '' %}

{% block content %}

    <div class="right_col" role="main">

        {{ form_start(postForm, {'attr': {'name': 'blog_form', 'enctype': 'multipart/form-data', novalidate: 'novalidate'}}) }}
        <div class="row">
            <div class="col-xs-8">
                <div class="col-xs-12 breadcrumb-panel">
                    <ul class="breadcrumb-list">
                        <li><a href="{{ path('admin_blog_list') }}"><i class="fa fa-hotel"></i> Blog</a> / </li>
                        <li>
                            <span>
                                {% set postLanguage = getPostLanguage(post, 'es') %}
                                {{ postLanguage.title }}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="material-switch pull-right">
                    {{ form_widget(postForm.active) }}
                    <label for="post_active" class="label-success"></label>
                </div>
            </div>
        </div>

        {% block flashMessages %}

            {% for flashMessage in app.session.flashbag.get('message') %}
                <div class="row message">
                    <div class="col-xs-12">
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <i class="fa fa-check-square-o"></i> {{ flashMessage }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                    </div>
                </div>
            {% endfor %}

        {% endblock %}

        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-plaza">
                    <div class="panel-heading">
                        <span style="display:inline-block;">Entrada</span>
                        <select id="language" class="form-control pull-right">
                            <option data-slug="es" selected>Español</option>
                            <option data-slug="en">English</option>
                        </select>
                    </div>
                    <div class="panel-body">
                        <div class="form-horizontal form-label-left">

                            <div class="form-group">
                                <div class="col-lg-8 col-xs-12">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <h2>Título</h2>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="title-box">
                                                {% for language in languages %}
                                                    {% set postLanguage = getPostLanguage(post, language.slug) %}
                                                    <input type="text" class="form-control translation {{ language.slug }}" id="title_{{ language.slug }}" name="title_{{ language.slug }}" data-slug="{{ language.slug }}" value="{% if postLanguage.title is defined %}{{ postLanguage.title }}{% endif %}">
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <h2 style="margin-top:25px;">Palabras clave</h2>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="keywords-box">
                                                {% for language in languages %}
                                                    {% set postLanguage = getPostLanguage(post, language.slug) %}
                                                    <div class="translation {{ language.slug }}">
                                                        <input type="text" class="form-control keywords {{ language.slug }}" id="keywords_{{ language.slug }}" name="keywords_{{ language.slug }}" data-slug="{{ language.slug }}" value="{% if postLanguage.keywords is defined %}{{ postLanguage.keywords }}{% endif %}">
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <h2 style="margin-top:25px;">Descripción</h2>
                                        </div>
                                    </div>
                                    {% for language in languages %}
                                        {% set postLanguage = getPostLanguage(post, language.slug) %}
                                        <textarea class="form-control translation {{ language.slug }}" name="description_{{ language.slug }}" placeholder="Introduce la descripción">{% if postLanguage.description is defined %}{{ postLanguage.description }}{% endif %}</textarea>
                                    {% endfor %}
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <h2 style="margin-top:25px;">Fecha de publicación</h2>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-6 col-md-5">
                                            <input type="text" id="date" name="date" class="form-control date-post" value="{{ post.dateStamp|date('d/m/Y') }}" readonly>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            {% for language in languages %}
                                                {% set postLanguage = getPostLanguage(post, language.slug) %}
                                                {% if postLanguage.title is defined and postLanguage.slug is defined and language.slug != 'es' %}
                                                    <a
                                                            style="margin-top:25px;"
                                                            data-slug="{{ language.slug }}"
                                                            tabindex="0"
                                                            class="btn btn-danger delete"
                                                            role="button"
                                                            data-toggle="popover"
                                                            data-trigger="focus"
                                                            data-placement="bottom"
                                                            title="Eliminar entrada"
                                                            data-html="true"
                                                            data-content="¿Estás seguro de que quieres eliminar esta traducción?
                                                                        <br><br><a href='{{ path('admin_blog_translation_remove', {'postLanguageSlug': postLanguage.slug}) }}' class='btn btn-default' role='button'>Aceptar</a>">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                        Eliminar traducción
                                                    </a>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-xs-12">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <h2>Portada</h2>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            {{ form_widget(postForm.file, {'attr': {'class': 'form-control'}}) }}
                                            {{ form_errors(postForm.file) }}
                                            <input type="checkbox" id="removeCover" name="removeCover" style="display:none;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-plaza">
                    <div class="panel-heading">
                        Cuerpo
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-12 col-lg-8 col-lg-offset-2">
                                <div class="form-horizontal form-label-left">
                                    <div class="form-group">
                                        <div>
                                            {% for language in languages %}
                                                {% set postLanguage = getPostLanguage(post, language.slug) %}
                                                <div class="translation {{ language.slug }}">
                                                    <textarea class="form-control post-body {{ language.slug }}" name="body_{{ language.slug }}" data-slug="{{ language.slug }}" >
                                                        {% if postLanguage.body is defined %}
                                                            {{ postLanguage.body }}
                                                        {% endif %}
                                                    </textarea>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% for language in languages %}
                            {% set postLanguage = getPostLanguage(post, language.slug) %}
                            <input type="hidden" id="slug_{{ language.slug }}" name="slug_{{ language.slug }}" data-slug="{{ language.slug }}" value="{% if postLanguage.slug is defined %}{{ postLanguage.slug }}{% endif %}" {% if language.slug == 'es' %}required="required"{% endif %}>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        {{ form_widget(postForm.submit, { 'label': 'Editar', 'attr': {'class': 'btn btn-success'} })}}
    </div>
    {{ form_end(postForm) }}


    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('assets/js/fileinput.js') }}"></script>
    <script src="{{ asset('assets/js/fileinput_locale_es.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.tagsinput.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('.delete').popover();

            var slug = $('option:selected', this).attr('data-slug');

            if(slug == 'es') {
                $('.delete').hide();
            }

            $(document).ready(function() {
                $('#language').trigger('change');
            });

            $('.keywords').each(function() {

                $(this).tagsInput({
                    width: 'auto',
                    height: '50px'
                });
            });

            tinymce.init({
                selector: '.post-body',
                language: 'es',
                height:700,
                content_style: "div, p { font-size: 16px;font-family:Helvetica,Arial,sans-serif;color:#777169; }",
                fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 36px",
                toolbar1: "undo redo | sizeselect fontselect fontsizeselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
                toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | print preview code ",
                plugins: [
                    'advlist autolink link image lists charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking',
                    'table contextmenu directionality emoticons paste textcolor responsivefilemanager code'
                ],
                paste_as_text: true,
                textcolor_map: [
                    "777169", "Gold",
                    "000000", "Black",
                    "045ea7", "Blue",
                    "993300", "Burnt orange",
                    "333300", "Dark olive",
                    "003300", "Dark green",
                    "003366", "Dark azure",
                    "000080", "Navy Blue",
                    "333399", "Indigo",
                    "333333", "Very dark gray",
                    "800000", "Maroon",
                    "FF6600", "Orange",
                    "808000", "Olive",
                    "008000", "Green",
                    "008080", "Teal",
                    "0000FF", "Blue",
                    "666699", "Grayish blue",
                    "808080", "Gray",
                    "FF0000", "Red",
                    "FF9900", "Amber",
                    "99CC00", "Yellow green",
                    "339966", "Sea green",
                    "33CCCC", "Turquoise",
                    "3366FF", "Royal blue",
                    "800080", "Purple",
                    "999999", "Medium gray",
                    "FF00FF", "Magenta",
                    "FFCC00", "Gold",
                    "FFFF00", "Yellow",
                    "00FF00", "Lime",
                    "00FFFF", "Aqua",
                    "00CCFF", "Sky blue",
                    "993366", "Red violet",
                    "FFFFFF", "White",
                    "FF99CC", "Pink",
                    "FFCC99", "Peach",
                    "FFFF99", "Light yellow",
                    "CCFFCC", "Pale green",
                    "CCFFFF", "Pale cyan",
                    "99CCFF", "Light sky blue",
                    "CC99FF", "Plum"
                ],
                image_advtab: true,
                external_filemanager_path: "{{ filemanagerRoute.value }}",
                filemanager_title: "Explorador de archivos",
                external_plugins: { "filemanager" : "{{ filemanagerRoute.value }}" + "plugin.min.js" },
                relative_urls: false
            });

            $('#language').on('change', function(){

                var slug = $('option:selected', this).attr('data-slug');

                $('.translation').each(function() {

                    if($(this).hasClass(slug)) {
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
            });

            {# Cover #}

            $("#post_file").fileinput({
                language: "es",
                allowedFileExtensions: ["jpeg", "jpg", "gif", "png"],
                initialCaption: "Imagen de portada",
                browseClass: "btn btn-primary",
                removeClass: "btn btn-danger",
                showUpload: false,
                uploadClass: "btn btn-custom",
                showCaption: false,

                {% if post.coverName != null %}
                initialPreview: "<img class='img-responsive' src='{{ asset('assets/files/blog/' ~ post.coverPath ~ '/cover/' ~ post.coverName) }}'>"
                {% endif %}

            });

            $('.fileinput-remove-button').on('click', function(){
                $('#removeCover').prop( "checked", true );
            });

            {# Date picker #}

            var ciOptions = {
                    language: 'es',
                    format: 'dd/mm/yyyy',
                    autoclose: true,
                    orientation: 'bottom'
                };

            $('#date').datepicker(ciOptions);

        });
    </script>
{% endblock %}