{% extends 'frontend.html.twig' %}

{% block content %}
    {% include 'nordmindArtistBundle:Default:profileHeader.html.twig' with {user: user, categories: categories, hideSort: true} %}
    <div class="row clearfix">
        <div class="col-md-2">
{#            {% if app.user.hasLogo %}#}
{#                <div class="user-logo-wrapper">#}
{#                    <img src="{{ '/uploads/images/logo/'~user.id~'.jpg' }}" class="img-responsive user-logo"/>#}
{#                </div>#}
{#            {% endif %}#}
            <p class="main-text">&#9632; {{ user.city }} {# user.country #}
            <p>
            <p class="grey-text">
                <a href="{{ user.website }}" target="_blank">{{ user.website }}</a>
            </p>
            <p class="grey-text">
                <a href="mailto:{{ user.email }}" target="_blank">{{ user.email }}</a>
            </p>
            <p class="grey-text">
                <a href="tel:{{ user.phone }}" target="_blank">{{ user.phone }}</a>
            </p>
        </div>
        <div class="col-md-10">
            {% if app.user.canUploadPhotos %}
                <div class="registration-panel portfolio">
                    <form action="{{ path("nordmind_artist_upload") }}" id="frmFileUpload" class="dropzone"
                          method="post" enctype="multipart/form-data">
                        <div class="dz-message">
                            <div class="drag-icon-cph">
                                <i class="material-icons">add</i>
                            </div>
                            <h3>Drop here or click to upload.</h3>
                        </div>
                        <div class="fallback">
                            <input name="file" type="file" multiple/>
                        </div>
                    </form>
                </div>
            {% else %}
                <div class="row clearfix">
                    <div style="margin-top: 40px; margin-left: 40px;">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <div class="">
                                    <input type="text" id="video-link" name="search-artist" maxlength="64"
                                           placeholder="https://vimeo.com/171554303" class="form-control" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <div class="">
                                    <a id="video-save" class="btn">Add video</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="grid grid-profile" id="grid-profile">
                <div class="artist-loader-wrapper">
                    <div class="loader">
                        <div class="preloader">
                            <img src="/images/logo.png" class="img-responsive"/>
                        </div>
                    </div>
                </div>
                {% include 'nordmindArtistBundle:Default:workPhoto.html.twig' with {'photos': photos} %}
                {#                    <iframe src="https://player.vimeo.com/video/171554303" width="480" height="360" frameborder="0" title=\My video" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>#}
            </div>
        </div>
    </div>
{% endblock content %}
            {% block searchNavigation %}
                <a class="searchOpen" data-close="true" href="{{ path('nordmind_artist_after_upload') }}">EDIT ALL</a>
            {% endblock searchNavigation %}
{% block javascript %}
{{ parent() }}
<script type="text/javascript">
function checkIfVideoExists(url, callback){
    $.ajax({
        type:'GET',
        url: 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(url),
        dataType: 'json',
        complete: function(xhr) {
            callback(xhr.status);
        }
    });
}
function orderItems() {
            var itemElems = $grid.packery('getItemElements');
            var itemsIds = [];
            $(itemElems).each(function (i, itemElem) {
                itemsIds[i] = $(itemElem).data('id');
             });
             $.post("{{path('nordmind_artist_photo_sort')}}", {'ids': itemsIds});
}

    $().ready(function () {
        Dropzone.options.frmFileUpload = {
            paramName: "file",
            maxFilesize: 20,
            acceptedFiles: "image/*",
            addRemoveLinks: true,
            init: function () {
                    this.on("error", function(file, message) {
                    this.removeFile(file);
                    showNotification("alert-danger", "Photo is too big", "bottom", "left");
                });
                this.on("complete", function (file) {
                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getAcceptedFiles().length != 0) {
                        window.location.href = "{{path('nordmind_artist_after_upload')}}";
                    }
                });
            }
        };

        $('#video-save').click(function() {
            checkIfVideoExists($('#video-link').val(), function(status){
            if (status == 200)
            {
                $.ajax({
                    method: "POST",
                    url: "{{ path('nordmind_artist_video_save') }}",
                    data: {'url': $('#video-link').val()}
                })
                .done(function( msg ) {
                    var $sidebar = $('#rightsidebar');
                    var $overlay = $('.overlay');
                    var link = '{{ path('nordmind_artist_photo_edit') }}';
                    $("#photoEditBox").load(link, {id: msg.id}, function() {
                        $sidebar.toggleClass('open');
                        $overlay.fadeIn();
                    });
                });
            }
            });
        });
        $grid = $('.grid').imagesLoaded(function () {
                    $grid.packery({
                        // options
                        itemSelector: '.grid-item',
                    });
                    var $items = $grid.find('.grid-item').draggable();
                    $grid.packery('bindUIDraggableEvents', $items);

                        $grid.on('dragItemPositioned', orderItems);
                                                setTimeout(function () {
                    $('.artist-loader-wrapper').fadeOut();
                    }, 50);
                    $('.artist-loader-wrapper').hide();
                    });

         $('.confirm-button').on('click', function (e) {
            e.preventDefault();
            showConfirmMessage($(this).attr('href'));
         });
         $('.sort-by-button-group').on('click', 'a', function () {
            var sortValue = $(this).attr('data-sort-value');
            // make an array of values
            //sortValue = sortValue.split(',');
            $grid.isotope({sortBy: sortValue});
         });

        // change is-checked class on buttons
        $('.button-group').each(function (i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on('click', 'a', function () {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $(this).addClass('is-checked');
            });
        });

        $('.filters-button-group').on( 'click', 'a', function() {
            var filterValue = $( this ).attr('data-filter');
            $grid.isotope({ filter: filterValue });
        });

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