@php
    if (!isset($field['wrapperAttributes']) || !isset($field['wrapperAttributes']['data-init-function'])){
        $field['wrapperAttributes']['data-init-function'] = 'bpFieldInitUploadMultipleElement';
    }

    if (!isset($field['wrapperAttributes']) || !isset($field['wrapperAttributes']['data-field-name'])) {
        $field['wrapperAttributes']['data-field-name'] = $field['name'];
    }

@endphp

<!-- upload multiple input -->
<div @include('crud::inc.field_wrapper_attributes') >
    <label>{!! $field['label'] !!}</label>
    @include('crud::inc.field_translatable_icon')


	{{-- Show the file picker on CREATE form. --}}
	<input name="{{ $field['name'] }}[]" type="hidden" value="">
	<div class="backstrap-file mt-2">
		<input
	        type="file"
	        name="{{ $field['name'] }}[]"
	        value="@if (old(square_brackets_to_dots($field['name']))) old(square_brackets_to_dots($field['name'])) @elseif (isset($field['default'])) $field['default'] @endif"
	        @include('crud::inc.field_attributes', ['default_class' =>  isset($field['value']) && $field['value']!=null?'file_input backstrap-file-input':'file_input backstrap-file-input'])
	        multiple
	    >
        <label class="backstrap-file-label" for="customFile"></label>
    </div>

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif

    <label>已上載的檔案</label>
    {{-- Show the file name and a "Clear" button on EDIT form. --}}
    @if (isset($field['value']))
        @php
            if (is_string($field['value'])) {
                $values = json_decode($field['value'], true) ?? [];
            } else {
                $values = $field['value'];
            }

            if(isset($field['value_key'])){
                $values = $values->toArray()[$field['value_key']];
            }

        @endphp
        @if (count($values))
            <div class="well well-sm existing-file">
                @foreach($values as $key => $file_path)
                    @php
                        $file_name = $file_path;
                            if(strpos($file_path, '/')){
                            $file_path_array = explode('/', $file_path);
                            $file_name = end($file_path_array);
                        }
                    @endphp
                    <div class="file-preview">
                        @if (isset($field['temporary']))
                            <a target="_blank" href="{{ isset($field['disk'])?asset(\Storage::disk($field['disk'])->temporaryUrl($file_path, Carbon\Carbon::now()->addMinutes($field['temporary']))):asset($file_path) }}">{{ $file_name }}</a>
                        @else
                            <a target="_blank" href="{{ isset($field['disk'])?asset(\Storage::disk($field['disk'])->url($file_path)):asset($file_path) }}">{{ $file_name }}</a>
                        @endif
                        <a href="#" class="btn btn-light btn-sm float-right file-clear-button" title="Clear file" data-filename="{{ $file_path }}"><i class="fa fa-trash"></i></a>
                        <div class="clearfix"></div>
                    </div>
                @endforeach
            </div>
        @endif
    @endif
</div>

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->fieldTypeNotLoaded($field))
    @php
        $crud->markFieldTypeAsLoaded($field);
    @endphp

    @push('crud_fields_styles')
        <style type="text/css">
            .existing-file {
                border: 1px solid rgba(0,40,100,.12);
                border-radius: 5px;
                padding-left: 10px;
                vertical-align: middle;
            }
            .existing-file a {
                padding-top: 5px;
                display: inline-block;
                font-size: 0.9em;
            }
            .backstrap-file {
                position: relative;
                display: inline-block;
                width: 100%;
                height: calc(1.5em + 0.75rem + 2px);
                margin-bottom: 0;
            }

            .backstrap-file-input {
                position: relative;
                z-index: 2;
                width: 100%;
                height: calc(1.5em + 0.75rem + 2px);
                margin: 0;
                opacity: 0;
            }

            .backstrap-file-input:focus ~ .backstrap-file-label {
                border-color: #acc5ea;
                box-shadow: 0 0 0 0rem rgba(70, 127, 208, 0.25);
            }

            .backstrap-file-input:disabled ~ .backstrap-file-label {
                background-color: #e4e7ea;
            }

            .backstrap-file-input:lang(en) ~ .backstrap-file-label::after {
                content: "Browse";
            }

            .backstrap-file-input ~ .backstrap-file-label[data-browse]::after {
                content: attr(data-browse);
            }

            .backstrap-file-label {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                z-index: 1;
                height: calc(1.5em + 0.75rem + 2px);
                padding: 0.375rem 0.75rem;
                font-weight: 400;
                line-height: 1.5;
                color: #5c6873;
                background-color: #fff;
                border: 1px solid #e4e7ea;
                border-radius: 0.25rem;
                font-weight: 400!important;
            }

            .backstrap-file-label::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 3;
                display: block;
                height: calc(1.5em + 0.75rem);
                padding: 0.375rem 0.75rem;
                line-height: 1.5;
                color: #5c6873;
                content: "Browse";
                background-color: #f0f3f9;
                border-left: inherit;
                border-radius: 0 0.25rem 0.25rem 0;
            }
        </style>
    @endpush

    @push('crud_fields_scripts')
        <!-- no scripts -->
        <script>
        	function bpFieldInitUploadMultipleElement(element) {
        		var fieldName = element.attr('data-field-name');
        		var clearFileButton = element.find(".file-clear-button");
        		var fileInput = element.find("input[type=file]");
        		var inputLabel = element.find("label.backstrap-file-label");

		        clearFileButton.click(function(e) {
		        	e.preventDefault();
		        	var container = $(this).parent().parent();
		        	var parent = $(this).parent();
		        	// remove the filename and button
		        	parent.remove();
		        	// if the file container is empty, remove it
		        	if ($.trim(container.html())=='') {
		        		container.remove();
		        	}
		        	$("<input type='hidden' name='clear_"+fieldName+"[]' value='"+$(this).data('filename')+"'>").insertAfter(fileInput);
		        });

		        fileInput.change(function() {
	                inputLabel.html("Files selected. After save, they will show up above.");
		        	// remove the hidden input, so that the setXAttribute method is no longer triggered
		        	$(this).next("input[type=hidden]").remove();
		        });
        	}
        </script>
    @endpush
@endif