{% 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>{{ "contact.settings" | trans({}, 'admin') }}</span>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <label>{{ "image" | trans({}, 'admin') }}</label>
                </div>
                {% if contactSettings.value.cover is not defined %}
                    <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/contact/' ~ contactSettings.value.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.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 type="text/javascript">
        $(document).ready(function() {
            {# 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);
                    }

                });
            });

            {# Photo 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 %}