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

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/css/fileinput.css') }}" media="all" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/jquery.tagsinput.css') }}" media="all" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}

    <div id="settings" class="right_col" role="main">
        <form id="settings_form" action="{{ path('admin_settings') }}" method="post" enctype="multipart/form-data">
            <div class="row">
                <div class="col-xs-12">
                    <div class="breadcrumb-panel">
                        <ul class="breadcrumb-list">
                            <li><span><i class="fa fa-flag"></i> Configuración</span></li>
                        </ul>
                    </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-default">
                        <div class="panel-heading">
                            <span>SEO</span>
                        </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">
                                                    <input type="text" class="form-control title" id="title" name="title" value="{{ title }}" required>
                                                </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">
                                                    <input type="text" class="form-control keywords" id="keywords" name="keywords" value="{{ keywords }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <h2 style="margin-top:25px;">Descripción</h2>
                                            </div>
                                        </div>
                                        <textarea id="description" class="form-control description" name="description">{{ description }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Portada
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-12 col-sm-8 col-lg-6">
                                    <div class="">
                                        <img class="img-responsive" src="{{ asset('assets/files/index/' ~ indexCover.value ) }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="constraint"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-7 col-lg-5">
                                    <div class="input-group">
								<span class="input-group-btn">
                                    <span class="btn btn-default btn-file">
										<i class="fa fa-folder-open"></i> Buscar&hellip;
                                        <input type="file" class="upload-file" name="index-cover" data-max-size="1000000" accept=".jpg, .png, .gif">
									</span>
								</span>
                                        <input type="text" class="form-control input-file-text" placeholder="Selecciona una imagen" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Editar</button>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/jquery-ui.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() {
            {# Keywords #}

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

            {# Validate cover #}

            var fileInput  = $('.upload-file'),
                maxSize    = fileInput.data('max-size'),
                regex      = new RegExp("(.*?)\.(jpg|png|gif)$"),
                constraint = $('.constraint');

            $('#settings_form').submit(function(e){
                if(fileInput.get(0).files.length){
                    var fileSize = fileInput.get(0).files[0].size;

                    if(!(regex.test(fileInput.val().toLowerCase()))) {
                        fileInput.val('');
                        constraint.text('Sólo se permiten imágenes en formato JPG, PNG y GIF');
                        return false;
                    }

                    if(fileSize>maxSize){
                        constraint.text('El tamaño máximo permitido es de 1 MB por imagen');
                        return false;
                    }
                }else{
                    $('.input-file-text').val('');
                }

                constraint.text('');
            });
        });
    </script>
{% endblock %}