@extends('staff::layouts.default')
@section('title',trans('admin_default.branch'))

@section('breadcrumb')
    <li class="active"><a href="javascript:void(0)">{{trans('admin_default.shop_galleries')}}</a></li>
@endsection

@section('content')

<div class="content-wrapper">
    <div class="panel panel-white border-top-success">
        <div class="panel-body">
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <legend class="text-bold"><i class="icon-gallery position-left"></i> {!! trans('admin_default.shop_galleries') !!}</legend>
                    <div class="alert alert-danger no-border" id="gallery-error" style="display: none;">
                        <a class="close" data-dismiss="alert">×</a>
                        <span class="help-block">Only <code>jpg</code>, <code>jpeg</code>, and <code>png</code> extensions are allowed.</span>
                    </div>
                    <div id="gallery-container" class="">
                        @if(!empty($gallery_list))
                            @foreach( $gallery_list as $key => $value )
                                <div class="col-md-2 col-sm-4 image-container">
                                    <div class="thumbnail">
                                        <div class="thumb">
                                            <img src="{{config('global.s3_path') . 'image_gallery/thumb/' . $value->path}}" alt="">
                                            <div class="caption-overflow">
                                                <span>
                                                    <a href="{{config('global.s3_path') . 'image_gallery/' . $value->path}}" data-popup="lightbox" rel="gallery" class="btn border-white text-white btn-flat btn-icon btn-rounded"><i class="icon-zoomin3"></i></a>
                                                    <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5 remove-gallery" data-id="{{$value->id}}"><i class="icon-cross2"></i></a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="col-md-2 col-sm-4 image-container" id="image-model">
                        <div class="thumbnail">
                            <div class="thumb">
                                <img src="{{asset('assets/images/admin/placeholder.jpg')}}" alt="">
                                <div class="caption-overflow">
                                    <span>
                                        <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5 remove-gallery" data-id=""><i class="icon-cross2"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 upload-gallery-container">
                        <div class="thumbnail">
                            <div class="thumb">
                                <img src="{{asset('assets/images/admin/placeholder.jpg')}}" alt="">
                                <div class="caption-overflow">
                                    <span>
                                        <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5 add-gallery"><i class="icon-plus3"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- upload gallery form -->
<form id="hidden-form" action="" method="POST" style="display: none;" enctype="multipart/form-data">
    {!! csrf_field() !!}
     <input type="file" name="picture" class="upload-gallery" accept="image/*" /> 
     <input type="hidden" name="shop_id" value="{!! $data['shop_id'] !!}">
</form>

<style type="text/css">
/*.masonry {
    column-count: 4;
    column-gap: 1em;
}
.item {
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}*/
</style>
@endsection

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

    var gallery_limit = 50,
        gallery_number = {{count($gallery_list)}};

    var add_gallery_container = $('div.upload-gallery-container');

    // if maximum gallery
    if( gallery_number >= gallery_limit )
    {
        add_gallery_container.hide();
    }

    var gallery_container = $('div#gallery-container');

    // clone and remove
    var image_container = $('#image-model');
    $('#image-model').remove();

    // click on add gallery
    $(".add-gallery").click(function (e) {
        e.preventDefault();
        $(".upload-gallery").click();
    });

    // on select upload file
    $(".upload-gallery").change(function(){
        var block = $('div.upload-gallery-container').find('.thumbnail');
        $(block).block({ 
            message: '<i class="icon-spinner2 spinner"></i>',
            overlayCSS: {
                backgroundColor: '#fff',
                opacity: 0.8,
                cursor: 'wait',
                'box-shadow': '0 0 0 1px #ddd'
            },
            css: {
                border: 0,
                padding: 0,
                backgroundColor: 'none'
            }
        });
        window.setTimeout(function () {
            $('form#hidden-form').submit();
        }, 500); 
    });

    // on submit
    $('form#hidden-form').submit(function (e) {
        e.preventDefault();
        var me = $(this);
        var block = $('div.upload-gallery-container').find('.thumbnail');
        // ajax
        var token, url, data, shop_id;
        token = $('input[name=_token]').val();
        url = "{!! url($shop_package . '/gallery/upload-gallery') !!}";
        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data:  new FormData(this),
            contentType: false,
            cache: false,
            async: false,
            type:'post',
            dataType: 'json',
            processData:false,
            success: function (resp) {
                $(block).unblock();
                var result = resp.status,
                    path = resp.path,
                    img_name = resp.path,
                    id = resp.id;
                path = "{{config('global.s3_path') . 'image_gallery/thumb/'}}" + path;
                // return;
                if(result)
                {
                    // hide error message
                    $('#gallery-error').hide();

                    gallery_number++;
                    if(gallery_number >= gallery_limit)
                    {
                        add_gallery_container.hide();
                    }else
                    {
                        add_gallery_container.show();
                    }
                    image_container.find('img').attr("src", path);
                    image_container.find('a.remove-gallery').attr('data-id', id);
                    image_container.find('a.remove-gallery').attr('data-path', img_name);
                    gallery_container.append(image_container.clone());
                }else
                {
                    // show error message
                    $('#gallery-error').show();
                }
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    });

    // click remove gallery
    $('div#gallery-container').on('click', 'a.remove-gallery', function( e ){
        e.preventDefault();
        var token, url;
        token = $('input[name=_token]').val();
        url = "{!! url($shop_package . '/gallery/remove-gallery') !!}";

        var me = $(this),
            id = me.data('id'),
            path = me.data('path');
        var block = me.closest('div.thumbnail');

        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: { id:id, path:path },
            type:'post',
            dataType: 'json',
            beforeSend: function(){
                $(block).block({ 
                    message: '<i class="icon-spinner2 spinner"></i>',
                    overlayCSS: {
                        backgroundColor: '#fff',
                        opacity: 0.8,
                        cursor: 'wait',
                        'box-shadow': '0 0 0 1px #ddd'
                    },
                    css: {
                        border: 0,
                        padding: 0,
                        backgroundColor: 'none'
                    }
                });
            },
            success: function (resp) {
                if(resp)
                {
                    gallery_number--;
                    add_gallery_container.show();
                    me.closest('.image-container').remove();
                }
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    });

});

</script>
@endsection