{{-- Part G §1 — Pictorial observations (wizard title is on parent; note + rows + previews).
     Optional: pass $reportPartGPictorialObservationRows when loading from the backend.
--}}
@php
    $reportG1SingleImage = $reportG1SingleImage ?? false;
    $reportG1CmrLayout = $reportG1CmrLayout ?? false;
    $reportG1SarTheme = $reportG1SarTheme ?? false;
    $reportG1DefaultFirstObservation = isset($reportG1DefaultFirstObservation) ? (string) $reportG1DefaultFirstObservation : '';
    $gBase = 'report.part_g.pictorial_observations.rows';
    $satelliteLabel = $reportG1DefaultFirstObservation;

    $reportPayloadG1 = $reportPayload ?? null;
    $g1PayloadArr = is_array($reportPayloadG1) ? $reportPayloadG1 : [];
    $g1UnitMode = old(
        'report.part_g.pictorial_observations.reporting_mode',
        report_section_reporting_mode($g1PayloadArr, 'part_g.pictorial_observations.reporting_mode')
    );
    if (! in_array((string) $g1UnitMode, ['single', 'unit_wise'], true)) {
        $g1UnitMode = 'single';
    }
    $g1UnitWise = $g1UnitMode === 'unit_wise';
    $g1DefaultRow = ['specific_observations' => $satelliteLabel];
    $g1UnitsForView = report_part_g_pictorial_units_for_wizard($g1PayloadArr, $g1DefaultRow);

    $reportDraftIdForG1 = (int) old('report_draft_id', $reportDraftId ?? 0);
    $mecReportIdForG1 = (int) ($mecReportIdForG1 ?? 0);
    $mecReportWorkflowModeG1 = $mecReportWorkflowMode ?? null;
    $g1RdWorkflowAddRow = $mecReportWorkflowModeG1 === 'rd';
    $gRowsOld = report_part_g_pictorial_single_rows_for_wizard($g1PayloadArr, $g1DefaultRow);
@endphp

