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

    <div id="fileViewer" style="
        display: none;
        position: fixed;
        top: 10%;
        right: 5%;
        width: 50vw;
        height: 80vh;
        background: white;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        z-index: 1050;
        border-radius: 5px;
        overflow: hidden;
    ">
        <div style="background: #f1f1f1; padding: 10px; cursor: move;">
            <span style="font-weight: bold;">File Viewer</span>
            <i id="closeViewer" class="fa fa-times" style="float: right;cursor: pointer;"></i>
            <i class="fas fa-expand-alt" id="toggleSize" style="float: right; margin-right: 8px;padding: 7px 10px;border: 1px solid black;margin-right: 8px;color: black;cursor: pointer;"></i>
        </div>
        <iframe id="fileIframe" src="" width="100%" height="90%" frameborder="0"></iframe>
    </div>



    <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> --}}
                        <a href="javascript:void(0);" class="view-file-link" data-url='{{ url("/file/{$config}/" . folder_encode($file["folder"])) . "/" . $file["file"] }}'>{{ $file["file"] }}</a>
                    </div>
                @endif

                <div class="btn_container" style="width:max-content;">
                        <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;
    }
    #fileViewer {
        resize: both;
        overflow: auto;
        min-width: 300px;
        min-height: 200px;
        position: fixed;
        top: 10%;
        right: 5%;
        width: 50vw;
        height: 80vh;
        background: white;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        z-index: 1050;
        border-radius: 5px;
    }
</style>
<script type="text/javascript">
$('document').ready(function(){
    $(".remove-image").on('click', function(e){
        $(this).parents('.img_box').remove();
        e.preventDefault();
        if ($('.img_box').length === 0) {
            $('#files_uploaded').val('0');
        }
    });
    var el = document.getElementById('sortable_{!!$field!!}');
    var sortable = Sortable.create(el);

    $(document).on('click', '.view-file-link', function () {
        var fileUrl = $(this).data('url');
        $('#fileIframe').attr('src', fileUrl);
        $('#fileViewer').show();
    });
    $('#closeViewer').on('click', function (e) {
        e.preventDefault();
        $('#fileViewer').hide();
        $('#fileIframe').attr('src', '');
    });
    $('#fileViewer').draggable({ handle: 'div:first' });
    let isMaximized = false;
    $('#toggleSize').on('click', function (e) {
        e.preventDefault();

        if (!isMaximized) {
            $('#fileViewer').css({
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                width: '100vw',
                height: '100vh',
                borderRadius: 0
            }).css('position', 'fixed'); // ensure it stays fixed

            $(this).find('i').removeClass('fa-expand-alt').addClass('fa-compress-alt');
        } else {
            $('#fileViewer').css({
                top: '10%',
                right: '5%',
                width: '50vw',
                height: '80vh',
                borderRadius: '5px'
            });

            $(this).find('i').removeClass('fa-compress-alt').addClass('fa-expand-alt');
        }

        isMaximized = !isMaximized;
    });
});
</script>