@php
    $sig = $reviewerSignature ?? [];
    $showPane = (bool) ($sig['show_pane'] ?? false);
    if (! $showPane) {
        return;
    }
    $roleKey = strtolower((string) ($sig['role'] ?? 'checker'));
    $roleLabel = match ($roleKey) {
        'approver' => 'Approver',
        'department_approver' => 'Department approver',
        default => 'Checker',
    };
    $hasSaved = (bool) ($sig['has_saved_signature'] ?? false);
    $savedUrl = trim((string) ($sig['saved_signature_url'] ?? ''));
    $reqCapture = (bool) ($sig['required'] ?? false);
@endphp
<div class="pci-modal-reviewer-signature-wrap border rounded p-3 mt-3 bg-light"
     data-pci-reviewer-sig-required="{{ $reqCapture ? '1' : '0' }}"
     data-pci-reviewer-sig-has-saved="{{ $hasSaved ? '1' : '0' }}">
    <input type="hidden" id="pcnModalReviewerUseSavedSig" value="{{ $hasSaved ? '1' : '0' }}">
    <input type="hidden" id="pcnModalReviewerSigHidden" value="">
    <p class="small font-weight-bold mb-1">Your signature ({{ $roleLabel }})</p>
    <p class="small text-muted mb-2">Use your signature on file (if available), draw a new one, or upload an image — one method per approval or deferral. New captures are saved to your profile when applicable.</p>
    @if ($hasSaved && $savedUrl !== '')
        <div id="pcnModalReviewerSavedSigWrap" class="mb-3">
            <span class="small text-muted d-block mb-1">Signature on file</span>
            <img src="{{ $savedUrl }}" alt="Saved signature" id="pcnModalReviewerSavedSigImg"
                 class="border rounded bg-white p-2 d-block" style="max-height:96px;max-width:100%;object-fit:contain;">
            <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="pcnModalReviewerSavedSigClear">Use a new signature instead</button>
        </div>
    @endif
    <div class="btn-group btn-group-sm mb-3 flex-wrap" role="group" aria-label="Signature method">
        @if ($hasSaved)
            <button type="button" class="btn btn-outline-primary active" id="pcnModalReviewerSigBtnSaved">On file</button>
        @endif
        <button type="button" class="btn btn-outline-primary {{ $hasSaved ? '' : 'active' }}" id="pcnModalReviewerSigBtnDraw">Draw</button>
        <button type="button" class="btn btn-outline-primary" id="pcnModalReviewerSigBtnUpload">Upload</button>
    </div>
    <div id="pcnModalReviewerSigDrawWrap" class="{{ $hasSaved ? 'd-none' : '' }}">
        <div class="pci-modal-sig-canvas-outer" style="max-width:100%;overflow-x:auto;">
            <canvas id="pcnModalReviewerSigCanvas" width="400" height="140"
                    class="pcn-modal-sig-canvas d-block border bg-white rounded"
                    style="touch-action:none;max-width:100%;"></canvas>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary mt-2 pcn-modal-sig-clear">Clear drawing</button>
    </div>
    <div id="pcnModalReviewerSigUploadWrap" class="d-none">
        <label for="pcnModalReviewerSigUpload" class="small font-weight-bold d-block mb-1">Upload image</label>
        <input type="file" name="pci_reviewer_signature_upload" id="pcnModalReviewerSigUpload" class="form-control-file"
               accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpg,.jpeg,.gif,.webp">
        <small class="form-text text-muted">PNG, JPEG, GIF, or WebP (max 5 MB). Stored on your profile when you submit.</small>
    </div>
</div>