@push('stylesheets')
<style>
    .report-g1-root {
        --report-g1-box-min: 11.5rem;
    }
    .report-g1-root .report-g1-head {
        margin-bottom: 0.75rem;
    }
    .report-g1-root .report-g1-note {
        font-size: 0.8rem;
        font-style: italic;
        color: #64748b;
        line-height: 1.45;
        max-width: 42rem;
    }
    .dark-mode .report-g1-root .report-g1-note {
        color: #94a3b8;
    }
    .report-g1-root .report-g1-btn-add-row {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #1d4ed8;
        background: #fff;
        border: 1px solid #93c5fd;
        border-radius: 8px;
        padding: 0.55rem 1.15rem;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
        cursor: pointer;
        transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        white-space: nowrap;
    }
    .report-g1-root .report-g1-btn-add-row:hover {
        color: #1e40af;
        border-color: #60a5fa;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
    }
    .dark-mode .report-g1-root .report-g1-btn-add-row {
        color: #93c5fd;
        background: #1e293b;
        border-color: rgba(147, 197, 253, 0.55);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .dark-mode .report-g1-root .report-g1-btn-add-row:hover {
        color: #bfdbfe;
    }
    .report-g1-root .report-g1-btn-bulk-upload {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #0f766e;
        background: #fff;
        border: 1px solid #5eead4;
        border-radius: 8px;
        padding: 0.55rem 1.15rem;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
        cursor: pointer;
        transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        white-space: nowrap;
    }
    .report-g1-root .report-g1-btn-bulk-upload:hover {
        color: #115e59;
        border-color: #2dd4bf;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
    }
    .dark-mode .report-g1-root .report-g1-btn-bulk-upload {
        color: #5eead4;
        background: #1e293b;
        border-color: rgba(94, 234, 212, 0.45);
    }
    .dark-mode .report-g1-root .report-g1-btn-bulk-upload:hover {
        color: #99f6e4;
    }
    .report-g1-root .report-g1-head-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .report-g1-root .report-g1-cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .report-g1-root .report-g1-card {
        position: relative;
        border: 2px solid #bae6fd;
        border-radius: 12px;
        background: #fff;
        padding: 1.1rem 1.15rem 1.15rem;
        box-shadow: 0 1px 3px rgba(14, 165, 233, 0.08);
    }
    .dark-mode .report-g1-root .report-g1-card {
        border-color: rgba(56, 189, 248, 0.45);
        background: #334155;
        box-shadow: none;
    }
    .report-g1-root .report-g1-card-remove {
        position: absolute;
        top: 0.65rem;
        right: 0.65rem;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border-radius: 50%;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .report-g1-root .report-g1-card-remove:hover {
        color: #b91c1c;
        border-color: #fecaca;
        background: #fef2f2;
    }
    .dark-mode .report-g1-root .report-g1-card-remove {
        border-color: rgba(148, 163, 184, 0.4);
        background: #1e293b;
        color: #94a3b8;
    }
    .dark-mode .report-g1-root .report-g1-card-remove:hover {
        color: #fca5a5;
        border-color: rgba(248, 113, 113, 0.45);
        background: rgba(127, 29, 29, 0.25);
    }
    .report-g1-root .report-g1-card-inner {
        padding-right: 2.25rem;
    }
    @media (min-width: 768px) {
        .report-g1-root .report-g1-card-inner {
            padding-right: 2.5rem;
        }
    }
    .report-g1-root .report-g1-block-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #0f172a;
        margin-bottom: 0.5rem;
    }
    .dark-mode .report-g1-root .report-g1-block-label {
        color: #e2e8f0;
    }
    .report-g1-root .report-g1-serial {
        font-weight: 700;
    }
    .report-g1-root .report-g1-evidence-heading {
        text-align: center;
    }
    /* Equal-height description vs evidence boxes (md+) */
    @media (min-width: 768px) {
        .report-g1-root .report-g1-editor-row {
            align-items: stretch;
        }
        .report-g1-root .report-g1-col-desc,
        .report-g1-root .report-g1-col-evidence {
            display: flex;
            flex-direction: column;
        }
        .report-g1-root .report-g1-textarea {
            flex: 1 1 auto;
            min-height: var(--report-g1-box-min);
        }
        .report-g1-root .report-g1-evidence-pair {
            flex: 1 1 auto;
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            min-height: 0;
        }
        .report-g1-root .report-g1-slot {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .report-g1-root .report-g1-upload-shell {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: var(--report-g1-box-min);
        }
        .report-g1-root .report-g1-upload-facade {
            flex: 1 1 auto;
            display: flex;
            min-height: 0;
        }
        .report-g1-root .report-g1-upload-inner {
            flex: 1 1 auto;
            min-height: var(--report-g1-box-min);
        }
    }
    .report-g1-root .report-g1-textarea {
        width: 100%;
        min-height: var(--report-g1-box-min);
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        padding: 0.75rem 0.85rem;
        font-size: 0.85rem;
        line-height: 1.45;
        resize: vertical;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .report-g1-root .report-g1-textarea:focus {
        border-color: #38bdf8;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
        outline: 0;
    }
    .dark-mode .report-g1-root .report-g1-textarea {
        background: #1e293b;
        border-color: rgba(148, 163, 184, 0.35);
        color: #f1f5f9;
    }
    .report-g1-root .report-g1-upload-shell {
        position: relative;
        border-radius: 10px;
        min-height: var(--report-g1-box-min);
    }
    .report-g1-root .report-g1-upload-facade {
        cursor: pointer;
        margin: 0;
        width: 100%;
        min-height: var(--report-g1-box-min);
    }
    .report-g1-root .report-g1-upload-inner {
        position: relative;
        border: 2px dashed #cbd5e1;
        border-radius: 10px;
        min-height: var(--report-g1-box-min);
        padding: 0.65rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.35rem;
        background: #fafafa;
        transition: border-color 0.15s ease, background 0.15s ease;
        overflow: hidden;
    }
    .dark-mode .report-g1-root .report-g1-upload-inner {
        border-color: rgba(148, 163, 184, 0.45);
        background: rgba(15, 23, 42, 0.35);
    }
    .report-g1-root .report-g1-upload-facade:hover .report-g1-upload-inner {
        border-color: #94a3b8;
        background: #f8fafc;
    }
    .report-g1-root .report-g1-upload-shell.is-dragover .report-g1-upload-inner {
        border-color: #0ea5e9;
        background: #f0f9ff;
    }
    .report-g1-root .report-g1-upload-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        pointer-events: none;
    }
    .report-g1-root .report-g1-upload-shell.is-filled .report-g1-upload-placeholder {
        display: none;
    }
    .report-g1-root .report-g1-upload-icon {
        font-size: 1.35rem;
        color: #64748b;
    }
    .dark-mode .report-g1-root .report-g1-upload-icon {
        color: #94a3b8;
    }
    .report-g1-root .report-g1-upload-title {
        display: block;
        font-size: 0.82rem;
        font-weight: 700;
        color: #0f172a;
    }
    .dark-mode .report-g1-root .report-g1-upload-title {
        color: #f1f5f9;
    }
    .report-g1-root .report-g1-upload-hint {
        font-size: 0.72rem;
        color: #64748b;
        line-height: 1.35;
    }
    .dark-mode .report-g1-root .report-g1-upload-hint {
        color: #94a3b8;
    }
    .report-g1-root .report-g1-preview-img {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.35rem;
        pointer-events: none;
        z-index: 1;
    }
    .report-g1-root .report-g1-upload-shell.is-filled.is-image .report-g1-preview-img {
        display: block;
    }
    .report-g1-root .report-g1-preview-pdf {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: #b91c1c;
        pointer-events: none;
    }
    .report-g1-root .report-g1-upload-shell.is-filled.is-pdf .report-g1-preview-pdf {
        display: flex;
    }
    .report-g1-root .report-g1-preview-pdf .fa-file-pdf {
        font-size: 2rem;
        opacity: 0.85;
    }
    .report-g1-root .report-g1-clear-file {
        display: none;
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 4;
        width: 1.65rem;
        height: 1.65rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(15, 23, 42, 0.55);
        color: #fff;
        font-size: 1rem;
        line-height: 1;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        transition: background 0.15s ease, transform 0.1s ease;
    }
    .report-g1-root .report-g1-clear-file:hover {
        background: rgba(185, 28, 28, 0.9);
        transform: scale(1.05);
    }
    .report-g1-root .report-g1-upload-shell.is-filled .report-g1-clear-file {
        display: inline-flex;
    }
    .report-g1-root .report-g1-file-chosen {
        font-size: 0.68rem;
        color: #0369a1;
        margin-top: 0.35rem;
        word-break: break-word;
        text-align: center;
        min-height: 1rem;
    }
    .dark-mode .report-g1-root .report-g1-file-chosen {
        color: #7dd3fc;
    }
    .report-g1-root .report-g1-upload-shell.is-filled.is-image ~ .report-g1-file-chosen {
        display: none;
    }
    .report-g1-root .report-g1-preview-pdf-name {
        display: block;
        max-width: 100%;
        word-break: break-word;
        font-size: 0.68rem;
        font-weight: 500;
        text-align: center;
        padding: 0 0.35rem;
    }
    /* SAR wizard — official slate/teal palette (matches .report-wizard-card--sar / preview) */
    .report-g1-root--sar .report-g1-note {
        color: #c00000;
        font-style: italic;
        font-size: 0.82rem;
        max-width: none;
    }
    .report-g1-root--sar .report-g1-btn-add-row {
        display: none;
    }
    .report-g1-root--sar .report-g1-card {
        border: 1px solid #94a3b8;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
        padding: 0;
        overflow: hidden;
    }
    .dark-mode .report-g1-root--sar .report-g1-card {
        border-color: rgba(148, 163, 184, 0.45);
    }
    .report-g1-root--sar .report-g1-card-inner {
        padding-right: 2.25rem;
    }
    .report-g1-root--sar .report-g1-editor-row {
        margin: 0;
    }
    .report-g1-root--sar .report-g1-col-desc,
    .report-g1-root--sar .report-g1-col-evidence {
        padding: 0;
        margin: 0 !important;
    }
    .report-g1-root--sar .report-g1-block-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #0f172a;
        background: #cbd5e1;
        border: none;
        border-bottom: 1px solid #94a3b8;
        margin: 0;
        padding: 0.5rem 0.65rem;
    }
    .dark-mode .report-g1-root--sar .report-g1-block-label {
        background: #475569;
        color: #f1f5f9;
        border-bottom-color: rgba(148, 163, 184, 0.45);
    }
    .report-g1-root--sar .report-g1-serial {
        background: transparent;
        color: inherit;
        border: none;
        padding: 0;
        margin-right: 0.35rem;
    }
    .report-g1-root--sar .report-g1-textarea {
        border: none;
        border-radius: 0;
        min-height: 10.5rem;
        resize: vertical;
    }
    .report-g1-root--sar .report-g1-textarea:focus {
        border-color: #5a7d8c;
        box-shadow: 0 0 0 2px rgba(90, 125, 140, 0.25);
    }
    .report-g1-root--sar .report-g1-evidence-heading {
        text-align: left;
    }
    .report-g1-root--sar .report-g1-evidence-pair {
        padding: 0.65rem !important;
    }
    .report-g1-root--sar .report-g1-upload-inner {
        border-color: #94a3b8 !important;
        background: #fafafa !important;
    }
    .report-g1-root--sar .report-g1-upload-shell.is-dragover .report-g1-upload-inner {
        border-color: #5a7d8c !important;
        background: #f1f5f9 !important;
    }
    .report-g1-root--sar .report-g1-textarea:focus {
        box-shadow: inset 0 0 0 1px #5a7d8c;
    }
    .report-g1-root--sar.report-g1-root--single-image .report-g1-upload-title::after {
        content: none;
    }
    /* CMR — five-column pictorial table (matches preview / PDF Part G) */
    .report-g1-root--cmr .report-g1-cmr-wrap {
        margin-top: 0.5rem;
        overflow-x: auto;
    }
    .report-g1-root--cmr .report-g1-cmr-table {
        width: 100%;
        margin-bottom: 0;
        table-layout: fixed;
        border-collapse: collapse;
    }
    .report-g1-root--cmr .report-g1-cmr-table thead th {
        font-size: 0.72rem;
        font-weight: 700;
        text-align: center;
        vertical-align: middle;
        background: #e8f4ea;
        color: #0f172a;
        border: 1px solid #94a3b8;
        padding: 0.45rem 0.35rem;
        line-height: 1.3;
    }
    .report-g1-root--cmr .report-g1-cmr-table tbody td {
        vertical-align: top;
        border: 1px solid #cbd5e1;
        padding: 0.5rem 0.4rem;
        background: #fff;
    }
    .dark-mode .report-g1-root--cmr .report-g1-cmr-table tbody td {
        background: #334155;
        border-color: rgba(148, 163, 184, 0.35);
    }
    .report-g1-root--cmr .report-g1-cmr-col-sn {
        width: 42px;
        text-align: center;
        position: relative;
    }
    .report-g1-root--cmr .report-g1-cmr-serial {
        font-weight: 700;
        font-size: 0.8rem;
        display: block;
        margin-bottom: 0.35rem;
    }
    .report-g1-root--cmr .report-g1-cmr-table .report-g1-textarea {
        min-height: 10.5rem;
    }
    .report-g1-root--cmr .report-g1-cmr-table .report-g1-upload-shell,
    .report-g1-root--cmr .report-g1-cmr-table .report-g1-upload-inner {
        min-height: 10.5rem;
    }
    .report-g1-root--cmr .report-g1-card-remove {
        position: static;
        margin: 0 auto;
        display: inline-flex;
    }
</style>
@endpush

<div class="report-g1-root{{ $reportG1CmrLayout ? ' report-g1-root--cmr' : '' }}{{ $reportG1SingleImage ? ' report-g1-root--single-image' : '' }}{{ $reportG1SarTheme ? ' report-g1-root--sar' : '' }}" id="report-g1-root">
    <div class="report-b1-shell report-qc-shell">
        <div class="report-b1-card-body report-qc-card-body">
            <div class="pms-report-mode-panel mb-3">
                <div class="report-b2-structure-title mb-3">{{ __('Reporting structure') }}</div>
                <div class="pms-report-mode-segmented" role="radiogroup" aria-label="{{ __('Reporting structure') }}">
                    <label class="pms-report-mode-option">
                        <input type="radio" class="pms-report-unit-mode-radio" name="g1_reporting_structure" value="single" @checked($g1UnitMode === 'single')>
                        <span class="pms-report-mode-option__face">{{ __('Single') }}</span>
                    </label>
                    <label class="pms-report-mode-option">
                        <input type="radio" class="pms-report-unit-mode-radio" name="g1_reporting_structure" value="unit_wise" @checked($g1UnitMode === 'unit_wise')>
                        <span class="pms-report-mode-option__face">{{ __('Unit-wise') }}</span>
                    </label>
                </div>
                <input type="hidden" name="report[part_g][pictorial_observations][reporting_mode]" id="pms-report-g1-reporting-mode" value="{{ $g1UnitMode }}">
            </div>

            <div class="report-g1-head d-flex flex-column flex-md-row align-items-start justify-content-between gap-3">
                <p class="report-g1-note mb-0 pr-md-2 flex-grow-1">Note: MEO to add only relevant pictures corroborating major deficiencies or observations.</p>
            </div>

            <div id="report-g1-single-wrap" style="{{ $g1UnitWise ? 'display:none' : '' }}">
            <div class="report-g1-head-actions d-flex flex-wrap align-items-center justify-content-md-end gap-2 mb-3 flex-shrink-0 align-self-start{{ $g1RdWorkflowAddRow ? ' mec-wf-allow--rd' : '' }}">
                    @if (! $reportG1CmrLayout)
                        <input type="file" id="report-g1-bulk-files" class="sr-only" multiple accept="image/*,.pdf" aria-hidden="true" tabindex="-1">
                        @if ($reportG1SarTheme)
                            <button type="button" class="pms-report-action-btn" id="report-g1-bulk-upload-btn">
                                <i class="fas fa-images mr-1" aria-hidden="true"></i>{{ __('Bulk upload pictures') }}
                            </button>
                        @else
                            <button type="button" class="report-g1-btn-bulk-upload" id="report-g1-bulk-upload-btn">
                                <i class="fas fa-images mr-1" aria-hidden="true"></i>{{ __('Bulk upload pictures') }}
                            </button>
                        @endif
                    @endif
                    @if ($reportG1SarTheme)
                        <button type="button" class="pms-report-action-btn" id="report-g1-add-row">+ {{ __('ADD ROW') }}</button>
                    @else
                        <button type="button" class="report-g1-btn-add-row" id="report-g1-add-row">ADD ROW</button>
                    @endif
            </div>

            @if ($reportG1CmrLayout)
            <div class="report-g1-cmr-wrap">
                <table class="table table-bordered report-g1-cmr-table">
                    <thead>
                        <tr>
                            <th class="report-g1-cmr-col-sn">S#</th>
                            <th>Specific Observations</th>
                            <th>Previos Picture</th>
                            <th>New Picture</th>
                            <th>Updated Observation</th>
                        </tr>
                    </thead>
                    <tbody id="report-g1-list">
                        @foreach ($gRowsOld as $rIdx => $row)
                            @php
                                $obsDefault = (string) ($row['specific_observations'] ?? '');
                                $obs = old($gBase.'.'.$rIdx.'.specific_observations', $obsDefault);
                                $updatedDefault = (string) ($row['updated_observation'] ?? '');
                                $updatedObs = old($gBase.'.'.$rIdx.'.updated_observation', $updatedDefault);
                                $dotBase = $gBase.'.'.$rIdx.'.';
                                $slotNum = str_pad((string) ($rIdx + 1), 2, '0', STR_PAD_LEFT);
                            @endphp
                            <tr class="report-g1-data-row">
                                <td class="report-g1-cmr-col-sn">
                                    <span class="report-g1-cmr-serial">{{ $rIdx + 1 }}</span>
                                    <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row" @if (count($gRowsOld) <= 1) style="visibility:hidden" @endif>
                                        <i class="fas fa-times" aria-hidden="true"></i>
                                    </button>
                                </td>
                                <td>
                                    <textarea
                                        name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][specific_observations]"
                                        class="form-control report-g1-textarea @error($dotBase.'specific_observations') is-invalid @enderror"
                                        aria-label="Specific observations, row {{ $rIdx + 1 }}"
                                        placeholder="Enter specific observations..."
                                    >{{ $obs }}</textarea>
                                    @error($dotBase.'specific_observations')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </td>
                                <td>
                                    @include('reports.partials.g1-pictorial-picture-slot', [
                                        'rIdx' => $rIdx,
                                        'row' => $row,
                                        'slot' => 'picture_a',
                                        'reportDraftIdForG1' => $reportDraftIdForG1,
                                        'mecReportIdForG1' => $mecReportIdForG1,
                                        'uploadTitle' => 'Previos Picture',
                                        'uploadHint' => 'Click or drag to upload',
                                        'uploadIcon' => 'fa-image',
                                        'ariaFileLabel' => 'Previos picture, row '.($rIdx + 1),
                                        'ariaRemoveLabel' => 'previos picture',
                                    ])
                                </td>
                                <td>
                                    @include('reports.partials.g1-pictorial-picture-slot', [
                                        'rIdx' => $rIdx,
                                        'row' => $row,
                                        'slot' => 'picture_b',
                                        'reportDraftIdForG1' => $reportDraftIdForG1,
                                        'mecReportIdForG1' => $mecReportIdForG1,
                                        'uploadTitle' => 'New Picture',
                                        'uploadHint' => 'Click or drag to upload',
                                        'uploadIcon' => 'fa-image',
                                        'ariaFileLabel' => 'New picture, row '.($rIdx + 1),
                                        'ariaRemoveLabel' => 'new picture',
                                    ])
                                </td>
                                <td>
                                    <textarea
                                        name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][updated_observation]"
                                        class="form-control report-g1-textarea @error($dotBase.'updated_observation') is-invalid @enderror"
                                        aria-label="Updated observation, row {{ $rIdx + 1 }}"
                                        placeholder="Enter updated observation..."
                                    >{{ $updatedObs }}</textarea>
                                    @error($dotBase.'updated_observation')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="report-g1-cards mt-3" id="report-g1-list">
                @foreach ($gRowsOld as $rIdx => $row)
                    @php
                        $obsDefault = (string) ($row['specific_observations'] ?? '');
                        $obs = old($gBase.'.'.$rIdx.'.specific_observations', $obsDefault);
                        $dotBase = $gBase.'.'.$rIdx.'.';
                        $storageA = old($gBase.'.'.$rIdx.'.picture_a_storage', $row['picture_a_storage'] ?? '');
                        $storageB = old($gBase.'.'.$rIdx.'.picture_b_storage', $row['picture_b_storage'] ?? '');
                        $nameA = old($gBase.'.'.$rIdx.'.picture_a_original_name', $row['picture_a_original_name'] ?? '');
                        $nameB = old($gBase.'.'.$rIdx.'.picture_b_original_name', $row['picture_b_original_name'] ?? '');
                        $previewUrlA = mec_report_part_g_attachment_preview_url($reportDraftIdForG1, $mecReportIdForG1, (int) $rIdx, 'picture_a', (string) $storageA);
                        $previewUrlB = mec_report_part_g_attachment_preview_url($reportDraftIdForG1, $mecReportIdForG1, (int) $rIdx, 'picture_b', (string) $storageB);
                        $slotNum = str_pad((string) ($rIdx + 1), 2, '0', STR_PAD_LEFT);
                    @endphp
                    <div class="report-g1-card report-g1-data-row">
                        <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row" @if (count($gRowsOld) <= 1) style="visibility:hidden" @endif>
                            <i class="fas fa-times" aria-hidden="true"></i>
                        </button>
                        <div class="report-g1-card-inner">
                            <div class="row report-g1-editor-row">
                                <div class="col-lg-5 col-md-6 mb-3 mb-md-0 report-g1-col-desc">
                                    <div class="report-g1-block-label">
                                        @if ($reportG1SarTheme)
                                            {{ __('Specific Observations') }}
                                        @else
                                            <span class="report-g1-serial">{{ $slotNum }}</span> description
                                        @endif
                                    </div>
                                    <textarea
                                        name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][specific_observations]"
                                        class="form-control report-g1-textarea @error($dotBase.'specific_observations') is-invalid @enderror"
                                        aria-label="Description, observation {{ $slotNum }}"
                                        placeholder="Describe the observation for this row..."
                                    >{{ $obs }}</textarea>
                                    @error($dotBase.'specific_observations')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-7 col-md-6 mt-md-0 report-g1-col-evidence">
                                    <div class="report-g1-block-label report-g1-evidence-heading">{{ $reportG1SarTheme ? __('Picture') : __('Evidence pictures') }}</div>
                                    <div class="row report-g1-evidence-pair mx-0">
                                        <div class="{{ $reportG1SingleImage ? 'col-12' : 'col-sm-6 pl-0 pr-sm-2 mb-2 mb-sm-0' }}">
                                            <div class="report-g1-slot"@if ($previewUrlA !== '') data-saved-preview-url="{{ $previewUrlA }}"@endif>
                                                <input type="hidden" name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][picture_a_storage]" value="{{ $storageA }}" class="report-g1-storage-input" data-slot="picture_a">
                                                <input type="hidden" name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][picture_a_original_name]" value="{{ $nameA }}" class="report-g1-storage-name-input" data-slot="picture_a">
                                                <div class="report-g1-upload-shell">
                                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove primary photo">&times;</button>
                                                    <label class="report-g1-upload-facade mb-0 w-100">
                                                        <input
                                                            type="file"
                                                            name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][picture_a]"
                                                            class="report-g1-file sr-only"
                                                            accept="image/*,.pdf"
                                                            aria-label="Primary photo, row {{ $rIdx + 1 }}"
                                                        >
                                                        <span class="report-g1-upload-inner">
                                                            <span class="report-g1-upload-placeholder">
                                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-cloud-upload-alt"></i></span>
                                                                <span class="report-g1-upload-title">{{ $reportG1SarTheme ? __('Picture') : __('Primary Photo') }}</span>
                                                                <span class="report-g1-upload-hint">{{ __('Click or drag to upload') }}</span>
                                                            </span>
                                                            <img class="report-g1-preview-img" alt="">
                                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                                            </div>
                                        </div>
                                        @if (! $reportG1SingleImage)
                                        <div class="col-sm-6 pr-0 pl-sm-2">
                                            <div class="report-g1-slot"@if ($previewUrlB !== '') data-saved-preview-url="{{ $previewUrlB }}"@endif>
                                                <input type="hidden" name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][picture_b_storage]" value="{{ $storageB }}" class="report-g1-storage-input" data-slot="picture_b">
                                                <input type="hidden" name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][picture_b_original_name]" value="{{ $nameB }}" class="report-g1-storage-name-input" data-slot="picture_b">
                                                <div class="report-g1-upload-shell">
                                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove supporting image">&times;</button>
                                                    <label class="report-g1-upload-facade mb-0 w-100">
                                                        <input
                                                            type="file"
                                                            name="report[part_g][pictorial_observations][rows][{{ $rIdx }}][picture_b]"
                                                            class="report-g1-file sr-only"
                                                            accept="image/*,.pdf"
                                                            aria-label="Supporting view, row {{ $rIdx + 1 }}"
                                                        >
                                                        <span class="report-g1-upload-inner">
                                                            <span class="report-g1-upload-placeholder">
                                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image"></i></span>
                                                                <span class="report-g1-upload-title">Supporting View</span>
                                                                <span class="report-g1-upload-hint">Optional additional angle</span>
                                                            </span>
                                                            <img class="report-g1-preview-img" alt="">
                                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @endif
            </div>{{-- /report-g1-single-wrap --}}

            <div id="report-g1-units-wrap" class="mt-2" style="{{ $g1UnitWise ? '' : 'display:none' }}">
                <div id="report-g1-units-container">
                    @php $g1FlatIdx = 0; @endphp
                    @foreach ($g1UnitsForView as $uIdx => $g1Unit)
                        @php
                            $uRows = is_array($g1Unit['rows'] ?? null) && count($g1Unit['rows']) > 0
                                ? $g1Unit['rows']
                                : [$g1DefaultRow];
                            $uName = old('report.part_g.pictorial_observations.units.'.$uIdx.'.unit_name', $g1Unit['unit_name'] ?? '');
                        @endphp
                        <div class="report-g1-unit-block pms-report-unit-shell mb-3" data-g1-unit-block>
                            <div class="pms-report-unit-header">
                                <div class="pms-report-unit-header__field">
                                    <label class="report-b2-structure-title mb-2 d-block" style="font-size:9pt">{{ __('Unit name') }}</label>
                                    <input type="text" name="report[part_g][pictorial_observations][units][{{ $uIdx }}][unit_name]" value="{{ $uName }}" class="form-control form-control-sm report-b1-input report-g1-unit-name-input" placeholder="{{ __('e.g. Package A, Civil works') }}" autocomplete="off">
                                </div>
                                <div class="pms-report-unit-header__actions">
                                    <button type="button" class="pms-report-action-btn report-g1-add-unit">+ {{ __('ADD UNIT') }}</button>
                                    <button type="button" class="pms-report-action-btn pms-report-action-btn--danger report-g1-remove-unit" title="{{ __('Remove unit') }}">{{ __('REMOVE UNIT') }}</button>
                                </div>
                            </div>
                            <div class="report-g1-unit-toolbar d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3{{ $g1RdWorkflowAddRow ? ' mec-wf-allow--rd' : '' }}">
                                @if (! $reportG1CmrLayout)
                                    <input type="file" class="report-g1-unit-bulk-files sr-only" multiple accept="image/*,.pdf" aria-hidden="true" tabindex="-1">
                                    @if ($reportG1SarTheme)
                                        <button type="button" class="pms-report-action-btn report-g1-unit-bulk-upload-btn">
                                            <i class="fas fa-images mr-1" aria-hidden="true"></i>{{ __('Bulk upload pictures') }}
                                        </button>
                                    @else
                                        <button type="button" class="report-g1-btn-bulk-upload report-g1-unit-bulk-upload-btn">
                                            <i class="fas fa-images mr-1" aria-hidden="true"></i>{{ __('Bulk upload pictures') }}
                                        </button>
                                    @endif
                                @endif
                                @if ($reportG1SarTheme)
                                    <button type="button" class="pms-report-action-btn report-g1-unit-add-row">+ {{ __('ADD ROW') }}</button>
                                @else
                                    <button type="button" class="report-g1-btn-add-row report-g1-unit-add-row">ADD ROW</button>
                                @endif
                            </div>
                            @if ($reportG1CmrLayout)
                            <div class="report-g1-cmr-wrap">
                                <table class="table table-bordered report-g1-cmr-table">
                                    <thead>
                                        <tr>
                                            <th class="report-g1-cmr-col-sn">S#</th>
                                            <th>Specific Observations</th>
                                            <th>Previos Picture</th>
                                            <th>New Picture</th>
                                            <th>Updated Observation</th>
                                        </tr>
                                    </thead>
                                    <tbody class="report-g1-unit-rows">
                                        @foreach ($uRows as $rIdx => $row)
                                            @php
                                                $obsDefault = (string) ($row['specific_observations'] ?? '');
                                                $obs = old('report.part_g.pictorial_observations.units.'.$uIdx.'.rows.'.$rIdx.'.specific_observations', $obsDefault);
                                                $updatedDefault = (string) ($row['updated_observation'] ?? '');
                                                $updatedObs = old('report.part_g.pictorial_observations.units.'.$uIdx.'.rows.'.$rIdx.'.updated_observation', $updatedDefault);
                                                $dotBase = 'report.part_g.pictorial_observations.units.'.$uIdx.'.rows.'.$rIdx.'.';
                                                $nameBase = 'report[part_g][pictorial_observations][units]['.$uIdx.'][rows]['.$rIdx.']';
                                            @endphp
                                            <tr class="report-g1-data-row">
                                                <td class="report-g1-cmr-col-sn">
                                                    <span class="report-g1-cmr-serial">{{ $rIdx + 1 }}</span>
                                                    <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row" @if (count($uRows) <= 1) style="visibility:hidden" @endif>
                                                        <i class="fas fa-times" aria-hidden="true"></i>
                                                    </button>
                                                </td>
                                                <td>
                                                    <textarea name="{{ $nameBase }}[specific_observations]" class="form-control report-g1-textarea @error($dotBase.'specific_observations') is-invalid @enderror" aria-label="Specific observations" placeholder="Enter specific observations...">{{ $obs }}</textarea>
                                                </td>
                                                <td>
                                                    @include('reports.partials.g1-pictorial-picture-slot', [
                                                        'rIdx' => $rIdx,
                                                        'row' => $row,
                                                        'slot' => 'picture_a',
                                                        'nameBase' => $nameBase,
                                                        'dotBase' => $dotBase,
                                                        'previewFlatIdx' => $g1FlatIdx,
                                                        'reportDraftIdForG1' => $reportDraftIdForG1,
                                                        'mecReportIdForG1' => $mecReportIdForG1,
                                                        'uploadTitle' => 'Previos Picture',
                                                        'uploadHint' => 'Click or drag to upload',
                                                        'uploadIcon' => 'fa-image',
                                                        'ariaFileLabel' => 'Previos picture',
                                                        'ariaRemoveLabel' => 'previos picture',
                                                    ])
                                                </td>
                                                <td>
                                                    @include('reports.partials.g1-pictorial-picture-slot', [
                                                        'rIdx' => $rIdx,
                                                        'row' => $row,
                                                        'slot' => 'picture_b',
                                                        'nameBase' => $nameBase,
                                                        'dotBase' => $dotBase,
                                                        'previewFlatIdx' => $g1FlatIdx,
                                                        'reportDraftIdForG1' => $reportDraftIdForG1,
                                                        'mecReportIdForG1' => $mecReportIdForG1,
                                                        'uploadTitle' => 'New Picture',
                                                        'uploadHint' => 'Click or drag to upload',
                                                        'uploadIcon' => 'fa-image',
                                                        'ariaFileLabel' => 'New picture',
                                                        'ariaRemoveLabel' => 'new picture',
                                                    ])
                                                </td>
                                                <td>
                                                    <textarea name="{{ $nameBase }}[updated_observation]" class="form-control report-g1-textarea @error($dotBase.'updated_observation') is-invalid @enderror" aria-label="Updated observation" placeholder="Enter updated observation...">{{ $updatedObs }}</textarea>
                                                </td>
                                            </tr>
                                            @php $g1FlatIdx++; @endphp
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <div class="report-g1-cards report-g1-unit-rows mt-1">
                                @foreach ($uRows as $rIdx => $row)
                                    @php
                                        $obsDefault = (string) ($row['specific_observations'] ?? '');
                                        $obs = old('report.part_g.pictorial_observations.units.'.$uIdx.'.rows.'.$rIdx.'.specific_observations', $obsDefault);
                                        $dotBase = 'report.part_g.pictorial_observations.units.'.$uIdx.'.rows.'.$rIdx.'.';
                                        $nameBase = 'report[part_g][pictorial_observations][units]['.$uIdx.'][rows]['.$rIdx.']';
                                        $storageA = old($dotBase.'picture_a_storage', $row['picture_a_storage'] ?? '');
                                        $storageB = old($dotBase.'picture_b_storage', $row['picture_b_storage'] ?? '');
                                        $nameA = old($dotBase.'picture_a_original_name', $row['picture_a_original_name'] ?? '');
                                        $nameB = old($dotBase.'picture_b_original_name', $row['picture_b_original_name'] ?? '');
                                        $previewUrlA = mec_report_part_g_attachment_preview_url($reportDraftIdForG1, $mecReportIdForG1, $g1FlatIdx, 'picture_a', (string) $storageA);
                                        $previewUrlB = mec_report_part_g_attachment_preview_url($reportDraftIdForG1, $mecReportIdForG1, $g1FlatIdx, 'picture_b', (string) $storageB);
                                        $slotNum = str_pad((string) ($rIdx + 1), 2, '0', STR_PAD_LEFT);
                                    @endphp
                                    <div class="report-g1-card report-g1-data-row">
                                        <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row" @if (count($uRows) <= 1) style="visibility:hidden" @endif>
                                            <i class="fas fa-times" aria-hidden="true"></i>
                                        </button>
                                        <div class="report-g1-card-inner">
                                            <div class="row report-g1-editor-row">
                                                <div class="col-lg-5 col-md-6 mb-3 mb-md-0 report-g1-col-desc">
                                                    <div class="report-g1-block-label">
                                                        @if ($reportG1SarTheme)
                                                            {{ __('Specific Observations') }}
                                                        @else
                                                            <span class="report-g1-serial">{{ $slotNum }}</span> description
                                                        @endif
                                                    </div>
                                                    <textarea name="{{ $nameBase }}[specific_observations]" class="form-control report-g1-textarea @error($dotBase.'specific_observations') is-invalid @enderror" aria-label="Description" placeholder="Describe the observation for this row...">{{ $obs }}</textarea>
                                                </div>
                                                <div class="col-lg-7 col-md-6 mt-md-0 report-g1-col-evidence">
                                                    <div class="report-g1-block-label report-g1-evidence-heading">{{ $reportG1SarTheme ? __('Picture') : __('Evidence pictures') }}</div>
                                                    <div class="row report-g1-evidence-pair mx-0">
                                                        <div class="{{ $reportG1SingleImage ? 'col-12' : 'col-sm-6 pl-0 pr-sm-2 mb-2 mb-sm-0' }}">
                                                            <div class="report-g1-slot"@if ($previewUrlA !== '') data-saved-preview-url="{{ $previewUrlA }}"@endif>
                                                                <input type="hidden" name="{{ $nameBase }}[picture_a_storage]" value="{{ $storageA }}" class="report-g1-storage-input" data-slot="picture_a">
                                                                <input type="hidden" name="{{ $nameBase }}[picture_a_original_name]" value="{{ $nameA }}" class="report-g1-storage-name-input" data-slot="picture_a">
                                                                <div class="report-g1-upload-shell">
                                                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove primary photo">&times;</button>
                                                                    <label class="report-g1-upload-facade mb-0 w-100">
                                                                        <input type="file" name="{{ $nameBase }}[picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Primary photo">
                                                                        <span class="report-g1-upload-inner">
                                                                            <span class="report-g1-upload-placeholder">
                                                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-cloud-upload-alt"></i></span>
                                                                                <span class="report-g1-upload-title">{{ $reportG1SarTheme ? __('Picture') : __('Primary Photo') }}</span>
                                                                                <span class="report-g1-upload-hint">{{ __('Click or drag to upload') }}</span>
                                                                            </span>
                                                                            <img class="report-g1-preview-img" alt="">
                                                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                                                        </span>
                                                                    </label>
                                                                </div>
                                                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                                                            </div>
                                                        </div>
                                                        @if (! $reportG1SingleImage)
                                                        <div class="col-sm-6 pr-0 pl-sm-2">
                                                            <div class="report-g1-slot"@if ($previewUrlB !== '') data-saved-preview-url="{{ $previewUrlB }}"@endif>
                                                                <input type="hidden" name="{{ $nameBase }}[picture_b_storage]" value="{{ $storageB }}" class="report-g1-storage-input" data-slot="picture_b">
                                                                <input type="hidden" name="{{ $nameBase }}[picture_b_original_name]" value="{{ $nameB }}" class="report-g1-storage-name-input" data-slot="picture_b">
                                                                <div class="report-g1-upload-shell">
                                                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove supporting image">&times;</button>
                                                                    <label class="report-g1-upload-facade mb-0 w-100">
                                                                        <input type="file" name="{{ $nameBase }}[picture_b]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Supporting view">
                                                                        <span class="report-g1-upload-inner">
                                                                            <span class="report-g1-upload-placeholder">
                                                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image"></i></span>
                                                                                <span class="report-g1-upload-title">Supporting View</span>
                                                                                <span class="report-g1-upload-hint">Optional additional angle</span>
                                                                            </span>
                                                                            <img class="report-g1-preview-img" alt="">
                                                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                                                        </span>
                                                                    </label>
                                                                </div>
                                                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php $g1FlatIdx++; @endphp
                                @endforeach
                            </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@if ($reportG1CmrLayout)
    @include('reports.partials.g1-cmr-additional-pictures')
