@section('title')
Banners
@stop

@section('content-header')
Banners
@stop

@section('breadcrumb')
<li class="active">
    Banners
</li>
@stop

@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="box no-border">
            <div class="box-header">
                <div class="box-tools pull-left">
                    <a href="{{ route('admin.banners.create') }}" class="btn btn-success"><i class="fa fa-file-image-o"></i> Adicionar Banner</a>
                </div>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-12">
                    @if($banners->isEmpty())
                        <h4 class="text-center text-muted">Não existem banners</h4>
                    @else
                        <p class="text-muted">Arraste as imagens para reordenar</p>
                        <ul class="ace-thumbnails sortable">
                        {{-- <li class="sortable-placeholder" style="height: 135px"></li> --}}
                        @foreach ($banners as $imagem)
                            @include('admin.banners.partials.image', compact($imagem))
                        @endforeach
                        </ul>
                    @endif
                    </div>
                </div>
            </div>
            <div class="box-footer">
                {{ Form::button('Gravar', array('class' => 'btn btn-primary', 
                'id' => 'save-order',
                'data-loading-text' => 'Gravar...',
                'disabled' => true))}}
            </div>
        </div>
    </div>
</div>
@stop

@section('plugins')
    {{ HTML::script('assets/vendor/html.sortable/dist/html.sortable.min.js')}}
@stop

@section('modals')
    @include('admin.banners.partials.modal_edit')
@stop

@section('scripts')
<script type="text/javascript">
    $(document).ready(function () {

        $('.sortable').sortable({
            forcePlaceholderSize: true,
            placeholder: '<li><div class="width-300px"></div></li>'
                
        }).bind('sortupdate', function(e, ui) {
           $('#save-order').removeAttr('disabled');
        });

        //save new banner order
        $('#save-order').on('click', function(e){
            e.preventDefault();

            $button = $(this);
            $button.button('loading');

            //get array of ordered IDs
            var dataList = $(".sortable > li").map(function() {
                    return $(this).data("id");
                }).get();

            $.post("{{ route('admin.banners.order.update') }}", {'ids[]' : dataList }, function(data) 
            {
                  $.bootstrapGrowl(data.message, {
                      type: data.type
                  });

            }).fail(function() 
            {
                 $.bootstrapGrowl("Ocorreu um erro tente mais tarde", {
                    type: 'danger'
                  });
            })
            .always(function() {
                $button.button('reset');
            });

        });

        $('#modal-edit').on('show.bs.modal', function (event) {

            var button = $(event.relatedTarget); // Button that triggered the modal
            
            var action = button.data('action');

            var caption = button.data('caption'); // Extract info from data-* attributes
            var subcaption = button.data('subcaption');
            var url = button.data('url');
            var publish = button.data('publish');
            var right   = button.data('right');
            var bottom  = button.data('bottom');
            var modal = $(this);

            var statusPublish = publish ? 'check' : 'uncheck';
            var statusRight = right ? 'check' : 'uncheck';
            var statusBottom = bottom ? 'check' : 'uncheck';

            modal.find('form').attr('action', action);
            modal.find("input[name='caption']").val(caption);
            modal.find("input[name='subcaption']").val(subcaption);
            modal.find("input[name='url']").val(url);
            modal.find("input[name='publish']").iCheck(statusPublish);
            modal.find("input[name='publish']").prop('checked', publish).trigger('change');
            
            modal.find("input[name='right']").iCheck(statusRight);
            modal.find("input[name='right']").prop('checked', right).trigger('change');
            
            modal.find("input[name='bottom']").iCheck(statusBottom);
            modal.find("input[name='bottom']").prop('checked', bottom).trigger('change');
        });

    });
</script>
@stop