@php
    use App\Support\MecReportPartDAttachments;

    $nameBase = (string) ($nameBase ?? '');
    $dotBase = (string) ($dotBase ?? '');
    $reportDraftIdForD = (int) ($reportDraftIdForD ?? old('report_draft_id', $reportDraftId ?? 0));
    $mecReportIdForD = (int) ($mecReportIdForD ?? old('mec_workflow_report_id', $mecReportWorkflowId ?? 0));
    $partDSection = (string) ($partDSection ?? '');
    $partDRowIdx = (int) ($partDRowIdx ?? 0);
    $inputId = (string) ($inputId ?? ('report_part_d_attach_'.$partDSection.'_'.$partDRowIdx));

    $attachRow = is_array($attachRow ?? null) ? $attachRow : [];
    if ($attachRow === [] && (isset($attachStorage) || isset($attachOriginal))) {
        $attachRow = [
            'attachment_storage' => $attachStorage ?? '',
            'attachment_original_name' => $attachOriginal ?? '',
            'attachments' => $attachments ?? null,
        ];
    }
    $attachmentList = MecReportPartDAttachments::listFromRow($attachRow);
@endphp
<div class="report-part-d-attachments" data-part-d-attachments data-name-base="{{ $nameBase }}">
    <input type="hidden" name="{{ $nameBase }}[{{ \App\Support\MecReportPartDAttachments::MANAGED_FLAG }}]" value="1">
    <ul class="list-unstyled mb-1 report-part-d-attachments__list" data-part-d-attachments-list>
        @foreach ($attachmentList as $fileIdx => $file)
            @php
                $storage = (string) ($file['storage'] ?? '');
                $origName = (string) ($file['original_name'] ?? '');
                $previewUrl = mec_report_part_d_attachment_preview_url(
                    $reportDraftIdForD,
                    $mecReportIdForD,
                    $partDSection,
                    $partDRowIdx,
                    $storage,
                    (int) $fileIdx
                );
            @endphp
            <li class="report-part-d-attachments__item d-flex align-items-start gap-1 mb-1" data-part-d-attachment-item data-part-d-saved="1">
                <input type="hidden" name="{{ $nameBase }}[attachments][{{ $fileIdx }}][storage]" value="{{ $storage }}">
                <input type="hidden" name="{{ $nameBase }}[attachments][{{ $fileIdx }}][original_name]" value="{{ $origName }}">
                <span class="small flex-grow-1 text-break">
                    @if ($previewUrl !== '' && $origName !== '')
                        <a href="{{ $previewUrl }}" target="_blank" rel="noopener noreferrer">{{ $origName }}</a>
                    @else
                        {{ $origName !== '' ? $origName : basename($storage) }}
                    @endif
                </span>
                <button
                    type="button"
                    class="btn btn-link btn-sm text-danger p-0 report-part-d-attachments__remove"
                    data-part-d-attachment-remove
                    title="{{ __('Remove attachment') }}"
                    aria-label="{{ __('Remove attachment') }}"
                >
                    <i class="fas fa-times" aria-hidden="true"></i>
                </button>
            </li>
        @endforeach
    </ul>
    <input
        type="file"
        name="{{ $nameBase }}[attachment][]"
        id="{{ $inputId }}"
        class="form-control form-control-sm report-part-d-attachments__input @error($dotBase.'attachment') is-invalid @enderror @error($dotBase.'attachment.*') is-invalid @enderror"
        accept=".pdf,.doc,.docx,image/*"
        multiple
        data-part-d-attachments-input
    >
    <p class="small text-muted mb-0 mt-1">{{ __('Add more files anytime — they accumulate in the list. Use × to remove any file.') }}</p>
    @error($dotBase.'attachment')
        <span class="invalid-feedback d-block">{{ $message }}</span>
    @enderror
    @error($dotBase.'attachment.*')
        <span class="invalid-feedback d-block">{{ $message }}</span>
    @enderror
