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

{% block content %}
    <div class="row clearfix">
        <div class="col-md-12">
            <h1 class="registration-sign-up">EDIT PHOTOS
                <!--<span class="sort-panel pull-right">
                    <div class="button-group sort-by-button-group">
                        <a href="#" class="button is-checked not-last" data-sort-value="position, date" />POSITION</a>
                        <a href="#" class="button" data-sort-value="date, position" />DATE</a>
                    </div>
                </span>-->
            </h1>
        </div>
    </div>
    {# include 'nordmindArtistBundle:Default:profileHeader.html.twig' #}
    <div class="row clearfix">
        <div class="col-md-12">
            <div class="panel-group" id="accordion_1" role="tablist" aria-multiselectable="true">
            {% for photo in photos %}
                <div class="panel panel-col-white">
                    <div class="panel-heading" role="tab" id="headingOne_{{ photo.id }}">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseOne_{{ photo.id }}" aria-expanded="true" aria-controls="collapseOne_{{ photo.id }}">
                                <div class="row clearfix">
                                    <div class="col-md-1">
                                        <img src="{{ asset(photo.getFullPath) | imagine_filter('thumbnail') }}" style="height: 64px" />
                                    </div>
                                    <div class="col-md-offset-1 col-md-8 align-middle" style="padding: 8px 0px 0px 20px;">
                                        Categories: {% if photo.categories|length < 1 %}
                                            You have to choose at least one category.
                                        {% endif %}
                                        {% for key,category in photo.categories %}
                                        {{ category.category }} {%  if not loop.last %}|{% endif %}
                                        {% endfor %}<br />
                                        Themes:
                                        {% if photo.themes|length < 1 %}
                                            You have to choose at least one theme.
                                        {% endif %}
                                        {% for key,theme in photo.themes %}
                                            {{ theme.theme }} {%  if not loop.last %}|{% endif %}
                                        {% endfor %}<br />
                                        Tags: {% for key,tag in photo.tags %}
                                            {{ tag.tag }}{%  if not loop.last %},{% endif %}&nbsp;
                                        {% endfor %}
                                        <div class="text-center" style="margin-top: 16px; width: 100%;">
                                            <div style="margin-left: auto; margin-right: auto; font-size: 20px; width: 20px;"><i class="material-icons">expand_more</i></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                            <a href="{{path('nordmind_artist_photo_delete', {id: photo.id})}}" class="edit-photo-icon confirm-button"
                                               data-type="confirm" data-message="Do you really want to delete this photo?">
                                                <i class="material-icons">delete</i>
                                            </a>
                                        </div>
                                </div>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne_{{ photo.id }}" class="panel-collapse collapse {% if loop.first %}{% endif %}" role="tabpanel" aria-labelledby="headingOne_1">
                        <div class="panel-body">
                            <div class="row clearfix">

                                <div class="col-md-3">
                                    <img src="{{ asset(photo.getFullPath) | imagine_filter('thumbnail') }}" class="img-responsive element-after-upload"/>
                                </div>
                                <div class="col-md-8 element-after-upload">
                                    <p>
                                        <b>Categories</b>
                                    </p>
                                    <select id="categories-{{photo.id}}" class="form-control show-tick category" multiple data-id="{{photo.id}}">
                                        <optgroup label="Categories" data-max-options="2">
                                            {% for key,value in categories %}
                                                <option value="{{key}}" {% if photo.hasCategory(key) %}selected{% endif %}>{{value}}</option>
                                            {% endfor %}
                                        </optgroup>
                                    </select>
                                    <p>
                                        <b>Themes</b>
                                    </p>
                                    <select id="themes-{{photo.id}}" class="form-control show-tick theme" multiple data-id="{{photo.id}}">
                                        <optgroup label="Themes" data-max-options="2">
                                            {% for key,value in themes %}
                                                <option value="{{key}}" {% if photo.hasTheme(key) %}selected{% endif %}>{{value}}</option>
                                            {% endfor %}
                                        </optgroup>
                                    </select>
                                    <p>
                                        <b>Tags</b>
                                    </p>
                                    <div class="form-group demo-tagsinput-area">
                                        <div class="form-line">
                                            <input type="text" id="tag-{{photo.id}}" data-id="{{photo.id}}" class="form-control tag" data-role="tagsinput" value="{{photo.printTags}}" placeholder="Type and press enter">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12">
            {% if app.user.canUploadPhotos %}
            <div class="registration-panel portfolio after-upload-dropzone">
                <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>
            {% endif %}
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 col-xs-12 text-center">
            <a href="{{ path('nordmind_artist_work') }}" class="btn bg-grey after-upload-dropzone">BACK TO PORTFOLIO</a>
        </div>
    </div>
{% endblock content %}
            {% block searchNavigation %}
                <a class="searchOpen" data-close="true" href="{{ path('nordmind_artist_work') }}">PORTFOLIO</a>
            {% endblock searchNavigation %}
{% block javascript %}
    {{ parent() }}
    <script type="text/javascript">
        $().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')}}";
                    }
                });
            }
        };

            $(".category").change(function (e) {
                e.stopImmediatePropagation();
                postLoad(this, "{{path('nordmind_artist_photo_save')}}", {id: $(this).data('id'), categories: $(this).val()});
            });

            $(".theme").change(function (e) {
                e.stopImmediatePropagation();
                postLoad(this, "{{path('nordmind_artist_photo_save')}}", {id: $(this).data('id'), themes: $(this).val()});
            });

            $('.tag').on('itemAdded', function (event) {
                postLoad(this, "{{path('nordmind_artist_photo_save')}}", {id: $(this).data('id'), tags: $(this).val()});
            });

            $('.tag').on('itemRemoved', function (event) {
                postLoad(this, "{{path('nordmind_artist_photo_save')}}", {id: $(this).data('id'), tags: $(this).val()});
            });
        });
    </script>
{% endblock javascript %}