@php
    $value = $item->itemDetails->where('form_detail_id', $formDetail->id)->value('value');
@endphp
<!--begin::Row-->
<div class="mb-3">
    <!--begin::Label-->
    <label for="form_detail_{{ $formDetail->id }}" class="form-label text-muted {{ $formDetail->is_required ? 'required' : '' }}">{{ $formDetail->name }}</label>
    <!--end::Label-->
    <!--begin::Col-->
    <div class="d-flex flex-column gap-2">
        <!-- Dropzone Section (appears below the image) -->
        <div class="dropzone dropzone-file" id="dzFormDetail-{{ $formDetail->id }}" style="margin-top: 5px;" data-id="{{ $formDetail->id }}">
            <!--begin::Message-->
            <div class="dz-message needsclick">
                <button type="button" class="btn btn-sm btn-secondary">Choose File</button>
                <span class="align-self-center text-muted ms-2">No file selected</span>
            </div>
            <!--end::Message-->
        </div>
        <small class="text-muted">(Support PDF format only with max size of 10MB)</small>
        <input type="hidden" name="form_detail[{{ $formDetail->id }}]" id="form_detail_{{ $formDetail->id }}" value="{{ old('form_detail.'.$formDetail->id, $item->itemDetails->where('form_detail_id', $formDetail->id)->value('value')) }}">
        <div class="file-container">
            @if (!empty($value))
                <div class="input-group">
                    <p class="form-control form-control-sm bg-secondary mb-0 border-end-0">
                        <a href="{{ assetFile($value) }}" target="_blank" rel="noopener noreferrer">{{ basename($value) }}</a>
                    </p>
                    <span class="input-group-text bg-secondary border-start-0" id="basic-addon2">
                        <i class="bi bi-eye"></i>
                    </span>
                </div>
            @endif
        </div>
        <br>
        @error('form_detail.' . $formDetail->id)
            <span class="text-sm text-danger">
                {{ $message }}
            </span>
        @enderror
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
@push('scripts')
    <script>
        var dzSsm_{{ $formDetail->id }} = new Dropzone("#dzFormDetail-{{ $formDetail->id }}", {
            url: "{{ route('application.evaluation.store-media') }}",
            paramName: "file",
            maxFiles: 1,
            maxFilesize: 10,
            addRemoveLinks: true,
            acceptedFiles: 'application/pdf',
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(file, response) {
                $('input[name="form_detail[{{ $formDetail->id }}]"]').val(response.name);
                this.options.maxFiles = this.options.maxFiles - 1;
            },
            removedfile: function(file) {
                file.previewElement.remove();
                if (file.status !== "error") {
                    $('input[name="form_detail[{{ $formDetail->id }}]"]').val('');
                    this.options.maxFiles = this.options.maxFiles + 1;
                }
            },
            init: function() {
                let myDropzone = this;

                let existingFile =
                    "{{ old('dzFormDetail-' . $formDetail->id, $value ?? '') }}";

                if (existingFile) {
                    let mockFile = {
                        name: existingFile.split('/').pop(),
                        size: 123456
                    };

                    myDropzone.emit("addedfile", mockFile);
                    myDropzone.emit("complete", mockFile);

                    $('#dzFormDetail-{{ $formDetail->id }}').val(existingFile);
                }

                myDropzone.on("addedfile", function(file) {
                    if (myDropzone.files.length > 1) {
                        myDropzone.removeFile(myDropzone.files[0]);
                    }
                });
            },
            success: function(file, response) {
                console.log("Uploaded file response:", response);
                $('input[name="form_detail[{{ $formDetail->id }}]"]').val(response.name);
            },
            removedfile: function(file) {
                file.previewElement.remove();
                $('input[name="form_detail[{{ $formDetail->id }}]"]').val('');
                this.options.maxFiles = 1;
            },
        });
    </script>
@endpush