@extends('layouts.app')

@php
    $dec = static fn ($v): string => mws_notice_decode_plain((string) ($v ?? ''));
    $decHtml = static fn ($v): string => mws_notice_decode_inline_html((string) ($v ?? ''));
    $formVal = static fn ($v): string => mws_notice_form_value((string) ($v ?? ''));
    $formValHtml = static fn ($v): string => mws_notice_decode_inline_html((string) ($v ?? ''));
    $schemeLabel = trim($dec($letter['scheme_name'] ?? ''));
    if ($schemeLabel === '') {
        $schemeLabel = 'PC Form #'.(int) ($pcForm->id ?? 0);
    }
    $sigCode = (string) ($letter['sig_code'] ?? 'DEPT');
    $workflowMeta = is_array($workflowMeta ?? null) ? $workflowMeta : [];
    $bodyParagraphs = $letter['body_paragraphs'] ?? [];
    if (! is_array($bodyParagraphs) || $bodyParagraphs === []) {
        $bodyParagraphs = [
            'It is, therefore, requested that the aforesaid Administrative Approval may kindly be authenticated and returned to this Department.',
        ];
    }
    $ccLines = $letter['cc_lines'] ?? [];
    $editBodyParagraphs = $editDefaults['body_paragraphs'] ?? $bodyParagraphs;
    if (! is_array($editBodyParagraphs)) {
        $editBodyParagraphs = $bodyParagraphs;
    }
    $sigState = is_array($letterSignature ?? null) ? $letterSignature : [];
    $sigEffective = trim((string) ($sigState['effective_url'] ?? ($letter['letter_signature_url'] ?? '')));
    $sigDrawn = trim((string) ($sigState['drawn_url'] ?? ''));
    $sigUploaded = trim((string) ($sigState['uploaded_url'] ?? ''));
    $aaBackLabel = str_contains((string) ($returnUrl ?? ''), 'meeting-workspace')
        ? '← Back to workspace'
        : '← Back to PC Forms';
    $aaBodyParaHtml = static function ($para) use ($decHtml): string {
        $raw = preg_replace('/^[ \t\r\n]+|[ \t\r\n]+$/u', '', $decHtml($para)) ?? '';
        if ($raw === '') {
            return '';
        }
        $raw = str_replace(["\t", "\u{00A0}"], [str_repeat(' ', 4), ' '], $raw);
        if (preg_match('/<[a-z][\s\S]*>/i', $raw) || str_contains($raw, '&nbsp;')) {
            return nl2br($raw, false);
        }

        return nl2br(e($raw));
    };
@endphp

@section('title', 'AA (Administrative Approval) — '.$schemeLabel)

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/pc-aa-letter.css') }}">
@endpush

