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

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/css/material-switch.css') }}" media="all" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/fileinput.css') }}" media="all" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}" media="all" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}
    <div id="project" class="right_col" role="main">
        <form id="project_form" action="{{ path('admin_project_new') }}" method="post" enctype="multipart/form-data" novalidate="novalidate">
            <div class="row">
                <div class="col-xs-8">
                    <div class="breadcrumb-panel">
                        <ul class="breadcrumb-list">
                            <li><a href="{{ path('admin_project_list') }}"><i class="fa fa-flag"></i> Proyectos</a> / </li>
                            <li><span>Nuevo</span></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="material-switch pull-right">
                        <label for="project_active" class="label-success">
                            <input type="checkbox" id="project_active" name="active"  />
                        </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-default">
                        <div class="panel-heading">
                            <span style="display:inline-block;">Proyecto</span>
                            <label class="pure-material-switch pull-right">
                                <input type="checkbox" name="active" />
                                <span></span>
                            </label>
                        </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>Nombre</h2>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="title-box">
                                                    <input 
                                                        class="form-control"
                                                        name="name"
                                                        placeholder="Introduce el nombre"
                                                        required="required"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <h2>Localización</h2>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="title-box">
                                                    <input 
                                                        class="form-control"
                                                        name="location"
                                                        placeholder="Introduce la localización"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <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
                                                    id="date"
                                                    name="date"
                                                    class="form-control date-post"
                                                    value="{{ 'now'|date('d/m/Y') }}"
                                                    readonly
                                                />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <h2 style="margin-top:25px;">Descripción</h2>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                            <textarea
                                                name="description"
                                                class="form-control description"
                                            ></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Imágenes
                        </div>
                        <div class="panel-body">
                            <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="photos[]" data-max-size="1000000" accept=".jpg, .png, .gif" multiple>
                                    </span>
                                </span>
                                <input type="text" class="form-control input-file-text" placeholder="Selecciona una o varias imágenes" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button
                type="submit"
                class="btn btn-primary"
            >
                Crear
            </button>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/jquery-ui.min.js') }}"></script>
    <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/datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/locales/bootstrap-datepicker.es.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            tinymce.init({
                selector: '.description',
                language: 'es',
                height:260,
                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: "| 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"
                ]
            });


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

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

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

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

            {# Photos #}

            $(".photo-order").sortable({ update: function(event, ui) {

                var orderPhotoIds = [];
                $(".photo-order li").each(function() {  orderPhotoIds.push($(this).attr('data-id'));  });

                $('#photos-order').val(orderPhotoIds.toString());
            }});

            var deletePhotoIds = [];

            $('.accommodation-photo-delete').on('click',function(){

                var photoId = $(this).closest('li').attr('data-id');

                deletePhotoIds.push(photoId);
                $('#photos-delete').val(deletePhotoIds.toString());

                $(this).closest('li').fadeOut(100, function(){
                    $(this).closest('li').remove();
                });

            });

            $(document).on('change', '.btn-file :file', function() {
                var input = $(this),
                        numFiles = input.get(0).files ? input.get(0).files.length : 1,
                        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
                input.trigger('fileselect', [numFiles, label]);
            });

            $(document).ready( function() {
                $('.btn-file :file').on('fileselect', function(event, numFiles, label) {

                    var input = $(this).parents('.input-group').find(':text'),
                            log = numFiles > 1 ? numFiles + ' files selected' : label;

                    if( input.length ) {
                        input.val(log);
                    } else {
                        if( log ) alert(log);
                    }

                });
            });

            {# Validate photos #}

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

            $('#discover_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('');
            });

            {# Date picker #}

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

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

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