{!! 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=" 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">
                        @if (user('admin.web')->canDo('service_request.service_request.delete'))
                            {{-- <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'))

                            {{-- <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
    
    @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>