@endif

@if ($reportG1CmrLayout)
<template id="report-g1-row-template-cmr">
    <tr class="report-g1-data-row">
        <td class="report-g1-cmr-col-sn">
            <span class="report-g1-cmr-serial">01</span>
            <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </td>
        <td>
            <textarea
                name="report[part_g][pictorial_observations][rows][__R__][specific_observations]"
                class="form-control report-g1-textarea"
                aria-label="Specific observations"
                placeholder="Enter specific observations..."
            ></textarea>
        </td>
        <td>
            <div class="report-g1-slot">
                <div class="report-g1-upload-shell">
                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove previos picture">&times;</button>
                    <label class="report-g1-upload-facade mb-0 w-100">
                        <input type="file" name="report[part_g][pictorial_observations][rows][__R__][picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Previos picture">
                        <span class="report-g1-upload-inner">
                            <span class="report-g1-upload-placeholder">
                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image" aria-hidden="true"></i></span>
                                <span class="report-g1-upload-title">Previos Picture</span>
                                <span class="report-g1-upload-hint">Click or drag to upload</span>
                            </span>
                            <img class="report-g1-preview-img" alt="">
                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                        </span>
                    </label>
                </div>
                <div class="report-g1-file-chosen" aria-live="polite"></div>
            </div>
        </td>
        <td>
            <div class="report-g1-slot">
                <div class="report-g1-upload-shell">
                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove new picture">&times;</button>
                    <label class="report-g1-upload-facade mb-0 w-100">
                        <input type="file" name="report[part_g][pictorial_observations][rows][__R__][picture_b]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="New picture">
                        <span class="report-g1-upload-inner">
                            <span class="report-g1-upload-placeholder">
                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image" aria-hidden="true"></i></span>
                                <span class="report-g1-upload-title">New Picture</span>
                                <span class="report-g1-upload-hint">Click or drag to upload</span>
                            </span>
                            <img class="report-g1-preview-img" alt="">
                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                        </span>
                    </label>
                </div>
                <div class="report-g1-file-chosen" aria-live="polite"></div>
            </div>
        </td>
        <td>
            <textarea
                name="report[part_g][pictorial_observations][rows][__R__][updated_observation]"
                class="form-control report-g1-textarea"
                aria-label="Updated observation"
                placeholder="Enter updated observation..."
            ></textarea>
        </td>
    </tr>
