@extends('layouts.app')

@php
    $dec = static fn ($v): string => html_entity_decode((string) ($v ?? ''), ENT_QUOTES | ENT_HTML5, 'UTF-8');
    /** @var array<string, mixed> $adviseLetter */
    $letter = $adviseLetter;
    $ed = $editDefaults ?? [];
    $subjectPlain = trim((string) ($letter['subject_plain'] ?? ''));
    $refDisplay = trim((string) ($letter['reference_display'] ?? ''));
    $sectionLabel = trim((string) ($letter['concurrence_section_label'] ?? ''));
    $sectionEmail = trim((string) ($letter['concurrence_section_email'] ?? ''));
    $letterDateOrdinal = trim((string) ($letter['letter_date_long_ordinal'] ?? ''));
    $recipientLines = is_array($letter['concurrence_recipient_lines'] ?? null)
        ? $letter['concurrence_recipient_lines']
        : [];
    $bodyLead = (string) ($letter['body_lead_text'] ?? '');
    $bodyPoints = is_array($letter['body_points_lines'] ?? null) ? $letter['body_points_lines'] : [];
    if ($bodyPoints === []) {
        $bodyPoints = [''];
    }
    $ccLines = [];
    if (! empty($letter['advise_cc_sentences']) && is_array($letter['advise_cc_sentences'])) {
        $ccLines = array_values(array_filter(array_map(static fn ($l) => trim((string) $l), $letter['advise_cc_sentences']), static fn ($l) => $l !== ''));
    }
    $ccStored = trim((string) (($ed['cc_list'] ?? '') ?: ''));
    if ($ccLines === [] && $ccStored !== '') {
        $ccLines = array_values(array_filter(array_map('trim', preg_split('/\R/u', $ccStored) ?: []), static fn ($l) => $l !== ''));
    }
    $signerName = trim((string) ($letter['concurrence_signer_name'] ?? ''));
    $signerDesig = trim((string) ($letter['concurrence_signer_designation'] ?? ''));
    if ($signerDesig === '' && ! empty($adviseLetterSignatoryMeta['designation'])) {
        $signerDesig = trim((string) $adviseLetterSignatoryMeta['designation']);
    }
    $sigState = is_array($adviseLetterSignature ?? null) ? $adviseLetterSignature : [];
    $sigEffective = trim((string) ($sigState['effective_url'] ?? ''));
    $sigDrawn = trim((string) ($sigState['drawn_url'] ?? ''));
    $sigUploaded = trim((string) ($sigState['uploaded_url'] ?? ''));
    $canEdit = ! empty($canEditAdvise);
    $canEditSig = $canEdit && ! empty($canEditAdviseSignature);
    $bodyParaHtml = static function ($para) use ($dec): string {
        $raw = trim((string) ($para ?? ''));
        if ($raw === '') {
            return '';
        }
        // Fully decode entities so accidental double-encoding still renders as markup, not visible tags.
        $prev = null;
        while ($prev !== $raw) {
            $prev = $raw;
            $raw = html_entity_decode($raw, ENT_QUOTES | ENT_HTML5, 'UTF-8');
        }
        $raw = trim($raw);
        if ($raw === '') {
            return '';
        }
        if (str_contains($raw, '<')) {
            $safe = strip_tags($raw, '<b><strong><i><em><br>');
            $safe = str_ireplace(['<strong>', '</strong>'], ['<b>', '</b>'], $safe);
            $safe = str_ireplace(['<em>', '</em>'], ['<i>', '</i>'], $safe);
            $safe = preg_replace('/<([bi])(\s[^>]*)?>/i', '<$1>', $safe) ?? $safe;
            $safe = preg_replace("/\R/u", '<br>', $safe) ?? $safe;

            return $safe;
        }

        return nl2br(e($raw), false);
    };
    $schemeLabel = trim((string) ($letter['scheme_name'] ?? ''));
    if ($schemeLabel === '') {
        $schemeLabel = (string) ($meeting->reference_id ?? 'Concurrence');
    }
@endphp

@section('title', 'Concurrence — '.$schemeLabel)

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