</div>
@once
    @push('scripts')
    <script>
    (function () {
        if (window.__pmsPartDAttachmentsBound) return;
        window.__pmsPartDAttachmentsBound = true;

        function fileKey(file) {
            return [file.name, file.size, file.lastModified].join('::');
        }

        function getStore(root) {
            if (!root.__pmsPartDPendingFiles) {
                root.__pmsPartDPendingFiles = [];
            }
            return root.__pmsPartDPendingFiles;
        }

        function syncInputFiles(root) {
            var input = root.querySelector('[data-part-d-attachments-input]');
            if (!input || typeof DataTransfer === 'undefined') return;
            var dt = new DataTransfer();
            getStore(root).forEach(function (file) {
                dt.items.add(file);
            });
            input.files = dt.files;
        }

        function renumberSavedItems(root) {
            var list = root.querySelector('[data-part-d-attachments-list]');
            if (!list) return;
            var saved = list.querySelectorAll('[data-part-d-attachment-item][data-part-d-saved]');
            saved.forEach(function (item, i) {
                item.querySelectorAll('input[type="hidden"][name*="[attachments]"]').forEach(function (el) {
                    el.name = el.name.replace(/\[attachments\]\[\d+\]/, '[attachments][' + i + ']');
                });
            });
        }

        function renderPendingList(root) {
            var list = root.querySelector('[data-part-d-attachments-list]');
            if (!list) return;
            list.querySelectorAll('[data-part-d-attachment-item][data-part-d-pending]').forEach(function (el) {
                el.remove();
            });
            getStore(root).forEach(function (file, i) {
                var li = document.createElement('li');
                li.className = 'report-part-d-attachments__item d-flex align-items-start gap-1 mb-1';
                li.setAttribute('data-part-d-attachment-item', '');
                li.setAttribute('data-part-d-pending', '1');
                li.setAttribute('data-pending-index', String(i));

                var name = document.createElement('span');
                name.className = 'small flex-grow-1 text-break';
                name.textContent = file.name;

                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-link btn-sm text-danger p-0 report-part-d-attachments__remove';
                btn.setAttribute('data-part-d-attachment-remove', '');
                btn.setAttribute('data-part-d-pending-remove', '');
                btn.title = 'Remove attachment';
                btn.setAttribute('aria-label', 'Remove attachment');
                btn.innerHTML = '<i class="fas fa-times" aria-hidden="true"></i>';

                li.appendChild(name);
                li.appendChild(btn);
                list.appendChild(li);
            });
        }

        function addFiles(root, fileList) {
            if (!fileList || !fileList.length) return;
            var store = getStore(root);
            var seen = {};
            store.forEach(function (f) {
                seen[fileKey(f)] = true;
            });
            Array.prototype.forEach.call(fileList, function (file) {
                var key = fileKey(file);
                if (seen[key]) return;
                seen[key] = true;
                store.push(file);
            });
            syncInputFiles(root);
            renderPendingList(root);
        }

        function removePendingAt(root, index) {
            var store = getStore(root);
            if (index < 0 || index >= store.length) return;
            store.splice(index, 1);
            syncInputFiles(root);
            renderPendingList(root);
        }

        document.addEventListener('change', function (e) {
            var input = e.target.closest('[data-part-d-attachments-input]');
            if (!input) return;
            var root = input.closest('[data-part-d-attachments]');
            if (!root) return;
            var picked = input.files;
            addFiles(root, picked);
        });

        document.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-part-d-attachment-remove]');
            if (!btn) return;
            var item = btn.closest('[data-part-d-attachment-item]');
            var root = btn.closest('[data-part-d-attachments]');
            if (!item || !root) return;

            if (item.getAttribute('data-part-d-pending') === '1') {
                var idx = parseInt(item.getAttribute('data-pending-index') || '-1', 10);
                removePendingAt(root, idx);
                return;
            }

            item.remove();
            renumberSavedItems(root);
        });
    })();
    </script>
    @endpush
@endonce