{!!Form::hidden($field)->forceValue('0')!!}
<div id="sortable_{!!$field!!}">
    @forelse($files as $key => $file)


    <div class="col-lg-6 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>
            <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
    No Image Available
    @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>