@props(['scriptid' => null, 'value' => null, 'required' => false])

<div x-data="{
        fileName: '{{ $value ? $value['file_name'] : '' }}',
        isFileUploaded: {{ $value ? 'true' : 'false' }},
        removed: false,
        showFileInput: false,
        valueId: '{{ $value ? $value['id'] : '' }}', // Store the file ID
        triggerFileInput() {
            this.showFileInput = true;
            this.$nextTick(() => {
                this.$refs.fileInput.click(); // Click the file input
            });
        },
        removeFile() {
            this.fileName = '';
            this.isFileUploaded = false;
            this.showFileInput = false; // Hide the file input after removal
            this.valueId = ''; // Clear file ID when file is removed
            this.removed = true;
            this.$refs.fileInput.value = '';
        },
        handleFileChange(event) {
            const file = event.target.files[0];
            if (file) {
                this.fileName = file.name;
                this.isFileUploaded = true;
                this.showFileInput = true;
                this.valueId = '';
            }
            {{-- console.log(this.showFileInput); --}}
        }
    }" class="document-input">

    <input type="hidden" name="field[{{ $scriptid }}]" :value="valueId" />
    <template x-if="showFileInput || !fileName">
        <input type="file" wire:model="{{ $scriptid }}" x-ref="fileInput"
               name="field[{{ $scriptid }}]" class="input-style" @change="handleFileChange"
               @if ($required) required @endif />
    </template>

    <template x-if="(!isFileUploaded && !showFileInput && fileName) || valueId">
        <div class="file-details">
            <p>Uploaded File: <span x-text="fileName"></span></p>

        </div>
    </template>

    <template x-if="isFileUploaded">
        <div class="file-details">
            <template x-if="!showFileInput">
            <button type="button" class="btn link" @click="triggerFileInput" x-if="!showFileInput">Update</button>
            </template>
            <button type="button" class="btn link" @click="removeFile">Remove</button>
        </div>
    </template>

</div>