@section('contents')
    <section class="content">
        <div id="mwsConcurrenceLetterStatic"
             class="mws-concurrence-letter-root"
             data-mws-cl-save-url="{{ route('meeting-workspace.meetings.concurrence-letter.update', $meeting) }}"
             data-mws-cl-meeting-show-url="{{ route('meeting-workspace.meetings.show', $meeting) }}"
             data-mws-cl-pc-form-id="{{ isset($adviseLetterPcFormId) && $adviseLetterPcFormId !== null ? (int) $adviseLetterPcFormId : '' }}"
             data-mws-cl-can-edit="{{ $canEdit ? '1' : '0' }}"
             data-mws-cl-can-edit-sig="{{ $canEditSig ? '1' : '0' }}">
            <div class="mws-concurrence-letter-actions no-print d-flex flex-wrap gap-2 mb-2 align-items-center">
                <a href="{{ route('meeting-workspace.dashboard') }}" class="btn btn-default btn-sm">← Back to workspace</a>
                <button type="button" class="btn btn-default btn-sm" onclick="window.print()"><i class="fas fa-print mr-1"></i>Print</button>
                @if ($canEdit)
                    <span class="mws-cl-edit-toolbar d-inline-flex flex-wrap gap-2 align-items-center">
                        <button type="button" class="btn btn-default btn-sm" id="mwsClEditToggle">Edit concurrence fields</button>
                        <button type="button" class="btn btn-primary btn-sm d-none" id="mwsClSaveBtn">Forward Concurrence</button>
                        <button type="button" class="btn btn-default btn-sm d-none" id="mwsClCancelBtn">Cancel</button>
                    </span>
                @endif
            </div>
            @if ($canEdit && empty($forwardIncrementsPcApproval))
                <p class="small text-muted no-print mb-2">Forwarding saves the concurrence letter; a PC-I approver count increases only if your account has PC Forms approve permission.</p>
            @endif

            <div class="mws-concurrence-letter-sheet" id="mwsClSheet">
                <header class="mws-cl-header">
                    <div class="mws-cl-seal-wrap">
                        <img class="mws-cl-seal-img" src="{{ $letter['logo_url'] ?? asset('assets/dist/img/gos22.png') }}" alt="Government of Sindh">
                    </div>
                    <div aria-hidden="true"></div>
                    <div class="mws-cl-header-ref">
                        <div class="mws-cl-ref-dept">GOVERNMENT OF SINDH</div>
                        <div class="mws-cl-ref-dept">PLANNING &amp; DEVELOPMENT DEPARTMENT</div>
                        @if ($sectionLabel !== '')
                            <div class="mws-cl-ref-section">({{ $dec($sectionLabel) }})</div>
                        @endif
                        @if ($sectionEmail !== '')
                            <div class="mws-cl-ref-email">E-mail: {{ $dec($sectionEmail) }}</div>
                        @endif
                        <div class="mws-cl-ref-no">
                            <span class="mws-cl-view-only">No: {{ $dec($refDisplay) }}</span>
                            @if ($canEdit)
                                <span class="mws-cl-edit-only mws-cl-inline-flex" hidden>No: <input type="text" class="mws-cl-field-input" id="mwsClRefInput" value="{{ e(($ed['ref_after_no'] ?? '') !== '' ? ($ed['ref_after_no'] ?? '') : $refDisplay) }}" style="flex:1;min-width:0;"></span>
                            @endif
                        </div>
                        <div class="mws-cl-ref-dated">Karachi, dated: {{ $dec($letterDateOrdinal) }}</div>
                    </div>
                </header>

                <div class="mws-cl-recipient">
                    @foreach ($recipientLines as $rLine)
                        <div>{{ $dec($rLine) }}</div>
                    @endforeach
                </div>

                <div class="mws-cl-subject-row">
                    <div class="mws-cl-subject-label">SUBJECT: -</div>
                    <div class="mws-cl-subject-value">
                        <span class="mws-cl-view-only" id="mwsClSubjectView">{{ $dec($subjectPlain) }}</span>
                        @if ($canEdit)
                            <textarea class="mws-cl-field-input mws-cl-edit-only" id="mwsClSubjectInput" hidden rows="3">{{ e(($ed['subject'] ?? '') !== '' ? ($ed['subject'] ?? '') : $subjectPlain) }}</textarea>
                        @endif
                    </div>
                </div>

                <div class="mws-cl-body-wrap">
                    @if ($canEdit)
                        <div class="mws-cl-body-toolbar-host mws-cl-edit-only no-print" hidden>
                            <div class="mws-cl-body-toolbar-row">
                                <span class="mws-cl-body-toolbar-spacer" aria-hidden="true"></span>
                                <div class="mws-cl-body-toolbar" role="toolbar" aria-label="Body text formatting">
                                    <button type="button" class="mws-cl-body-cmd" data-mws-cl-body-cmd="bold" title="Bold"><strong>B</strong></button>
                                    <button type="button" class="mws-cl-body-cmd" data-mws-cl-body-cmd="italic" title="Italic"><em>I</em></button>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="mws-cl-body" id="mwsClBodyList">
                        <div class="mws-cl-body-row" data-mws-cl-body-row data-mws-cl-body-lead="1">
                            <div class="mws-cl-view-only mws-cl-body-part-view">{!! $bodyParaHtml($bodyLead) !!}</div>
                            @if ($canEdit)
                                <div class="mws-cl-edit-only mws-cl-body-field-wrap no-print" hidden>
                                    <div class="mws-cl-body-editor" data-mws-cl-body-editor contenteditable="true" spellcheck="true" aria-label="Body paragraph 1"></div>
                                    <textarea class="mws-cl-body-sync-ta" hidden rows="1" tabindex="-1" aria-hidden="true" data-mws-cl-field="body_lead">{{ $dec(($ed['body_lead'] ?? '') !== '' ? ($ed['body_lead'] ?? '') : $bodyLead) }}</textarea>
                                </div>
                            @endif
                        </div>
                        @foreach ($bodyPoints as $idx => $pointLine)
                            <div class="mws-cl-body-row" data-mws-cl-body-row data-mws-cl-body-point="1">
                                <div class="mws-cl-view-only mws-cl-body-part-view"><span class="mws-cl-para-num">{{ $idx + 2 }}.</span> {!! $bodyParaHtml($pointLine) !!}</div>
                                @if ($canEdit)
                                    <div class="mws-cl-edit-only mws-cl-body-field-wrap no-print" hidden>
                                        <div class="mws-cl-body-editor" data-mws-cl-body-editor contenteditable="true" spellcheck="true" aria-label="Body paragraph {{ $idx + 2 }}"></div>
                                        <textarea class="mws-cl-body-sync-ta" hidden rows="1" tabindex="-1" aria-hidden="true" data-mws-cl-field="body_point_line">{{ $dec(($ed['body_points'][$idx] ?? null) !== null ? ($ed['body_points'][$idx] ?? '') : $pointLine) }}</textarea>
                                        <div class="mws-cl-row-actions-below no-print">
                                            <button type="button" class="btn btn-default btn-xs" data-mws-cl-body-remove title="Remove paragraph">Remove paragraph</button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                    @if ($canEdit)
                        <div class="mws-cl-body-actions mws-cl-section-actions mws-cl-edit-only no-print" hidden>
                            <button type="button" class="btn btn-default btn-xs" id="mwsClAddBodyPara">Add paragraph</button>
                        </div>
                    @endif
                </div>

                <div class="mws-cl-sig-block mws-cl-sig-block--primary" id="mwsClSignBlock" data-mws-cl-sig-block="1"
                     data-mws-cl-sig-server-effective="{{ e($sigEffective) }}"
                     data-mws-cl-sig-server-drawn="{{ e($sigDrawn) }}"
                     data-mws-cl-sig-server-uploaded="{{ e($sigUploaded) }}"
                     @if ($sigEffective !== '') data-mws-cl-sig-effective-url="{{ e($sigEffective) }}" @endif>
                    <div data-mws-cl-sig-display-wrap="1">
                        @if ($sigEffective !== '')
                            <div class="notice-sign-img-wrap">
                                <img class="notice-sign-img" src="{{ $sigEffective }}" alt="" data-mws-cl-sig-img="1">
                            </div>
                        @else
                            <div class="mws-cl-sign-line" data-mws-cl-sig-placeholder="1" aria-hidden="true"></div>
                        @endif
                    </div>
                    @if ($canEditSig)
                        <div class="mws-cl-edit-only no-print" hidden data-mws-cl-sig-editor-wrap="1">
                            <div class="small text-muted mb-1">Letter preview only until you forward.</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="mwsClSigMode" value="draw" autocomplete="off" data-mws-cl-sig-mode-radio="1"> Draw
                                </label>
                                <label class="btn btn-default btn-xs mb-0">
                                    <input type="radio" name="mwsClSigMode" value="upload" autocomplete="off" data-mws-cl-sig-mode-radio="1"> Upload
                                </label>
                            </div>
                            <button type="button" class="btn btn-default btn-xs mb-1" data-mws-cl-sig-clear-ui="1">Clear preview</button>
                            <div class="notice-mn-sig-canvas-wrap mt-1" data-mws-cl-sig-panel-draw="1" hidden>
                                <canvas class="notice-mn-sig-canvas" data-mws-cl-sig-canvas="1" width="280" height="120" aria-label="Draw signature"></canvas>
                                <div class="notice-mn-sig-actions">
                                    <button type="button" class="btn btn-default btn-xs" data-mws-cl-sig-pad-clear="1">Clear pad</button>
                                </div>
                            </div>
                            <div class="mt-1" data-mws-cl-sig-panel-upload="1" hidden>
                                <input type="file" accept="image/png,image/jpeg,image/jpg,image/webp,image/gif" data-mws-cl-sig-file="1">
                            </div>
                        </div>
                    @endif
                    @if ($signerName !== '')
                        <div class="mws-cl-signer-name">({{ $dec($signerName) }})</div>
                    @endif
                    @if ($signerDesig !== '')
                        <div class="mws-cl-signer-desig">{{ $dec($signerDesig) }}</div>
                    @endif
                </div>

                <div class="mws-cl-cc-sig-wrap">
                    <div class="mws-cl-cc">
                        <div class="mws-cl-cc-label">C.C.to:-</div>
                        <ul class="mws-cl-view-only mws-cl-cc-list" id="mwsClCcView">
                            @foreach ($ccLines as $ccLine)
                                <li>{{ $dec($ccLine) }}</li>
                            @endforeach
                        </ul>
                        @if ($canEdit)
                            <ul class="mws-cl-edit-only list-unstyled mb-0" id="mwsClCcList" hidden>
                                @foreach ($ccLines as $ccLine)
                                    <li class="mb-1" data-mws-cl-cc-row>
                                        <div class="d-flex gap-1 align-items-start">
                                            <textarea class="mws-cl-line-textarea" rows="2" data-mws-cl-cc-input spellcheck="false">{{ $dec($ccLine) }}</textarea>
                                            <span class="mws-cl-row-actions no-print" hidden>
                                                <button type="button" class="btn btn-default btn-xs" data-mws-cl-cc-remove title="Remove">&times;</button>
                                            </span>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="mws-cl-section-actions mws-cl-edit-only no-print" hidden>
                                <button type="button" class="btn btn-default btn-xs" id="mwsClAddCc">Add CC line</button>
                            </div>
                        @endif
                    </div>

                    {{-- 2nd signature: below C.C., right-aligned (same stacking as AA letter footer block) --}}
                    <div class="mws-cl-sig-block mws-cl-sig-block--footer" id="mwsClSignBlockFooter" data-mws-cl-sig-block="1"
                         data-mws-cl-sig-server-effective="{{ e($sigEffective) }}"
                         data-mws-cl-sig-server-drawn="{{ e($sigDrawn) }}"
                         data-mws-cl-sig-server-uploaded="{{ e($sigUploaded) }}"
                         @if ($sigEffective !== '') data-mws-cl-sig-effective-url="{{ e($sigEffective) }}" @endif>
                        <div data-mws-cl-sig-display-wrap="1">
                            @if ($sigEffective !== '')
                                <div class="notice-sign-img-wrap">
                                    <img class="notice-sign-img" src="{{ $sigEffective }}" alt="" data-mws-cl-sig-img="1">
                                </div>
                            @else
                                <div class="mws-cl-sign-line" data-mws-cl-sig-placeholder="1" aria-hidden="true"></div>
                            @endif
                        </div>
                        @if ($canEditSig)
                            {{-- Editor controls live on the primary block only; footer mirrors the preview (same as AA letter). --}}
                            <div class="mws-cl-edit-only no-print" hidden data-mws-cl-sig-editor-wrap="1"></div>
                        @endif
                        @if ($signerName !== '')
                            <div class="mws-cl-signer-name">({{ $dec($signerName) }})</div>
                        @endif
                        @if ($signerDesig !== '')
                            <div class="mws-cl-signer-desig">{{ $dec($signerDesig) }}</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles_after_adminlte')
    {{-- A4 print overrides: same approach as AA letter (beat AdminLTE @page / min-width). --}}
    <style id="mws-concurrence-letter-print-overrides">
        /*
         * Screen sheet = 210mm with 18mm side padding → 174mm content width.
         * Match AA letter print margins / font so print layout is consistent.
         */
        @page {
            size: A4 portrait;
            margin: 10mm 18mm 10mm;
        }
        @media print {
            html, body {
                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;
            }

            .wrapper > .main-header,
            .wrapper > .main-sidebar,
            .wrapper > .main-footer,
            .main-header,
            .main-sidebar,
            .main-footer,
            footer.main-footer,
            .control-sidebar,
            .preloader,
            .content-header,
            .navbar,
            .mws-concurrence-letter-actions,
            .no-print,
            .mws-cl-edit-only,
            .mws-cl-row-actions,
            .mws-cl-row-actions-below,
            .mws-cl-section-actions,
            .mws-cl-body-toolbar-host,
            .mws-cl-body-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;
            }

            #mwsConcurrenceLetterStatic.mws-concurrence-letter-root {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                background: #fff !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet {
                --mws-cl-content-w: 174mm;
                margin: 0 !important;
                box-shadow: none !important;
                width: var(--mws-cl-content-w) !important;
                max-width: var(--mws-cl-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;
                font-family: "Times New Roman", Times, serif !important;
                font-size: 12pt !important;
                line-height: 1.4 !important;
                color: #000 !important;
            }

            #mwsConcurrenceLetterStatic .mws-cl-view-only {
                display: block !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet.mws-cl--editing .mws-cl-view-only {
                display: block !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet.mws-cl--editing .mws-cl-edit-only {
                display: none !important;
            }

            /* Compact print rhythm (aligned with AA letter). */
            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-header {
                display: grid !important;
                grid-template-columns: 26mm minmax(0, 1fr) minmax(58mm, 68mm) !important;
                column-gap: 2mm !important;
                align-items: start !important;
                margin-bottom: 5mm !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-seal-img {
                width: 20mm !important;
                height: 20mm !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-header-ref {
                text-align: center !important;
                font-size: 11px !important;
                line-height: 1.25 !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-ref-email {
                font-size: 10.5px !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-ref-no,
            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-ref-dated {
                white-space: nowrap !important;
                margin-top: 2px !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-recipient {
                margin: 0 0 4mm !important;
                line-height: 1.35 !important;
                font-size: 12pt !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-subject-row {
                margin-bottom: 4mm !important;
                font-size: 12pt !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-body-wrap {
                margin-top: 3mm !important;
                margin-bottom: 0 !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-body {
                margin-bottom: 0 !important;
                font-size: 12pt !important;
                line-height: 1.4 !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-body-row {
                margin: 0 0 3mm !important;
                text-align: justify !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-body-row + .mws-cl-body-row {
                margin-top: 3mm !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-sig-block {
                page-break-inside: avoid !important;
                break-inside: avoid-page !important;
                font-size: 11px !important;
                line-height: 1.25 !important;
                width: 58mm !important;
                max-width: 48% !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-sig-block--primary {
                margin: 4mm 0 4mm auto !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc-sig-wrap {
                display: block !important;
                margin-top: 4mm !important;
                clear: both !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc {
                font-size: 11pt !important;
                line-height: 1.35 !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc-label {
                font-weight: 700 !important;
                font-style: italic !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc ul,
            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc ul#mwsClCcView {
                display: block !important;
                margin: 1mm 0 0 8mm !important;
                padding: 0 !important;
                list-style-type: disc !important;
                list-style-position: outside !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc ul#mwsClCcList {
                display: none !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-cc li {
                display: list-item !important;
                margin-bottom: 0.5mm !important;
                white-space: normal !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-sig-block--footer {
                margin: 4mm 0 0 auto !important;
            }

            #mwsConcurrenceLetterStatic .mws-cl-sig-block .notice-sign-img-wrap,
            #mwsConcurrenceLetterStatic .mws-cl-sig-block .mws-cl-sign-line {
                min-height: 8mm !important;
                margin-bottom: 0.5mm !important;
            }

            #mwsConcurrenceLetterStatic .mws-cl-sig-block .notice-sign-img {
                max-height: 12mm !important;
                max-width: 48mm !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-signer-name {
                margin-top: 0.5mm !important;
            }

            #mwsConcurrenceLetterStatic .mws-concurrence-letter-sheet .mws-cl-signer-desig {
                margin-top: 0.5mm !important;
                line-height: 1.2 !important;
            }
        }
    </style>
@endpush

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

    var canEdit = root.getAttribute('data-mws-cl-can-edit') === '1';
    var saveUrl = root.getAttribute('data-mws-cl-save-url') || '';
    var returnUrl = root.getAttribute('data-mws-cl-meeting-show-url') || '';
    var pcFormId = root.getAttribute('data-mws-cl-pc-form-id') || '';
    var editBtn = document.getElementById('mwsClEditToggle');
    var saveBtn = document.getElementById('mwsClSaveBtn');
    var cancelBtn = document.getElementById('mwsClCancelBtn');
    var bodyList = document.getElementById('mwsClBodyList');
    var activeBodyEditor = null;
    var editing = false;

    function csrf() {
        var m = document.querySelector('meta[name="csrf-token"]');
        return m ? m.getAttribute('content') : '';
    }

    function decodeBasicEntities(s) {
        var cur = String(s || '');
        for (var n = 0; n < 3; n++) {
            if (!/&(?:amp|lt|gt|quot|#39|#039);/i.test(cur)) {
                break;
            }
            var next = cur
                .replace(/&amp;/gi, '&')
                .replace(/&lt;/gi, '<')
                .replace(/&gt;/gi, '>')
                .replace(/&quot;/gi, '"')
                .replace(/&#0*39;/g, "'")
                .replace(/&#039;/g, "'");
            if (next === cur) {
                break;
            }
            cur = next;
        }
        return cur;
    }

    function storageToEditorHtml(storage) {
        var decoded = decodeBasicEntities(String(storage || ''));
        var lines = decoded.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 serializeBodyEditor(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 += (c.textContent || '').replace(/\r|\n/g, ' ').replace(/\s+/g, ' ');
                } 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 buf.trim();
        }
        function topPiece(n) {
            if (n.nodeType === 3) {
                return (n.textContent || '').replace(/\r|\n/g, ' ').replace(/\s+/g, ' ');
            }
            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(cur.trim());
                    cur = '';
                    continue;
                }
                if (tag === 'div' || tag === 'p') {
                    if (cur.trim()) {
                        outLines.push(cur.trim());
                    }
                    cur = '';
                    outLines.push(inlineSerialize(n));
                    continue;
                }
            }
            cur += topPiece(n);
        }
        if (cur.trim()) {
            outLines.push(cur.trim());
        }
        return outLines.map(function (x) {
            return String(x || '').trim();
        }).filter(function (x) {
            return x !== '';
        }).join('\n');
    }

    function syncBodyEditorToTextarea(ed) {
        if (!ed) return;
        var wrap = ed.closest('.mws-cl-body-field-wrap');
        var ta = wrap ? wrap.querySelector('.mws-cl-body-sync-ta') : null;
        if (!ta) return;
        ta.value = serializeBodyEditor(ed);
    }

    function syncAllBodyEditors() {
        if (!bodyList) return;
        bodyList.querySelectorAll('[data-mws-cl-body-editor]').forEach(syncBodyEditorToTextarea);
    }

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

    function initBodyEditorsFromTextareas() {
        if (!bodyList) return;
        bodyList.querySelectorAll('.mws-cl-body-field-wrap').forEach(function (wrap) {
            var ed = wrap.querySelector('[data-mws-cl-body-editor]');
            if (!ed || ed.getAttribute('data-mws-cl-body-inited') === '1') return;
            initBodyEditorInWrap(wrap);
        });
    }

    function renumberBodyPoints() {
        if (!bodyList) return;
        var n = 2;
        bodyList.querySelectorAll('[data-mws-cl-body-point="1"]').forEach(function (row) {
            var view = row.querySelector('.mws-cl-body-part-view');
            var num = view ? view.querySelector('.mws-cl-para-num') : null;
            if (num) {
                num.textContent = n + '.';
            }
            var ed = row.querySelector('[data-mws-cl-body-editor]');
            if (ed) {
                ed.setAttribute('aria-label', 'Body paragraph ' + n);
            }
            n += 1;
        });
    }

    function syncViewsFromEditors() {
        syncAllBodyEditors();
        if (bodyList) {
            bodyList.querySelectorAll('[data-mws-cl-body-row]').forEach(function (row) {
                var ta = row.querySelector('.mws-cl-body-sync-ta');
                var view = row.querySelector('.mws-cl-body-part-view');
                if (!ta || !view) return;
                var html = decodeBasicEntities(ta.value || '');
                if (row.getAttribute('data-mws-cl-body-point') === '1') {
                    var numEl = view.querySelector('.mws-cl-para-num');
                    var numText = numEl ? numEl.textContent : '';
                    view.innerHTML = (numText ? '<span class="mws-cl-para-num">' + numText + '</span> ' : '') + html;
                } else {
                    view.innerHTML = html;
                }
            });
            renumberBodyPoints();
            bodyList.querySelectorAll('[data-mws-cl-body-point="1"]').forEach(function (row) {
                var ta = row.querySelector('.mws-cl-body-sync-ta');
                var view = row.querySelector('.mws-cl-body-part-view');
                if (!ta || !view) return;
                var numEl = view.querySelector('.mws-cl-para-num');
                var numText = numEl ? numEl.textContent : '';
                view.innerHTML = (numText ? '<span class="mws-cl-para-num">' + numText + '</span> ' : '') + decodeBasicEntities(ta.value || '');
            });
        }
        var subjIn = document.getElementById('mwsClSubjectInput');
        var subjView = document.getElementById('mwsClSubjectView');
        if (subjIn && subjView) subjView.textContent = subjIn.value || '';
        var refIn = document.getElementById('mwsClRefInput');
        var refView = sheet.querySelector('.mws-cl-ref-no .mws-cl-view-only');
        if (refIn && refView) refView.textContent = 'No: ' + (refIn.value || '');
        var ccView = ensureCcViewList();
        if (ccView) {
            ccView.innerHTML = '';
            root.querySelectorAll('[data-mws-cl-cc-input]').forEach(function (ta) {
                var t = (ta.value || '').trim();
                if (!t) return;
                var li = document.createElement('li');
                li.textContent = t;
                ccView.appendChild(li);
            });
        }
    }

    function ensureCcViewList() {
        var existing = document.getElementById('mwsClCcView');
        if (existing) {
            return existing;
        }
        var wrap = sheet.querySelector('.mws-cl-cc');
        if (!wrap) {
            return null;
        }
        var ul = document.createElement('ul');
        ul.className = 'mws-cl-view-only mws-cl-cc-list';
        ul.id = 'mwsClCcView';
        var editList = document.getElementById('mwsClCcList');
        var addCcActions = wrap.querySelector('.mws-cl-section-actions');
        if (editList) {
            wrap.insertBefore(ul, editList);
        } else if (addCcActions) {
            wrap.insertBefore(ul, addCcActions);
        } else {
            wrap.appendChild(ul);
        }
        return ul;
    }

    function removeCcViewList() {
        var ccView = document.getElementById('mwsClCcView');
        if (ccView && ccView.parentNode) {
            ccView.parentNode.removeChild(ccView);
        }
    }

    function setEditing(on) {
        editing = !!on;
        sheet.classList.toggle('mws-cl--editing', editing);
        root.querySelectorAll('.mws-cl-edit-only').forEach(function (el) {
            el.hidden = !editing;
        });
        root.querySelectorAll('.mws-cl-view-only').forEach(function (el) {
            if (el.id === 'mwsClCcView') {
                return;
            }
            el.hidden = editing;
        });
        root.querySelectorAll('.mws-cl-row-actions, .mws-cl-row-actions-below').forEach(function (el) {
            if (editing) el.removeAttribute('hidden');
            else el.setAttribute('hidden', 'hidden');
        });
        if (editBtn) editBtn.classList.toggle('d-none', editing);
        if (saveBtn) saveBtn.classList.toggle('d-none', !editing);
        if (cancelBtn) cancelBtn.classList.toggle('d-none', !editing);
        if (editing) {
            removeCcViewList();
            initBodyEditorsFromTextareas();
        } else {
            syncViewsFromEditors();
        }
    }

    if (editBtn) editBtn.addEventListener('click', function () { setEditing(true); });
    if (cancelBtn) cancelBtn.addEventListener('click', function () {
        if (returnUrl) window.location.href = returnUrl;
        else window.location.reload();
    });

    function bindBodyRemove(btn) {
        btn.addEventListener('click', function () {
            var row = btn.closest('[data-mws-cl-body-row][data-mws-cl-body-point="1"]');
            if (!row || !bodyList) return;
            var points = bodyList.querySelectorAll('[data-mws-cl-body-point="1"]');
            if (points.length <= 0) return;
            row.remove();
            renumberBodyPoints();
        });
    }

    root.querySelectorAll('[data-mws-cl-body-remove]').forEach(bindBodyRemove);

    var addBodyBtn = document.getElementById('mwsClAddBodyPara');
    if (addBodyBtn) {
        addBodyBtn.addEventListener('click', function () {
            if (!bodyList) return;
            var nextNum = bodyList.querySelectorAll('[data-mws-cl-body-point="1"]').length + 2;
            var row = document.createElement('div');
            row.className = 'mws-cl-body-row';
            row.setAttribute('data-mws-cl-body-row', '1');
            row.setAttribute('data-mws-cl-body-point', '1');
            row.setAttribute('data-mws-cl-body-added', '1');
            row.innerHTML =
                '<div class="mws-cl-view-only mws-cl-body-part-view"><span class="mws-cl-para-num">' + nextNum + '.</span> </div>' +
                '<div class="mws-cl-edit-only mws-cl-body-field-wrap no-print">' +
                '<div class="mws-cl-body-editor" data-mws-cl-body-editor contenteditable="true" spellcheck="true" aria-label="Body paragraph ' + nextNum + '"></div>' +
                '<textarea class="mws-cl-body-sync-ta" hidden rows="1" tabindex="-1" aria-hidden="true" data-mws-cl-field="body_point_line"></textarea>' +
                '<div class="mws-cl-row-actions-below no-print">' +
                '<button type="button" class="btn btn-default btn-xs" data-mws-cl-body-remove title="Remove paragraph">Remove paragraph</button>' +
                '</div></div>';
            bodyList.appendChild(row);
            var rm = row.querySelector('[data-mws-cl-body-remove]');
            if (rm) bindBodyRemove(rm);
            var wrap = row.querySelector('.mws-cl-body-field-wrap');
            if (wrap) initBodyEditorInWrap(wrap);
            renumberBodyPoints();
        });
    }

    var addCc = document.getElementById('mwsClAddCc');
    if (addCc) {
        addCc.addEventListener('click', function () {
            var list = document.getElementById('mwsClCcList');
            if (!list) return;
            var li = document.createElement('li');
            li.className = 'mb-1';
            li.setAttribute('data-mws-cl-cc-row', '');
            li.innerHTML = '<div class="d-flex gap-1 align-items-start"><textarea class="mws-cl-line-textarea" rows="2" data-mws-cl-cc-input spellcheck="false"></textarea><span class="mws-cl-row-actions no-print"><button type="button" class="btn btn-default btn-xs" data-mws-cl-cc-remove title="Remove">&times;</button></span></div>';
            list.appendChild(li);
        });
    }
    root.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-mws-cl-cc-remove]');
        if (!btn) return;
        var row = btn.closest('[data-mws-cl-cc-row]');
        if (row) row.remove();
    });

    if (bodyList) {
        bodyList.addEventListener('focusin', function (e) {
            var ed = e.target.closest('[data-mws-cl-body-editor]');
            if (ed && bodyList.contains(ed)) {
                activeBodyEditor = ed;
            }
        });
        bodyList.addEventListener('input', function (e) {
            var ed = e.target.closest('[data-mws-cl-body-editor]');
            if (!ed || !bodyList.contains(ed)) return;
            syncBodyEditorToTextarea(ed);
        });
        bodyList.addEventListener('paste', function (e) {
            var ed = e.target.closest('[data-mws-cl-body-editor]');
            if (!ed || !bodyList.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, line);
                });
            } catch (errPaste) {}
        });
        bodyList.addEventListener('keydown', function (e) {
            var ed = e.target.closest('[data-mws-cl-body-editor]');
            if (!ed || !bodyList.contains(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) {}
            }
        });
    }

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

    function collectCc() {
        var lines = [];
        root.querySelectorAll('[data-mws-cl-cc-input]').forEach(function (ta) {
            var t = (ta.value || '').trim();
            if (t) lines.push(t);
        });
        return lines.join('\n');
    }

    function bodyPoints() {
        syncAllBodyEditors();
        var pts = [];
        root.querySelectorAll('textarea[data-mws-cl-field="body_point_line"]').forEach(function (ta) {
            pts.push(ta.value || '');
        });
        return pts;
    }

    function signaturePayload() {
        if (typeof window.__mwsClGetLetterSignaturePayload === 'function') {
            return window.__mwsClGetLetterSignaturePayload();
        }
        return null;
    }

    /** Same SweetAlert2 gate as AA letter — avoid browser confirm/alert when Swal is available. */
    function mwsClSwalReady() {
        return typeof Swal !== 'undefined' && Swal && typeof Swal.fire === 'function';
    }

    function mwsClEnsureSwal(done) {
        if (mwsClSwalReady()) {
            done();
            return;
        }
        var existing = document.querySelector('script[data-mws-cl-swal2="1"]');
        if (existing) {
            existing.addEventListener('load', function () { done(); });
            existing.addEventListener('error', function () { done(); });
            return;
        }
        var s = document.createElement('script');
        s.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11.10.0/dist/sweetalert2.all.min.js';
        s.setAttribute('data-mws-cl-swal2', '1');
        s.onload = function () { done(); };
        s.onerror = function () { done(); };
        document.head.appendChild(s);
    }

    function doSave() {
        syncAllBodyEditors();
        syncViewsFromEditors();
        var leadTa = root.querySelector('textarea[data-mws-cl-field="body_lead"]');
        var payload = {
            subject: (document.getElementById('mwsClSubjectInput') || {}).value || '',
            agenda: '',
            agenda_item_no: '',
            additional_remarks: '',
            ref_after_no: (document.getElementById('mwsClRefInput') || {}).value || '',
            forward_list: '',
            cc_list: collectCc(),
            body_lead: leadTa ? (leadTa.value || '') : '',
            body_points: bodyPoints()
        };
        if (pcFormId) payload.pc_form_id = parseInt(pcFormId, 10);
        var sig = signaturePayload();
        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': csrf(),
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        }).then(function (r) {
            return r.text().then(function (t) {
                var j = null;
                try { j = t ? JSON.parse(t) : null; } catch (e) { j = null; }
                return { ok: r.ok, status: r.status, body: j };
            });
        }).then(function (res) {
            if (saveBtn) saveBtn.disabled = false;
            if (!res.ok || !res.body || !(res.body.ok || res.body.success)) {
                var msg = (res.body && res.body.message) ? res.body.message : 'Could not forward Concurrence.';
                mwsClEnsureSwal(function () {
                    if (mwsClSwalReady()) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Could not forward Concurrence',
                            text: msg,
                            confirmButtonText: 'OK'
                        });
                    } else {
                        window.alert(msg);
                    }
                });
                return;
            }
            var okMsg = (res.body && res.body.message) ? res.body.message : 'Concurrence forwarded successfully.';
            var redirectTo = (res.body && res.body.redirect_url) ? res.body.redirect_url : returnUrl;
            mwsClEnsureSwal(function () {
                if (mwsClSwalReady()) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Concurrence forwarded',
                        text: okMsg,
                        confirmButtonText: 'OK'
                    }).then(function () {
                        window.location.href = redirectTo;
                    });
                } else {
                    window.location.href = redirectTo;
                }
            });
        }).catch(function () {
            if (saveBtn) saveBtn.disabled = false;
            mwsClEnsureSwal(function () {
                if (mwsClSwalReady()) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Could not forward Concurrence',
                        text: 'Network error while forwarding Concurrence.',
                        confirmButtonText: 'OK'
                    });
                } else {
                    window.alert('Network error while forwarding Concurrence.');
                }
            });
        });
    }

    if (saveBtn) {
        saveBtn.addEventListener('click', function () {
            if (!saveUrl) return;
            // Mirror AA (Administrative Approval) letter: SweetAlert2 confirm before forward.
            mwsClEnsureSwal(function () {
                if (mwsClSwalReady()) {
                    Swal.fire({
                        icon: 'question',
                        title: 'Forward Concurrence?',
                        text: 'This will save the Concurrence letter with your current changes and forward it.',
                        showCancelButton: true,
                        confirmButtonText: 'Forward',
                        cancelButtonText: 'Cancel'
                    }).then(function (res) {
                        if (res.isConfirmed) {
                            doSave();
                        }
                    });
                    return;
                }
                if (window.confirm('Forward Concurrence? This will save the Concurrence letter with your current changes and forward it.')) {
                    doSave();
                }
            });
        });
    }

    window.addEventListener('beforeprint', function () {
        if (editing) {
            syncAllBodyEditors();
            syncViewsFromEditors();
        }
    });

    window.addEventListener('afterprint', function () {
        if (editing) {
            removeCcViewList();
        }
    });

    if (canEdit && /[?&]edit=1/.test(window.location.search)) {
        setEditing(true);
    }
})();
</script>
@if (! empty($canEditAdvise) && ! empty($canEditAdviseSignature))
<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('mwsConcurrenceLetterStatic');
    var blocks = root ? root.querySelectorAll('[data-mws-cl-sig-block="1"]') : [];
    if (!root || !blocks.length) return;

    var primaryBlock = document.getElementById('mwsClSignBlock') || blocks[0];
    var serverEffective = (primaryBlock.getAttribute('data-mws-cl-sig-server-effective') || '').trim();
    var serverDrawn = (primaryBlock.getAttribute('data-mws-cl-sig-server-drawn') || '').trim();
    var serverUploaded = (primaryBlock.getAttribute('data-mws-cl-sig-server-uploaded') || '').trim();
    var mode = '';
    var pendingDrawDataUrl = null;
    var pendingUpload = null;
    var uiCleared = false;
    var pad = null;

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

    function setDisplayOnBlock(block, url) {
        var wrap = block.querySelector('[data-mws-cl-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-mws-cl-sig-effective-url');
            var ph = document.createElement('div');
            ph.className = 'mws-cl-sign-line';
            ph.setAttribute('data-mws-cl-sig-placeholder', '1');
            ph.setAttribute('aria-hidden', 'true');
            wrap.appendChild(ph);
        } else {
            block.setAttribute('data-mws-cl-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-mws-cl-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);
        });
    }

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

    function ensurePad() {
        var canvas = primaryBlock.querySelector('[data-mws-cl-sig-canvas="1"]');
        if (!canvas || typeof SignaturePad === 'undefined') return;
        if (pad) return;
        pad = new SignaturePad(canvas, { minWidth: 0.5, maxWidth: 2.5 });
        if (typeof pad.addEventListener === 'function') {
            pad.addEventListener('endStroke', function () {
                if (mode !== 'draw' || !pad || pad.isEmpty()) return;
                pendingDrawDataUrl = pad.toDataURL('image/png');
                refresh();
            });
        }
    }

    function setPanels() {
        allInRoot('[data-mws-cl-sig-panel-draw="1"]').forEach(function (panel) {
            panel.hidden = mode !== 'draw';
        });
        allInRoot('[data-mws-cl-sig-panel-upload="1"]').forEach(function (panel) {
            panel.hidden = mode !== 'upload';
        });
        if (mode === 'draw') requestAnimationFrame(ensurePad);
    }

    allInRoot('[data-mws-cl-sig-mode-radio="1"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            if (!radio.checked) return;
            mode = radio.value || '';
            uiCleared = false;
            setPanels();
            refresh();
        });
    });

    allInRoot('[data-mws-cl-sig-clear-ui="1"]').forEach(function (clearUi) {
        clearUi.addEventListener('click', function () {
            uiCleared = true;
            pendingDrawDataUrl = null;
            pendingUpload = null;
            if (pad) pad.clear();
            allInRoot('[data-mws-cl-sig-mode-radio="1"]').forEach(function (r) { r.checked = false; });
            allInRoot('[data-mws-cl-sig-file="1"]').forEach(function (input) { input.value = ''; });
            mode = '';
            setPanels();
            refresh();
        });
    });

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

    allInRoot('[data-mws-cl-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' };
                refresh();
            };
            reader.readAsDataURL(file);
        });
    });

    window.__mwsClGetLetterSignaturePayload = function () {
        if (mode === 'draw' && pendingDrawDataUrl) {
            return { mode: 'draw', png_data_url: pendingDrawDataUrl };
        }
        if (mode === 'upload' && pendingUpload && pendingUpload.dataUrl) {
            return {
                mode: 'upload',
                image_data_url: pendingUpload.dataUrl,
                upload_filename: pendingUpload.name || 'signature.png'
            };
        }
        return null;
    };
})();
</script>
@endif
@endpush