</template>
@elseif ($reportG1SingleImage)
<template id="report-g1-row-template-single">
    <div class="report-g1-card report-g1-data-row">
        <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <div class="report-g1-card-inner">
            <div class="row report-g1-editor-row">
                <div class="col-lg-5 col-md-6 mb-3 mb-md-0 report-g1-col-desc">
                    <div class="report-g1-block-label">
                        @if ($reportG1SarTheme)
                            {{ __('Specific Observations') }}
                        @else
                            <span class="report-g1-serial">01</span> description
                        @endif
                    </div>
                    <textarea
                        name="report[part_g][pictorial_observations][rows][__R__][specific_observations]"
                        class="form-control report-g1-textarea"
                        aria-label="{{ $reportG1SarTheme ? __('Specific observations') : __('Description') }}"
                        placeholder="Describe the observation for this row..."
                    ></textarea>
                </div>
                <div class="col-lg-7 col-md-6 mt-md-0 report-g1-col-evidence">
                    <div class="report-g1-block-label report-g1-evidence-heading">{{ $reportG1SarTheme ? __('Picture') : __('Evidence pictures') }}</div>
                    <div class="row report-g1-evidence-pair mx-0">
                        <div class="col-12">
                            <div class="report-g1-slot">
                                <div class="report-g1-upload-shell">
                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="{{ $reportG1SarTheme ? __('Remove picture') : __('Remove primary photo') }}">&times;</button>
                                    <label class="report-g1-upload-facade mb-0 w-100">
                                        <input type="file" name="report[part_g][pictorial_observations][rows][__R__][picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="{{ $reportG1SarTheme ? __('Picture') : __('Primary photo') }}">
                                        <span class="report-g1-upload-inner">
                                            <span class="report-g1-upload-placeholder">
                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-cloud-upload-alt"></i></span>
                                                <span class="report-g1-upload-title">{{ $reportG1SarTheme ? __('Picture') : __('Primary Photo') }}</span>
                                                <span class="report-g1-upload-hint">{{ __('Click or drag to upload') }}</span>
                                            </span>
                                            <img class="report-g1-preview-img" alt="">
                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
