<div class="p-2 rounded custom-payment-button">
    {!! $paymentDetails !!}
</div>

@foreach (json_decode($fieldOptions, true) as $key => $field)
    @if ($field['type'] == 'file')
        <div class="upload-single-input">
            <label for="manual_data[{{ $field['name'] }}]">
                {{ $field['name'] }}
                @if ($field['validation'] == 'required')
                    <span class="text-danger">*</span>
                @endif
            </label>
            <div class="upload-custom-file without-image">
                <input type="file" name="manual_data[{{ $field['name'] }}]" id="manual_data[{{ $field['name'] }}]"
                    accept=".gif, .jpg, .png, .jpeg" onchange="showCloseButton(event)" />
                <label for="manual_data[{{ $field['name'] }}]">
                    <span> {{ __('Upload Attachment') }}
                        <b> {{ __('Or Drag and Drop') }} </b>
                    </span>
                </label>
            </div>
            <button type="button" class="upload-thumb-close" onclick="removeUploadedFile(this)">
                <i class="flaticon-cancel"></i>
            </button>
        </div>
    @elseif($field['type'] == 'textarea')
        <div class="form-floating">
            <textarea class="form-control" placeholder="{{ $field['name'] }}" name="manual_data[{{ $field['name'] }}]"
                id="manual_data[{{ $field['name'] }}]" @if ($field['validation'] == 'required') required @endif></textarea>
            <label for="manual_data[{{ $field['name'] }}]">{{ $field['name'] }} @if ($field['validation'] == 'required')
                    <span class="text-danger">*</span>
                @endif
            </label>
        </div>
    @else
        <div class="form-floating">
            <input type="text" class="form-control" name="manual_data[{{ $field['name'] }}]"
                id="manual_data[{{ $field['name'] }}]" placeholder="{{ $field['name'] }}"
                @if ($field['validation'] == 'required') required @endif>
            <label for="manual_data[{{ $field['name'] }}]">{{ $field['name'] }} @if ($field['validation'] == 'required')
                    <span class="text-danger">*</span>
                @endif
            </label>
        </div>
    @endif
@endforeach


<script>
    // Image Preview
    $(document).on('change', 'input[type="file"]', function(event) {
        var $file = $(this),
            $label = $file.next('label'),
            $labelText = $label.find('span'),
            labelDefault = $labelText.text();

        var fileName = $file.val().split('\\').pop(),
            tmppath = URL.createObjectURL(event.target.files[0]);

        //Check successfully selection
        if (fileName) {
            $label.addClass('file-ok').css('background-image', 'url(' + tmppath + ')');
            $labelText.text(fileName);
        } else {
            $label.removeClass('file-ok');
            $labelText.text(labelDefault);
        }
    });

    function removeUploadedFile(button) {
        var label = button.previousElementSibling.querySelector('label.file-ok');
        var input = button.previousElementSibling.querySelector('input[type="file"]');
        label.classList.remove('file-ok');
        label.removeAttribute('style');
        label.innerHTML = '<span> {{ __('Upload Attachment') }} <b> {{ __('Or Drag and Drop') }} </b></span>';
        input.value = '';
        button.style.display = 'none';
    }

    function showCloseButton(event) {
        var button = event.target.parentElement.nextElementSibling;
        button.style.display = 'block';
    }
</script>
