{{-- CMR Part G — additional picture documents (after pictorial observations table). --}}
@php
    $addDocsOld = report_wizard_rows('part_g.additional_picture_documents', [], $reportPayload ?? null);
    $reportDraftIdForG1 = (int) old('report_draft_id', $reportDraftId ?? 0);
    $mecReportIdForG1 = (int) ($mecReportIdForG1 ?? old('mec_workflow_report_id', $mecReportWorkflowId ?? 0));
@endphp

<div class="report-g1-additional-pictures" id="report-g1-additional-pictures-root">
    <div class="report-g1-additional-pictures__head">
        <div class="report-g1-additional-pictures__head-text">
            <h6 class="report-g1-additional-pictures__title">Additional picture documents</h6>
            <p class="report-g1-additional-pictures__desc mb-0">Attach supplementary pictures. Each file is printed on its own page at the end of the report.</p>
        </div>
        <button type="button" class="btn btn-sm report-b1-btn-outline report-g1-additional-pictures__add-btn" id="report-g1-add-pic-row">
            + Add Picture
        </button>
    </div>

    <div id="report-g1-additional-pictures-list" class="report-g1-additional-pictures-list">
        @foreach ($addDocsOld as $aIdx => $adoc)
            @include('reports.partials.g1-cmr-additional-picture-row', [
                'aIdx' => (int) $aIdx,
                'adoc' => is_array($adoc) ? $adoc : [],
                'reportDraftIdForG1' => $reportDraftIdForG1,
                'mecReportIdForG1' => $mecReportIdForG1,
            ])
        @endforeach
    </div>
</div>

<template id="report-g1-add-pic-template">
    @include('reports.partials.g1-cmr-additional-picture-row', [
        'aIdx' => '__A__',
        'adoc' => [],
        'reportDraftIdForG1' => $reportDraftIdForG1,
        'mecReportIdForG1' => $mecReportIdForG1,
        'isTemplate' => true,
    ])
</template>

