@php
    $isTemplate = ! empty($isTemplate);
    $aIdxRaw = $aIdx ?? 0;
    $aIdx = $isTemplate ? '__A__' : (int) $aIdxRaw;
    $addBase = 'report.part_g.additional_picture_documents';
    $dotAdd = $addBase.'.'.$aIdx.'.';
    $nameBase = 'report[part_g][additional_picture_documents]['.$aIdx.']';
    $inputId = 'report_g1_add_pic_file_'.$aIdx;

    $adoc = is_array($adoc ?? null) ? $adoc : [];
    $attachStorage = trim((string) ($adoc['attachment_storage'] ?? ''));
    $attachOriginal = trim((string) ($adoc['attachment_original_name'] ?? ''));
    $reportDraftIdForG1 = (int) ($reportDraftIdForG1 ?? old('report_draft_id', $reportDraftId ?? 0));
    $mecReportIdForG1 = (int) ($mecReportIdForG1 ?? old('mec_workflow_report_id', $mecReportWorkflowId ?? 0));
    $previewUrl = (! $isTemplate && $attachStorage !== '')
        ? mec_report_part_g_additional_attachment_preview_url($reportDraftIdForG1, $mecReportIdForG1, (int) $aIdxRaw, $attachStorage)
        : '';
    $hasFile = $previewUrl !== '' || $attachOriginal !== '';
    $extLabel = $attachOriginal !== '' ? strtoupper(pathinfo($attachOriginal, PATHINFO_EXTENSION) ?: 'IMAGE') : '';
    $displayName = $attachOriginal !== '' ? $attachOriginal : 'No file selected';
@endphp
<div class="report-g1-add-pic-row" data-g1-add-pic-row>
    <div class="report-g1-add-pic-card">
        <div class="report-g1-add-pic-card__preview{{ $hasFile ? ' report-g1-add-pic-card__preview--has-image' : '' }}" data-g1-add-pic-preview-pane>
            @if ($previewUrl !== '')
                <img
                    src="{{ $previewUrl }}"
                    alt=""
                    class="report-g1-add-pic-card__preview-img"
                    data-g1-add-pic-preview-img
                >
            @else
                <img src="" alt="" class="report-g1-add-pic-card__preview-img d-none" data-g1-add-pic-preview-img>
            @endif
            <div class="report-g1-add-pic-card__preview-empty{{ $hasFile ? ' d-none' : '' }}" data-g1-add-pic-preview-empty>
                <i class="fas fa-image" aria-hidden="true"></i>
                <span>No picture yet</span>
            </div>
        </div>

        <div class="report-g1-add-pic-card__body">
            <div class="report-g1-add-pic-file-bar">
                <div class="report-g1-add-pic-file-bar__icon" aria-hidden="true">
                    <i class="fas fa-file-image"></i>
                </div>
                <div class="report-g1-add-pic-file-bar__meta">
                    <div class="report-g1-add-pic-file-bar__name" data-g1-add-pic-file-name title="{{ $displayName }}">{{ $displayName }}</div>
                    <div class="report-g1-add-pic-file-bar__detail" data-g1-add-pic-file-detail>
                        @if ($extLabel !== '')
                            {{ $extLabel }}@if ($attachStorage !== '')
                                • Saved
                            @endif
                        @else
                            Select an image file
                        @endif
                    </div>
                </div>
                <button type="button" class="btn btn-sm report-g1-add-pic-choose-btn{{ $hasFile ? ' d-none' : '' }}" data-g1-add-pic-choose>
                    Choose File
                </button>
                <button type="button" class="btn btn-sm report-g1-add-pic-replace-btn{{ $hasFile ? '' : ' d-none' }}" data-g1-add-pic-replace>
                    Replace File
                </button>
                <button type="button" class="report-g1-add-pic-remove" title="Remove" aria-label="Remove this picture">
                    <i class="fas fa-times" aria-hidden="true"></i>
                </button>
                @if ($attachStorage !== '')
                    <input type="hidden" name="{{ $nameBase }}[attachment_storage]" value="{{ $attachStorage }}" data-g1-add-pic-storage>
                    <input type="hidden" name="{{ $nameBase }}[attachment_original_name]" value="{{ $attachOriginal }}" data-g1-add-pic-storage-name>
                @endif
                <input
                    type="file"
                    name="{{ $nameBase }}[attachment]"
                    id="{{ $inputId }}"
                    class="sr-only report-g1-add-pic-file @error($dotAdd.'attachment') is-invalid @enderror"
                    accept="image/jpeg,image/jpg,image/png,image/gif,.jpg,.jpeg,.png,.gif"
                    data-g1-add-pic-file
                >
            </div>
            @error($dotAdd.'attachment')
                <span class="invalid-feedback d-block mb-2">{{ $message }}</span>
            @enderror
        </div>
    </div>
</div>