@if(isset($case))
    @php $case->load('files'); @endphp

    @if ($case->files->count() > 0)
        <div class="form-group col-sm-12">
            {!! Form::label('', 'Attached files:', ['class' => 'col-sm-2 control-label']) !!}
            <div class="col-sm-3">
                <table class="table" id="attachment-file-list" style="margin-bottom: 0px; width: 500px;">
                    <tbody>
                    @foreach($case->files as $file)
                        @php $pathinfo = pathinfo($file->storage_path); @endphp

                        @isset($pathinfo['filename'], $pathinfo['extension'])
                            <tr data-key="{!! $file->id !!}">
                                <td>
                                    <a href="/download-file/case_files/{!! $pathinfo['filename'] !!}?dot={!! $pathinfo['extension'] !!}" title="Download file">{!! $file->original_name !!}</a>
                                </td>
                                <td width="20">
                                    <i class="fa fa-trash delete-attached-file-btn" title="Delete file"></i>
                                </td>
                            </tr>
                        @endisset
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endif

<div class="form-group col-sm-12 col-lg-12">
    <div class="row">
        <div class="col-sm-12 d-flex">
            <div class="col-sm-1">Attach files:</div>
            <div class="col-sm-2">
                <input id="files" name="files_upload[]" class="inputfile" type="file" multiple="multiple">
                {!! Form::label('files', 'No file selected', ['class' => 'col-sm-2 control-label']) !!}
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    #attachment-file-list tr > td {
        word-break: break-word;
    }
    .delete-attached-file-btn {
        color: #EE324D;
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    $(function() {
        $(document).on('click', '.delete-attached-file-btn', function() {
            var el = $(this);

            if (confirm('Are you sure?')) {
                $.post("{!! route('cases.delete-attached-file') !!}", {
                    id: el.closest('tr').attr('data-key'),
                    '_token': '{!! csrf_token() !!}'
                }).done(function(response) {
                    if (response.success) {
                        el.closest('tr').remove();

                        if ($('#attachment-file-list').find('tr').length == 0) {
                            $('#attachment-file-list').closest('.form-group').remove();
                        }
                    } else {
                        alert('Internal server error. Please try again.');
                    }
                }).fail(function() {
                    alert('Internal server error. Please try again.');
                });
            }
        });
    });
</script>