@extends('Backend::layout')

@section('head')
    <script type="text/javascript">
        function updateOrder(order) {
            $(".widget-content").fadeTo(450, 0.8);

            $.ajax({
                type: "POST",
                dataType: "json",
                data: {"_token": Env.Request.csrfToken, "order":order},
                url: changeOrderUrl
            }).done(function(response) {
                if(typeof response.success_message != "undefined") {
                    App.successMessage(null, response.success_message);
                } else if(typeof response.error != "undefined") {
                    App.errorMessage(null, response.error_message);
                }
            }).always(function() {
                $(".widget-content").fadeTo(1, 1);
            });
        }

        $(function() {
            sort = $("#positions").nestedSortable({
                forcePlaceholderSize: true,
                helper: 'clone',
                handle: 'div',
                items: 'li',
                opacity: .6,
                maxLevels: 1,
                revert: 250,

                // If tabsize is high enough there wont be any notches and that is what we want in this case
                tabSize: 9999,

                toleranceElement: '> div',
                placeholder: 'mjs-nestedSortable-placeholder',
                update: function() {
                    var order = [];
                    $("#positions li .item input[name^='cms_galimg_order']").each(function(key, val) {
                        // Update image order everytime user drags tree item
                        $(this).val(key+1);
                        order[$(this).data('id')] = key+1;
                    });

                    updateOrder(order);
                },      
            }); 
        });
    </script>
@stop

@section('content')
    {{ HTML::widgetBox(['name' => trans('Gallery::common.images_of_gallery', ['gallery' => e($gallery->cms_gal_name)]), 'icon' => 'icon-picture'],[
        [
            'name' => trans('GlobalTranslations::common.add'),
            'attributes' => [
                'data-form-modal' => route('backend_cms_xhr_manage_gallery_image', ['galleryId' => $gallery->getKey()]),
            ],
            'url' => 'backend_cms_manage_gallery_image',
            'icon' => 'icon-plus',
        ],
    ]) }}
    
    <div class="widget-content">
        <div id="slider-positions">
            <ol id="positions">
                @foreach($gallery->galleryImages as $image)
                    <li>
                        <div class="item">
                            <div class="row">
                            <div class="col-md-2">
                                <img class="img-thumbnail" src="{{{ $image->present()->thumbnail_url }}}" />
                            </div>
                            <div class="col-md-6">
                                <strong>{{{ $image->cms_galimg_name }}}</strong><br />
                                {{ Str::limit(e(strip_tags($image->cms_galimg_description)), 256, '...') }}
                            </div>
                            </div>
                            {{ Former::hidden('cms_galimg_order[' . $image->getKey() . ']')->data_id($image->getKey())->forceValue($image->cms_galimg_order) }}
                            <div class="pull-right" style="height:0px;">
                                <div class="nav">
                                    <button data-form-modal="{{{ route('backend_cms_xhr_manage_gallery_image', ['galleryId' => $gallery->getKey(), 'imageId' => $image->getKey()]) }}}">{{ trans('GlobalTranslations::common.edit') }}</button>
                                    <button data-post-delete-confirmation="{{ route('backend_cms_delete_gallery_image', ['imageId' => $image->getKey(), '_token' => csrf_token()]) }}" class="delete-confirmation">{{ trans('GlobalTranslations::common.delete') }}</button>
                                </div>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ol>
        </div>
    </div>
    {{ HTML::widgetBox(false) }}
    
@stop