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


    <div class="col-lg-6 col-md-6 col-sm-6 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>
                    <a>{{ format_date_time($file[time]) }}</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" style="width:max-content;">
                    @if (user('admin.web')->canDo('service_request.service_request.delete') || user('admin.web')->isSuperUser())
                        <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>
    
                    @endif
                    @if (user('admin.web')->canDo('service_request.service_request.update') || user('admin.web')->isSuperUser())
                    
                        <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>
                    @endif
                </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>