@section('contents')
    <section class="content">
        <div id="pcAaLetterStatic"
             class="pc-aa-letter-root"
             data-save-url="{{ $saveUrl }}"
             data-return-url="{{ $returnUrl }}"
             data-recipients-url="{{ $aaRecipientsUrl ?? '' }}"
             data-mws-meeting-id="{{ (int) ($mwsMeetingId ?? 0) }}"
             data-forward-recipients='@json($aaForwardRecipients ?? [])'
             data-can-edit="{{ $canEdit ? '1' : '0' }}"
             data-can-edit-sig="{{ (! empty($canEdit) && ! empty($canEditSignature)) ? '1' : '0' }}"
             data-pc-form-id="{{ (int) ($pcForm->id ?? 0) }}">
            <div class="pc-aa-letter-actions no-print d-flex flex-wrap gap-2 mb-2 align-items-center">
                <a href="{{ $returnUrl }}" class="btn btn-default btn-sm">{{ $aaBackLabel }}</a>
                <button type="button" class="btn btn-default btn-sm" onclick="window.print()"><i class="fas fa-print mr-1"></i>Print</button>
                @if (!empty($workflowMeta['can_edit_cover']) || !empty($workflowMeta['can_generate']) || !empty($workflowMeta['can_da_approve']) || !empty($workflowMeta['can_forward_fd']) || !empty($workflowMeta['can_fd_act']) || !empty($isForwarded) || !empty($canEdit))
                    <a href="{{ route('pc-forms.aa-cover-letter', $pcForm) }}" class="btn btn-outline-secondary btn-sm" target="_blank" rel="noopener">Cover letter</a>
                @endif
                @if ($canEdit)
                    <span class="pc-aa-edit-toolbar d-inline-flex flex-wrap gap-2 align-items-center">
                        <button type="button" class="btn btn-default btn-sm" id="pcAaLetterEditBtn">Edit letter fields</button>
                        <button type="button" class="btn btn-primary btn-sm d-none" id="pcAaLetterSaveBtn">Save AA letter</button>
                        <button type="button" class="btn btn-default btn-sm d-none" id="pcAaLetterCancelBtn">Cancel</button>
                    </span>
                @endif
                <span class="pc-aa-workflow-toolbar d-inline-flex flex-wrap gap-2 align-items-center" id="pcAaWorkflowToolbar"
                      data-pc-form-id="{{ (int) ($pcForm->id ?? 0) }}"
                      data-meta='@json($workflowMeta ?? [])'
                      data-csrf="{{ csrf_token() }}">
                    @if (!empty($workflowMeta['can_submit_to_da']))
                        <button type="button" class="btn btn-success btn-sm" data-aa-wf-action="submit-to-da">Submit to Department Approver</button>
                    @endif
                    @if (!empty($workflowMeta['can_da_approve']))
                        <button type="button" class="btn btn-success btn-sm" data-aa-wf-action="approve-da">Approve AA</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" data-aa-wf-action="return-da">Return to generator</button>
                    @endif
                    @if (!empty($workflowMeta['can_forward_fd']))
                        <button type="button" class="btn btn-primary btn-sm" data-aa-wf-action="forward-fd">Forward to FD</button>
                    @endif
                    @if (!empty($workflowMeta['can_fd_act']))
                        <button type="button" class="btn btn-success btn-sm" data-aa-wf-action="authenticate">Authenticate</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" data-aa-wf-action="reject">Reject</button>
                        <button type="button" class="btn btn-outline-primary btn-sm" data-aa-wf-action="fd-forward">Forward within FD</button>
                        <button type="button" class="btn btn-outline-warning btn-sm" data-aa-wf-action="fd-return">Return within FD</button>
                    @endif
                    @if (!empty($workflowMeta['label']))
                        <span class="badge badge-info align-self-center">{{ $workflowMeta['label'] }}</span>
                    @endif
                </span>
            </div>
            <div class="pc-aa-letter-sheet">

            <header class="aa-notice-header aa-notice-header--new">
                <div class="aa-header-ref aa-header-ref--full">
                    <div class="aa-ref-line aa-ref-no text-right">
                        <span class="aa-view-only">{{ $dec($letter['reference_no'] ?? '') }}</span>
                        <input type="text" class="aa-field-input aa-edit-only" id="pcAaRefInput" value="{{ $formVal($editDefaults['reference_no'] ?? '') }}" hidden>
                    </div>
                    <div class="aa-ref-line aa-ref-dept text-center"><strong>Government of Sindh</strong></div>
                    <div class="aa-ref-line aa-ref-dept text-center"><strong>{{ $dec($letter['department_upper'] ?? '') }}</strong></div>
                    <div class="aa-ref-line aa-ref-dated text-right">Karachi dated the {{ $dec($letter['letter_date_long'] ?? '') }}</div>
                </div>
            </header>

            <div class="aa-addr-subject">
                <div class="aa-grid-subject">
                    <div class="aa-cell-center" style="grid-column: 1 / -1;">
                        <div class="aa-subject-value text-center"><strong><u>ADMINISTRATIVE APPROVAL</u></strong></div>
                    </div>
                </div>
                <input type="hidden" id="pcAaAttentionInput" value="{{ $formVal($editDefaults['attention_line'] ?? ($letter['attention_line'] ?? '')) }}">
            </div>

            <div class="aa-body-wrap">
                @if ($canEdit)
                    <div class="aa-body-toolbar-host aa-edit-only no-print" hidden>
                        <div class="aa-body-toolbar-row">
                            <span class="aa-body-toolbar-spacer" aria-hidden="true"></span>
                            <div class="aa-body-toolbar" role="toolbar" aria-label="Body text formatting">
                                <button type="button" class="aa-body-cmd" data-aa-body-cmd="bold" title="Bold"><strong>B</strong></button>
                                <button type="button" class="aa-body-cmd" data-aa-body-cmd="italic" title="Italic"><em>I</em></button>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="aa-body" id="pcAaBodyList">
                    @foreach ($bodyParagraphs as $idx => $para)
                        <div class="aa-body-row" data-aa-body-row>
                            <p class="aa-view-only aa-body-part-view">{!! $aaBodyParaHtml($para) !!}</p>
                            @if ($canEdit)
                                <div class="aa-edit-only aa-body-field-wrap no-print" hidden>
                                    <div class="aa-body-editor" data-aa-body-editor contenteditable="true" spellcheck="true" aria-label="Body paragraph"></div>
                                    <textarea class="aa-body-sync-ta" hidden rows="1" tabindex="-1" aria-hidden="true" data-aa-body-input>{{ $formValHtml($editBodyParagraphs[$idx] ?? $para) }}</textarea>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
                @if ($canEdit)
                    <div class="aa-section-actions aa-edit-only no-print" hidden>
                        <button type="button" class="btn btn-default btn-xs" id="pcAaAddBodyPara">Add paragraph</button>
                    </div>
                @endif
            </div>

            <div class="aa-sig-block aa-sig-block--primary aa-sig-block--da text-right">
                @if (!empty($letter['da_letter_signature_url']))
                    <div class="notice-sign-img-wrap ml-auto"><img class="notice-sign-img" src="{{ $letter['da_letter_signature_url'] }}" alt=""></div>
                @else
                    <div class="sign-line ml-auto" aria-hidden="true"></div>
                @endif
                <div class="aa-sig-desig"><strong>({{ $dec($letter['da_approver_name'] ?: '________________') }})</strong></div>
                <div class="aa-sig-desig">{{ $dec($letter['da_approver_designation'] ?? 'Secretary to Government of Sindh') }}</div>
                <div class="aa-sig-desig">{{ $dec($letter['da_approver_department'] ?? '') }}</div>
            </div>

            <div class="aa-fd-endorsement mt-4" @if (empty($letter['show_fd_endorsement'])) style="opacity:0.85;" @endif>
                <div class="d-flex justify-content-between flex-wrap mb-2">
                    <div>{{ $dec($letter['fd_ref_no'] ?? 'NO.FD.SO (DEV-    )') }}</div>
                    <div>Karachi, dated the {{ $dec($letter['letter_date_long'] ?? '________ 2026') }}</div>
                </div>
                <div class="mb-3">A copy is forwarded to the Accountant General, Sindh, Karachi for information &amp; necessary action.</div>
                <div class="aa-sig-block text-right">
                    @if (!empty($letter['fd_auth_signature_url']))
                        <div class="notice-sign-img-wrap ml-auto"><img class="notice-sign-img" src="{{ $letter['fd_auth_signature_url'] }}" alt=""></div>
                    @else
                        <div class="sign-line ml-auto" aria-hidden="true"></div>
                    @endif
                    <div class="aa-sig-desig">Section Officer (Dev-    )</div>
                    <div class="aa-sig-desig">Finance Department</div>
                    @if (!empty($letter['fd_auth_name']))
                        <div class="aa-sig-desig small">({{ $dec($letter['fd_auth_name']) }})</div>
                    @endif
                </div>
            </div>

            <div class="aa-cc-sig-wrap mt-4">
            <div class="aa-cc">
                <div class="d-flex justify-content-between flex-wrap mb-1">
                    <div>{{ $dec($letter['reference_no'] ?? '') }}</div>
                    <div>Karachi, dated the {{ $dec($letter['letter_date_long'] ?? '') }}</div>
                </div>
                <div>A copy is forwarded for information to:=</div>
                <ul class="aa-view-only" id="pcAaCcView">
                    @foreach ($ccLines as $ccLine)
                        <li>{{ $dec($ccLine) }}</li>
                    @endforeach
                </ul>
                <ul class="aa-edit-only list-unstyled mb-0" id="pcAaCcList" hidden>
                    @foreach ($ccLines as $ccLine)
                        <li class="aa-cc-row" data-aa-cc-row>
                            <div class="aa-inline-edit-cell">
                                <textarea class="aa-line-textarea" rows="2" data-aa-cc-input spellcheck="false">{{ $formVal($ccLine) }}</textarea>
                                <span class="aa-row-actions no-print" hidden>
                                    <button type="button" class="btn btn-default btn-xs" data-aa-cc-remove title="Remove">&times;</button>
                                </span>
                            </div>
                        </li>
                    @endforeach
                </ul>
                @if ($canEdit)
                    <div class="aa-section-actions aa-edit-only no-print" hidden>
                        <button type="button" class="btn btn-default btn-xs" id="pcAaAddCc">Add CC line</button>
                    </div>
                @endif
            </div>

            <div class="aa-sig-block aa-sig-block--footer text-right">
                <div class="sign-block aa-sign-block" id="pcAaSignBlock" data-aa-sig-block="1"
                     data-aa-sig-server-effective="{{ e($sigEffective) }}"
                     data-aa-sig-server-drawn="{{ e($sigDrawn) }}"
                     data-aa-sig-server-uploaded="{{ e($sigUploaded) }}"
                     @if ($sigEffective !== '') data-aa-sig-effective-url="{{ e($sigEffective) }}" @endif>
                    <div data-aa-sig-display-wrap="1">
                        @if ($sigEffective !== '')
                            <div class="notice-sign-img-wrap">
                                <img class="notice-sign-img" src="{{ $sigEffective }}" alt="" data-aa-sig-img="1">
                            </div>
                        @else
                            <div class="sign-line" data-aa-sig-placeholder="1" aria-hidden="true"></div>
                        @endif
                    </div>
                    @if ($canEdit && ! empty($canEditSignature))
                        <div class="aa-edit-only no-print" hidden data-aa-sig-editor-wrap="1">
                            <div class="small text-muted mb-1">Generator signature (prints on AA distribution block / cover).</div>
                            <div class="btn-group btn-group-xs mb-1" role="group" aria-label="Signature source">
                                <label class="btn btn-default btn-xs mb-0">
                                    <input type="radio" name="pcAaSigMode" value="draw" autocomplete="off" data-aa-sig-mode-radio="1"> Draw signature
                                </label>
                                <label class="btn btn-default btn-xs mb-0">
                                    <input type="radio" name="pcAaSigMode" value="upload" autocomplete="off" data-aa-sig-mode-radio="1"> Upload / attach
                                </label>
                            </div>
                            <button type="button" class="btn btn-default btn-xs mb-1" data-aa-sig-clear-ui="1">Clear letter preview</button>
                            <div class="notice-mn-sig-canvas-wrap mt-1" data-aa-sig-panel-draw="1" hidden>
                                <canvas class="notice-mn-sig-canvas" data-aa-sig-canvas="1" width="280" height="120" aria-label="Draw signature"></canvas>
                                <div class="notice-mn-sig-actions">
                                    <button type="button" data-aa-sig-pad-clear="1">Clear pad</button>
                                </div>
                            </div>
                            <div class="mt-1" data-aa-sig-panel-upload="1" hidden>
                                <label class="notice-mn-sig-upload-label mb-0">
                                    Select image
                                    <input type="file" class="notice-mn-sig-file-input" accept="image/png,image/jpeg,image/jpg,image/webp,image/gif" data-aa-sig-file="1">
                                </label>
                            </div>
                        </div>
                    @endif
                    <div class="aa-sig-desig"><strong>({{ $dec($letter['generator_name'] ?: '________________') }})</strong></div>
                    <div class="aa-sig-desig">{{ $dec($letter['generator_designation'] ?? 'Deputy Director (Technical)') }}</div>
                </div>
            </div>
            </div>
        </div>

        {{-- Forward-to-FD modal reused by workflow toolbar --}}
        <div class="modal fade" id="pcAaForwardModal" tabindex="-1" role="dialog" aria-labelledby="pcAaForwardModalTitle" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="pcAaForwardModalTitle">Forward AA to Finance</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted small mb-3">Select Finance recipient(s). Workflow signature is for the record only and does not print on the AA letter.</p>
                        <div class="form-group mb-0">
                            <label for="pcAaForwardToUser">Forward to <span class="text-danger">*</span></label>
                            <select class="form-control" id="pcAaForwardToUser" required data-placeholder="Search user by name or designation…">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="pcAaForwardModalConfirm"><i class="fas fa-paper-plane mr-1"></i> Forward</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles_after_adminlte')
    {{-- A4 print overrides: loaded after AdminLTE to beat @page size:a3 and body min-width. --}}
    <style id="pc-aa-letter-print-overrides">
        /*
         * Screen sheet = 210mm with 18mm side padding → 174mm content width.
         * Lock the same content width and grid tracks in print so To/Subject spacing matches view.
         */
        @page {
            size: A4 portrait;
            margin: 10mm 18mm 10mm;
        }
        @media print {
            html, body,
            body.pc-aa-print-active {
                width: auto !important;
                height: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                margin: 0 !important;
                padding: 0 !important;
                background: #fff !important;
                overflow: visible !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            html, body,
            .wrapper,
            .content-wrapper,
            section.content,
            section.content .container-fluid,
            .container,
            .container-fluid {
                min-width: 0 !important;
            }

            .wrapper,
            .content-wrapper {
                margin-left: 0 !important;
            }

            body.pc-aa-print-active .wrapper > .main-header,
            body.pc-aa-print-active .wrapper > .main-sidebar,
            body.pc-aa-print-active .wrapper > .main-footer,
            .main-header,
            .main-sidebar,
            .main-footer,
            footer.main-footer,
            .control-sidebar,
            .preloader,
            .content-header,
            .navbar,
            .pc-aa-letter-actions,
            .no-print,
            .aa-edit-only,
            .aa-row-actions,
            .aa-row-actions-below,
            .aa-section-actions {
                display: none !important;
            }

            .wrapper,
            .content-wrapper,
            section.content,
            section.content .container-fluid {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                max-width: none !important;
                min-height: 0 !important;
                overflow: visible !important;
                background: #fff !important;
            }

            #pcAaLetterStatic.pc-aa-letter-root {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                background: #fff !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet {
                --aa-label-w: 26mm;
                --aa-content-w: 174mm;
                margin: 0 !important;
                box-shadow: none !important;
                width: var(--aa-content-w) !important;
                max-width: var(--aa-content-w) !important;
                min-height: 0 !important;
                height: auto !important;
                max-height: none !important;
                padding: 0 !important;
                box-sizing: border-box !important;
                background: #fff !important;
                overflow: visible !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-notice-header,
            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-top,
            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-attention,
            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-subject {
                display: grid !important;
                grid-template-columns: 26mm 76mm 68mm !important;
                column-gap: 2mm !important;
                align-items: start !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-top .aa-cell-label {
                grid-column: 1 !important;
                grid-row: 1 !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-top .aa-cell-center {
                grid-column: 2 !important;
                grid-row: 2 !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-top .aa-cell-right {
                display: none !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-top .aa-cell-center,
            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-subject .aa-cell-center {
                display: flex !important;
                justify-content: center !important;
                align-items: flex-start !important;
                min-width: 0 !important;
                max-width: 76mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-recipient,
            #pcAaLetterStatic .pc-aa-letter-sheet .aa-subject-value {
                width: 68mm !important;
                max-width: 68mm !important;
            }

            #pcAaLetterStatic .aa-view-only {
                display: block !important;
            }

            /* Compact print rhythm: tighter gaps so body → sig → CC → footer sig stay on one page. */
            #pcAaLetterStatic .pc-aa-letter-sheet {
                font-size: 12pt !important;
                line-height: 1.4 !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-notice-header {
                margin-bottom: 5mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-addr-subject {
                margin-bottom: 4mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-grid-subject {
                margin-top: 3mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-body-wrap {
                margin-top: 3mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-body {
                margin-bottom: 0 !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-body-row + .aa-body-row {
                margin-top: 3mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-sig-block {
                margin-top: 4mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-cc {
                margin-top: 4mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-sig-block--footer {
                margin-top: 4mm !important;
            }

            #pcAaLetterStatic .aa-cc-sig-wrap {
                display: block !important;
            }

            #pcAaLetterStatic .aa-sign-block {
                page-break-inside: avoid !important;
                break-inside: avoid-page !important;
            }

            #pcAaLetterStatic .aa-sign-block .notice-sign-img-wrap,
            #pcAaLetterStatic .aa-sign-block .sign-line {
                min-height: 8mm !important;
                margin-bottom: 0.5mm !important;
            }

            #pcAaLetterStatic .aa-sign-block .notice-sign-img {
                max-height: 12mm !important;
                max-width: 48mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-sig-date {
                margin-top: 1mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-sig-desig {
                margin-top: 0.5mm !important;
                line-height: 1.2 !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-cc ul {
                margin-top: 1mm !important;
            }

            #pcAaLetterStatic .pc-aa-letter-sheet .aa-cc li {
                margin-bottom: 0.5mm !important;
            }
        }
    </style>
@endpush

@push('scripts')
<script>
(function () {
    var root = document.getElementById('pcAaLetterStatic');
    if (!root) return;

    var canEdit = root.getAttribute('data-can-edit') === '1';
    var canEditSig = root.getAttribute('data-can-edit-sig') === '1';
    var saveUrl = root.getAttribute('data-save-url') || '';
    var recipientsUrl = root.getAttribute('data-recipients-url') || '';
    var mwsMeetingId = root.getAttribute('data-mws-meeting-id') || '';
    var forwardRecipientsPreload = [];
    try {
        forwardRecipientsPreload = JSON.parse(root.getAttribute('data-forward-recipients') || '[]');
        if (!Array.isArray(forwardRecipientsPreload)) forwardRecipientsPreload = [];
    } catch (eForwardPreload) {
        forwardRecipientsPreload = [];
    }
    var returnUrl = root.getAttribute('data-return-url') || '';
    var editBtn = document.getElementById('pcAaLetterEditBtn');
    var cancelBtn = document.getElementById('pcAaLetterCancelBtn');
    var saveBtn = document.getElementById('pcAaLetterSaveBtn');
    var csrf = document.querySelector('meta[name="csrf-token"]');
    var token = csrf ? csrf.getAttribute('content') : '';

    var aaBodyList = document.getElementById('pcAaBodyList');
    var aaBodyActiveEditor = null;
    var AA_TAB_HTML = '&nbsp;&nbsp;&nbsp;&nbsp;';

    function aaTabPlain(text) {
        return String(text || '').replace(/\t/g, '\u00A0\u00A0\u00A0\u00A0');
    }

    function aaPreserveWs(text) {
        return aaTabPlain(text)
            .replace(/\r|\n/g, ' ')
            .replace(/[^\S\u00A0]+/g, ' ')
            .replace(/\u00A0/g, '&nbsp;');
    }

    function aaTrimEdges(s) {
        return String(s || '').replace(/^[ \t\r\n]+|[ \t\r\n]+$/g, '');
    }

    function aaLineHasContent(s) {
        return aaTrimEdges(String(s || '').replace(/&nbsp;/g, '').replace(/\u00A0/g, '')) !== '';
    }

    function insertAaTabStop() {
        try {
            document.execCommand('insertHTML', false, AA_TAB_HTML);
        } catch (errTab) {
            try {
                document.execCommand('insertText', false, '\u00A0\u00A0\u00A0\u00A0');
            } catch (errText) {}
        }
    }

    function storageToEditorHtml(storage) {
        var lines = aaTabPlain(String(storage || '')).split(/\r\n|\n|\r/);
        if (lines.length === 1 && lines[0] === '') {
            return '<br>';
        }
        return lines.map(function (ln) {
            return ln === '' ? '<br>' : ln;
        }).join('<br>');
    }

    function serializeAaBodyEditor(editor) {
        function inlineSerialize(el) {
            var buf = '';
            for (var i = 0; i < el.childNodes.length; i++) {
                var c = el.childNodes[i];
                if (c.nodeType === 3) {
                    buf += aaPreserveWs(c.textContent || '');
                } else if (c.nodeType === 1) {
                    var t = c.tagName.toLowerCase();
                    if (t === 'br') {
                        buf += ' ';
                    } else if (t === 'b' || t === 'strong') {
                        buf += '<b>' + inlineSerialize(c) + '</b>';
                    } else if (t === 'i' || t === 'em') {
                        buf += '<i>' + inlineSerialize(c) + '</i>';
                    } else {
                        buf += inlineSerialize(c);
                    }
                }
            }
            return aaTrimEdges(buf);
        }
        function topPiece(n) {
            if (n.nodeType === 3) {
                return aaPreserveWs(n.textContent || '');
            }
            if (n.nodeType !== 1) {
                return '';
            }
            var t = n.tagName.toLowerCase();
            if (t === 'b' || t === 'strong') {
                return '<b>' + inlineSerialize(n) + '</b>';
            }
            if (t === 'i' || t === 'em') {
                return '<i>' + inlineSerialize(n) + '</i>';
            }
            return inlineSerialize(n);
        }
        var outLines = [];
        var cur = '';
        for (var j = 0; j < editor.childNodes.length; j++) {
            var n = editor.childNodes[j];
            if (n.nodeType === 1) {
                var tag = n.tagName.toLowerCase();
                if (tag === 'br') {
                    outLines.push(aaTrimEdges(cur));
                    cur = '';
                    continue;
                }
                if (tag === 'div' || tag === 'p') {
                    if (aaLineHasContent(cur)) {
                        outLines.push(aaTrimEdges(cur));
                    }
                    cur = '';
                    outLines.push(inlineSerialize(n));
                    continue;
                }
            }
            cur += topPiece(n);
        }
        if (aaLineHasContent(cur)) {
            outLines.push(aaTrimEdges(cur));
        }
        return outLines.map(function (x) {
            return aaTrimEdges(x);
        }).filter(aaLineHasContent).join('\n');
    }

    function syncAaBodyEditorToTextarea(ed) {
        if (!ed) return;
        var wrap = ed.closest('.aa-body-field-wrap');
        var ta = wrap ? wrap.querySelector('[data-aa-body-input]') : null;
        if (!ta) return;
        ta.value = serializeAaBodyEditor(ed);
    }

    function syncAllAaBodyEditors() {
        if (!aaBodyList) return;
        aaBodyList.querySelectorAll('[data-aa-body-editor]').forEach(syncAaBodyEditorToTextarea);
    }

    function initAaBodyEditorInWrap(wrap) {
        if (!wrap) return;
        var ed = wrap.querySelector('[data-aa-body-editor]');
        var ta = wrap.querySelector('[data-aa-body-input]');
        if (!ed || !ta) return;
        ed.innerHTML = storageToEditorHtml(ta.value);
        ed.setAttribute('data-aa-body-inited', '1');
    }

    function initAaBodyEditorsFromTextareas() {
        if (!aaBodyList) return;
        aaBodyList.querySelectorAll('.aa-body-field-wrap').forEach(function (wrap) {
            var ed = wrap.querySelector('[data-aa-body-editor]');
            if (!ed || ed.getAttribute('data-aa-body-inited') === '1') return;
            initAaBodyEditorInWrap(wrap);
        });
    }

    function syncAaBodyViewsFromEditors() {
        syncAllAaBodyEditors();
        if (!aaBodyList) return;
        aaBodyList.querySelectorAll('.aa-body-row').forEach(function (row) {
            var ta = row.querySelector('[data-aa-body-input]');
            var view = row.querySelector('.aa-body-part-view');
            if (ta && view) {
                view.innerHTML = ta.value;
            }
        });
    }

    function setEditing(on) {
        root.classList.toggle('pc-aa--editing', !!on);
        root.querySelectorAll('.aa-edit-only').forEach(function (el) {
            el.hidden = !on;
        });
        root.querySelectorAll('.aa-row-actions, .aa-row-actions-below').forEach(function (el) {
            if (on) {
                el.removeAttribute('hidden');
            } else {
                el.setAttribute('hidden', 'hidden');
            }
        });
        if (editBtn) editBtn.classList.toggle('d-none', on);
        if (cancelBtn) cancelBtn.classList.toggle('d-none', !on);
        if (saveBtn) saveBtn.classList.toggle('d-none', !on);
        if (on) {
            initAaBodyEditorsFromTextareas();
            if (typeof window.__pcAaSyncSigMirror === 'function') {
                window.__pcAaSyncSigMirror();
            }
        }
    }

    function collectBodyParagraphs() {
        syncAllAaBodyEditors();
        var out = [];
        root.querySelectorAll('[data-aa-body-input]').forEach(function (ta) {
            out.push(aaTrimEdges(ta.value || ''));
        });
        return out;
    }

    function collectCcLines() {
        var out = [];
        root.querySelectorAll('[data-aa-cc-input]').forEach(function (ta) {
            var t = (ta.value || '').trim();
            if (t !== '') out.push(t);
        });
        return out;
    }

    function bindBodyRemove(btn) {
        btn.addEventListener('click', function () {
            var row = btn.closest('[data-aa-body-row][data-aa-body-added="1"]');
            if (row) {
                row.remove();
            }
        });
    }

    function bindCcRemove(btn) {
        btn.addEventListener('click', function () {
            var row = btn.closest('[data-aa-cc-row]');
            if (row) row.remove();
        });
    }

    root.querySelectorAll('[data-aa-body-remove]').forEach(bindBodyRemove);
    root.querySelectorAll('[data-aa-cc-remove]').forEach(bindCcRemove);

    var addBodyBtn = document.getElementById('pcAaAddBodyPara');
    if (addBodyBtn) {
        addBodyBtn.addEventListener('click', function () {
            var list = document.getElementById('pcAaBodyList');
            if (!list) return;
            var row = document.createElement('div');
            row.className = 'aa-body-row';
            row.setAttribute('data-aa-body-row', '1');
            row.setAttribute('data-aa-body-added', '1');
            row.innerHTML = '<p class="aa-view-only aa-body-part-view"></p>' +
                '<div class="aa-edit-only aa-body-field-wrap no-print">' +
                '<div class="aa-body-editor" data-aa-body-editor contenteditable="true" spellcheck="true" aria-label="Body paragraph"></div>' +
                '<textarea class="aa-body-sync-ta" hidden rows="1" tabindex="-1" aria-hidden="true" data-aa-body-input></textarea>' +
                '<div class="aa-row-actions-below no-print">' +
                '<button type="button" class="btn btn-default btn-xs" data-aa-body-remove title="Remove paragraph">Remove paragraph</button>' +
                '</div></div>';
            list.appendChild(row);
            var rm = row.querySelector('[data-aa-body-remove]');
            if (rm) bindBodyRemove(rm);
            var wrap = row.querySelector('.aa-body-field-wrap');
            if (wrap) initAaBodyEditorInWrap(wrap);
        });
    }

    var addCcBtn = document.getElementById('pcAaAddCc');
    if (addCcBtn) {
        addCcBtn.addEventListener('click', function () {
            var list = document.getElementById('pcAaCcList');
            if (!list) return;
            var li = document.createElement('li');
            li.className = 'aa-cc-row';
            li.setAttribute('data-aa-cc-row', '1');
            li.innerHTML = '<div class="aa-inline-edit-cell">' +
                '<textarea class="aa-line-textarea" rows="2" data-aa-cc-input spellcheck="false"></textarea>' +
                '<span class="aa-row-actions no-print"><button type="button" class="btn btn-default btn-xs" data-aa-cc-remove title="Remove">&times;</button></span>' +
                '</div>';
            list.appendChild(li);
            var rm = li.querySelector('[data-aa-cc-remove]');
            if (rm) bindCcRemove(rm);
        });
    }

    if (editBtn) editBtn.addEventListener('click', function () { setEditing(true); });
    if (cancelBtn) {
        cancelBtn.addEventListener('click', function () {
            setEditing(false);
            window.location.reload();
        });
    }

    if (aaBodyList) {
        aaBodyList.addEventListener('focusin', function (e) {
            var ed = e.target.closest('[data-aa-body-editor]');
            if (ed && aaBodyList.contains(ed)) {
                aaBodyActiveEditor = ed;
            }
        });
        aaBodyList.addEventListener('input', function (e) {
            var ed = e.target.closest('[data-aa-body-editor]');
            if (!ed || !aaBodyList.contains(ed)) return;
            syncAaBodyEditorToTextarea(ed);
        });
        aaBodyList.addEventListener('paste', function (e) {
            var ed = e.target.closest('[data-aa-body-editor]');
            if (!ed || !aaBodyList.contains(ed)) return;
            try {
                e.preventDefault();
                var clip = e.clipboardData || window.clipboardData;
                var txt = clip ? clip.getData('text/plain') || '' : '';
                var parts = String(txt).split(/\r\n|\n|\r/);
                parts.forEach(function (line, i) {
                    if (i > 0) {
                        try { document.execCommand('insertLineBreak', false, null); } catch (eBr) {
                            try { document.execCommand('insertHTML', false, '<br>'); } catch (eHtml) {}
                        }
                    }
                    document.execCommand('insertText', false, aaTabPlain(line));
                });
            } catch (errPaste) {}
        });
        aaBodyList.addEventListener('keydown', function (e) {
            var ed = e.target.closest('[data-aa-body-editor]');
            if (!ed || !aaBodyList.contains(ed)) return;
            if ((e.key === 'Tab' || e.keyCode === 9) && !e.ctrlKey && !e.metaKey && !e.altKey) {
                if (e.shiftKey) return;
                e.preventDefault();
                e.stopPropagation();
                insertAaTabStop();
                syncAaBodyEditorToTextarea(ed);
                return;
            }
            if (e.key !== 'Enter' || e.ctrlKey || e.metaKey || e.altKey) return;
            e.preventDefault();
            try { document.execCommand('insertLineBreak', false, null); } catch (eLb) {
                try { document.execCommand('insertHTML', false, '<br>'); } catch (eHtml) {}
            }
        }, true);
    }

    root.addEventListener('keydown', function (e) {
        if ((e.key !== 'Tab' && e.keyCode !== 9) || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
        var ta = e.target.closest('textarea.aa-line-textarea, textarea[data-aa-cc-input]');
        if (!ta || !root.contains(ta) || ta.hasAttribute('hidden')) return;
        e.preventDefault();
        var start = ta.selectionStart;
        var end = ta.selectionEnd;
        if (typeof start !== 'number' || typeof end !== 'number') return;
        var insert = '\u00A0\u00A0\u00A0\u00A0';
        ta.value = ta.value.slice(0, start) + insert + ta.value.slice(end);
        ta.selectionStart = ta.selectionEnd = start + insert.length;
    });

    root.addEventListener('mousedown', function (e) {
        var btn = e.target.closest('[data-aa-body-cmd]');
        if (!btn || !root.contains(btn)) return;
        e.preventDefault();
        var ed = aaBodyActiveEditor;
        if (!ed || !aaBodyList || !aaBodyList.contains(ed)) {
            ed = aaBodyList ? aaBodyList.querySelector('[data-aa-body-editor]') : null;
        }
        if (!ed) return;
        ed.focus();
        var cmd = btn.getAttribute('data-aa-body-cmd');
        try {
            if (cmd === 'bold') document.execCommand('bold', false, null);
            else if (cmd === 'italic') document.execCommand('italic', false, null);
        } catch (errCmd) {}
    });

    var pcAaPrintRestoreEditing = false;
    window.addEventListener('beforeprint', function () {
        document.body.classList.add('pc-aa-print-active');
        if (root.classList.contains('pc-aa--editing')) {
            syncAaBodyViewsFromEditors();
            pcAaPrintRestoreEditing = true;
            setEditing(false);
        }
    });
    window.addEventListener('afterprint', function () {
        document.body.classList.remove('pc-aa-print-active');
        if (pcAaPrintRestoreEditing) {
            setEditing(true);
            pcAaPrintRestoreEditing = false;
        }
    });

    function signatureOkForSave() {
        if (!canEditSig) return true;
        if (typeof window.__pcAaGetLetterSignaturePayload === 'function') {
            var p = window.__pcAaGetLetterSignaturePayload();
            if (p) return true;
        }
        var block = document.getElementById('pcAaSignBlock');
        var eff = block ? (block.getAttribute('data-aa-sig-effective-url') || '').trim() : '';
        return eff !== '';
    }

    function selectedRecipientUserIds() {
        var sel = document.getElementById('pcAaForwardToUser');
        if (!sel) return [];
        var val = (sel.value || '').toString().trim();
        var id = parseInt(val, 10);
        return id > 0 ? [id] : [];
    }

    function recipientOkForSave() {
        if (!canEdit || !recipientsUrl) return true;
        return selectedRecipientUserIds().length > 0;
    }

    function destroyAaRecipientSelect() {
        if (typeof window.jQuery === 'undefined') return;
        var $sel = window.jQuery('#pcAaForwardToUser');
        if ($sel.length && typeof $sel.select2 === 'function' && $sel.data('select2')) {
            $sel.select2('destroy');
        }
    }

    function initAaRecipientSelect() {
        if (!canEdit || !recipientsUrl || typeof window.jQuery === 'undefined') return;
        var $ = window.jQuery;
        var $sel = $('#pcAaForwardToUser');
        var $modal = $('#pcAaForwardModal');
        if (!$sel.length || typeof $sel.select2 !== 'function') return;
        destroyAaRecipientSelect();
        $sel.empty().append($('<option>', { value: '' }));
        $sel.select2({
            theme: 'bootstrap4',
            width: '100%',
            allowClear: true,
            placeholder: $sel.data('placeholder') || 'Search user by name or designation…',
            dropdownParent: $modal,
            minimumInputLength: 0,
            data: forwardRecipientsPreload,
            ajax: {
                url: recipientsUrl,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    var payload = { q: params.term || '', page: params.page || 1 };
                    if (mwsMeetingId && parseInt(mwsMeetingId, 10) > 0) {
                        payload.mws_meeting_id = parseInt(mwsMeetingId, 10);
                    }
                    return payload;
                },
                processResults: function (data) {
                    return {
                        results: (data && data.results) ? data.results : [],
                        pagination: (data && data.pagination) ? data.pagination : { more: false }
                    };
                },
                cache: true,
                transport: function (params, success, failure) {
                    var request = $.ajax(params);
                    request.then(success);
                    request.fail(function (xhr) {
                        var msg = (xhr.responseJSON && xhr.responseJSON.message)
                            ? xhr.responseJSON.message
                            : 'Unable to load forward recipients.';
                        if (typeof Swal !== 'undefined') Swal.fire('Recipients', msg, 'warning');
                        failure();
                    });
                    return request;
                }
            }
        });
    }

    function openAaForwardModal() {
        initAaRecipientSelect();
        if (typeof window.jQuery !== 'undefined') {
            window.jQuery('#pcAaForwardModal').modal('show');
        }
    }

    if (typeof window.jQuery !== 'undefined') {
        var $aaForwardModal = window.jQuery('#pcAaForwardModal');
        $aaForwardModal.on('shown.bs.modal', function () {
            var $sel = window.jQuery('#pcAaForwardToUser');
            if ($sel.data('select2')) {
                $sel.select2('open');
            }
        });
        $aaForwardModal.on('hidden.bs.modal', function () {
            destroyAaRecipientSelect();
        });
    }

    function doSave() {
        var pcFormId = parseInt(root.getAttribute('data-pc-form-id') || '0', 10);
        var payload = {
            reference_no: (document.getElementById('pcAaRefInput') || {}).value || '',
            attention_line: (document.getElementById('pcAaAttentionInput') || {}).value || '',
            body_paragraphs: collectBodyParagraphs(),
            cc_list: collectCcLines().join('\n'),
            forward_to_user_ids: selectedRecipientUserIds()
        };
        if (pcFormId > 0) payload.pc_form_id = pcFormId;
        if (typeof window.__pcAaGetLetterSignaturePayload === 'function') {
            var sig = window.__pcAaGetLetterSignaturePayload();
            if (sig) payload.letter_signature = sig;
        }
        if (saveBtn) saveBtn.disabled = true;
        fetch(saveUrl, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': token,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
        .then(function (res) {
            if (saveBtn) saveBtn.disabled = false;
            if (!res.ok || !res.body || !res.body.ok) {
                var msg = (res.body && res.body.message) ? res.body.message : 'Could not save AA (Administrative Approval) letter.';
                if (typeof Swal !== 'undefined') Swal.fire('Error', msg, 'error');
                else alert(msg);
                return;
            }
            if (typeof Swal !== 'undefined') {
                Swal.fire('Saved', res.body.message || 'AA letter saved.', 'success').then(function () {
                    window.location.href = res.body.redirect_url || window.location.href;
                });
            } else {
                window.location.href = res.body.redirect_url || returnUrl;
            }
        }).catch(function () {
            if (saveBtn) saveBtn.disabled = false;
            if (typeof Swal !== 'undefined') Swal.fire('Error', 'Network error while saving.', 'error');
            else alert('Network error while saving.');
        });
    }

    if (saveBtn) {
        saveBtn.addEventListener('click', function () {
            if (!saveUrl) return;
            doSave();
        });
    }

    var forwardModalConfirm = document.getElementById('pcAaForwardModalConfirm');
    var pendingForwardFd = false;
    if (forwardModalConfirm) {
        forwardModalConfirm.addEventListener('click', function () {
            if (!recipientOkForSave()) {
                var recMsg = 'Please select a recipient before forwarding.';
                if (typeof Swal !== 'undefined') Swal.fire('Recipient required', recMsg, 'warning');
                else alert(recMsg);
                return;
            }
            if (typeof window.jQuery !== 'undefined') {
                window.jQuery('#pcAaForwardModal').modal('hide');
            }
            if (pendingForwardFd) {
                pendingForwardFd = false;
                postAaWorkflow('forward-fd', {
                    forward_to_user_ids: selectedRecipientUserIds(),
                    remarks: 'Forwarded AA to Finance Department'
                });
            }
        });
    }

    function postAaWorkflow(action, body) {
        var formId = root.getAttribute('data-pc-form-id') || '0';
        var url = '{{ url('pc-forms') }}/' + formId + '/aa-workflow/' + action;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': token,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify(body || {})
        }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
        .then(function (res) {
            if (!res.ok || !res.body || !res.body.ok) {
                var msg = (res.body && res.body.message) ? res.body.message : 'Workflow action failed.';
                if (typeof Swal !== 'undefined') Swal.fire('Error', msg, 'error');
                else alert(msg);
                return;
            }
            if (typeof Swal !== 'undefined') {
                Swal.fire('Done', res.body.message || 'OK', 'success').then(function () { window.location.reload(); });
            } else {
                window.location.reload();
            }
        }).catch(function () {
            if (typeof Swal !== 'undefined') Swal.fire('Error', 'Network error.', 'error');
            else alert('Network error.');
        });
    }

    function promptRemarksThen(action, title) {
        var ask = (typeof Swal !== 'undefined')
            ? Swal.fire({ title: title || 'Remarks', input: 'textarea', inputPlaceholder: 'Comments…', showCancelButton: true, confirmButtonText: 'Submit' })
            : Promise.resolve({ isConfirmed: true, value: window.prompt(title || 'Remarks') || '' });
        return ask.then(function (res) {
            if (!res || res.isConfirmed === false) return;
            var remarks = (res.value || '').trim();
            if (!remarks && (action === 'return-da' || action === 'reject' || action === 'fd-return' || action === 'fd-forward')) {
                alert('Remarks are required.');
                return;
            }
            if (action === 'fd-forward') {
                var toId = window.prompt('Enter Finance user ID to forward to:');
                if (!toId) return;
                postAaWorkflow(action, { to_user_id: parseInt(toId, 10), remarks: remarks });
                return;
            }
            if (action === 'authenticate' || action === 'reject') {
                var ids = selectedRecipientUserIds();
                if (!ids.length) {
                    openAaForwardModal();
                    pendingForwardFd = false;
                    window.__pcAaPendingAuthAction = action;
                    window.__pcAaPendingAuthRemarks = remarks;
                    return;
                }
                var payload = { remarks: remarks, forward_to_user_ids: ids };
                postAaWorkflow(action, payload);
                return;
            }
            postAaWorkflow(action, { remarks: remarks });
        });
    }

    document.querySelectorAll('[data-aa-wf-action]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var action = btn.getAttribute('data-aa-wf-action');
            if (action === 'submit-to-da' || action === 'approve-da') {
                postAaWorkflow(action, {});
                return;
            }
            if (action === 'forward-fd') {
                pendingForwardFd = true;
                openAaForwardModal();
                return;
            }
            if (action === 'return-da') {
                promptRemarksThen(action, 'Return remarks');
                return;
            }
            if (action === 'authenticate' || action === 'reject' || action === 'fd-return' || action === 'fd-forward') {
                promptRemarksThen(action, action === 'authenticate' ? 'Authentication remarks (optional)' : 'Remarks');
            }
        });
    });

    if (canEdit && /[?&]edit=1/.test(window.location.search)) {
        setEditing(true);
    }
})();
</script>
@if (! empty($canEdit) && ! empty($canEditSignature))
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
    <script>
    (function () {
        var root = document.getElementById('pcAaLetterStatic');
        var blocks = root ? root.querySelectorAll('[data-aa-sig-block="1"]') : [];
        if (!blocks.length) return;

        var primaryBlock = document.getElementById('pcAaSignBlock') || blocks[0];
        var serverEffective = (primaryBlock.getAttribute('data-aa-sig-server-effective') || '').trim();
        var serverDrawn = (primaryBlock.getAttribute('data-aa-sig-server-drawn') || '').trim();
        var serverUploaded = (primaryBlock.getAttribute('data-aa-sig-server-uploaded') || '').trim();
        var mode = '';
        var pendingDrawDataUrl = null;
        var pendingUpload = null;
        var uiLetterCleared = false;
        var pads = [];

        function allInRoot(sel) {
            return root ? root.querySelectorAll(sel) : [];
        }

        function resizeAaSigCanvas(canvas) {
            if (!canvas) return;
            var ratio = Math.max(window.devicePixelRatio || 1, 1);
            var w = canvas.offsetWidth || 280;
            var h = canvas.offsetHeight || 120;
            if (w <= 0) w = 280;
            if (h <= 0) h = 120;
            canvas.width = w * ratio;
            canvas.height = h * ratio;
            canvas.getContext('2d').scale(ratio, ratio);
        }

        function ensurePads() {
            if (typeof SignaturePad === 'undefined') return;
            allInRoot('[data-aa-sig-canvas="1"]').forEach(function (canvas) {
                if (!canvas) return;
                var panel = canvas.closest('[data-aa-sig-panel-draw="1"]');
                if (panel && panel.hidden) return;
                if (canvas.offsetWidth <= 0) return;

                var pad = canvas._aaSigPad || null;
                if (pad) {
                    var saved = (!pad.isEmpty && !pad.isEmpty()) ? pad.toDataURL('image/png') : (pendingDrawDataUrl || '');
                    resizeAaSigCanvas(canvas);
                    if (saved && typeof pad.fromDataURL === 'function') {
                        pad.fromDataURL(saved);
                    }
                    return;
                }

                resizeAaSigCanvas(canvas);
                pad = new SignaturePad(canvas, { minWidth: 0.5, maxWidth: 2.5 });
                canvas._aaSigPad = pad;
                canvas.setAttribute('data-aa-sig-pad-ready', '1');
                pads.push(pad);
                if (typeof pad.addEventListener === 'function') {
                    pad.addEventListener('endStroke', function () {
                        if (mode !== 'draw' || !pad || pad.isEmpty()) return;
                        pendingDrawDataUrl = pad.toDataURL('image/png');
                        refreshLetterSigPreview();
                    });
                }
            });
        }

        function setDisplayOnBlock(block, url) {
            var wrap = block.querySelector('[data-aa-sig-display-wrap="1"]');
            if (!wrap) return;
            var u = (url && String(url).trim()) ? String(url).trim() : '';
            while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
            if (u === '') {
                block.removeAttribute('data-aa-sig-effective-url');
                var ph = document.createElement('div');
                ph.className = 'sign-line';
                ph.setAttribute('data-aa-sig-placeholder', '1');
                ph.setAttribute('aria-hidden', 'true');
                wrap.appendChild(ph);
            } else {
                block.setAttribute('data-aa-sig-effective-url', u);
                var outer = document.createElement('div');
                outer.className = 'notice-sign-img-wrap';
                var img = document.createElement('img');
                img.className = 'notice-sign-img';
                img.alt = '';
                img.setAttribute('data-aa-sig-img', '1');
                img.src = u + (u.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now();
                outer.appendChild(img);
                wrap.appendChild(outer);
            }
        }

        function updateDisplayUrl(url) {
            blocks.forEach(function (block) {
                setDisplayOnBlock(block, url);
            });
        }

        window.__pcAaSyncSigMirror = function () {
            var u = (primaryBlock.getAttribute('data-aa-sig-effective-url') || serverEffective || '').trim();
            updateDisplayUrl(u);
        };

        function refreshLetterSigPreview() {
            if (uiLetterCleared && !pendingDrawDataUrl && !pendingUpload && mode === '') {
                updateDisplayUrl('');
                return;
            }
            if (mode === 'draw') {
                updateDisplayUrl(pendingDrawDataUrl || (!uiLetterCleared ? (serverDrawn || serverEffective) : ''));
                return;
            }
            if (mode === 'upload') {
                updateDisplayUrl((pendingUpload && pendingUpload.dataUrl) ? pendingUpload.dataUrl : (!uiLetterCleared ? (serverUploaded || serverEffective) : ''));
                return;
            }
            updateDisplayUrl(!uiLetterCleared ? serverEffective : '');
        }

        function setModePanels() {
            allInRoot('[data-aa-sig-panel-draw="1"]').forEach(function (panel) {
                panel.hidden = mode !== 'draw';
            });
            allInRoot('[data-aa-sig-panel-upload="1"]').forEach(function (panel) {
                panel.hidden = mode !== 'upload';
            });
            if (mode === 'draw') {
                requestAnimationFrame(function () {
                    ensurePads();
                });
            }
        }

        allInRoot('[data-aa-sig-mode-radio="1"]').forEach(function (radio) {
            radio.addEventListener('change', function () {
                if (!radio.checked) return;
                mode = radio.value || '';
                uiLetterCleared = false;
                setModePanels();
                refreshLetterSigPreview();
            });
        });

        allInRoot('[data-aa-sig-clear-ui="1"]').forEach(function (clearUi) {
            clearUi.addEventListener('click', function () {
                uiLetterCleared = true;
                pendingDrawDataUrl = null;
                pendingUpload = null;
                pads.forEach(function (pad) {
                    if (pad) pad.clear();
                });
                allInRoot('[data-aa-sig-mode-radio="1"]').forEach(function (r) { r.checked = false; });
                allInRoot('[data-aa-sig-file="1"]').forEach(function (input) {
                    input.value = '';
                });
                mode = '';
                setModePanels();
                refreshLetterSigPreview();
            });
        });

        allInRoot('[data-aa-sig-pad-clear="1"]').forEach(function (padClear) {
            padClear.addEventListener('click', function () {
                pads.forEach(function (pad) {
                    if (pad) pad.clear();
                });
                pendingDrawDataUrl = null;
                refreshLetterSigPreview();
            });
        });

        allInRoot('[data-aa-sig-file="1"]').forEach(function (fileInput) {
            fileInput.addEventListener('change', function () {
                var file = fileInput.files && fileInput.files[0];
                if (!file) return;
                var reader = new FileReader();
                reader.onload = function () {
                    pendingUpload = { dataUrl: reader.result, name: file.name || 'signature.png' };
                    allInRoot('[data-aa-sig-file="1"]').forEach(function (input) {
                        if (input !== fileInput) input.value = '';
                    });
                    refreshLetterSigPreview();
                };
                reader.readAsDataURL(file);
            });
        });

        window.__pcAaGetLetterSignaturePayload = function () {
            if (mode === 'draw') {
                var url = pendingDrawDataUrl || '';
                allInRoot('[data-aa-sig-canvas="1"]').forEach(function (canvas) {
                    if (url) return;
                    var pad = canvas._aaSigPad || null;
                    if (pad && !pad.isEmpty()) {
                        url = pad.toDataURL('image/png');
                    }
                });
                if (!url) return null;
                return { mode: 'draw', png_data_url: url };
            }
            if (mode === 'upload' && pendingUpload && pendingUpload.dataUrl) {
                return {
                    mode: 'upload',
                    image_data_url: pendingUpload.dataUrl,
                    upload_filename: pendingUpload.name || 'signature.png'
                };
            }
            return null;
        };
    })();
    </script>
@else
    <script>
    window.__pcAaGetLetterSignaturePayload = function () { return null; };
    </script>
@endif
@endpush