@push('stylesheets')
<style>
    .report-g1-additional-pictures {
        border-top: 1px solid rgba(148, 163, 184, 0.35);
        padding-top: 1.25rem;
        margin-top: 1.25rem;
    }
    .dark-mode .report-g1-additional-pictures {
        border-top-color: rgba(148, 163, 184, 0.2);
    }
    .report-g1-additional-pictures__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem 1rem;
        margin-bottom: 1rem;
    }
    .report-g1-additional-pictures__title {
        margin: 0 0 0.25rem;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
    }
    .dark-mode .report-g1-additional-pictures__title {
        color: #94a3b8;
    }
    .report-g1-additional-pictures__desc {
        font-size: 0.8125rem;
        color: #64748b;
        max-width: 36rem;
        line-height: 1.45;
    }
    .dark-mode .report-g1-additional-pictures__desc {
        color: #94a3b8;
    }
    .report-g1-additional-pictures-list {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }
    .report-g1-add-pic-card {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.45);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }
    .dark-mode .report-g1-add-pic-card {
        background: #1e293b;
        border-color: rgba(148, 163, 184, 0.25);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
    .report-g1-add-pic-card__preview {
        flex: 0 0 140px;
        width: 140px;
        min-height: 180px;
        border: 1px solid rgba(148, 163, 184, 0.4);
        border-radius: 8px;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    .dark-mode .report-g1-add-pic-card__preview {
        background: #0f172a;
        border-color: rgba(148, 163, 184, 0.25);
    }
    .report-g1-add-pic-card__preview-img {
        width: 100%;
        height: 100%;
        min-height: 180px;
        object-fit: contain;
        display: block;
        background: #f1f5f9;
    }
    .dark-mode .report-g1-add-pic-card__preview-img {
        background: #0f172a;
    }
    .report-g1-add-pic-card__preview-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem;
        text-align: center;
        color: #94a3b8;
        font-size: 0.75rem;
    }
    .report-g1-add-pic-card__preview-empty i {
        font-size: 1.75rem;
        opacity: 0.65;
    }
    .report-g1-add-pic-card__body {
        flex: 1 1 240px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }
    .report-g1-add-pic-file-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.65rem 0.75rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 8px;
        background: #f8fafc;
        position: relative;
    }
    .dark-mode .report-g1-add-pic-file-bar {
        background: #0f172a;
        border-color: rgba(148, 163, 184, 0.22);
    }
    .report-g1-add-pic-file-bar__icon {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 6px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 0.95rem;
    }
    .dark-mode .report-g1-add-pic-file-bar__icon {
        background: #1e293b;
        color: #94a3b8;
    }
    .report-g1-add-pic-file-bar__meta {
        flex: 1 1 120px;
        min-width: 0;
        padding-right: 1.5rem;
    }
    .report-g1-add-pic-file-bar__name {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dark-mode .report-g1-add-pic-file-bar__name {
        color: #e2e8f0;
    }
    .report-g1-add-pic-file-bar__detail {
        font-size: 0.75rem;
        color: #64748b;
        margin-top: 0.1rem;
    }
    .dark-mode .report-g1-add-pic-file-bar__detail {
        color: #94a3b8;
    }
    .report-g1-add-pic-replace-btn,
    .report-g1-add-pic-choose-btn {
        flex-shrink: 0;
        font-size: 0.78rem;
        font-weight: 600;
        border-radius: 999px;
        padding: 0.35rem 0.9rem;
        white-space: nowrap;
    }
    .report-g1-add-pic-remove {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .report-g1-add-pic-remove:hover {
        color: #dc2626;
        background: rgba(220, 38, 38, 0.08);
    }
    @media (max-width: 575.98px) {
        .report-g1-add-pic-card__preview {
            flex: 1 1 100%;
            width: 100%;
            max-width: 200px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
(function () {
    var list = document.getElementById('report-g1-additional-pictures-list');
    var btnAdd = document.getElementById('report-g1-add-pic-row');
    var tpl = document.getElementById('report-g1-add-pic-template');
    if (!list || !btnAdd || !tpl) return;

    function formatFileSize(bytes) {
        if (!bytes || bytes < 1) return '';
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / 1048576).toFixed(1) + ' MB';
    }

    function extFromFile(file) {
        if (!file || !file.name) return 'IMAGE';
        var parts = file.name.split('.');
        return parts.length > 1 ? parts.pop().toUpperCase() : 'IMAGE';
    }

    function renumberAdditionalPicRows() {
        list.querySelectorAll('[data-g1-add-pic-row]').forEach(function (row, i) {
            row.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(
                    /report\[part_g\]\[additional_picture_documents\]\[\d+\]/,
                    'report[part_g][additional_picture_documents][' + i + ']'
                );
            });
            row.querySelectorAll('[id^="report_g1_add_pic_"]').forEach(function (el) {
                if (el.id.indexOf('report_g1_add_pic_file_') === 0) {
                    el.id = 'report_g1_add_pic_file_' + i;
                }
            });
        });
    }

    function setPreview(row, url, isImage) {
        var pane = row.querySelector('[data-g1-add-pic-preview-pane]');
        var img = row.querySelector('[data-g1-add-pic-preview-img]');
        var empty = row.querySelector('[data-g1-add-pic-preview-empty]');
        if (!pane || !img || !empty) return;
        if (url && isImage) {
            img.src = url;
            img.classList.remove('d-none');
            empty.classList.add('d-none');
            pane.classList.add('report-g1-add-pic-card__preview--has-image');
            setAttachButtons(row, true);
        } else {
            img.classList.add('d-none');
            img.removeAttribute('src');
            empty.classList.remove('d-none');
            pane.classList.remove('report-g1-add-pic-card__preview--has-image');
            setAttachButtons(row, false);
        }
    }

    function setFileMeta(row, name, detail) {
        var nameEl = row.querySelector('[data-g1-add-pic-file-name]');
        var detailEl = row.querySelector('[data-g1-add-pic-file-detail]');
        if (nameEl) {
            nameEl.textContent = name || 'No file selected';
            nameEl.title = name || '';
        }
        if (detailEl) detailEl.textContent = detail || 'Select an image file';
    }

    function setAttachButtons(row, hasFile) {
        var replaceBtn = row.querySelector('[data-g1-add-pic-replace]');
        var chooseBtn = row.querySelector('[data-g1-add-pic-choose]');
        if (replaceBtn) replaceBtn.classList.toggle('d-none', !hasFile);
        if (chooseBtn) chooseBtn.classList.toggle('d-none', !!hasFile);
    }

    function clearStorageFields(row) {
        row.querySelectorAll('[data-g1-add-pic-storage], [data-g1-add-pic-storage-name]').forEach(function (el) {
            el.parentNode.removeChild(el);
        });
    }

    function bindRow(row) {
        if (!row || row.dataset.g1AddPicBound) return;
        row.dataset.g1AddPicBound = '1';

        var input = row.querySelector('[data-g1-add-pic-file]');
        var replaceBtn = row.querySelector('[data-g1-add-pic-replace]');
        var chooseBtn = row.querySelector('[data-g1-add-pic-choose]');

        function openFilePicker() {
            if (input) input.click();
        }

        if (replaceBtn && input) {
            replaceBtn.addEventListener('click', openFilePicker);
        }
        if (chooseBtn && input) {
            chooseBtn.addEventListener('click', openFilePicker);
        }

        if (input) {
            input.addEventListener('change', function () {
                if (input._g1AddPicObjectUrl) {
                    URL.revokeObjectURL(input._g1AddPicObjectUrl);
                    input._g1AddPicObjectUrl = null;
                }
                clearStorageFields(row);
                var file = input.files && input.files[0];
                if (!file) return;
                if (!file.type || file.type.indexOf('image/') !== 0) {
                    setPreview(row, null, false);
                    setFileMeta(row, 'No file selected', 'Select an image file');
                    return;
                }
                var url = URL.createObjectURL(file);
                input._g1AddPicObjectUrl = url;
                setPreview(row, url, true);
                setFileMeta(row, file.name, extFromFile(file) + ' • ' + formatFileSize(file.size));
            });
        }
    }

    btnAdd.addEventListener('click', function () {
        var ix = list.querySelectorAll('[data-g1-add-pic-row]').length;
        var html = tpl.innerHTML.replace(/__A__/g, String(ix));
        var wrap = document.createElement('div');
        wrap.innerHTML = html.trim();
        var row = wrap.firstElementChild;
        if (!row) return;
        list.appendChild(row);
        renumberAdditionalPicRows();
        bindRow(list.querySelector('[data-g1-add-pic-row]:last-of-type'));
    });

    list.addEventListener('click', function (e) {
        var rm = e.target.closest('.report-g1-add-pic-remove');
        if (!rm || !list.contains(rm)) return;
        var row = rm.closest('[data-g1-add-pic-row]');
        if (row) {
            row.querySelectorAll('[data-g1-add-pic-file]').forEach(function (inp) {
                if (inp._g1AddPicObjectUrl) URL.revokeObjectURL(inp._g1AddPicObjectUrl);
            });
            row.parentNode.removeChild(row);
        }
        renumberAdditionalPicRows();
    });

    list.querySelectorAll('[data-g1-add-pic-row]').forEach(bindRow);
    renumberAdditionalPicRows();
})();
</script>
@endpush