@else
<template id="report-g1-row-template">
    <div class="report-g1-card report-g1-data-row">
        <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <div class="report-g1-card-inner">
            <div class="row report-g1-editor-row">
                <div class="col-lg-5 col-md-6 mb-3 mb-md-0 report-g1-col-desc">
                    <div class="report-g1-block-label">
                        <span class="report-g1-serial">01</span> description
                    </div>
                    <textarea
                        name="report[part_g][pictorial_observations][rows][__R__][specific_observations]"
                        class="form-control report-g1-textarea"
                        aria-label="Description"
                        placeholder="Describe the observation for this row..."
                    ></textarea>
                </div>
                <div class="col-lg-7 col-md-6 mt-md-0 report-g1-col-evidence">
                    <div class="report-g1-block-label report-g1-evidence-heading">Evidence pictures</div>
                    <div class="row report-g1-evidence-pair mx-0">
                        <div class="col-sm-6 pl-0 pr-sm-2 mb-2 mb-sm-0">
                            <div class="report-g1-slot">
                                <div class="report-g1-upload-shell">
                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove primary photo">&times;</button>
                                    <label class="report-g1-upload-facade mb-0 w-100">
                                        <input type="file" name="report[part_g][pictorial_observations][rows][__R__][picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Primary photo">
                                        <span class="report-g1-upload-inner">
                                            <span class="report-g1-upload-placeholder">
                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-cloud-upload-alt"></i></span>
                                                <span class="report-g1-upload-title">Primary Photo</span>
                                                <span class="report-g1-upload-hint">Click or drag to upload</span>
                                            </span>
                                            <img class="report-g1-preview-img" alt="">
                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                            </div>
                        </div>
                        <div class="col-sm-6 pr-0 pl-sm-2">
                            <div class="report-g1-slot">
                                <div class="report-g1-upload-shell">
                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove supporting image">&times;</button>
                                    <label class="report-g1-upload-facade mb-0 w-100">
                                        <input type="file" name="report[part_g][pictorial_observations][rows][__R__][picture_b]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Supporting view">
                                        <span class="report-g1-upload-inner">
                                            <span class="report-g1-upload-placeholder">
                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image"></i></span>
                                                <span class="report-g1-upload-title">Supporting View</span>
                                                <span class="report-g1-upload-hint">Optional additional angle</span>
                                            </span>
                                            <img class="report-g1-preview-img" alt="">
                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
@endif

