@php
    $oldImages = old("form_detail.$formDetail->id", []);
    $storedImages = json_decode($item->itemDetails->where('form_detail_id', $formDetail->id)->value('value'), true) ?? [];
    $imagePaths = array_unique(!empty($oldImages) ? $oldImages : $storedImages);
@endphp
<!--begin::Row-->
<div class="mb-3">
    <!--begin::Label-->
    <label for="form_detail_{{ $formDetail->id }}" class="form-label text-muted 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-image" id="dzFormDetail-{{ $formDetail->id }}" data-id="{{ $formDetail->id }}">
            <!--begin::Message-->
            <div class="dz-message needsclick">
                <i class="ki-duotone ki-picture fs-3x"><span class="path1"></span><span class="path2"></span></i>
                <!--begin::Info-->
                <div class="ms-4">
                    <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to
                        upload.</h3>
                    <span class="fs-7 fw-semibold text-gray-500">Upload file</span>
                </div>
                <!--end::Info-->
            </div>
            <!--end::Message-->
            @if (!empty($imagePaths))
                @foreach ($imagePaths as $image)
                    <input type="hidden" name="form_detail[{{ $formDetail->id }}][]" value="{{ $image }}" class="uploaded-image" data-link="{{ assetFile($image) }}">
                @endforeach
            @endif
        </div>
        <small class="text-muted">(Support JPEG/JPG/PNG format only, with Maximum size of 2MB per image)</small>
        <!-- Show Images -->
        @if (!empty($imagePaths))
            <div class="image-container">
                @foreach ($imagePaths as $image)
                    <img src="{{ assetFile($image) }}" class="border p-2 rounded bg-light"
                            width="200" height="200" alt="{{ $formDetail->name }}"
                            style="object-fit: contain;">
                @endforeach
            </div>
        @endif
        @error("form_detail.$formDetail->id")
            <span class="text-sm text-danger">
                {{ $message }}
            </span>
        @enderror
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
@push('scripts')
    <script>
        var images = {};

        $('.dropzone-image').each(function(i, v) {
            let formDetailId = $(this).data('id');
            // let input = $(this).parent().find('input[type=hidden]');
            let dropzoneId = $(this).prop('id');
            let $container = $('#' + dropzoneId); // the Dropzone container
            images[formDetailId] = {};

            let dzImage = new Dropzone("#" + dropzoneId, {
                url: "{{ route('application.evaluation.store-media') }}",
                paramName: "file",
                maxFiles: 3,
                maxFilesize: 2,
                addRemoveLinks: true,
                acceptedFiles: 'image/*',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function(file, response) {
                    let inputHtml = `<input type="hidden" name="form_detail[${formDetailId}][]" value="${response.name}" class="uploaded-image">`;
                    $container.append(inputHtml);
                    images[formDetailId][file.name] = response.name;
                    this.options.maxFiles = this.options.maxFiles - 1;
                },
                removedfile: function(file) {
                    file.previewElement.remove();
                    if (file.status !== 'error') {
                        let name = (typeof file.file_name !== 'undefined')
                            ? file.file_name
                            : images[formDetailId][file.name];
                        $container.find(`input[name="form_detail[${formDetailId}][]"][value="${name}"]`).remove();
                        this.options.maxFiles = this.options.maxFiles + 1;
                    }
                },
                init: function() {
                    images[formDetailId] = {};
                    let myDropzone = this;

                    // Use a Set to store unique images
                    let existingImages = new Set();

                    $container.find('input[name="form_detail[' + formDetailId + '][]"]').each(function() {
                        existingImages.add($(this).val());
                    });

                    // Preload existing images
                    if (existingImages.size > 0) {
                        existingImages.forEach(function(image) {
                            let mockFile = {
                                name: image.split('/').pop(),
                                size: 12345
                            };
                            let input = $container.find('input.uploaded-image[value="' + image + '"]');
                            let imageUrl = input.data('link');
                            myDropzone.emit("addedfile", mockFile);
                            myDropzone.emit("thumbnail", mockFile, imageUrl);
                            myDropzone.emit("complete", mockFile);

                            // Ensure hidden input stays in the correct container
                            if ($container.find('input[value="' + image + '"]').length === 0) {
                                let input = $('<input>').attr({
                                    type: 'hidden',
                                    name: 'form_detail[' + formDetailId + '][]',
                                    value: image,
                                    class: 'uploaded-image',
                                    'data-link': imageUrl
                                });
                                $container.append(input);
                            }

                            // Map mock file name back for removal tracking
                            images[formDetailId][mockFile.name] = image;
                        });

                        // adjust maxFiles so user can only upload remaining slots
                        myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingImages.size;
                    }
                },
            });
        });
        // $('.dropzone-image').each(function(i, v) {
        //     let formDetailId = $(this).data('id');
        //     let input = $(this).parent().find('input[type=hidden]');
        //     let dropzoneId = $(this).prop('id');
        //     let dzImage = new Dropzone("#" + dropzoneId, {
        //         url: "{{ route('application.evaluation.store-media') }}",
        //         paramName: "file",
        //         maxFiles: 3,
        //         maxFilesize: 2,
        //         addRemoveLinks: true,
        //         acceptedFiles: 'image/*',
        //         headers: {
        //             'X-CSRF-TOKEN': "{{ csrf_token() }}"
        //         },
        //         success: function(file, response) {
        //             let inputHtml = `<input type="hidden" name="form_detail[${formDetailId}][]" value="${response.name}" class="uploaded-image">`;
        //             $('#' + dropzoneId).append(inputHtml);
        //             console.log(images);
        //             images[formDetailId][file.name] = response.name;
        //             // this.options.maxFiles = this.options.maxFiles - 1;
        //         },
        //         removedfile: function(file) {
        //             file.previewElement.remove()
        //             if (file.status !== 'error') {
        //                 // $(benefitBannerImageInput).val(null)
        //                 file.previewElement.remove()
        //                 var name = '';
        //                 if (typeof file.file_name !== 'undefined') {
        //                     name = file.file_name;
        //                 } else {
        //                     name = images[formDetailId][file.name];
        //                 }
        //                 $('#' + dropzoneId).find(`input[name="form_detail[${formDetailId}][]"][value="${name}"]`).remove();
        //                 // this.options.maxFiles = this.options.maxFiles + 1
        //             }
        //         },
        //         init: function() {
        //             images[formDetailId] = {};
        //             let myDropzone = this;

        //             // Use a Set to store unique images
        //             let existingImages = new Set();
        //             $('input[name="form_detail[' + formDetailId + '][]"]').each(function() {
        //                 existingImages.add($(this).val());
        //             });

        //             if (existingImages.size > 0) {
        //                 existingImages.forEach(function(image) {
        //                     let mockFile = {
        //                         name: image.split('/').pop(),
        //                         size: 12345
        //                     };

        //                     let input = $('input.uploaded-image[value="' + image + '"]');
        //                     let imageUrl = input.data('link');
        //                     myDropzone.emit("addedfile", mockFile);
        //                     myDropzone.emit("thumbnail", mockFile, imageUrl);
        //                     myDropzone.emit("complete", mockFile);

        //                     // Ensure hidden inputs exist
        //                     if ($('#image-container input[value="' + image + '"]').length === 0) {
        //                         let input = $('<input>').attr({
        //                             type: 'hidden',
        //                             name: 'form_detail[' + formDetailId + '][]',
        //                             value: image,
        //                             class: 'uploaded-image'
        //                         });
        //                         $('#image-container').append(input);
        //                     }
        //                 });
        //             }
        //         },
        //     });
        // });
    </script>
@endpush