{!!Form::hidden($field)->forceValue('0')!!}

<div id="sortable_{!!$field!!}">

    @forelse($files as $key => $file)






    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 m-t-20 m-h-150">

        <div id="img_box_{!!$field!!}_{!!$key!!}" class="img_box">

            <div class="img_container">

                


                @if (in_array($ext, ['jpg','jpeg', 'png', 'gif']) )

                    <a href='{!! url("/file/{$config}/".folder_encode($file["folder"]))!!}/{!!$file["file"]!!}' target="_blank">

                        <img src='{!! url("/image/{$size}/{$config}/ ". folder_encode($file["folder"]))!!}/{!! $file["file"] !!}' class="img-thumbnail image-responsive">

                    </a>

                @else

                    <div id="file">

                        <a href='{!! url("/file/{$config}/".folder_encode($file["folder"]))!!}/{!!$file["file"]!!}" target="_blank">{!!$file["file"]!!}</a>

                    </div>

                @endif



                <div class="btn_container">

                    <button class="remove-image" data-id='{!!$key!!}' style="border: 0px;background: white;">

                    <span class="fa-stack fa-xs">

                    <i class="fa fa-circle fa-stack-2x" style="color: #5799db;"></i>

                    <i class="fa fa-times fa-stack-1x fa-inverse"></i>

                    </span>

                    </button>

                    <button  data-toggle="modal" data-target="#img_popup_{!!$key!!}" style="border: 0px;background: white;">

                    <span class="fa-stack fa-xs" >

                    <i class="fa fa-circle fa-stack-2x" style="color: #5799db;"></i>

                    <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>

                    </span>

                    </button>

                </div>

            </div>

            <div class="modal fade  bs-example-modal-sm" tabindex="-1" id="img_popup_{!!$key!!}" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                            <h4 class="modal-title" id="myModalLabel">Image</h4>

                        </div>

                        <div class="modal-body" style="min-height: 180px;">

                            <div class="col-lg-4 col-md-4 col-sm-4"> 

                                @if (in_array($ext, ['jpg','jpeg', 'png', 'gif']) )

                                    <a href='{!! url("/file/{$config}/".folder_encode($file["folder"]))!!}/{!!$file["file"]!!}' target="_blank"><img src='{!! url("/image/{$size}/{$config}/".folder_encode($file["folder"]))!!}/{!! $file["file"] !!}'' class="img-thumbnail image-responsive"></a>

                                @else

                                    <a href="{!! url("/file/{$config}".folder_encode($file["folder"]))!!}/{!!$file["file"]!!}" target="_blank">{!!$file["file"]!!}</a>

                                @endif

                            </div>

                              

                            <div class="col-lg-8 col-md-8 col-sm-8"> 

                                <div class="form-group form-group-sm">

                                    <label class="control-label col-lg-2 col-md-3 col-sm-4"> 

                                      Caption

                                    </label>

                                    <div class="col-lg-10 col-md-8 col-sm-4">

                                        {!!Form::text($field."[$key][caption]")

                                        ->value(@$file['caption'])

                                        ->placeholder("Enter caption")

                                        ->addGroupClass('form-group-sm')

                                        ->raw()!!}

                                    </div>

                                </div>

                               

                                <div class="form-group form-group-sm">

                                    <label class="control-label col-lg-2 col-md-3 col-sm-4"> 

                                      Remarks

                                    </label>

                                    <div class="col-lg-10 col-md-8 col-sm-4">

                                        {!!Form::textarea($field."[$key][image_remarks]")

                                        ->value(@$file['image_remarks'])

                                        ->placeholder("Enter remarks")

                                        ->addGroupClass('form-group-sm')

                                        ->rows(3)

                                        ->raw()!!}

                                    </div>

                                </div>

                            </div>



                            {!!Form::hidden($field."[$key][folder]")->value(@$file["folder"])->raw()!!}

                            {!!Form::hidden($field."[$key][time]")->value(@$file['time'])->raw()!!}

                            {!!Form::hidden($field."[$key][file]")->value(@$file["file"])->raw()!!}

                        </div>

                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Save &amp; Close</button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>    

    @empty

    Upload file.

    @endif

</div>

<style type="text/css">

    .m-h-150{

        min-height: 150px;

    }

</style>

<script type="text/javascript">

$('document').ready(function(){

    $(".remove-image").on('click', function(e){

        $(this).parents('.img_box').remove();

        e.preventDefault();

    });

    var el = document.getElementById('sortable_{!!$field!!}');

    var sortable = Sortable.create(el);

});

</script>