<template id="report-g1-unit-block-template">
    <div class="report-g1-unit-block pms-report-unit-shell mb-3" data-g1-unit-block>
        <div class="pms-report-unit-header">
            <div class="pms-report-unit-header__field">
                <label class="report-b2-structure-title mb-2 d-block" style="font-size:9pt">{{ __('Unit name') }}</label>
                <input type="text" name="report[part_g][pictorial_observations][units][__U__][unit_name]" value="" class="form-control form-control-sm report-b1-input report-g1-unit-name-input" placeholder="{{ __('e.g. Package A, Civil works') }}" autocomplete="off">
            </div>
            <div class="pms-report-unit-header__actions">
                <button type="button" class="pms-report-action-btn report-g1-add-unit">+ {{ __('ADD UNIT') }}</button>
                <button type="button" class="pms-report-action-btn pms-report-action-btn--danger report-g1-remove-unit" title="{{ __('Remove unit') }}">{{ __('REMOVE UNIT') }}</button>
            </div>
        </div>
        <div class="report-g1-unit-toolbar d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3">
            @if (! $reportG1CmrLayout)
                <input type="file" class="report-g1-unit-bulk-files sr-only" multiple accept="image/*,.pdf" aria-hidden="true" tabindex="-1">
                @if ($reportG1SarTheme)
                    <button type="button" class="pms-report-action-btn report-g1-unit-bulk-upload-btn">
                        <i class="fas fa-images mr-1" aria-hidden="true"></i>{{ __('Bulk upload pictures') }}
                    </button>
                @else
                    <button type="button" class="report-g1-btn-bulk-upload report-g1-unit-bulk-upload-btn">
                        <i class="fas fa-images mr-1" aria-hidden="true"></i>{{ __('Bulk upload pictures') }}
                    </button>
                @endif
            @endif
            @if ($reportG1SarTheme)
                <button type="button" class="pms-report-action-btn report-g1-unit-add-row">+ {{ __('ADD ROW') }}</button>
            @else
                <button type="button" class="report-g1-btn-add-row report-g1-unit-add-row">ADD ROW</button>
            @endif
        </div>
        @if ($reportG1CmrLayout)
        <div class="report-g1-cmr-wrap">
            <table class="table table-bordered report-g1-cmr-table">
                <thead>
                    <tr>
                        <th class="report-g1-cmr-col-sn">S#</th>
                        <th>Specific Observations</th>
                        <th>Previos Picture</th>
                        <th>New Picture</th>
                        <th>Updated Observation</th>
                    </tr>
                </thead>
                <tbody class="report-g1-unit-rows"></tbody>
            </table>
        </div>
        @else
        <div class="report-g1-cards report-g1-unit-rows mt-1"></div>
        @endif
    </div>
</template>

@if ($reportG1CmrLayout)
<template id="report-g1-row-template-cmr-unit">
    <tr class="report-g1-data-row">
        <td class="report-g1-cmr-col-sn">
            <span class="report-g1-cmr-serial">01</span>
            <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </td>
        <td>
            <textarea name="report[part_g][pictorial_observations][units][__U__][rows][__R__][specific_observations]" class="form-control report-g1-textarea" aria-label="Specific observations" placeholder="Enter specific observations..."></textarea>
        </td>
        <td>
            <div class="report-g1-slot">
                <div class="report-g1-upload-shell">
                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove previos picture">&times;</button>
                    <label class="report-g1-upload-facade mb-0 w-100">
                        <input type="file" name="report[part_g][pictorial_observations][units][__U__][rows][__R__][picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Previos picture">
                        <span class="report-g1-upload-inner">
                            <span class="report-g1-upload-placeholder">
                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image" aria-hidden="true"></i></span>
                                <span class="report-g1-upload-title">Previos Picture</span>
                                <span class="report-g1-upload-hint">Click or drag to upload</span>
                            </span>
                            <img class="report-g1-preview-img" alt="">
                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                        </span>
                    </label>
                </div>
                <div class="report-g1-file-chosen" aria-live="polite"></div>
            </div>
        </td>
        <td>
            <div class="report-g1-slot">
                <div class="report-g1-upload-shell">
                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove new picture">&times;</button>
                    <label class="report-g1-upload-facade mb-0 w-100">
                        <input type="file" name="report[part_g][pictorial_observations][units][__U__][rows][__R__][picture_b]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="New picture">
                        <span class="report-g1-upload-inner">
                            <span class="report-g1-upload-placeholder">
                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image" aria-hidden="true"></i></span>
                                <span class="report-g1-upload-title">New Picture</span>
                                <span class="report-g1-upload-hint">Click or drag to upload</span>
                            </span>
                            <img class="report-g1-preview-img" alt="">
                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                        </span>
                    </label>
                </div>
                <div class="report-g1-file-chosen" aria-live="polite"></div>
            </div>
        </td>
        <td>
            <textarea name="report[part_g][pictorial_observations][units][__U__][rows][__R__][updated_observation]" class="form-control report-g1-textarea" aria-label="Updated observation" placeholder="Enter updated observation..."></textarea>
        </td>
    </tr>
</template>
@elseif ($reportG1SingleImage)
<template id="report-g1-row-template-single-unit">
    <div class="report-g1-card report-g1-data-row">
        <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <div class="report-g1-card-inner">
            <div class="row report-g1-editor-row">
                <div class="col-lg-5 col-md-6 mb-3 mb-md-0 report-g1-col-desc">
                    <div class="report-g1-block-label">
                        @if ($reportG1SarTheme)
                            {{ __('Specific Observations') }}
                        @else
                            <span class="report-g1-serial">01</span> description
                        @endif
                    </div>
                    <textarea name="report[part_g][pictorial_observations][units][__U__][rows][__R__][specific_observations]" class="form-control report-g1-textarea" aria-label="Description" placeholder="Describe the observation for this row..."></textarea>
                </div>
                <div class="col-lg-7 col-md-6 mt-md-0 report-g1-col-evidence">
                    <div class="report-g1-block-label report-g1-evidence-heading">{{ $reportG1SarTheme ? __('Picture') : __('Evidence pictures') }}</div>
                    <div class="row report-g1-evidence-pair mx-0">
                        <div class="col-12">
                            <div class="report-g1-slot">
                                <div class="report-g1-upload-shell">
                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove primary photo">&times;</button>
                                    <label class="report-g1-upload-facade mb-0 w-100">
                                        <input type="file" name="report[part_g][pictorial_observations][units][__U__][rows][__R__][picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Primary photo">
                                        <span class="report-g1-upload-inner">
                                            <span class="report-g1-upload-placeholder">
                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-cloud-upload-alt"></i></span>
                                                <span class="report-g1-upload-title">{{ $reportG1SarTheme ? __('Picture') : __('Primary Photo') }}</span>
                                                <span class="report-g1-upload-hint">{{ __('Click or drag to upload') }}</span>
                                            </span>
                                            <img class="report-g1-preview-img" alt="">
                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
@else
<template id="report-g1-row-template-unit">
    <div class="report-g1-card report-g1-data-row">
        <button type="button" class="report-g1-card-remove report-g1-remove-row" title="Remove row" aria-label="Remove row">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <div class="report-g1-card-inner">
            <div class="row report-g1-editor-row">
                <div class="col-lg-5 col-md-6 mb-3 mb-md-0 report-g1-col-desc">
                    <div class="report-g1-block-label"><span class="report-g1-serial">01</span> description</div>
                    <textarea name="report[part_g][pictorial_observations][units][__U__][rows][__R__][specific_observations]" class="form-control report-g1-textarea" aria-label="Description" placeholder="Describe the observation for this row..."></textarea>
                </div>
                <div class="col-lg-7 col-md-6 mt-md-0 report-g1-col-evidence">
                    <div class="report-g1-block-label report-g1-evidence-heading">Evidence pictures</div>
                    <div class="row report-g1-evidence-pair mx-0">
                        <div class="col-sm-6 pl-0 pr-sm-2 mb-2 mb-sm-0">
                            <div class="report-g1-slot">
                                <div class="report-g1-upload-shell">
                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove primary photo">&times;</button>
                                    <label class="report-g1-upload-facade mb-0 w-100">
                                        <input type="file" name="report[part_g][pictorial_observations][units][__U__][rows][__R__][picture_a]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Primary photo">
                                        <span class="report-g1-upload-inner">
                                            <span class="report-g1-upload-placeholder">
                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-cloud-upload-alt"></i></span>
                                                <span class="report-g1-upload-title">Primary Photo</span>
                                                <span class="report-g1-upload-hint">Click or drag to upload</span>
                                            </span>
                                            <img class="report-g1-preview-img" alt="">
                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                            </div>
                        </div>
                        <div class="col-sm-6 pr-0 pl-sm-2">
                            <div class="report-g1-slot">
                                <div class="report-g1-upload-shell">
                                    <button type="button" class="report-g1-clear-file" title="Remove file" aria-label="Remove supporting image">&times;</button>
                                    <label class="report-g1-upload-facade mb-0 w-100">
                                        <input type="file" name="report[part_g][pictorial_observations][units][__U__][rows][__R__][picture_b]" class="report-g1-file sr-only" accept="image/*,.pdf" aria-label="Supporting view">
                                        <span class="report-g1-upload-inner">
                                            <span class="report-g1-upload-placeholder">
                                                <span class="report-g1-upload-icon" aria-hidden="true"><i class="fas fa-image"></i></span>
                                                <span class="report-g1-upload-title">Supporting View</span>
                                                <span class="report-g1-upload-hint">Optional additional angle</span>
                                            </span>
                                            <img class="report-g1-preview-img" alt="">
                                            <span class="report-g1-preview-pdf"><i class="fas fa-file-pdf" aria-hidden="true"></i><span class="report-g1-preview-pdf-name"></span></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="report-g1-file-chosen" aria-live="polite"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
@endif

