{{-- Prepared By & Checked By (readonly); submit shown on this page --}}
                    @php
                        // PC-IV / PC-V: numbered final step from wizard counter. PC-III: unnumbered title.
                        if ($pciIsPcV ?? false) {
                            $pciSigStepTitle = ((int) ($pciWizardStep ?? 1)) . '. Signatures & submit';
                        } elseif ($pciIsPcIv ?? false) {
                            $pciSigStepTitle = ((int) ($pciWizardStep ?? 1)) . '. Signatures & submit';
                        } elseif ($pciIsPcIii ?? false) {
                            $pciSigStepTitle = 'Signatures & submit';
                        } elseif (! empty($pciSigStepTitleOverride)) {
                            $pciSigStepTitle = $pciSigStepTitleOverride;
                        } else {
                            $pciSigStepTitle = (17 + (int) ($pciIiWizardTitleBump ?? 0) + (int) ($pciIiTfWizardTitleBump ?? 0) + (int) ($pciIiOutcomeWizardTitleBump ?? 0)) . '. Signatures & submit';
                        }
                    @endphp
                    <div class="pci-page pci-signatures-wizard-page{{ ($pciIsPcIv ?? false) ? ' pci-pc-iv-signatures-page' : '' }}{{ ($pciIsPcV ?? false) ? ' pci-pc-v-signatures-page' : '' }}" data-page="{{ $pciWizardStep }}" data-pci-nav-key="signatures" data-pci-step-title="{{ $pciSigStepTitle }}" data-pci-step-theme="5" data-pci-step-icon="pen-fancy" id="pci-signatures-wizard-page">
                        <div class="pci-gi-wrap">
                            <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-sect-prepared-body" aria-expanded="true" id="pci-sect-prepared-toggle">
                                <span class="pci-gi-bar-title">Prepared By</span>
                                <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                            </button>
                            <div id="pci-sect-prepared-body" class="collapse show">
                                <div class="pci-gi-mint">
                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.readonly-input label="Name:" name="prepared_by_name" :value="$preparedBy['name'] ?? '—'" placeholder="—" />
                                </div>
                                <div class="col-md-6">
                                    <x-form.readonly-input label="Designation:" name="prepared_by_designation" :value="$preparedBy['designation'] ?? '—'" placeholder="—" />
                                </div>
                                <div class="col-md-6">
                                    <x-form.readonly-input label="Department/Agency:" name="prepared_by_department" :value="$preparedBy['department'] ?? '—'" placeholder="—" />
                                </div>
                                <div class="col-md-6">
                                    <x-form.readonly-input label="Date:" name="prepared_by_date" :value="$preparedBy['date'] ?? '—'" placeholder="—" />
                                </div>
                                @if($pciIsPcIiiB ?? false)
                                    @include('pc-forms.partials.pc-iii-b-mpr-summary-preview')
                                @endif
                                @php
                                    $preparedSigUrl = pc_signer_signature_src($preparedBy ?? []);
                                    $__prepUid = isset($preparedBy['preparer_user_id']) ? (int) $preparedBy['preparer_user_id'] : 0;
                                    $__isPreparer = auth()->check() && $__prepUid > 0 && (int) auth()->id() === $__prepUid;
                                    $__prepSavedUrl = '';
                                    if ($__isPreparer) {
                                        $__prepSavedUrl = $preparedSigUrl !== ''
                                            ? $preparedSigUrl
                                            : user_signature_preview_url(auth()->user(), null);
                                    }
                                    $__canUseSavedSig = $__isPreparer && $__prepSavedUrl !== '';
                                    $pciUsesForwardSubmit = $pciUsesForwardSubmit ?? false;
                                @endphp
                                <div class="{{ $__isPreparer ? 'col-12 col-md-6' : 'col-12 col-md-6' }}">
                                    <div class="form-group">
                                        <label>Signature:</label>
                                        @if(!$__isPreparer)
                                            <div class="pci-signature-box form-control form-control-sm pci-readonly" style="min-height: 80px; display: flex; align-items: center; justify-content: center;">
                                                @if($preparedSigUrl !== '')
                                                    <img src="{{ $preparedSigUrl }}" alt="Prepared by signature" class="pci-signature-img" style="max-height: 70px; max-width: 100%; object-fit: contain;" onerror="this.style.display='none';var s=this.nextElementSibling;if(s)s.classList.remove('d-none');">
                                                    <span class="text-muted d-none">—</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </div>
                                        @elseif($pciUsesForwardSubmit)
                                            <div class="pci-signature-box form-control form-control-sm pci-readonly" style="min-height: 80px; display: flex; align-items: center; justify-content: center;">
                                                @if($__prepSavedUrl !== '')
                                                    <img src="{{ $__prepSavedUrl }}" alt="Prepared by signature" class="pci-signature-img" style="max-height: 70px; max-width: 100%; object-fit: contain;" onerror="this.style.display='none';var s=this.nextElementSibling;if(s)s.classList.remove('d-none');">
                                                    <span class="text-muted small text-center px-2 d-none">Your signature will be captured when you submit.</span>
                                                @else
                                                    <span class="text-muted small text-center px-2">Your signature will be captured when you submit.</span>
                                                @endif
                                            </div>
                                        @else
                                            <input type="hidden" name="pci_prepared_signature_drawn" id="pci_prepared_signature_drawn" value="">
                                            <div class="pci-prepared-sig-ui border rounded p-2 bg-light" data-prepared-sig-panel="1">
                                                <div class="mb-2 small text-muted" role="radiogroup" aria-label="How to apply prepared-by signature">Choose one:</div>
                                                <div class="d-flex pci-prepared-sig-method mb-2" style="gap: 1rem;">
                                                    @if($__canUseSavedSig)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="pci_prepared_signature_method" id="pci_prep_sig_method_saved" value="saved" {{ $__canUseSavedSig ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="pci_prep_sig_method_saved">Use Existing</label>
                                                        </div>
                                                    @endif
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="pci_prepared_signature_method" id="pci_prep_sig_method_draw" value="draw" {{ $__canUseSavedSig ? '' : 'checked' }}>
                                                        <label class="form-check-label" for="pci_prep_sig_method_draw">Draw New</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="pci_prepared_signature_method" id="pci_prep_sig_method_upload" value="upload">
                                                        <label class="form-check-label" for="pci_prep_sig_method_upload">Upload New</label>
                                                    </div>
                                                </div>
                                                <div class="pci-prepared-sig-pane pci-prepared-sig-pane-saved small text-muted mb-2" style="{{ $__canUseSavedSig ? '' : 'display:none;' }}">
                                                    @if($__canUseSavedSig)
                                                        <div class="pci-signature-box form-control form-control-sm pci-readonly" style="min-height: 80px; display: flex; align-items: center; justify-content: center;">
                                                            <img src="{{ $__prepSavedUrl }}" alt="Saved signature preview" class="pci-signature-img" style="max-height: 70px; max-width: 100%; object-fit: contain;" onerror="this.style.display='none';var s=this.nextElementSibling;if(s)s.classList.remove('d-none');">
                                                            <span class="text-muted d-none">—</span>
                                                        </div>
                                                        
                                                    @endif
                                                </div>
                                                <div class="pci-prepared-sig-pane pci-prepared-sig-pane-draw" style="{{ $__canUseSavedSig ? 'display:none;' : '' }}">
                                                    <div class="pci-prepared-sig-pad-wrap">
                                                        <!-- <small class="text-muted d-block mb-1">Draw in the box below.</small> -->
                                                        <canvas class="pci-prepared-sig-canvas" id="pciPreparedSigCanvas" width="400" height="140" aria-label="Draw prepared-by signature"></canvas>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary mt-1" id="pciPreparedSigClearBtn">Clear drawing</button>
                                                    </div>
                                                </div>
                                                <div class="pci-prepared-sig-pane pci-prepared-sig-pane-upload" style="display:none;">
                                                    <label for="pciPreparedSigFile" class="small d-block mb-1">Select a PNG or JPEG file. It will be scaled to fit the signature area.</label>
                                                    <input type="file" class="form-control-file form-control-sm" id="pciPreparedSigFile" accept="image/png,image/jpeg,.png,.jpg,.jpeg" autocomplete="off">
                                                    <div class="mt-2 pci-prepared-sig-upload-preview-wrap" style="display:none;">
                                                        <span class="small text-muted">Preview:</span>
                                                        <img src="" alt="" id="pciPreparedSigUploadPreview" class="pci-signature-img border bg-white p-1 rounded d-block mt-1" style="max-height: 90px; max-width: 100%; object-fit: contain;">
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                                </div>
                            </div>
                        </div>

                        <div class="pci-gi-wrap">
                            <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-sect-checked-body" aria-expanded="true" id="pci-sect-checked-toggle">
                                <span class="pci-gi-bar-title">Checked By</span>
                                <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                            </button>
                            <div id="pci-sect-checked-body" class="collapse show">
                                <div class="pci-gi-mint pci-section-body" data-signature-section="check">
                            @if($pciUsesForwardSubmit ?? false)
                                <p class="text-muted small mb-0">Checker signatures appear here after review actions in the workflow.</p>
                            @else
                            @php
                                $emptySignature = ['name' => '—', 'designation' => '—', 'department' => '—', 'date' => '—', 'signature_image' => null, 'signature_image_url' => '', 'signature_display_url' => '', 'preparer_user_id' => null];
                                $checkedByList = $checkedByList ?? [];
                                $checkedSlots = max(0, (int) ($signatureCounts['required_checks'] ?? count($checkedByList)));
                            @endphp
                            <div data-signature-list="check">
                            @for($checkerIndex = 1; $checkerIndex <= $checkedSlots; $checkerIndex++)
                            @php $checkerItem = $checkedByList[$checkerIndex] ?? $emptySignature; @endphp
                            <div class="mb-4 pci-signature-slot {{ $checkerIndex > 1 ? 'mt-4 pt-3 border-top' : '' }}" data-signature-role="check" data-signature-slot="{{ $checkerIndex }}">
                                @if($checkerIndex > 1)
                                    <h6 class="text-muted mb-3">Checker {{ $checkerIndex }}</h6>
                                @endif
                                <div class="row">
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Name:" name="checked_by_{{ $checkerIndex }}_name" :value="$checkerItem['name'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Designation:" name="checked_by_{{ $checkerIndex }}_designation" :value="$checkerItem['designation'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Department/Agency:" name="checked_by_{{ $checkerIndex }}_department" :value="$checkerItem['department'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Date:" name="checked_by_{{ $checkerIndex }}_date" :value="$checkerItem['date'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label>Signature:</label>
                                            <div class="pci-signature-box form-control form-control-sm pci-readonly" style="min-height: 80px; display: flex; align-items: center; justify-content: center;">
                                                @php $sigUrlCheck = pc_signer_signature_src($checkerItem); @endphp
                                                @if($sigUrlCheck !== '')
                                                    <img src="{{ $sigUrlCheck }}" alt="Checked by {{ $checkerIndex }} signature" class="pci-signature-img" style="max-height: 70px; max-width: 100%; object-fit: contain;">
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endfor
                            </div>
                            <div class="text-muted small {{ $checkedSlots > 0 ? 'd-none' : '' }}" data-signature-empty-note="check">No checker signature fields for this project.</div>
                            @endif
                                </div>
                            </div>
                        </div>

                        <div class="pci-gi-wrap">
                            <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-sect-approved-body" aria-expanded="true" id="pci-sect-approved-toggle">
                                <span class="pci-gi-bar-title">Approved By</span>
                                <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                            </button>
                            <div id="pci-sect-approved-body" class="collapse show">
                                <div class="pci-gi-mint pci-section-body" data-signature-section="approve">
                            @if($pciUsesForwardSubmit ?? false)
                                <p class="text-muted small mb-0">Approver signatures appear here after approval actions in the workflow.</p>
                            @else
                            @php
                                $approvedByList = $approvedByList ?? [];
                                $approvedSlots = max(0, (int) ($signatureCounts['department_required_approvals'] ?? count($approvedByList)));
                            @endphp
                            <div data-signature-list="approve">
                            @for($approverIndex = 1; $approverIndex <= $approvedSlots; $approverIndex++)
                            @php $approverItem = $approvedByList[$approverIndex] ?? $emptySignature; @endphp
                            <div class="mb-4 pci-signature-slot {{ $approverIndex > 1 ? 'mt-4 pt-3 border-top' : '' }}" data-signature-role="approve" data-signature-slot="{{ $approverIndex }}">
                                @if($approverIndex > 1)
                                    <h6 class="text-muted mb-3">Approver {{ $approverIndex }}</h6>
                                @endif
                                <div class="row">
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Name:" name="approved_by_{{ $approverIndex }}_name" :value="$approverItem['name'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Designation:" name="approved_by_{{ $approverIndex }}_designation" :value="$approverItem['designation'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Department/Agency:" name="approved_by_{{ $approverIndex }}_department" :value="$approverItem['department'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.readonly-input label="Date:" name="approved_by_{{ $approverIndex }}_date" :value="$approverItem['date'] ?? '—'" placeholder="—" />
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label>Signature:</label>
                                            <div class="pci-signature-box form-control form-control-sm pci-readonly" style="min-height: 80px; display: flex; align-items: center; justify-content: center;">
                                                @php $sigUrlApprove = ($approverItem['show_signature'] ?? true) ? pc_signer_signature_src($approverItem) : ''; @endphp
                                                @if($sigUrlApprove !== '')
                                                    <img src="{{ $sigUrlApprove }}" alt="Approved by {{ $approverIndex }} signature" class="pci-signature-img" style="max-height: 70px; max-width: 100%; object-fit: contain;">
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endfor
                            </div>
                            <div class="text-muted small {{ $approvedSlots > 0 ? 'd-none' : '' }}" data-signature-empty-note="approve">No approver signature fields for this project.</div>
                            @endif
                                </div>
                            </div>
                        </div>
                    </div>