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

{% block content %}
<form id="form"
      method="POST"
      enctype="multipart/form-data"
      action="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}"
>
    <div class="card">
        <div class="card-header">
            <span>{{ "activity" | trans({}, 'admin') }}</span>
            <select id="language" class="lang-select form-control float-right">
                {% for lang in languages %}
                    <option value="{{ lang.slug }}">{{ lang.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label>{{ "name" | trans({}, 'admin') }}</label>
                        {% for lang in languages %}
                            <input class="form-control translation {{ lang.slug }}"
                                   id="name_{{ lang.slug }}"
                                   name="name_{{ lang.slug }}"
                                   data-slug="{{ lang.slug }}"
                                   required
                                   {% if activity and activity.name[lang.slug] is defined %}value="{{ activity.name[lang.slug] }}"{% endif%}
                                   {% if lang.slug != 'nl' %}style="display: none;"{% endif %}
                            />
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group">
                        <label>{{ "description" | trans({}, 'admin') }}</label>
                        {% for lang in languages %}
                            <div class="translation {{ lang.slug }}" {% if lang.slug != 'nl' %}style="display: none;"{% endif %}>
                                <textarea class="form-control description"
                                          name="description_{{ lang.slug }}"
                                          data-slug="{{ lang.slug }}"
                                >
                                    {% if activity and activity.description[lang.slug] is defined %}
                                        {{ activity.description[lang.slug]|raw }}
                                    {% endif%}
                                </textarea>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label>{{ "image" | trans({}, 'admin') }}</label>
                </div>
                {% if activity is null or activity.cover is null %}
                    <div class="col-12">
                        <div class="alert alert-info">{{ "no.image" | trans({}, 'admin') }}</div>
                    </div>
                {% else %}
                    <div class="col-12">
                        <div class="cover-settings">
                            <img class="cover" src="{{ asset('assets/files/activity/' ~ activity.id ~ '/' ~ activity.cover) }}">
                        </div>
                    </div>
                {% endif %}
                <div class="col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="constraint text-danger"></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-primary btn-file">
										<i class="fa fa-folder-open"></i> {{ "search" | trans({}, 'admin') }}...
                                        <input type="file" class="upload-file" name="photo" data-max-size="10000000" accept=".jpg, .jpeg, .png, .gif">
									</span>
								</span>
                                <input type="text" class="form-control input-file-text" placeholder="{{ "selected.image" | trans({}, 'admin') }}" style="height: 33px;" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" id="editBtn" class="btn btn-success">{{ "edit" | trans({}, 'admin') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% 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 type="text/javascript">
        $(document).ready(function() {
            let slug = '';

            tinymce.init({
                selector: '.description',
                language: 'en',
                height: 250,
                content_style: "div, p { font-size: 16px; }",
                fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 36px",
                plugins: [
                    'link lists print hr anchor pagebreak',
                    'searchreplace wordcount visualblocks nonbreaking',
                    'contextmenu paste'
                ],
                paste_as_text: true,
            });

            {% for lang in languages %}
                slug = '{{ lang.slug }}';

                $('#editBtn').prop('disabled', $('#name_' + slug).val().length == 0);

                $('#name_' + slug).on('keyup', function() {
                    $('#editBtn').prop('disabled', $.trim($('#name_' + slug).val()).length == 0);
                });
            {% endfor %}

            $('#language').on('change', function(){
                slug = $(this).find('option:selected').val();
                $('.translation').each(function() {
                    if($(this).hasClass(slug)) {
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
            });

            {# Photos sort #}
            $(".photo-sort").sortable({ update: function() {
                let sortPhotoKeys = [];
                $(".photo-sort .photo-wrapper").each(function() { sortPhotoKeys.push($(this).attr('data-key')); });
                $('#photos-sort').val(sortPhotoKeys.toString());
            }});

            const deletePhotoKeys = [];

            {# Photos delete #}
            $('.photo .delete').on('click',function(){
                let photoKey = $(this).closest('.photo-wrapper').attr('data-key');

                deletePhotoKeys.push(photoKey);
                $('#photos-delete').val(deletePhotoKeys.toString());

                $(this).closest('.photo-wrapper').fadeOut(100, function(){
                    $(this).closest('.photo-wrapper').remove();
                });

            });

            {# Photos upload #}
            $(document).on('change', '.btn-file :file', function() {
                let 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) {

                    let 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);
                    }

                });
            });

            {# Photos validate #}
            let fileInput  = $('.upload-file'),
                maxSize    = fileInput.data('max-size'),
                regex      = new RegExp("(.*?)\.(jpg|jpeg|png|gif)$"),
                constraint = $('.constraint');

            $('#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('Only JPG, JPEG, PNG and GIF images are allowed');
                        return false;
                    }

                    if(fileSize>maxSize){
                        constraint.text('The maximum size allowed is 10 MB per image');
                        return false;
                    }
                }else{
                    $('.input-file-text').val('');
                }

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