@push('scripts')
<script>
(function () {
    var root = document.getElementById('report-g1-root');
    if (!root) return;
    var list = document.getElementById('report-g1-list');
    var singleWrap = document.getElementById('report-g1-single-wrap');
    var unitsWrap = document.getElementById('report-g1-units-wrap');
    var unitsContainer = document.getElementById('report-g1-units-container');
    if (!list && !unitsContainer) return;

    var cmr = root.classList.contains('report-g1-root--cmr');
    var single = root.classList.contains('report-g1-root--single-image');
    var btnAdd = document.getElementById('report-g1-add-row');
    var tplCmr = document.getElementById('report-g1-row-template-cmr');
    var tplDual = document.getElementById('report-g1-row-template');
    var tplSingle = document.getElementById('report-g1-row-template-single');
    var tplUnitBlock = document.getElementById('report-g1-unit-block-template');
    var tplCmrUnit = document.getElementById('report-g1-row-template-cmr-unit');
    var tplDualUnit = document.getElementById('report-g1-row-template-unit');
    var tplSingleUnit = document.getElementById('report-g1-row-template-single-unit');

    var nameReSingle = /report\[part_g\]\[pictorial_observations\]\[rows\]\[\d+\]/;
    var nameReUnitRow = /report\[part_g\]\[pictorial_observations\]\[units\]\[\d+\]\[rows\]\[\d+\]/;
    var nameReUnit = /report\[part_g\]\[pictorial_observations\]\[units\]\[\d+\]/;

    function isUnitWiseMode() {
        var modeEl = document.getElementById('pms-report-g1-reporting-mode')
            || document.getElementById('pms-report-unit-reporting-mode');
        if (modeEl && modeEl.value) {
            return modeEl.value === 'unit_wise';
        }
        var checked = root.querySelector('.pms-report-unit-mode-radio[name="g1_reporting_structure"]:checked');
        return !!(checked && checked.value === 'unit_wise');
    }

    function modeHidden() {
        return document.getElementById('pms-report-g1-reporting-mode')
            || document.getElementById('pms-report-unit-reporting-mode');
    }

    function rowTemplateEl(unitMode) {
        if (unitMode) {
            if (cmr) return tplCmrUnit;
            return single ? tplSingleUnit : tplDualUnit;
        }
        if (cmr) return tplCmr;
        return single ? tplSingle : tplDual;
    }

    function setInputsDisabled(wrap, dis) {
        if (!wrap) return;
        wrap.querySelectorAll('input, select, textarea, button').forEach(function (el) {
            el.disabled = !!dis;
        });
    }

    window.pmsApplyG1UnitModePanels = function () {
        var m = isUnitWiseMode() ? 'unit_wise' : 'single';
        if (singleWrap) {
            singleWrap.style.display = m === 'single' ? '' : 'none';
            setInputsDisabled(singleWrap, m !== 'single');
        }
        if (unitsWrap) {
            unitsWrap.style.display = m === 'unit_wise' ? '' : 'none';
            setInputsDisabled(unitsWrap, m !== 'unit_wise');
        }
    };

    function padSlot(n) {
        return String(n).length < 2 ? '0' + n : String(n);
    }

    function revokePreview(input) {
        if (input._g1ObjectUrl) {
            URL.revokeObjectURL(input._g1ObjectUrl);
            input._g1ObjectUrl = null;
        }
    }

    function updatePreview(input) {
        var slot = input.closest('.report-g1-slot');
        if (!slot) return;
        var shell = slot.querySelector('.report-g1-upload-shell');
        var img = shell.querySelector('.report-g1-preview-img');
        var pdfName = shell.querySelector('.report-g1-preview-pdf-name');
        var chosen = slot.querySelector('.report-g1-file-chosen');

        revokePreview(input);
        shell.classList.remove('is-filled', 'is-image', 'is-pdf', 'is-dragover');
        if (img) {
            img.removeAttribute('src');
            img.removeAttribute('alt');
        }
        if (pdfName) pdfName.textContent = '';
        if (chosen) chosen.textContent = '';

        var file = input.files && input.files[0];
        if (!file) return;

        if (file.type.indexOf('image/') === 0) {
            var url = URL.createObjectURL(file);
            input._g1ObjectUrl = url;
            img.src = url;
            img.alt = file.name || 'Selected image preview';
            shell.classList.add('is-filled', 'is-image');
        } else if (file.type === 'application/pdf' || /\.pdf$/i.test(file.name)) {
            shell.classList.add('is-filled', 'is-pdf');
            if (chosen) chosen.textContent = file.name;
        } else {
            shell.classList.add('is-filled');
            if (chosen) chosen.textContent = file.name;
        }
    }

    function clearFile(btn) {
        var slot = btn.closest('.report-g1-slot');
        if (!slot) return;
        var input = slot.querySelector('input.report-g1-file');
        if (!input) return;
        revokePreview(input);
        input.value = '';
        ensureEmptyStorageInputs(slot, input);
        slot.querySelectorAll('.report-g1-storage-input, .report-g1-storage-name-input').forEach(function (hi) {
            hi.value = '';
        });
        slot.removeAttribute('data-saved-preview-url');
        updatePreview(input);
    }

    /** Keep empty *_storage / *_original_name fields so draft save & preview treat clear as intentional. */
    function ensureEmptyStorageInputs(slot, fileInput) {
        var fileName = fileInput.getAttribute('name') || '';
        var m = fileName.match(/^(.*)\[(picture_[ab])\]$/);
        if (!m) return;
        var base = m[1];
        var slotKey = m[2];
        function ensureHidden(cls, suffix) {
            var el = slot.querySelector('.' + cls);
            if (el) return el;
            el = document.createElement('input');
            el.type = 'hidden';
            el.name = base + '[' + slotKey + '_' + suffix + ']';
            el.value = '';
            el.className = cls;
            el.setAttribute('data-slot', slotKey);
            slot.insertBefore(el, slot.firstChild);
            return el;
        }
        ensureHidden('report-g1-storage-input', 'storage');
        ensureHidden('report-g1-storage-name-input', 'original_name');
    }

    function showSavedPreview(slot) {
        var url = slot.getAttribute('data-saved-preview-url');
        if (!url) return;
        var shell = slot.querySelector('.report-g1-upload-shell');
        var img = shell && shell.querySelector('.report-g1-preview-img');
        if (!shell || !img) return;
        img.src = url;
        img.alt = 'Saved photo';
        shell.classList.add('is-filled', 'is-image');
        var nameInput = slot.querySelector('.report-g1-storage-name-input');
        var chosen = slot.querySelector('.report-g1-file-chosen');
        if (chosen && nameInput && nameInput.value) {
            chosen.textContent = nameInput.value;
        }
    }

    function updateRowSerial(row, i) {
        var n = i + 1;
        var serial = row.querySelector('.report-g1-serial');
        if (serial) serial.textContent = padSlot(n);
        var cmrSerial = row.querySelector('.report-g1-cmr-serial');
        if (cmrSerial) cmrSerial.textContent = String(n);
        var textareas = row.querySelectorAll('textarea.report-g1-textarea');
        if (cmr) {
            if (textareas[0]) textareas[0].setAttribute('aria-label', 'Specific observations, row ' + n);
            if (textareas[1]) textareas[1].setAttribute('aria-label', 'Updated observation, row ' + n);
            var files = row.querySelectorAll('.report-g1-file');
            if (files[0]) files[0].setAttribute('aria-label', 'Previos picture, row ' + n);
            if (files[1]) files[1].setAttribute('aria-label', 'New picture, row ' + n);
        } else {
            if (textareas[0]) textareas[0].setAttribute('aria-label', 'Description, observation ' + padSlot(n));
            var files2 = row.querySelectorAll('.report-g1-file');
            if (files2[0]) files2[0].setAttribute('aria-label', 'Primary photo, row ' + n);
            if (files2[1]) files2[1].setAttribute('aria-label', 'Supporting view, row ' + n);
        }
    }

    function syncRemoveButtons(rowList) {
        var rows = rowList.querySelectorAll('.report-g1-data-row');
        rows.forEach(function (row) {
            var rm = row.querySelector('.report-g1-remove-row');
            if (rm) rm.style.visibility = rows.length <= 1 ? 'hidden' : 'visible';
        });
    }

    function syncUnitRemoveButtons() {
        if (!unitsContainer) return;
        var blocks = unitsContainer.querySelectorAll('[data-g1-unit-block]');
        blocks.forEach(function (block) {
            var rm = block.querySelector('.report-g1-remove-unit');
            if (rm) rm.style.visibility = blocks.length <= 1 ? 'hidden' : 'visible';
        });
    }

    function renumberSingleList() {
        if (!list) return;
        list.querySelectorAll('.report-g1-data-row').forEach(function (row, i) {
            row.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(nameReSingle, 'report[part_g][pictorial_observations][rows][' + i + ']');
            });
            updateRowSerial(row, i);
        });
        syncRemoveButtons(list);
    }

    function renumberUnitBlocks() {
        if (!unitsContainer) return;
        unitsContainer.querySelectorAll('[data-g1-unit-block]').forEach(function (block, uIdx) {
            block.querySelectorAll('[name]').forEach(function (el) {
                if (el.name.indexOf('[unit_name]') !== -1 || el.name.indexOf('[rows]') !== -1) {
                    el.name = el.name.replace(nameReUnit, 'report[part_g][pictorial_observations][units][' + uIdx + ']');
                }
            });
            var rowList = block.querySelector('.report-g1-unit-rows');
            if (!rowList) return;
            rowList.querySelectorAll('.report-g1-data-row').forEach(function (row, rIdx) {
                row.querySelectorAll('[name]').forEach(function (el) {
                    el.name = el.name.replace(
                        nameReUnitRow,
                        'report[part_g][pictorial_observations][units][' + uIdx + '][rows][' + rIdx + ']'
                    );
                });
                updateRowSerial(row, rIdx);
            });
            syncRemoveButtons(rowList);
        });
        syncUnitRemoveButtons();
    }

    function renumberAll() {
        if (isUnitWiseMode()) {
            renumberUnitBlocks();
        } else {
            renumberSingleList();
        }
    }

    function assignFileToInput(input, file) {
        if (!input || !file) return;
        var dt = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;
        updatePreview(input);
    }

    function slotHasPicture(slot) {
        if (!slot) return false;
        var input = slot.querySelector('input.report-g1-file');
        if (input && input.files && input.files.length) return true;
        var storage = slot.querySelector('.report-g1-storage-input');
        if (storage && String(storage.value || '').trim() !== '') return true;
        var shell = slot.querySelector('.report-g1-upload-shell');
        return !!(shell && shell.classList.contains('is-filled'));
    }

    /** Prefer empty Primary (picture_a), then Supporting (picture_b), creating a new row when both are full. */
    function findOrCreateEmptyPictureSlot(rowList, unitMode) {
        if (!rowList) return null;
        var rows = rowList.querySelectorAll('.report-g1-data-row');
        var i;
        var row;
        var slots;
        var s;
        var slot;
        for (i = 0; i < rows.length; i++) {
            row = rows[i];
            slots = row.querySelectorAll('.report-g1-slot');
            if (!slots.length) {
                slots = [row];
            }
            for (s = 0; s < slots.length; s++) {
                slot = slots[s];
                if (!slotHasPicture(slot)) {
                    var input = slot.querySelector('input.report-g1-file');
                    if (input) {
                        return input;
                    }
                }
            }
        }
        row = appendNewRow(rowList, unitMode, false);
        if (!row) return null;
        slot = row.querySelector('.report-g1-slot') || row;
        return slot.querySelector('input.report-g1-file');
    }

    function isAllowedG1File(file) {
        if (!file) return false;
        if (file.type && file.type.indexOf('image/') === 0) return true;
        if (file.type === 'application/pdf') return true;
        return /\.(jpe?g|png|gif|webp|bmp|pdf)$/i.test(file.name || '');
    }

    function unitIndexForBlock(block) {
        if (!unitsContainer || !block) return 0;
        return Array.prototype.indexOf.call(unitsContainer.querySelectorAll('[data-g1-unit-block]'), block);
    }

    function appendNewRow(rowList, unitMode, focusTextarea) {
        var tpl = rowTemplateEl(unitMode);
        if (!tpl || !rowList) return null;
        var ix = rowList.querySelectorAll('.report-g1-data-row').length;
        var uIdx = 0;
        if (unitMode) {
            var block = rowList.closest('[data-g1-unit-block]');
            uIdx = unitIndexForBlock(block);
        }
        var frag = document.importNode(tpl.content, true);
        var row = frag.querySelector('.report-g1-data-row');
        if (!row) return null;
        row.querySelectorAll('[name]').forEach(function (el) {
            if (unitMode) {
                el.name = el.name.replace(/__U__/g, String(uIdx)).replace(/__R__/g, String(ix));
            } else {
                el.name = el.name.replace(/__R__/g, String(ix));
            }
        });
        rowList.appendChild(row);
        bindCard(row);
        renumberAll();
        if (focusTextarea) {
            var ta = row.querySelector('textarea.report-g1-textarea');
            if (ta) ta.focus();
        }
        return row;
    }

    function processBulkFiles(rowList, unitMode, files, bulkInput) {
        if (!files.length) return;
        var assigned = 0;
        var skipped = 0;
        files.forEach(function (file) {
            if (!isAllowedG1File(file)) {
                skipped++;
                return;
            }
            var input = findOrCreateEmptyPictureSlot(rowList, unitMode);
            if (!input) {
                skipped++;
                return;
            }
            assignFileToInput(input, file);
            assigned++;
        });
        if (bulkInput) bulkInput.value = '';
        renumberAll();
        if (assigned === 0 && skipped > 0 && typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'info',
                title: @json(__('No pictures added')),
                text: @json(__('Only image or PDF files are supported (max 3 MB each on save).')),
            });
        } else if (skipped > 0 && typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'warning',
                title: @json(__('Some files were skipped')),
                text: assigned + ' ' + @json(__('picture(s) added.')) + ' ' + skipped + ' ' + @json(__('file(s) were skipped.')),
            });
        }
    }

    function appendNewUnit(focusName) {
        if (!tplUnitBlock || !unitsContainer) return null;
        var uIdx = unitsContainer.querySelectorAll('[data-g1-unit-block]').length;
        var frag = document.importNode(tplUnitBlock.content, true);
        var block = frag.querySelector('[data-g1-unit-block]');
        if (!block) return null;
        block.querySelectorAll('[name]').forEach(function (el) {
            el.name = el.name.replace(/__U__/g, String(uIdx));
        });
        unitsContainer.appendChild(block);
        var rowList = block.querySelector('.report-g1-unit-rows');
        if (rowList) appendNewRow(rowList, true, false);
        bindUnitBlock(block);
        renumberAll();
        if (focusName) {
            var nameInput = block.querySelector('.report-g1-unit-name-input');
            if (nameInput) nameInput.focus();
        }
        return block;
    }

    function bindSlot(slot) {
        if (!slot || slot.dataset.g1Bound) return;
        slot.dataset.g1Bound = '1';
        showSavedPreview(slot);
        var input = slot.querySelector('input.report-g1-file');
        var shell = slot.querySelector('.report-g1-upload-shell');
        var clearBtn = slot.querySelector('.report-g1-clear-file');
        if (!input || !shell) return;

        input.addEventListener('change', function () {
            updatePreview(input);
        });
        if (clearBtn) {
            clearBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                clearFile(clearBtn);
            });
        }
        shell.addEventListener('dragover', function (e) {
            e.preventDefault();
            e.stopPropagation();
            shell.classList.add('is-dragover');
        });
        shell.addEventListener('dragleave', function (e) {
            e.preventDefault();
            if (!shell.contains(e.relatedTarget)) shell.classList.remove('is-dragover');
        });
        shell.addEventListener('drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            shell.classList.remove('is-dragover');
            var dt = e.dataTransfer;
            if (dt && dt.files && dt.files.length) {
                try {
                    input.files = dt.files;
                } catch (err) {
                    return;
                }
                updatePreview(input);
            }
        });
    }

    function bindCard(row) {
        row.querySelectorAll('.report-g1-slot').forEach(bindSlot);
    }

    function bindUnitBlock(block) {
        if (!block || block.dataset.g1UnitBound) return;
        block.dataset.g1UnitBound = '1';
        block.querySelectorAll('.report-g1-data-row').forEach(bindCard);
        var bulkInput = block.querySelector('.report-g1-unit-bulk-files');
        var bulkBtn = block.querySelector('.report-g1-unit-bulk-upload-btn');
        if (!cmr && bulkBtn && bulkInput) {
            bulkBtn.addEventListener('click', function () {
                bulkInput.click();
            });
            bulkInput.addEventListener('change', function () {
                var rowList = block.querySelector('.report-g1-unit-rows');
                processBulkFiles(rowList, true, Array.prototype.slice.call(bulkInput.files || []), bulkInput);
            });
        }
        var addRowBtn = block.querySelector('.report-g1-unit-add-row');
        if (addRowBtn) {
            addRowBtn.addEventListener('click', function () {
                var rowList = block.querySelector('.report-g1-unit-rows');
                appendNewRow(rowList, true, true);
            });
        }
    }

    root.addEventListener('click', function (e) {
        var rm = e.target.closest('.report-g1-remove-row');
        if (rm) {
            var rowList = rm.closest('.report-g1-unit-rows') || list;
            if (!rowList || !rowList.contains(rm)) return;
            if (rowList.querySelectorAll('.report-g1-data-row').length <= 1) return;
            var row = rm.closest('.report-g1-data-row');
            if (row) {
                row.querySelectorAll('input.report-g1-file').forEach(function (inp) {
                    revokePreview(inp);
                });
                row.parentNode.removeChild(row);
            }
            renumberAll();
            return;
        }

        var addUnitBtn = e.target.closest('.report-g1-add-unit');
        if (addUnitBtn && unitsContainer && unitsContainer.contains(addUnitBtn)) {
            appendNewUnit(true);
            return;
        }

        var rmUnitBtn = e.target.closest('.report-g1-remove-unit');
        if (rmUnitBtn && unitsContainer && unitsContainer.contains(rmUnitBtn)) {
            if (unitsContainer.querySelectorAll('[data-g1-unit-block]').length <= 1) return;
            var block = rmUnitBtn.closest('[data-g1-unit-block]');
            if (block) {
                block.querySelectorAll('input.report-g1-file').forEach(function (inp) {
                    revokePreview(inp);
                });
                block.parentNode.removeChild(block);
            }
            renumberAll();
        }
    });

    if (btnAdd && list) {
        btnAdd.addEventListener('click', function () {
            appendNewRow(list, false, true);
        });
    }

    var bulkInput = document.getElementById('report-g1-bulk-files');
    var bulkBtn = document.getElementById('report-g1-bulk-upload-btn');
    if (!cmr && bulkBtn && bulkInput && list) {
        bulkBtn.addEventListener('click', function () {
            bulkInput.click();
        });
        bulkInput.addEventListener('change', function () {
            processBulkFiles(list, false, Array.prototype.slice.call(bulkInput.files || []), bulkInput);
        });
    }

    if (list) {
        list.querySelectorAll('.report-g1-data-row').forEach(bindCard);
        list.querySelectorAll('input.report-g1-file').forEach(function (inp) {
            if (inp.files && inp.files.length) updatePreview(inp);
        });
        syncRemoveButtons(list);
    }

    if (unitsContainer) {
        unitsContainer.querySelectorAll('[data-g1-unit-block]').forEach(bindUnitBlock);
        syncUnitRemoveButtons();
    }

    root.querySelectorAll('.pms-report-unit-mode-radio[name="g1_reporting_structure"]').forEach(function (r) {
        r.addEventListener('change', function () {
            if (!r.checked) return;
            var h = modeHidden();
            if (h) h.value = r.value;
            window.pmsApplyG1UnitModePanels();
        });
    });

    window.pmsApplyG1UnitModePanels();
    renumberAll();
})();
</script>
@endpush