{% extends app.request.get('mode')== 'list' ? QbaBitLayoutToExtend('QbaBitCoreBundle:Form:list.html.twig', 'backend') : QbaBitLayoutToExtend('QbaBitCoreBundle:Form:view.html.twig', 'backend') %}

{% block dropzone %}
    <div id="up-area" class="up-area collapse">
        <button class="close dashicons dashicons-no" data-target="#up-area" data-toggle="collapse"  role="button" aria-expanded="false"
                aria-controls="up-area"><i class="fa fa-times"></i></button>
        <button class="choice-ok dashicons dashicons-no" ><i class="fa fa-check"></i></button>

        <div class="needsclick dz-clickable" id="dropzoneUpload">
            <div class="dz-message needsclick">
                {{ 'search_file' | trans({}, 'images') }}
                <br>
            </div>
        </div>
    </div>
{% endblock %}
{% block search_columns %}
    <div class="option-grid-list">
        <div class="view-switch media-grid-view-switch">
            {% set paramsList = { mode :'list'} %}
            {% set paramsList = paramsUrl|merge(paramsList) %}
            <a href="{{ searchForm.vars.action==""? path(url.view, paramsList) :searchForm.vars.action }}" class="view-list">
                <i class="fa fa-th-list {{ app.request.get('mode')== 'list' ? 'active' : 'inactive' }}"></i>
            </a>
            {% set paramsGrid = { mode :'grid'} %}
            {% set paramsGrid = paramsUrl|merge(paramsGrid) %}
            <a href="{{ searchForm.vars.action==""? path(url.view, paramsGrid):searchForm.vars.action }}" class="view-grid">
                <i class="fa fa-th {{ app.request.get('mode')!= 'list' ? 'active' : 'inactive' }}"></i>
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            {#{{ form_label(searchForm.tipo) }}#}
            {{ form_widget(searchForm.tipo) }}
        </div>
    </div>

    <div class="col-md-2">
        <div class="form-group">
            {#<label style="display: block;">&nbsp;</label>#}
            {{ form_row(searchForm.submit) }}
        </div>
    </div>

{% endblock %}

{% block columns %}
    <th>{{ 'image' | trans({}, 'inmobiliaria') }}</th>
    <th>{{ 'nombre' | trans({}, 'inmobiliaria') }}</th>
{% endblock %}
{% block rows %}
    {% if app.request.get('mode') == 'list' %}
        <!-- List -->
        {% for qb_images_row_org in searchForm.listData.rows | reverse %}
            {% set  qb_images=qb_images_row_org.vars.data  %}
            {% set qb_images_row=qb_images_row_org.children["checked"]  %}

            <tr id="rw{{ qb_images.id }}">
                <td>
                    {{ form_widget(qb_images_row) }}
                </td>
                <td>
                    <a href="{{ path(url.edit, {'id': qb_images.id}) }}" class="edit">
                        <img style="width: 80px; height: 80px"  src="{{ qb_images.name | imagine_filter('squared_thumbnail') }}"  />
                    </a>
                </td>
                <td>
                    {% if is_granted(role.edit) %}
                        <a href="{{ path(url.edit, {'id': qb_images.id}) }}"
                           class="edit">{{ qb_images.name }}</a>
                    {% else %}
                        {{ qb_images.name }}
                    {% endif %}
                </td>

            </tr>
        {% else %}
            <tr>
                <td colspan="12">{{ 'no_records_founds' | trans({}, 'qbabitcore') }}</td>
            </tr>
        {% endfor %}

    {% else %}
        <!-- Grid -->
        <div class="col-md-12">
            <div id="image_container" class="hover-grid">
                {% for qb_images_row_org in searchForm.listData.rows | reverse %}
                    {% set  qb_images=qb_images_row_org.vars.data  %}
                    {% set qb_images_row=qb_images_row_org.children["checked"]  %}
                    <div id="rw{{ qb_images.id }}" data-id="{{ qb_images.id }}" class="hover-grid-item item-grid" style="margin-bottom: 20px;">
                        <div class="options" id="opt{{ qb_images.id }}"  style="position: absolute; width: 100%; background-color: #8d8c8cb3">
                            <div class="box-tools" style="position: absolute; display: inline-block; float: right;right: 2px;">
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownOptions"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0 5px;">
                                        <span class="fa fa-fw fa-cogs"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownOptions">

                                        {% if is_granted( role.new ) %}
                                            {% if is_granted(role.edit) %}
                                                <li>
                                                    <a href="{{ path(url.edit, {'id': qb_images.id}) }}" class="edit"><i class="fa fa-pencil"></i> {{ 'edit' | trans({}, 'qbabitcore') }}</a>
                                                </li>
                                            {% endif %}
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                            <div class="pull-right" style=" margin-right: 42px;">
                                {{ form_widget(qb_images_row) }}
                            </div>
                        </div>
                        <div class="item" data-src="{{ asset('uploads/' ~ qb_images.name) }}">
                            <img  src="{{ qb_images.name | imagine_filter('squared_thumbnail') }}"  />
                            {#<img  src="{{ asset('uploads/' ~ qb_images.name) }}"  />#}
                        </div>
                    </div>
                {% else %}
                    {{ 'no_records_founds' | trans({}, 'qbabitcore') }}
                {% endfor %}
            </div>
        </div>
        {{ form_widget(searchForm.gallery) }}

    {% endif %}
{% endblock %}
{% block postScript %}
        {% set linksCss = [
            asset('bundles/qbabitimage/dropzone/dropzone.css'),
            asset('bundles/qbabitimage/css/styles.css'),
        ] %}
        {% for rs in linksCss %}
            {% set fake = QbaBitAssetsAddCssSource(rs,true) %}
        {% endfor %}
        {{ QbaBitAssetsRenderCssSources(true) | raw }}
        {% set linksJs = [
            asset('bundles/qbabitimage/dropzone/dropzone.js'),
        ] %}
        {% for rs in linksJs %}
            {% set fake = QbaBitAssetsAddScriptSource(rs,true) %}
        {% endfor %}
        <script type="text/javascript">
            function QbabitImageBundleJavascripts() {
                var _modalImagen = Util.showModal({
                    id: 'modalimage',
                    title: '{{ 'agregar_image' | trans({}, 'images') }}',
                    placeholder: 'updtimage',
                    content: '',
                    buttons: []
                });

                jQuery('.edit').off("click").on('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    var _this = jQuery(this);
                    var url = _this.attr('href');
                     url += "?mode={{  app.request.get('mode') }}";
                    MKLib.AjaxRequest(url, '', function (html) {

                        var modal = jQuery('#modalimage');
                        if (typeof modal.get(0) != "undefined") {
                            modal.remove();
                        }
                        var _modal_new = _modalImagen;
                        _modal_new.find('#updtimage').empty().append(html);
                        MKLib.unlockScreen();

                        _modal_new.modal('show');
                    }, 'text');
                    return true;
                });

                Dropzone.autoDiscover = false;

                jQuery("#dropzoneUpload").dropzone({
                 url: "{{ oneup_uploader_endpoint('gallery') }}",
                 addRemoveLinks: true,
                 dictRemoveFileConfirmation: '{{ 'remove_confirmation' | trans({}, 'images') }}',
                 acceptedFiles: "image/*",
                 parallelUploads: 2,
                 maxFilesize: 2,
                 dictRemoveFile: "{{ 'remove_image' | trans({}, 'images') }}",
                 dictFileTooBig: "{{ 'file_to_big' | trans({}, 'images') }}",
                 dictInvalidFileType: "{{ 'cant_upload_file' | trans({}, 'images') }}",
                 dictCancelUpload: "{{ 'cancel_upload' | trans({}, 'images') }}",
                 dictUploadCanceled: "{{ 'upload_canceled' | trans({}, 'images') }}",
                 dictCancelUploadConfirmation: "{{ 'cancel_upload_confirmation' | trans({}, 'images') }}",
                 init: function() {
                     // Hack: Add the dropzone class to the element
                     $(this.element).addClass("dropzone");

                     this.on("success", function (file, response) {
                         file.serverId = response.id;
                         // file.serverFileName = serverFileName;
                     });
                     this.on("removedfile", function(file) {
                         if (!file.serverId) { return; } // The file hasn't been uploaded
                         $.post("{{ path(url.delete_list,paramsUrl) }}&idcheck[]=" + file.serverId); // Send the file id along
                     });
                 }
                });


                jQuery('.choice-ok').on('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    jQuery('.close ').trigger('click');
                    if(jQuery('.dz-preview').length)
                    MKLib.AjaxUpdate('{{ searchForm.vars.action==""? path(url.view, paramsUrl):searchForm.vars.action }}', 'dvupdate', '{{ searchForm.vars.id }}');
                });
                // jQuery('.hover-grid-item').on('mouseover', function (e) {
                //     e.preventDefault();
                //
                //     var _this = jQuery(this);
                //     var id = _this.attr('data-id');
                //     var divContainer = jQuery('#opt'+id);
                //     if(divContainer.css('display') == 'none'){
                //         divContainer.css({'display': 'block'});
                //     }
                //
                // });
                // jQuery('.hover-grid-item').on('mouseout', function (e) {
                //     e.preventDefault();
                //
                //     var _this = jQuery(this);
                //     var id = _this.attr('data-id');
                //     var divContainer = jQuery('#opt'+id);
                //     var check = divContainer.closest('.pull-right').find('.checked');
                //     if(check.length == 0){
                //         divContainer.css({'display': 'none'});
                //     }
                //
                // });

            }
            {% if app.request.isXmlHttpRequest == false %}
            window.addEventListener('load', function () {
                QbabitImageBundleJavascripts();
            }, false);
            {% else %}
            jQuery(function () {
                QbabitImageBundleJavascripts();
            });
            {% endif %}
        </script>
    {% endblock %}