{% 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>{{ "general.settings" | 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 col-md-6">
                    <div class="form-group">
                        <label>{{ "title" | trans({}, 'admin') }}</label>
                        {% for lang in languages %}
                            <input class="form-control translation {{ lang.slug }}"
                                   id="title_{{ lang.slug }}"
                                   name="title_{{ lang.slug }}"
                                   data-slug="{{ lang.slug }}"
                                   {% if title.value[lang.slug] is defined %}value="{{ title.value[lang.slug] }}"{% endif%}
                                   {% if lang.slug != 'nl' %}style="display: none;"{% endif %}
                            />
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>{{ "keywords" | trans({}, 'admin') }}</label>
                        {% for lang in languages %}
                            <div class="translation {{ lang.slug }}" data-slug="{{ lang.slug }}" {% if lang.slug != 'nl' %}style="display: none;"{% endif %}>
                                <input class="form-control keywords"
                                       id="keywords_{{ lang.slug }}"
                                       name="keywords_{{ lang.slug }}"
                                       data-role="tagsinput"
                                       {% if keywords.value[lang.slug] is defined %}value="{{ keywords.value[lang.slug] }}"{% endif%}
                                />
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group">
                        <label>{{ "description" | trans({}, 'admin') }}</label>
                        {% for lang in languages %}
                            <input class="form-control translation {{ lang.slug }}"
                                   id="description_{{ lang.slug }}"
                                   name="description_{{ lang.slug }}"
                                   data-slug="{{ lang.slug }}"
                                   {% if description.value[lang.slug] is defined %}value="{{ description.value[lang.slug] }}"{% endif%}
                                   {% if lang.slug != 'nl' %}style="display: none;"{% endif %}
                            />
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group">
                        <label>{{ "welcome.text" | 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="welcome_text_{{ lang.slug }}"
                                          data-slug="{{ lang.slug }}"
                                >
                                    {% if welcomeText.value and welcomeText.value[lang.slug] is defined %}
                                        {{ welcomeText.value[lang.slug] }}
                                    {% endif%}
                                </textarea>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label>{{ "images" | trans({}, 'admin') }}</label>
                </div>
                {% if carouselHome.value is null or carouselHome.value is empty %}
                    <div class="col-12">
                        <div class="alert alert-info">{{ "no.images" | trans({}, 'admin') }}</div>
                    </div>
                {% endif %}
                <div class="col-12">
                    <div class="row photo-sort mb-4">
                        {% if carouselHome.value %}
                            {% for key, image in carouselHome.value %}
                                <div class="photo-wrapper col-12 col-md-6 col-xl-4 mb-4" data-key="{{ key }}">
                                    <div class="photo"
                                         style="background-image: url({{ asset('assets/files/carousel_home/' ~ image.name) }})"
                                    >
                                        <a href="{{ path('admin_settings_carousel_image_text', {'imageHex': key}) }}"
                                           class="btn btn-warning btn-xs edit"
                                           title="{{ "edit" | trans({}, 'admin') }}"
                                        >
                                            <i class="fas fa-pen"></i>
                                        </a>
                                        <a class="btn btn-danger btn-xs delete" role="button" title="{{ "delete" | trans({}, 'admin') }}">
                                            <i class="fas fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    <input id="photos-sort" type="hidden" name="photos_sort">
                    <input id="photos-delete" type="hidden" name="photos_delete">
                    <div class="row">
                        <div class="col-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-primary btn-file">
										<i class="fa fa-folder-open"></i> {{ "search" | trans({}, 'admin') }}...
                                        <input type="file" class="upload-file" name="photos[]" data-max-size="10000000" accept=".jpg, .jpeg, .png, .gif" multiple>
									</span>
								</span>
                                <input type="text" class="form-control input-file-text" placeholder="{{ "selected.images" | 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/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('assets/js/tagsinput.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            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,
            });

            $('#language').on('change', function(){
                var 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('{{ "allowed.images" | trans({}, 'admin') }}');
                        return false;
                    }

                    if(fileSize>maxSize){
                        constraint.text('{{ "image.max.size.allowed" | trans({}, 'admin') }}');
                        return false;
                    }
                }else{
                    $('.input-file-text').val('');
                }

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