{% extends "base.html" %}
{% load legal_tags %}

{% block title %}Workdesk Notaris & PPAT | Smart Legal Workspace{% endblock %}

{% block content %}
<div x-data="{
    activeTab: '{{ active_tab|default:'NOTARIS' }}',
    statusFilter: '{{ current_status|default:'ALL' }}',
    searchQuery: '{{ search_query|default:'' }}',
    showDriveModal: false,
    currentJobTitle: '',
    currentDriveFolder: '',
    showOcrModal: false,
    showEkycModal: false,
    showTaxModal: false,
    showFidusiaModal: false,
    showExportModal: false,
    // Add Job Modal state
    showAddJobModal: false,
    newJobCategory: '{{ active_tab|default:'NOTARIS' }}',
    newJobAktaType: 'PARTIJ',
    newJobSigMethod: 'PHYSICAL_WET_INK',
    newJobClientId: '{{ clients_list.first.id|default:'' }}',
    newJobTitle: '',
    newJobNomor: '',
    newJobTanggal: new Date().toISOString().split('T')[0],
    newJobBiaya: 0,
    newJobHonorarium: 0,
    newJobMsg: '',
    newJobError: '',
    isCreatingNewClient: false,
    newClientType: 'INDIVIDU',
    newClientName: '',
    newClientNik: '',
    newClientPhone: '',
    isSubmittingJob: false,
    // Update Status Modal state
    showStatusModal: false,
    updateJobId: null,
    updateJobTitle: '',
    updateJobClient: '',
    updateJobStatus: 'DRAFT',
    updateJobNomor: '',
    updateJobRepertorium: '',
    updateJobTanggal: '',
    updateJobEkycStatus: 'UNVERIFIED',
    updateJobRegId: '',
    updateJobMinutaUrl: '',
    updateJobMinutaName: '',
    updateStatusMsg: '',
    updateStatusError: '',
    isUpdatingStatus: false,
    // Calculator state
    calcRegion: 'DKI_JAKARTA',
    calcTransValue: 1500000000,
    calcNjopValue: 1200000000,
    calcTransType: 'STANDARD',
    calcResult: null,
    calcError: '',
    isCalculatingTax: false,
    // OCR state
    ocrDocType: 'AUTO',
    ocrIsProcessing: false,
    ocrResult: null,
    ocrError: '',
    ocrFileName: '',
    // Fidusia state
    fidusiaJobId: '{{ jobs_list.first.id|default:'' }}',
    fidusiaPemberi: '',
    fidusiaPenerima: '',
    fidusiaNilai: '',
    fidusiaMsg: '',
    fidusiaError: '',
    isSubmittingFidusia: false,
    // Live Legal Deed Editor state
    showDraftModal: false,
    currentDraftJobId: null,
    currentDraftTitle: '',
    currentDraftContent: '',
    isSavingDraft: false,
    draftSavedNotice: '',
    draftErrorNotice: '',
    isResettingDraft: false,
    copyNotice: '',
    // Docx Template & Minuta Generator state
    showDocxModal: false,
    docxJobId: null,
    docxJobTitle: '',
    docxJobClient: '',
    docxTemplateType: 'PT',
    docxCustomKomparisi: '',
    isGeneratingDocx: false,
    docxSuccessNotice: '',
    docxErrorNotice: '',
    docxDownloadUrl: '',
    // WhatsApp Automated Notification state
    showWaModal: false,
    waJobId: null,
    waJobTitle: '',
    waClientName: '',
    waClientPhone: '',
    waEventType: 'PEMBACAAN_TTD',
    isSendingWa: false,
    waSuccessNotice: '',
    waErrorNotice: '',
    // Quick Payment & Stage Gate Flagging state
    showPayModal: false,
    payJobId: null,
    payInvoiceId: null,
    payJobTitle: '',
    payClientName: '',
    payTotalTagihan: '0',
    payRemaining: '0',
    payAmount: '',
    payMethod: 'TRANSFER_BANK',
    payRef: '',
    isSubmittingPayment: false,
    paySuccessMsg: '',
    payErrorMsg: '',
    isSendingReminder: false
}" class="space-y-3">

    <!-- 1. Enterprise Header & Financial Bar (Compact & Authoritative) -->
    <div class="bg-white rounded border border-slate-200 shadow-sm p-4">
        <div class="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3 pb-3.5 border-b border-slate-100">
            <div>
                <div class="flex items-center space-x-2.5">
                    <h1 class="text-base font-bold text-slate-900 tracking-tight">Workdesk Operasional</h1>
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold tracking-wide uppercase bg-emerald-50 text-emerald-700 border border-emerald-200">
                        Aktif &bull; Sesi Resmi
                    </span>
                </div>
                <p class="text-[11px] text-slate-500 mt-0.5 font-mono">
                    Kantor Notaris & PPAT Siti Nurhaliza, S.H., M.Kn. &bull; SK Kemenkumham AHU-09821.AH.02.01
                </p>
            </div>

            <!-- Action Hub: Structured Enterprise Toolbar -->
            <div class="flex flex-wrap items-center gap-1.5">
                <!-- Tambah Transaksi Baru -->
                <button @click="showAddJobModal = true; newJobError = ''; newJobMsg = '';" class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded text-xs font-semibold bg-emerald-700 hover:bg-emerald-600 text-white shadow-xs transition">
                    <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    <span>Tambah Transaksi</span>
                </button>

                <div class="h-5 w-px bg-slate-200 mx-0.5 hidden sm:block"></div>

                <!-- Alat: Toolbar Lain Dikelompokkan dalam Satu Dropdown -->
                <div class="relative" x-data="{ showAlatMenu: false }" @keydown.escape.window="showAlatMenu = false">
                    <button type="button"
                            @click="showAlatMenu = !showAlatMenu"
                            :aria-expanded="showAlatMenu"
                            aria-haspopup="true"
                            class="inline-flex items-center space-x-1.5 px-2.5 py-1.5 rounded text-xs font-semibold bg-slate-900 hover:bg-slate-800 text-white shadow-xs transition">
                        <svg class="w-3.5 h-3.5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        <span>Alat</span>
                        <svg class="w-3 h-3 text-slate-400 transition transform" :class="showAlatMenu ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>

                    <div x-show="showAlatMenu"
                         x-cloak
                         @click.outside="showAlatMenu = false"
                         class="absolute right-0 z-50 mt-1.5 w-64 rounded border border-slate-200 bg-white shadow-lg py-1.5"
                         role="menu" aria-label="Alat">
                        <!-- Grup: Pemeriksaan -->
                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Pemeriksaan</div>
                        <button type="button" @click="showAlatMenu = false; showOcrModal = true;" role="menuitem"
                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                title="Scan OCR KTP/BPN">
                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                            <span>Scan OCR KTP/BPN</span>
                        </button>
                        {% if IS_NOTARIS %}
                            <button type="button" @click="showAlatMenu = false; showEkycModal = true;" role="menuitem"
                                    class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                    title="Verifikasi identitas via Dukcapil">
                                <svg class="w-3.5 h-3.5 text-sky-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                <span>e-KYC Dukcapil</span>
                            </button>
                        {% else %}
                            <button type="button" disabled role="menuitem" title="Hanya Notaris yang berwenang melakukan e-KYC Dukcapil"
                                    class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-400 bg-slate-50 cursor-not-allowed min-h-[44px] lg:min-h-0">
                                <svg class="w-3.5 h-3.5 text-slate-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                <span>e-KYC Dukcapil</span>
                            </button>
                        {% endif %}

                        <div class="my-1 h-px bg-slate-100"></div>

                        <!-- Grup: Legal -->
                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Legal</div>
                        <button type="button" @click="showAlatMenu = false; showTaxModal = true;" role="menuitem"
                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                title="Kalkulator BPHTB & PPh Final">
                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                            <span>Kalkulator Pajak</span>
                        </button>
                        <button type="button" @click="showAlatMenu = false; showFidusiaModal = true;" role="menuitem"
                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                title="Registrasi Jaminan Fidusia via AHU ONLINE">
                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
                            <span>AHU Fidusia</span>
                        </button>

                        <div class="my-1 h-px bg-slate-100"></div>

                        <!-- Grup: Dokumen -->
                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Dokumen</div>
                        <a href="/api/v1/jobs/template-excel/" @click="showAlatMenu = false" role="menuitem"
                           class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                           title="Unduh template Excel resmi untuk impor massal">
                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            <span>Template Excel</span>
                        </a>
                        {% if IS_NOTARIS %}
                            <a href="/api/v1/jobs/bulk-export/" @click="showAlatMenu = false" role="menuitem"
                               class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                               title="Ekspor portabilitas seluruh data akta kantor (Zero Lock-In)">
                                <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                                <span>Portabilitas (.xlsx)</span>
                            </a>
                        {% else %}
                            <button type="button" disabled role="menuitem" title="Akses Portabilitas Data dilarang untuk Staf"
                                    class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-400 bg-slate-50 cursor-not-allowed min-h-[44px] lg:min-h-0">
                                <svg class="w-3.5 h-3.5 text-slate-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                <span>Portabilitas</span>
                            </button>
                        {% endif %}

                        <div class="my-1 h-px bg-slate-100"></div>

                        <!-- Grup: Laporan -->
                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Laporan</div>
                        {% if IS_NOTARIS %}
                            <button type="button" @click="showAlatMenu = false; showExportModal = true;" role="menuitem"
                                    class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-amber-800 hover:bg-amber-50 min-h-[44px] lg:min-h-0 transition"
                                    title="Ekspor Laporan Bulanan A3">
                                <svg class="w-3.5 h-3.5 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                <span>Ekspor Laporan A3</span>
                            </button>
                        {% else %}
                            <button type="button" disabled role="menuitem" title="Akses Ekspor Laporan Bulanan dilarang untuk Staf"
                                    class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-400 bg-slate-50 cursor-not-allowed min-h-[44px] lg:min-h-0">
                                <svg class="w-3.5 h-3.5 text-slate-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                <span>Ekspor Laporan A3</span>
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 3 Financial KPI Cards: Compact, Monospace Figures, No Floating Slop -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
            <!-- Card 1: Total Omzet -->
            <div class="p-3 rounded bg-slate-50/80 border border-slate-200">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-600">Total Omzet Tagihan</span>
                    <span class="text-[10px] font-mono text-slate-400">AKUMULASI</span>
                </div>
                <div class="mt-1 text-lg font-bold text-slate-900 font-mono-num">
                    {{ financial_summary.total_omzet|rupiah }}
                </div>
                <div class="text-[10px] text-slate-500 mt-0.5">Total tagihan seluruh berkas aktif</div>
            </div>

            <!-- Card 2: Pembayaran Diterima -->
            <div class="p-3 rounded bg-slate-50/80 border border-slate-200">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-600">Pembayaran Diterima</span>
                    <span class="text-[10px] font-mono text-emerald-600">TERKONFIRMASI</span>
                </div>
                <div class="mt-1 text-lg font-bold text-emerald-800 font-mono-num">
                    {{ financial_summary.total_terbayar|rupiah }}
                </div>
                <div class="text-[10px] text-slate-500 mt-0.5">Penerimaan kas rekening kantor</div>
            </div>

            <!-- Card 3: Sisa Piutang Berjalan -->
            <div class="p-3 rounded bg-slate-50/80 border border-slate-200">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-600">Sisa Piutang Berjalan</span>
                    <span class="text-[10px] font-mono text-amber-600">PENDING</span>
                </div>
                <div class="mt-1 text-lg font-bold text-amber-800 font-mono-num">
                    {{ financial_summary.total_piutang|rupiah }}
                </div>
                <div class="text-[10px] text-slate-500 mt-0.5">Outstanding piutang penagihan</div>
            </div>
        </div>
    </div>

    <!-- 2. Operational Workdesk: High-Density Tabular Grid -->
    <div class="bg-white rounded border border-slate-200 shadow-sm overflow-hidden">
        <!-- Tab Bar & Global Search -->
        <div class="border-b border-slate-200 bg-slate-50 px-4 pt-2.5 flex flex-col md:flex-row md:items-center md:justify-between gap-2.5">
            <!-- Tabs -->
            <div class="flex space-x-1 -mb-px">
                <!-- Tab Notaris -->
                <a href="?tab=NOTARIS{% if search_query %}&search={{ search_query }}{% endif %}{% if current_status != 'ALL' %}&status={{ current_status }}{% endif %}"
                   class="px-3.5 py-2 text-xs font-semibold flex items-center space-x-2 border-b-2 transition {% if active_tab == 'NOTARIS' %}bg-white border-amber-600 text-slate-900 border-t border-x border-t-slate-200 border-x-slate-200 rounded-t{% else %}border-transparent text-slate-600 hover:text-slate-900{% endif %}">
                    <span>Akta Notaris</span>
                    <span class="px-1.5 py-0.2 rounded font-mono text-[10px] {% if active_tab == 'NOTARIS' %}bg-amber-100 text-amber-900{% else %}bg-slate-200 text-slate-700{% endif %}">{{ counts.notaris }}</span>
                </a>

                <!-- Tab PPAT -->
                <a href="?tab=PPAT{% if search_query %}&search={{ search_query }}{% endif %}{% if current_status != 'ALL' %}&status={{ current_status }}{% endif %}"
                   class="px-3.5 py-2 text-xs font-semibold flex items-center space-x-2 border-b-2 transition {% if active_tab == 'PPAT' %}bg-white border-emerald-600 text-slate-900 border-t border-x border-t-slate-200 border-x-slate-200 rounded-t{% else %}border-transparent text-slate-600 hover:text-slate-900{% endif %}">
                    <span>Akta PPAT (Agraria)</span>
                    <span class="px-1.5 py-0.2 rounded font-mono text-[10px] {% if active_tab == 'PPAT' %}bg-emerald-100 text-emerald-900{% else %}bg-slate-200 text-slate-700{% endif %}">{{ counts.ppat }}</span>
                </a>

                <!-- Tab Pengurusan -->
                <a href="?tab=PENGURUSAN{% if search_query %}&search={{ search_query }}{% endif %}{% if current_status != 'ALL' %}&status={{ current_status }}{% endif %}"
                   class="px-3.5 py-2 text-xs font-semibold flex items-center space-x-2 border-b-2 transition {% if active_tab == 'PENGURUSAN' %}bg-white border-sky-600 text-slate-900 border-t border-x border-t-slate-200 border-x-slate-200 rounded-t{% else %}border-transparent text-slate-600 hover:text-slate-900{% endif %}">
                    <span>Pengurusan Kantor</span>
                    <span class="px-1.5 py-0.2 rounded font-mono text-[10px] {% if active_tab == 'PENGURUSAN' %}bg-sky-100 text-sky-900{% else %}bg-slate-200 text-slate-700{% endif %}">{{ counts.pengurusan }}</span>
                </a>
            </div>

            <!-- Instant Search Input -->
            <form method="get" class="pb-2 flex items-center space-x-1.5">
                <input type="hidden" name="tab" value="{{ active_tab }}">
                {% if current_status != 'ALL' %}
                    <input type="hidden" name="status" value="{{ current_status }}">
                {% endif %}
                <div class="relative">
                    <input type="text" name="search" value="{{ search_query }}" placeholder="Cari NIK, Nama, No. Akta..."
                           class="w-56 sm:w-64 pl-7 pr-3 py-1 text-xs rounded border border-slate-300 focus:outline-none focus:ring-1 focus:ring-slate-700 bg-white">
                    <svg class="w-3.5 h-3.5 text-slate-400 absolute left-2 top-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <button type="submit" class="px-2.5 py-1 bg-slate-800 hover:bg-slate-700 text-white rounded text-xs font-medium transition">
                    Cari
                </button>
                {% if search_query %}
                    <a href="?tab={{ active_tab }}" class="text-xs text-rose-600 hover:underline pl-1">Reset</a>
                {% endif %}
            </form>
        </div>

        <!-- Filter Chips Sub-Bar -->
        <div class="px-4 py-2 bg-slate-50/50 border-b border-slate-200 flex flex-wrap items-center gap-1.5 text-xs">
            <span class="text-slate-500 font-medium text-[11px] uppercase tracking-wider">Status:</span>
            <a href="?tab={{ active_tab }}{% if search_query %}&search={{ search_query }}{% endif %}&status=ALL"
               class="px-2 py-0.5 rounded text-xs transition {% if current_status == 'ALL' %}bg-slate-800 text-white font-semibold{% else %}bg-white text-slate-700 border border-slate-300 hover:bg-slate-100{% endif %}">
                Semua ({{ jobs_list|length }})
            </a>
            <a href="?tab={{ active_tab }}{% if search_query %}&search={{ search_query }}{% endif %}&status=DRAFT"
               class="px-2 py-0.5 rounded text-xs transition {% if current_status == 'DRAFT' %}bg-slate-800 text-white font-semibold{% else %}bg-white text-slate-700 border border-slate-300 hover:bg-slate-100{% endif %}">
                Draf Awal
            </a>
            <a href="?tab={{ active_tab }}{% if search_query %}&search={{ search_query }}{% endif %}&status=PEMBACAAN_TTD"
               class="px-2 py-0.5 rounded text-xs transition {% if current_status == 'PEMBACAAN_TTD' %}bg-amber-700 text-white font-semibold{% else %}bg-white text-slate-700 border border-slate-300 hover:bg-slate-100{% endif %}">
                Pembacaan / TTD Fisik
            </a>
            <a href="?tab={{ active_tab }}{% if search_query %}&search={{ search_query }}{% endif %}&status=PROSES_INSTANSI"
               class="px-2 py-0.5 rounded text-xs transition {% if current_status == 'PROSES_INSTANSI' %}bg-indigo-700 text-white font-semibold{% else %}bg-white text-slate-700 border border-slate-300 hover:bg-slate-100{% endif %}">
                Proses Instansi
            </a>
            <a href="?tab={{ active_tab }}{% if search_query %}&search={{ search_query }}{% endif %}&status=SELESAI"
               class="px-2 py-0.5 rounded text-xs transition {% if current_status == 'SELESAI' %}bg-emerald-700 text-white font-semibold{% else %}bg-white text-slate-700 border border-slate-300 hover:bg-slate-100{% endif %}">
                Selesai
            </a>
        </div>

        <!-- High-Density Notariat Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-700">
                <thead class="bg-slate-100 text-slate-700 uppercase font-semibold text-[10px] tracking-wider border-b border-slate-200">
                    <tr>
                        <th class="px-4 py-2.5">Judul Pekerjaan & Jenis Akta</th>
                        <th class="px-3 py-2.5">Klien / Penghadap</th>
                        <th class="px-3 py-2.5">Nomor & Tanggal</th>
                        <th class="px-3 py-2.5">Status</th>
                        <th class="px-3 py-2.5">Biaya Akta</th>
                        <th class="px-4 py-2.5 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white">
                    {% for job in jobs_list %}
                        <tr class="hover:bg-slate-50 transition-colors">
                            <!-- Judul & Kategori Akta -->
                            <td class="px-4 py-2.5">
                                <div class="font-semibold text-slate-900 text-xs">{{ job.title }}</div>
                                <div class="flex items-center space-x-1.5 text-[11px] text-slate-500 mt-0.5">
                                    <span>{{ job.get_akta_type_display }}</span>
                                    <span>&bull;</span>
                                    <span class="font-mono text-[10px] text-slate-600 bg-slate-100 px-1 rounded border border-slate-200">
                                        {{ job.get_signature_method_display }}
                                    </span>
                                </div>
                            </td>

                            <!-- Klien / Penghadap -->
                            <td class="px-3 py-2.5">
                                <div class="font-medium text-slate-800">{{ job.client.name }}</div>
                                <div class="text-[10px] text-slate-500 font-mono-num">NIK: {{ job.client.nik_or_npwp }}</div>
                            </td>

                            <!-- Nomor Akta & Repertorium -->
                            <td class="px-3 py-2.5 font-mono-num">
                                {% if job.nomor_akta %}
                                    <div class="font-semibold text-slate-800">No. {{ job.nomor_akta }}</div>
                                    <div class="text-[10px] text-slate-500">Rep: {{ job.nomor_repertorium|default:"-" }}</div>
                                    <div class="text-[10px] text-slate-500">{{ job.tanggal_akta|date:"d/m/Y"|default:"-" }}</div>
                                {% else %}
                                    <span class="text-slate-400 italic text-[11px]">Belum terbit</span>
                                {% endif %}
                            </td>

                            <!-- Status Pengerjaan (Read-Only Badge; perubahan status via Aksi -> Update Status) -->
                            <td class="px-3 py-2.5">
                                <span class="inline-flex items-center px-2.5 py-1 rounded text-[11px] font-semibold border {{ job.status|status_badge_class }}">
                                    {{ job.get_status_display }}
                                </span>
                            </td>

                            <!-- Biaya Akta & Status Pembayaran (Stage Gate) -->
                            <td class="px-3 py-2.5 font-medium text-slate-900 font-mono-num">
                                <div class="text-xs">{{ job.biaya_akta|rupiah }}</div>
                                <div class="mt-1 flex items-center space-x-1">
                                    {% if job.total_tagihan > 0 %}
                                        {% if job.sisa_piutang <= 0 %}
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase bg-emerald-50 text-emerald-700 border border-emerald-200">
                                                Lunas
                                            </span>
                                        {% elif job.total_terbayar > 0 %}
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase bg-amber-50 text-amber-700 border border-amber-200">
                                                DP (Sebagian)
                                            </span>
                                        {% else %}
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase bg-rose-50 text-rose-700 border border-rose-200">
                                                Belum Bayar
                                            </span>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-[10px] text-slate-400 italic">Tanpa Tagihan</span>
                                    {% endif %}
                                </div>
                                {% if job.total_tagihan > 0 and job.total_terbayar <= 0 %}
                                    <div class="mt-0.5 text-[9px] text-amber-700 font-sans flex items-center space-x-1" title="Tahap 3 (TTD Fisik Minuta) terkunci sebelum ada pembayaran DP/lunas">
                                        <svg class="w-2.5 h-2.5 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                        <span>Gated (Kunci Tahap)</span>
                                    </div>
                                {% endif %}
                            </td>

                            <!-- Aksi: Leveling (Primary + Notif WA + Menu Akses Penuh) -->
                            <!-- Aksi: Leveling (Primary + Notif WA + Menu Akses Penuh) -->
                            <td class="px-4 py-2.5 text-right whitespace-nowrap">
                                <div class="relative inline-flex items-center gap-1.5 align-middle"
                                     x-data="{ openActionMenu: false, menuStyle: {} }"
                                     @click.outside="openActionMenu = false"
                                     @keydown.escape.window="openActionMenu = false">
                                    <!-- Primary Action (Status-Aware: hanya 1 aksi dominan) -->
                                    {% if job.status == 'SELESAI' %}
                                        <a href="/track/{{ job.tracking_token }}/" target="_blank"
                                           class="inline-flex items-center space-x-1 px-2.5 py-1.5 rounded bg-slate-900 hover:bg-slate-800 text-white font-medium text-[11px] transition shadow-xs"
                                           title="Buka Halaman Pelacakan Klien (tanpa login)">
                                            <svg class="w-3 h-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                            <span>Lihat Tracking</span>
                                        </a>
                                    {% elif job.status != 'BATAL' %}
                                        <button type="button"
                                                @click="
                                                    currentDraftJobId = {{ job.id }};
                                                    currentDraftTitle = '{{ job.title|escapejs }} ({{ job.client.name|escapejs }})';
                                                    currentDraftContent = '{{ job.draft_content|default:''|escapejs }}';
                                                    draftSavedNotice = '';
                                                    draftErrorNotice = '';
                                                    showDraftModal = true;
                                                    fetch('/api/v1/jobs/{{ job.id }}/')
                                                        .then(r => r.json())
                                                        .then(d => { if (d.draft_content) currentDraftContent = d.draft_content; });
                                                "
                                                class="inline-flex items-center space-x-1 px-2.5 py-1.5 rounded bg-slate-900 hover:bg-slate-800 text-white font-medium text-[11px] transition shadow-xs"
                                                title="Lihat & sunting draf naskah akta on-the-fly">
                                            <svg class="w-3 h-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                            <span>Draf Akta</span>
                                        </button>
                                    {% endif %}

                                    <!-- Notif WA (Level 2: aksi satu-klik sekunder) -->
                                    <button type="button"
                                            @click="
                                                waJobId = {{ job.id }};
                                                waJobTitle = '{{ job.title|escapejs }}';
                                                waClientName = '{{ job.client.name|escapejs }}';
                                                waClientPhone = '{{ job.client.phone_number|escapejs }}';
                                                waEventType = '{{ job.status }}' === 'PEMBACAAN_TTD' ? 'PEMBACAAN_TTD' : ('{{ job.status }}' === 'SELESAI' ? 'AKTA_SELESAI' : 'STATUS_UPDATE');
                                                waSuccessNotice = '';
                                                waErrorNotice = '';
                                                showWaModal = true;
                                            "
                                            class="inline-flex items-center space-x-1 px-2 py-1.5 rounded bg-emerald-50 hover:bg-emerald-100 border border-emerald-300 text-emerald-900 font-medium text-[11px] transition"
                                            title="Kirim notifikasi otomatis WhatsApp via Celery Background Worker">
                                        <svg class="w-3 h-3 text-emerald-700" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                        <span>Notif WA</span>
                                    </button>

                                    <!-- ⋮ Overflow Trigger (Menu Akses Penuh) -->
                                    <button type="button"
                                            @click="
                                                openActionMenu = !openActionMenu;
                                                if (openActionMenu) {
                                                    const r = $el.getBoundingClientRect();
                                                    menuStyle = { top: (r.bottom + 4) + 'px', right: (window.innerWidth - r.right) + 'px' };
                                                    $nextTick(() => { menuStyle = window.positionAksiMenu($el, $el.nextElementSibling); });
                                                }
                                            "
                                            :aria-expanded="openActionMenu ? 'true' : 'false'"
                                            aria-haspopup="true"
                                            aria-label="Aksi"
                                            class="inline-flex items-center justify-center w-8 h-7 rounded border border-slate-300 bg-white hover:bg-slate-100 text-slate-500 transition">
                                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/></svg>
                                    </button>

                                    <!-- Dropdown Overlay: position:fixed agar tak terpotong overflow-x-auto tabel -->
                                    <div x-show="openActionMenu"
                                         x-cloak
                                         x-transition.opacity
                                         :style="menuStyle"
                                         class="fixed z-50 w-64 max-h-[70vh] overflow-y-auto rounded border border-slate-200 bg-white shadow-lg py-1.5"
                                         role="menu" aria-label="Aksi">
                                        <!-- Grup: Dokumen -->
                                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Dokumen</div>
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    currentDraftJobId = {{ job.id }};
                                                    currentDraftTitle = '{{ job.title|escapejs }} ({{ job.client.name|escapejs }})';
                                                    currentDraftContent = '{{ job.draft_content|default:''|escapejs }}';
                                                    draftSavedNotice = '';
                                                    draftErrorNotice = '';
                                                    showDraftModal = true;
                                                    fetch('/api/v1/jobs/{{ job.id }}/')
                                                        .then(r => r.json())
                                                        .then(d => { if (d.draft_content) currentDraftContent = d.draft_content; });
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Lihat & sunting draf naskah akta on-the-fly">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                            <span>Draf Akta</span>
                                        </button>
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    docxJobId = {{ job.id }};
                                                    docxJobTitle = '{{ job.title|escapejs }}';
                                                    docxJobClient = '{{ job.client.name|escapejs }}';
                                                    docxTemplateType = ('{{ job.title|escapejs }}'.toUpperCase().includes('AJB') || '{{ job.job_type }}' === 'PPAT') ? 'AJB' : (('{{ job.title|escapejs }}'.toUpperCase().includes('KUASA')) ? 'KUASA' : 'PT');
                                                    docxCustomKomparisi = '';
                                                    docxSuccessNotice = '';
                                                    docxErrorNotice = '';
                                                    docxDownloadUrl = '';
                                                    showDocxModal = true;
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Buat Minuta Dokumen Word (.docx) berbasis docxtpl & UUJN Ps. 16">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                            <span>Buat .DOCX</span>
                                        </button>
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    showDriveModal = true;
                                                    currentJobTitle = '{{ job.title|escapejs }}';
                                                    currentDriveFolder = '{{ job.folder_berkas_id|default:'gdrive_root' }}';
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Panel BYOS Google Drive">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                                            <span>Folder Drive</span>
                                        </button>
                                        {% if job.minuta_document %}
                                            <a href="{{ job.minuta_document.url }}" target="_blank" @click="openActionMenu = false" role="menuitem"
                                               class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                               title="Buka scan Minuta Akta asli (TTD Basah & Cap Jempol Fisik)">
                                                <svg class="w-3.5 h-3.5 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                                                <span>Minuta Fisik ✓</span>
                                            </a>
                                        {% endif %}

                                        <div class="my-1 h-px bg-slate-100"></div>

                                        <!-- Grup: Komunikasi -->
                                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Komunikasi</div>
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    waJobId = {{ job.id }};
                                                    waJobTitle = '{{ job.title|escapejs }}';
                                                    waClientName = '{{ job.client.name|escapejs }}';
                                                    waClientPhone = '{{ job.client.phone_number|escapejs }}';
                                                    waEventType = '{{ job.status }}' === 'PEMBACAAN_TTD' ? 'PEMBACAAN_TTD' : ('{{ job.status }}' === 'SELESAI' ? 'AKTA_SELESAI' : 'STATUS_UPDATE');
                                                    waSuccessNotice = '';
                                                    waErrorNotice = '';
                                                    showWaModal = true;
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Kirim notifikasi otomatis WhatsApp via Celery Background Worker">
                                            <svg class="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                            <span>Notif WA</span>
                                        </button>
                                        <a href="https://wa.me/{{ job.client.phone_number }}?text=Halo%20Bapak%2FIbu%20{{ job.client.name|urlencode }},%20berikut%20adalah%20pembaruan%20status%20akta%20{{ job.title|urlencode }}%20(No.%20Akta:%20{{ job.nomor_akta|default:'Dalam Proses'|urlencode }}):%20{{ job.get_status_display|urlencode }}.%20Anda%20dapat%20memantau%20progres%20resmi%20tanpa%20login%20melalui%20tautan%20berikut:%20{{ request.scheme }}://{{ request.get_host }}/track/{{ job.tracking_token }}/%0A%0ATerima%20kasih%2C%0AKantor%20Notaris%20%26%20PPAT%20Siti%20Nurhaliza%2C%20S.H.%2C%20M.Kn."
                                           target="_blank"
                                           @click="openActionMenu = false"
                                           role="menuitem"
                                           class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                           title="Kirim pembaruan status langsung ke WhatsApp Klien">
                                            <svg class="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                            <span>Kirim WA</span>
                                        </a>
                                        <a href="/track/{{ job.tracking_token }}/" target="_blank" @click="openActionMenu = false" role="menuitem"
                                           class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                           title="Kirim tautan pelacakan progres resmi ke WhatsApp Klien">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                            <span>Kirim Tautan Pelacakan</span>
                                        </a>
                                        {% if job.invoices.first and job.sisa_piutang > 0 %}
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    if (!confirm('Kirim pengingat tagihan resmi WhatsApp ke klien {{ job.client.name|escapejs }} untuk sisa tagihan {% if CAN_VIEW_FINANCIALS %}Rp {{ job.sisa_piutang|floatformat:0 }}{% else %}yang belum dibayar?{% endif %}')) return;
                                                    fetch('/api/v1/billing/invoices/{{ job.invoices.first.id }}/send-reminder/', {
                                                        method: 'POST',
                                                        headers: {
                                                            'Content-Type': 'application/json',
                                                            'X-CSRFToken': '{{ csrf_token }}'
                                                        },
                                                        body: JSON.stringify({})
                                                    })
                                                    .then(async r => {
                                                        const d = await r.json();
                                                        if (!r.ok) throw new Error(d.message || JSON.stringify(d));
                                                        return d;
                                                    })
                                                    .then(d => {
                                                        alert('✓ ' + d.message);
                                                    })
                                                    .catch(e => {
                                                        alert('⚠️ ' + e.message);
                                                    });
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Kirim pengingat WhatsApp tagihan pending ke klien">
                                            <svg class="w-3.5 h-3.5 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                                            <span>Tagih WA</span>
                                        </button>
                                        {% endif %}

                                        <div class="my-1 h-px bg-slate-100"></div>

                                        <!-- Grup: Keuangan -->
                                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Keuangan</div>
                                        {% if job.total_tagihan > 0 and job.sisa_piutang > 0 %}
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    payJobId = {{ job.id }};
                                                    payInvoiceId = {% if job.invoices.first %}{{ job.invoices.first.id }}{% else %}null{% endif %};
                                                    payJobTitle = '{{ job.title|escapejs }}';
                                                    payClientName = '{{ job.client.name|escapejs }}';
                                                    {% if CAN_VIEW_FINANCIALS %}
                                                    payTotalTagihan = '{{ job.total_tagihan }}';
                                                    payRemaining = '{{ job.sisa_piutang }}';
                                                    payAmount = '{{ job.sisa_piutang }}';
                                                    {% else %}
                                                    payTotalTagihan = '';
                                                    payRemaining = '';
                                                    payAmount = '0';
                                                    {% endif %}
                                                    payMethod = 'TRANSFER_BANK';
                                                    payRef = '';
                                                    paySuccessMsg = '';
                                                    payErrorMsg = '';
                                                    showPayModal = true;
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Konfirmasi Pelunasan / Flagging Sudah Bayar">
                                            <svg class="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 5"/></svg>
                                            <span>Sudah Bayar</span>
                                        </button>
                                        {% endif %}

                                        <div class="my-1 h-px bg-slate-100"></div>

                                        <!-- Grup: Status -->
                                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Status</div>
                                        <button type="button"
                                                @click="
                                                    openActionMenu = false;
                                                    updateJobId = {{ job.id }};
                                                    updateJobTitle = '{{ job.title|escapejs }}';
                                                    updateJobClient = '{{ job.client.name|escapejs }}';
                                                    updateJobStatus = '{{ job.status }}';
                                                    updateJobNomor = '{{ job.nomor_akta|default:''|escapejs }}';
                                                    updateJobRepertorium = '{{ job.nomor_repertorium|default:''|escapejs }}';
                                                    updateJobTanggal = '{{ job.tanggal_akta|date:'Y-m-d'|default:'' }}';
                                                    updateJobEkycStatus = '{{ job.dukcapil_verification_status|default:'UNVERIFIED' }}';
                                                    updateJobRegId = '{{ job.fidusia_registration_id|default:''|escapejs }}';
                                                    updateJobMinutaUrl = '{% if job.minuta_document %}{{ job.minuta_document.url }}{% endif %}';
                                                    updateJobMinutaName = '{% if job.minuta_document %}{{ job.minuta_document.name|escapejs }}{% endif %}';
                                                    updateStatusMsg = '';
                                                    updateStatusError = '';
                                                    showStatusModal = true;
                                                "
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Ubah status pekerjaan: Draf -> e-KYC -> TTD Fisik -> Instansi -> Selesai">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                            <span>Update Status</span>
                                        </button>

                                        <div class="my-1 h-px bg-slate-100"></div>

                                        <!-- Grup: Legal -->
                                        <div class="px-2.5 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">Legal</div>
                                        {% if IS_NOTARIS %}
                                        <button type="button"
                                                @click="openActionMenu = false; showEkycModal = true;"
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Verifikasi identitas via Dukcapil">
                                            <svg class="w-3.5 h-3.5 text-sky-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                            <span>e-KYC Dukcapil</span>
                                        </button>
                                        {% endif %}
                                        <button type="button"
                                                @click="openActionMenu = false; fidusiaJobId = {{ job.id }}; showFidusiaModal = true;"
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Registrasi Jaminan Fidusia via AHU ONLINE">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
                                            <span>AHU Fidusia</span>
                                        </button>
                                        <button type="button"
                                                @click="openActionMenu = false; showTaxModal = true;"
                                                role="menuitem"
                                                class="w-full flex items-center space-x-2 px-3 py-2 lg:py-1.5 text-left text-xs text-slate-700 hover:bg-slate-50 min-h-[44px] lg:min-h-0 transition"
                                                title="Kalkulator BPHTB & PPh Final">
                                            <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                            <span>Kalkulator Pajak</span>
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-slate-500">
                                Tidak ada data pekerjaan akta ditemukan untuk tab ini.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 3. Enterprise Modals (Alpine.js) -->

    <!-- Modal A: BYOS Google Drive Explorer -->
    <div x-show="showDriveModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="showDriveModal = false" class="bg-white rounded max-w-lg w-full p-5 shadow-xl border border-slate-300">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Panel BYOS Google Drive</h3>
                </div>
                <button @click="showDriveModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>
            <div class="mt-3 space-y-2.5 text-xs">
                <div class="text-slate-600">
                    Berkas: <strong x-text="currentJobTitle" class="text-slate-900 font-medium"></strong>
                </div>
                <div class="p-2.5 bg-slate-50 text-slate-700 rounded border border-slate-200 text-[11px]">
                    <span class="font-semibold text-slate-900">Zero-Trust & Zero-Liability:</span> Dokumen rahasia klien tersimpan langsung di Google Drive milik Notaris. Server SaaS backend tidak menyimpan biner fisik secara permanen.
                </div>
                <!-- 3 Folders Structure -->
                <div class="space-y-1.5 pt-1">
                    <div class="p-2.5 rounded bg-slate-50 border border-slate-200 flex items-center justify-between">
                        <div>
                            <div class="font-semibold text-slate-900 font-mono text-[11px]">1_Berkas</div>
                            <div class="text-[10px] text-slate-500">Scan identitas KTP/KK, sertifikat tanah, dan draf akta</div>
                        </div>
                        <span class="px-1.5 py-0.5 bg-emerald-50 text-emerald-800 border border-emerald-200 rounded font-mono text-[10px]">Tersinkron</span>
                    </div>
                    <div class="p-2.5 rounded bg-slate-50 border border-slate-200 flex items-center justify-between">
                        <div>
                            <div class="font-semibold text-slate-900 font-mono text-[11px]">2_Bukti_Pembayaran</div>
                            <div class="text-[10px] text-slate-500">Bukti setor SSB BPHTB, SSP PPh Final, invoice tagihan</div>
                        </div>
                        <span class="px-1.5 py-0.5 bg-emerald-50 text-emerald-800 border border-emerald-200 rounded font-mono text-[10px]">Tersinkron</span>
                    </div>
                    <div class="p-2.5 rounded bg-slate-50 border border-slate-200 flex items-center justify-between">
                        <div>
                            <div class="font-semibold text-slate-900 font-mono text-[11px]">3_Tanda_Terima</div>
                            <div class="text-[10px] text-slate-500">Tanda terima fisik asli penghadap ber-QR Code</div>
                        </div>
                        <span class="px-1.5 py-0.5 bg-emerald-50 text-emerald-800 border border-emerald-200 rounded font-mono text-[10px]">Tersinkron</span>
                    </div>
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button @click="showDriveModal = false" class="px-3 py-1.5 bg-slate-800 text-white rounded text-xs font-medium hover:bg-slate-700">
                    Tutup Panel
                </button>
            </div>
        </div>
    </div>

    <!-- Modal B: Kalkulator Pajak Multi-Wilayah (Phase 3) -->
    <div x-show="showTaxModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="showTaxModal = false" class="bg-white rounded max-w-lg w-full p-5 shadow-xl border border-slate-300">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Kalkulator Multi-Pajak & Honorarium UUJN</h3>
                </div>
                <button @click="showTaxModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>
            <div class="mt-3 space-y-3 text-xs">
                <div class="grid grid-cols-2 gap-2.5">
                    <div>
                        <label class="block text-slate-700 font-medium mb-1">Wilayah NPOPTKP BPHTB</label>
                        <select x-model="calcRegion" class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white">
                            <option value="DKI_JAKARTA">DKI Jakarta (NPOPTKP Rp 80 Jt)</option>
                            <option value="KOTA_BEKASI">Kota Bekasi (NPOPTKP Rp 60 Jt)</option>
                            <option value="KOTA_DEPOK">Kota Depok (NPOPTKP Rp 60 Jt)</option>
                            <option value="KOTA_TANGERANG">Kota Tangerang (NPOPTKP Rp 60 Jt)</option>
                            <option value="KOTA_SURABAYA">Kota Surabaya (NPOPTKP Rp 60 Jt)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-700 font-medium mb-1">Jenis Transaksi</label>
                        <select x-model="calcTransType" class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white">
                            <option value="STANDARD">Jual Beli / Standar (5%)</option>
                            <option value="WARIS">Waris / Hibah Wasiat (NPOPTKP Rp 300 Jt+)</option>
                            <option value="HIBAH">Hibah Pertalian Darah</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-700 font-medium mb-1">Nilai Transaksi (Rp)</label>
                        <input type="number" x-model="calcTransValue" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                    </div>
                    <div>
                        <label class="block text-slate-700 font-medium mb-1">Nilai NJOP PBB (Rp)</label>
                        <input type="number" x-model="calcNjopValue" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                    </div>
                </div>

                <div class="flex justify-end pt-1">
                    <button type="button"
                            :disabled="isCalculatingTax"
                            @click="
                                calcError = '';
                                calcResult = null;
                                if (!calcTransValue || Number(calcTransValue) <= 0) {
                                    calcError = 'Nilai transaksi wajib diisi dengan nominal lebih besar dari 0.';
                                    return;
                                }
                                isCalculatingTax = true;
                                fetch('/api/v1/billing/calculate-tax/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify({
                                        region_key: calcRegion || 'DKI_JAKARTA',
                                        nilai_transaksi: Number(calcTransValue) || 0,
                                        njop: Number(calcNjopValue) || 0,
                                        is_waris: calcTransType === 'WARIS',
                                        kategori_pengalihan: 'STANDAR'
                                    })
                                })
                                .then(async r => {
                                    const d = await r.json();
                                    if (!r.ok) {
                                        const errDetail = typeof d.errors === 'object' ? Object.entries(d.errors).map(([k, v]) => `${k}: ${v}`).join(', ') : (d.message || JSON.stringify(d));
                                        throw new Error(errDetail || 'Gagal menghitung');
                                    }
                                    return d;
                                })
                                .then(d => {
                                    isCalculatingTax = false;
                                    calcResult = d.data;
                                })
                                .catch(err => {
                                    isCalculatingTax = false;
                                    calcError = 'Perhitungan gagal: ' + err.message;
                                });
                            "
                            class="px-3.5 py-1.5 bg-slate-900 text-white font-medium rounded hover:bg-slate-800 transition text-xs disabled:opacity-50">
                        <span x-show="!isCalculatingTax">Hitung Pajak & Biaya</span>
                        <span x-show="isCalculatingTax">Menghitung...</span>
                    </button>
                </div>

                <!-- Error Notice -->
                <template x-if="calcError">
                    <div class="p-2.5 rounded bg-rose-50 border border-rose-200 text-rose-800 text-xs font-medium" x-text="calcError"></div>
                </template>

                <!-- Hasil Kalkulasi -->
                <template x-if="calcResult && calcResult.breakdown">
                    <div class="p-3 rounded bg-slate-50 border border-slate-200 space-y-2 text-xs">
                        <div class="flex items-center justify-between border-b border-slate-200 pb-1.5">
                            <span class="font-bold text-slate-800 uppercase tracking-wide text-[10px]">Rincian Komputasi Pajak:</span>
                            <span class="text-[10px] font-mono text-slate-600 font-medium" x-text="calcResult.summary ? calcResult.summary.daerah : ''"></span>
                        </div>
                        <div class="space-y-1">
                            <div class="flex justify-between">
                                <span class="text-slate-600">BPHTB Pembeli (5%):</span>
                                <span class="font-mono font-bold text-slate-900" x-text="'Rp ' + Number(calcResult.breakdown.bphtb.pajak_bphtb).toLocaleString('id-ID')"></span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">PPh Final Penjual (PP 34/2016 2.5%):</span>
                                <span class="font-mono font-bold text-slate-900" x-text="'Rp ' + Number(calcResult.breakdown.pph_final.pajak_pph).toLocaleString('id-ID')"></span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">PNBP Kantah BPN (PP 128/2015):</span>
                                <span class="font-mono font-bold text-slate-900" x-text="'Rp ' + Number(calcResult.breakdown.pnbp_bpn.total_pnbp).toLocaleString('id-ID')"></span>
                            </div>
                            <div class="flex justify-between border-t border-slate-200 pt-1">
                                <span class="text-slate-600">Honorarium Notaris (Pasal 36 UUJN):</span>
                                <span class="font-mono font-bold text-emerald-800" x-text="'Rp ' + Number(calcResult.breakdown.honorarium_notaris.nominal_ditetapkan).toLocaleString('id-ID')"></span>
                            </div>
                            <div class="flex justify-between border-t-2 border-slate-300 pt-1.5 font-bold text-slate-900">
                                <span>Grand Total Estimasi Biaya:</span>
                                <span class="font-mono text-slate-950 text-sm" x-text="'Rp ' + Number(calcResult.summary.grand_total).toLocaleString('id-ID')"></span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Modal C: Scan OCR Berkas (KTP & Sertifikat Tanah) -->
    <div x-show="showOcrModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="showOcrModal = false" class="bg-white rounded-lg max-w-xl w-full p-5 shadow-2xl border border-slate-300 max-h-[90vh] flex flex-col overflow-hidden">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200 shrink-0">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Scan OCR KTP & Berkas Agraria BPN</h3>
                </div>
                <button @click="showOcrModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>

            <div class="mt-3 space-y-3 text-xs overflow-y-auto pr-1 flex-1">
                <p class="text-slate-600">Ekstraksi otomatis NIK, Nama, Tanggal Lahir, Nomor Hak SHM/HGB, NIB, dan Luas Tanah via engine AI OCR.</p>

                <!-- Pilihan Tipe Dokumen -->
                <div>
                    <label class="block text-slate-700 font-semibold mb-1">Jenis Dokumen:</label>
                    <select x-model="ocrDocType" class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white text-slate-800">
                        <option value="AUTO">Deteksi Otomatis (Auto-Detect)</option>
                        <option value="KTP">e-KTP Penghadap (Ekstraksi NIK & Nama)</option>
                        <option value="SERTIFIKAT">Sertipikat Tanah ATR/BPN (SHM / HGB / NIB)</option>
                        <option value="KK">Kartu Keluarga (KK)</option>
                        <option value="KENDARAAN">Dokumen Kendaraan (BPKB / STNK Fidusia)</option>
                    </select>
                </div>

                <!-- Input Berkas -->
                <div>
                    <label class="block text-slate-700 font-semibold mb-1">Unggah Citra / Dokumen:</label>
                    <input type="file" id="ocrFileInput" accept="image/jpeg,image/png,image/webp,.pdf"
                           @change="ocrFileName = $event.target.files[0] ? $event.target.files[0].name : ''"
                           class="block w-full text-xs text-slate-700 file:mr-2 file:py-1 file:px-2.5 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-slate-800 file:text-white hover:file:bg-slate-700 bg-slate-50 border border-slate-300 rounded cursor-pointer">
                    <p class="text-[10px] text-slate-500 mt-1" x-text="ocrFileName ? 'Berkas dipilih: ' + ocrFileName : 'Format: JPG, PNG, PDF (Maksimal 10MB)'"></p>
                </div>

                <!-- Tombol Proses -->
                <div class="flex justify-end pt-1">
                    <button type="button"
                            :disabled="ocrIsProcessing"
                            @click="
                                ocrError = '';
                                ocrResult = null;
                                ocrIsProcessing = true;

                                const formData = new FormData();
                                formData.append('doc_type', ocrDocType);

                                const ocrFileEl = document.getElementById('ocrFileInput');
                                if (ocrFileEl && ocrFileEl.files && ocrFileEl.files[0]) {
                                    formData.append('file', ocrFileEl.files[0]);
                                }

                                fetch('/api/v1/ocr/scan/', {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: formData
                                })
                                .then(async r => {
                                    const d = await r.json();
                                    if (!r.ok) {
                                        const errDetail = typeof d.errors === 'object' ? Object.entries(d.errors).map(([k, v]) => `${k}: ${v}`).join(', ') : JSON.stringify(d);
                                        throw new Error(errDetail || 'Gagal memproses OCR');
                                    }
                                    return d;
                                })
                                .then(d => {
                                    ocrIsProcessing = false;
                                    if (d.status === 'error' || (d.data && d.data.status === 'FAILED')) {
                                        ocrError = d.message || (d.data && d.data.message) || 'Teks dokumen tidak terbaca.';
                                        ocrResult = null;
                                        return;
                                    }
                                    ocrResult = d.data;
                                })
                                .catch(err => {
                                    ocrIsProcessing = false;
                                    ocrError = 'Gagal memproses berkas: ' + err.message;
                                });
                            "
                            class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded transition text-xs shadow-xs disabled:opacity-50">
                        <span x-show="!ocrIsProcessing">Mulai Ekstraksi OCR</span>
                        <span x-show="ocrIsProcessing">Memproses Citra...</span>
                    </button>
                </div>

                <!-- Error Notice -->
                <template x-if="ocrError">
                    <div class="p-2.5 rounded bg-rose-50 border border-rose-200 text-rose-800 text-xs font-medium" x-text="ocrError"></div>
                </template>

                <!-- Hasil Ekstraksi OCR -->
                <template x-if="ocrResult && ocrResult.extracted_data">
                    <div class="p-3.5 rounded bg-slate-50 border border-slate-200 space-y-2 text-xs">
                        <div class="flex items-center justify-between border-b border-slate-200 pb-1.5">
                            <span class="font-bold text-slate-800 uppercase tracking-wide text-[10px]">Hasil Ekstraksi Data OCR:</span>
                            <span class="px-1.5 py-0.5 rounded text-[10px] font-mono font-semibold bg-emerald-100 text-emerald-900 border border-emerald-200" x-text="ocrResult.doc_type"></span>
                        </div>

                        <!-- Data KTP -->
                        <template x-if="ocrResult.extracted_data.document_type === 'KTP' || ocrResult.doc_type === 'KTP'">
                            <div class="space-y-1 font-mono text-[11px]">
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">NIK:</span>
                                    <span class="font-bold text-slate-900 select-all" x-text="ocrResult.extracted_data.nik || '-'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">Nama:</span>
                                    <span class="font-bold text-slate-900" x-text="ocrResult.extracted_data.nama || '-'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">TTL:</span>
                                    <span class="text-slate-800" x-text="ocrResult.extracted_data.tempat_tanggal_lahir || '-'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">Alamat:</span>
                                    <span class="text-slate-800 text-right truncate max-w-[240px]" :title="ocrResult.extracted_data.alamat_lengkap || ocrResult.extracted_data.alamat" x-text="ocrResult.extracted_data.alamat_lengkap || ocrResult.extracted_data.alamat || '-'"></span>
                                </div>
                                <div class="grid grid-cols-2 gap-1 pt-0.5">
                                    <div class="p-1 bg-white rounded border border-slate-200">
                                        <span class="text-slate-500 font-sans text-[10px] block">Status Kawin:</span>
                                        <span class="text-slate-900 font-semibold" x-text="ocrResult.extracted_data.status_perkawinan || '-'"></span>
                                    </div>
                                    <div class="p-1 bg-white rounded border border-slate-200">
                                        <span class="text-slate-500 font-sans text-[10px] block">Pekerjaan:</span>
                                        <span class="text-slate-900 font-semibold" x-text="ocrResult.extracted_data.pekerjaan || '-'"></span>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <!-- Data Sertifikat Tanah -->
                        <template x-if="ocrResult.extracted_data.document_type === 'SERTIFIKAT_TANAH' || ocrResult.doc_type === 'SERTIFIKAT'">
                            <div class="space-y-1 font-mono text-[11px]">
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">Jenis & No. Hak:</span>
                                    <span class="font-bold text-slate-900" x-text="(ocrResult.extracted_data.jenis_hak || '') + ' ' + (ocrResult.extracted_data.nomor_hak || '')"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">NIB:</span>
                                    <span class="font-bold text-slate-900 select-all" x-text="ocrResult.extracted_data.nib || '-'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">Luas Tanah:</span>
                                    <span class="font-bold text-emerald-800" x-text="(ocrResult.extracted_data.luas_m2 || '-') + ' m²'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">Pemegang Hak:</span>
                                    <span class="text-slate-800" x-text="ocrResult.extracted_data.pemegang_hak || '-'"></span>
                                </div>
                            </div>
                        </template>

                        <!-- Data Kendaraan / BPKB -->
                        <template x-if="ocrResult.extracted_data.document_type === 'KENDARAAN' || ocrResult.doc_type === 'KENDARAAN'">
                            <div class="space-y-1 font-mono text-[11px]">
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">No. Polisi:</span>
                                    <span class="font-bold text-slate-900" x-text="ocrResult.extracted_data.nomor_registrasi || '-'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">No. Rangka (VIN):</span>
                                    <span class="font-bold text-slate-900 select-all" x-text="ocrResult.extracted_data.nomor_rangka_vin || '-'"></span>
                                </div>
                                <div class="flex justify-between p-1 bg-white rounded border border-slate-200">
                                    <span class="text-slate-500 font-sans">No. Mesin:</span>
                                    <span class="text-slate-800" x-text="ocrResult.extracted_data.nomor_mesin || '-'"></span>
                                </div>
                            </div>
                        </template>

                        <div class="pt-1 flex justify-end">
                            <button type="button"
                                    @click="
                                        const textToCopy = JSON.stringify(ocrResult.extracted_data, null, 2);
                                        navigator.clipboard.writeText(textToCopy);
                                        alert('Hasil ekstraksi OCR berhasil disalin ke clipboard!');
                                    "
                                    class="px-2.5 py-1 rounded bg-slate-200 hover:bg-slate-300 text-slate-800 text-[10px] font-medium transition">
                                Salin Data Terstruktur (JSON)
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <div class="mt-3 pt-2.5 border-t border-slate-200 flex justify-end shrink-0">
                <button @click="showOcrModal = false" class="px-3.5 py-1.5 bg-slate-100 text-slate-700 rounded text-xs font-medium hover:bg-slate-200 transition">Tutup</button>
            </div>
        </div>
    </div>

    <!-- Modal D: e-KYC Dukcapil (Phase 2 - Notaris Only) -->
    <div x-show="showEkycModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="showEkycModal = false" class="bg-white rounded max-w-md w-full p-5 shadow-xl border border-slate-300">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Verifikasi e-KYC Dukcapil Kemendagri</h3>
                </div>
                <button @click="showEkycModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>
            <div class="mt-3 space-y-2.5 text-xs">
                <div class="p-2.5 bg-amber-50 text-amber-900 rounded border border-amber-200 text-[11px]">
                    <strong>Otoritas Notaris:</strong> Verifikasi identitas kependudukan terenkripsi AES-256-GCM langsung ke Ditjen Dukcapil (Pasal 16 UUJN).
                </div>
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Nomor Induk Kependudukan (16 Digit NIK)</label>
                    <input type="text" placeholder="3171012304850001" class="w-full p-2 rounded border border-slate-300 text-xs font-mono">
                </div>
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Nama Sesuai KTP</label>
                    <input type="text" placeholder="Nama lengkap sesuai identitas..." class="w-full p-2 rounded border border-slate-300 text-xs">
                </div>
            </div>
            <div class="mt-4 flex justify-end space-x-2">
                <button @click="showEkycModal = false" class="px-3 py-1.5 bg-slate-100 text-slate-700 rounded text-xs font-medium hover:bg-slate-200">Tutup</button>
                <button @click="alert('Verifikasi e-KYC dikirim via antrean terenkripsi AES-256-GCM ke /api/v1/ekyc/verify/'); showEkycModal = false;" class="px-3.5 py-1.5 bg-sky-800 text-white rounded text-xs font-medium hover:bg-sky-700">Verifikasi NIK</button>
            </div>
        </div>
    </div>

    <!-- Modal E: Pendaftaran Fidusia AHU Online (Phase 4) -->
    <div x-show="showFidusiaModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="showFidusiaModal = false" class="bg-white rounded max-w-lg w-full p-5 shadow-xl border border-slate-300">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Pendaftaran Jaminan Fidusia AHU Online</h3>
                </div>
                <button @click="showFidusiaModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>
            <div class="mt-3 space-y-2.5 text-xs">
                <p class="text-slate-600">Integrasi antrean asinkron Celery worker dengan auto-retry ke portal Ditjen AHU Kemenkumham.</p>
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Pilih Transaksi / Pekerjaan Terkait</label>
                    <select x-model="fidusiaJobId" class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white text-slate-800">
                        {% for job in jobs_list %}
                        <option value="{{ job.id }}">{{ job.order_number }} - {{ job.client.nama }} ({{ job.title|truncatechars:35 }})</option>
                        {% empty %}
                        <option value="">-- Belum ada transaksi --</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Pemberi Fidusia (Debitur)</label>
                    <input type="text" x-model="fidusiaPemberi" placeholder="Nama debitur..." class="w-full p-1.5 rounded border border-slate-300 text-xs">
                </div>
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Penerima Fidusia (Kreditur / Bank)</label>
                    <input type="text" x-model="fidusiaPenerima" placeholder="PT Bank..." class="w-full p-1.5 rounded border border-slate-300 text-xs">
                </div>
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Nilai Penjaminan (Rp)</label>
                    <input type="number" x-model="fidusiaNilai" placeholder="150000000" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                </div>
                <template x-if="fidusiaMsg">
                    <div class="p-2.5 bg-emerald-50 text-emerald-800 rounded border border-emerald-200 font-medium text-[11px] flex items-start space-x-1.5">
                        <svg class="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        <span x-text="fidusiaMsg"></span>
                    </div>
                </template>
                <template x-if="fidusiaError">
                    <div class="p-2.5 bg-rose-50 text-rose-800 rounded border border-rose-200 font-medium text-[11px] flex items-start space-x-1.5">
                        <svg class="w-4 h-4 text-rose-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span x-text="fidusiaError"></span>
                    </div>
                </template>
            </div>
            <div class="mt-4 flex justify-end space-x-2">
                <button @click="showFidusiaModal = false" class="px-3 py-1.5 bg-slate-100 text-slate-700 rounded text-xs font-medium hover:bg-slate-200">Tutup</button>
                <button type="button"
                        :disabled="isSubmittingFidusia || !fidusiaJobId"
                        @click="
                            if (!fidusiaJobId) { fidusiaError = 'Silakan pilih transaksi terlebih dahulu.'; return; }
                            if (!fidusiaPemberi || !fidusiaPenerima || !fidusiaNilai) { fidusiaError = 'Semua field wajib diisi.'; return; }
                            isSubmittingFidusia = true;
                            fidusiaMsg = '';
                            fidusiaError = '';
                            fetch('/api/v1/ahu/fidusia/submit/', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRFToken': '{{ csrf_token }}'
                                },
                                body: JSON.stringify({
                                    job_id: fidusiaJobId,
                                    pemberi_fidusia: fidusiaPemberi,
                                    penerima_fidusia: fidusiaPenerima,
                                    nilai_penjaminan: fidusiaNilai
                                })
                            })
                            .then(async r => {
                                const d = await r.json();
                                if (!r.ok) throw new Error(d.message || JSON.stringify(d.errors || d));
                                return d;
                            })
                            .then(d => {
                                isSubmittingFidusia = false;
                                const reg = d.data?.ahu_registration_number || d.registration_number || '-';
                                const cert = d.data?.certificate_number || reg;
                                const st = d.data?.status || d.status;
                                fidusiaMsg = 'Pendaftaran berhasil! No. Registrasi: ' + reg + ' | No. Sertifikat: ' + cert + ' | Status: ' + st;
                                setTimeout(() => { window.location.reload(); }, 2500);
                            })
                            .catch(e => {
                                isSubmittingFidusia = false;
                                fidusiaError = 'Gagal mendaftarkan fidusia: ' + e.message;
                            });
                        "
                        class="px-3.5 py-1.5 bg-slate-900 text-white rounded text-xs font-medium hover:bg-slate-800 disabled:opacity-50 inline-flex items-center space-x-1.5">
                    <span x-show="!isSubmittingFidusia">Kirim Antrean AHU</span>
                    <span x-show="isSubmittingFidusia" class="flex items-center space-x-1">
                        <svg class="animate-spin h-3.5 w-3.5 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                        <span>Mendaftarkan...</span>
                    </span>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal F: Ekspor Laporan Bulanan Matriks A3 MPWN (Notaris Only) -->
    <div x-show="showExportModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="showExportModal = false" class="bg-white rounded max-w-md w-full p-5 shadow-xl border border-slate-300">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Ekspor Laporan Bulanan Resmi</h3>
                </div>
                <button @click="showExportModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>
            <div class="mt-3 space-y-2 text-xs">
                <p class="text-slate-600">Pilih jenis berkas laporan bulanan resmi untuk pengesahan Majelis Pengawas Daerah Notaris (MPDN) dan ATR/BPN:</p>
                <div class="space-y-1.5">
                    <a href="/api/v1/reports/monthly/?year=2026&month=9&report_type=REPERTORIUM&format=pdf" target="_blank"
                       class="p-2.5 rounded bg-slate-50 hover:bg-slate-100 border border-slate-200 flex items-center justify-between transition block">
                        <div>
                            <span class="font-semibold text-slate-900 block">Repertorium Notaris (PDF A3 Landscape)</span>
                            <span class="text-[10px] text-slate-500">Format buku mesin tik MPWN</span>
                        </div>
                        <span class="font-mono text-xs text-slate-700 font-semibold">&darr; Unduh</span>
                    </a>
                    <a href="/api/v1/reports/monthly/?year=2026&month=9&report_type=PPAT_BPN&format=pdf" target="_blank"
                       class="p-2.5 rounded bg-slate-50 hover:bg-slate-100 border border-slate-200 flex items-center justify-between transition block">
                        <div>
                            <span class="font-semibold text-slate-900 block">Matriks 14 Kolom PPAT (PDF A3 Landscape)</span>
                            <span class="text-[10px] text-slate-500">Format resmi Kantor Pertanahan ATR/BPN</span>
                        </div>
                        <span class="font-mono text-xs text-slate-700 font-semibold">&darr; Unduh</span>
                    </a>
                    <a href="/api/v1/reports/monthly/?year=2026&month=9&report_type=REPERTORIUM&format=xlsx" target="_blank"
                       class="p-2.5 rounded bg-slate-50 hover:bg-slate-100 border border-slate-200 flex items-center justify-between transition block">
                        <div>
                            <span class="font-semibold text-slate-900 block">Repertorium Notaris (Excel .xlsx)</span>
                            <span class="text-[10px] text-slate-500">Format spreadsheet multi-kolom arsip</span>
                        </div>
                        <span class="font-mono text-xs text-slate-700 font-semibold">&darr; Unduh</span>
                    </a>
                    <a href="/api/v1/reports/wasiat-status/?year=2026&month=9&format=pdf" target="_blank"
                       class="p-2.5 rounded bg-slate-50 hover:bg-slate-100 border border-slate-200 flex items-center justify-between transition block">
                        <div>
                            <span class="font-semibold text-slate-900 block">Surat Laporan Wasiat NIHIL (PDF A4)</span>
                            <span class="text-[10px] text-slate-500">Kepatuhan Pasal 16 ayat 1 huruf i UUJN</span>
                        </div>
                        <span class="font-mono text-xs text-slate-700 font-semibold">&darr; Unduh</span>
                    </a>
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button @click="showExportModal = false" class="px-3.5 py-1.5 bg-slate-800 text-white rounded text-xs font-medium hover:bg-slate-700">
                    Tutup
                </button>
            </div>
        </div>
    </div>

    <!-- Modal G: Tambah Transaksi / Pekerjaan Baru -->
    <div x-show="showAddJobModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="if (!isSubmittingJob) showAddJobModal = false" class="bg-white rounded max-w-xl w-full p-5 shadow-2xl border border-slate-300 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Pendaftaran Transaksi / Pekerjaan Baru</h3>
                </div>
                <button @click="showAddJobModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>

            <div class="mt-3 space-y-3 text-xs">
                <!-- 1. Pilihan Kategori Layanan -->
                <div>
                    <label class="block text-slate-700 font-semibold mb-1.5">Kategori Transaksi</label>
                    <div class="grid grid-cols-3 gap-2">
                        <button type="button"
                                @click="newJobCategory = 'NOTARIS'; newJobAktaType = 'PARTIJ'; newJobSigMethod = 'PHYSICAL_WET_INK';"
                                :class="newJobCategory === 'NOTARIS' ? 'bg-slate-900 text-white border-slate-900 shadow-xs' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'"
                                class="p-2 text-center rounded border font-medium transition text-xs">
                            <span class="block font-bold">Akta Notaris</span>
                            <span class="text-[10px] opacity-80">PT, Wasiat, Perjanjian</span>
                        </button>
                        <button type="button"
                                @click="newJobCategory = 'PPAT'; newJobAktaType = 'PARTIJ'; newJobSigMethod = 'PHYSICAL_WET_INK';"
                                :class="newJobCategory === 'PPAT' ? 'bg-slate-900 text-white border-slate-900 shadow-xs' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'"
                                class="p-2 text-center rounded border font-medium transition text-xs">
                            <span class="block font-bold">Akta PPAT</span>
                            <span class="text-[10px] opacity-80">AJB, APHT, Hibah</span>
                        </button>
                        <button type="button"
                                @click="newJobCategory = 'PENGURUSAN'; newJobAktaType = 'NON_AKTA'; newJobSigMethod = 'PHYSICAL_WET_INK';"
                                :class="newJobCategory === 'PENGURUSAN' ? 'bg-slate-900 text-white border-slate-900 shadow-xs' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'"
                                class="p-2 text-center rounded border font-medium transition text-xs">
                            <span class="block font-bold">Pengurusan Kantor</span>
                            <span class="text-[10px] opacity-80">Fidusia, Roya, Legalisasi</span>
                        </button>
                    </div>
                </div>

                <!-- 2. Klien / Pihak Pemohon -->
                <div class="p-2.5 rounded bg-slate-50 border border-slate-200">
                    <div class="flex items-center justify-between mb-1.5">
                        <label class="text-slate-700 font-semibold">Pihak / Klien Pemohon</label>
                        <button type="button"
                                @click="isCreatingNewClient = !isCreatingNewClient"
                                class="text-[11px] font-medium text-emerald-700 hover:text-emerald-800 underline">
                            <span x-show="!isCreatingNewClient">+ Input Klien Baru</span>
                            <span x-show="isCreatingNewClient">&larr; Pilih dari Daftar Klien</span>
                        </button>
                    </div>

                    <!-- Pilihan Klien Terdaftar -->
                    <template x-if="!isCreatingNewClient">
                        <div>
                            <select x-model="newJobClientId" class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white">
                                <option value="">-- Pilih Klien Terdaftar --</option>
                                {% for cl in clients_list %}
                                    <option value="{{ cl.id }}">{{ cl.name }} &bull; {{ cl.nik_or_npwp }}</option>
                                {% endfor %}
                            </select>
                            {% if not clients_list %}
                                <p class="text-[11px] text-amber-700 mt-1">Belum ada klien terdaftar. Silakan klik "+ Input Klien Baru".</p>
                            {% endif %}
                        </div>
                    </template>

                    <!-- Input Klien Baru Inline -->
                    <template x-if="isCreatingNewClient">
                        <div class="space-y-2 pt-1 border-t border-slate-200">
                            <div>
                                <label class="block text-[11px] text-slate-600 mb-0.5">Tipe Klien Pemohon</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <button type="button"
                                            @click="newClientType = 'INDIVIDU'"
                                            :class="newClientType === 'INDIVIDU' ? 'bg-slate-800 text-white font-semibold' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'"
                                            class="p-1.5 text-center rounded border text-xs transition">
                                        Perorangan (Individu)
                                    </button>
                                    <button type="button"
                                            @click="newClientType = 'BADAN_HUKUM'"
                                            :class="newClientType === 'BADAN_HUKUM' ? 'bg-slate-800 text-white font-semibold' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'"
                                            class="p-1.5 text-center rounded border text-xs transition">
                                        Badan Hukum (PT / CV)
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-[11px] text-slate-600 mb-0.5">Nama Lengkap Klien / Badan Usaha</label>
                                <input type="text"
                                       x-model="newClientName"
                                       @input="if (newClientName.toUpperCase().startsWith('PT') || newClientName.toUpperCase().startsWith('CV') || newClientName.toUpperCase().startsWith('YAYASAN')) newClientType = 'BADAN_HUKUM';"
                                       placeholder="Contoh: PT Trendy Gemilang atau Budi Santoso"
                                       class="w-full p-1.5 rounded border border-slate-300 text-xs">
                            </div>
                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="block text-[11px] text-slate-600 mb-0.5">
                                        <span x-text="newClientType === 'BADAN_HUKUM' ? 'NPWP Perusahaan (16 Digit)' : 'NIK KTP (16 Digit)'"></span>
                                    </label>
                                    <input type="text" x-model="newClientNik" placeholder="3277012345670001" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                                </div>
                                <div>
                                    <label class="block text-[11px] text-slate-600 mb-0.5">No. WhatsApp Klien</label>
                                    <input type="text" x-model="newClientPhone" placeholder="+6281234567890" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- 3. Judul Pekerjaan / Akta -->
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-slate-700 font-semibold">Judul Transaksi / Nama Akta</label>
                        <span class="text-[10px] text-slate-400">Wajib diisi</span>
                    </div>
                    <input type="text" x-model="newJobTitle" placeholder="Contoh: Pendirian PT Maju Bersama Abadi" class="w-full p-1.5 rounded border border-slate-300 text-xs">

                    <!-- Template Shortcut Cepat -->
                    <div class="flex flex-wrap items-center gap-1 mt-1.5">
                        <span class="text-[10px] text-slate-500 font-medium">Contoh cepat:</span>
                        <template x-if="newJobCategory === 'NOTARIS'">
                            <div class="inline-flex flex-wrap gap-1">
                                <button type="button" @click="newJobTitle = 'Pendirian PT ' + (newClientName || 'Sinar Abadi'); newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">PT</button>
                                <button type="button" @click="newJobTitle = 'Perjanjian Sewa Menyewa Ruko'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Sewa Menyewa</button>
                                <button type="button" @click="newJobTitle = 'Akta Wasiat Umum'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Wasiat</button>
                                <button type="button" @click="newJobTitle = 'Kuasa Menjual Saham'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Kuasa Menjual</button>
                                <button type="button" @click="newJobTitle = 'Berita Acara RUPS Luar Biasa'; newJobAktaType = 'RELAAS';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Relaas RUPS</button>
                            </div>
                        </template>
                        <template x-if="newJobCategory === 'PPAT'">
                            <div class="inline-flex flex-wrap gap-1">
                                <button type="button" @click="newJobTitle = 'Akta Jual Beli (AJB) Tanah & Bangunan'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">AJB</button>
                                <button type="button" @click="newJobTitle = 'Akta Pemberian Hak Tanggungan (APHT)'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">APHT</button>
                                <button type="button" @click="newJobTitle = 'Akta Hibah Tanah'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Hibah</button>
                                <button type="button" @click="newJobTitle = 'Akta Pembagian Hak Bersama (APHB)'; newJobAktaType = 'PARTIJ';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">APHB</button>
                            </div>
                        </template>
                        <template x-if="newJobCategory === 'PENGURUSAN'">
                            <div class="inline-flex flex-wrap gap-1">
                                <button type="button" @click="newJobTitle = 'Pendaftaran Jaminan Fidusia Kendaraan Bermotor AHU'; newJobAktaType = 'NON_AKTA';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Fidusia AHU</button>
                                <button type="button" @click="newJobTitle = 'Pencoretan Hak Tanggungan (Roya) Sertipikat BPN'; newJobAktaType = 'NON_AKTA';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Roya BPN</button>
                                <button type="button" @click="newJobTitle = 'Pengecekan Sertipikat Hak Milik BPN'; newJobAktaType = 'NON_AKTA';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Cek BPN</button>
                                <button type="button" @click="newJobTitle = 'Legalisasi Surat Kuasa Khusus'; newJobAktaType = 'LEGALISASI';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Legalisasi</button>
                                <button type="button" @click="newJobTitle = 'Waarmerking Perjanjian Kerjasama'; newJobAktaType = 'WARMERKING';" class="px-1.5 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-[10px] text-slate-700 font-medium border border-slate-200">Waarmerking</button>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- 4. Karakter Akta & Metode Tanda Tangan -->
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Sifat Dokumen / Akta</label>
                        <select x-model="newJobAktaType"
                                @change="if (newJobAktaType === 'PARTIJ') newJobSigMethod = 'PHYSICAL_WET_INK';"
                                class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white">
                            <option value="PARTIJ">Akta Partij (Pihak)</option>
                            <option value="RELAAS">Akta Relaas (Pejabat)</option>
                            <option value="WARMERKING">Waarmerking</option>
                            <option value="LEGALISASI">Legalisasi</option>
                            <option value="NON_AKTA">Pengurusan Non-Akta</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Metode Penandatanganan</label>
                        <template x-if="newJobAktaType === 'PARTIJ'">
                            <div>
                                <select disabled class="w-full p-1.5 rounded border border-slate-300 text-xs bg-slate-100 text-slate-600 font-medium">
                                    <option selected>Konvensional (Basah & Minuta Fisik)</option>
                                </select>
                                <p class="text-[10px] text-amber-700 mt-1 font-mono">
                                    UUJN Ps. 16: Akta Partij wajib fisik basah
                                </p>
                            </div>
                        </template>
                        <template x-if="newJobAktaType !== 'PARTIJ'">
                            <select x-model="newJobSigMethod" class="w-full p-1.5 rounded border border-slate-300 text-xs bg-white">
                                <option value="PHYSICAL_WET_INK">Konvensional (Tanda Tangan Basah)</option>
                                <option value="DIGITAL_PSRE_TTE">TTE PSrE Kominfo (Digital)</option>
                            </select>
                        </template>
                    </div>
                </div>

                <!-- 5. Nomor Akta & Tanggal -->
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Nomor Akta (Opsional)</label>
                        <input type="text" x-model="newJobNomor" placeholder="Contoh: 12 atau kosongkan jika draf" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                    </div>
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Tanggal Transaksi / Akta</label>
                        <input type="date" x-model="newJobTanggal" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                    </div>
                </div>

                <!-- 6. Komponen Finansial (Biaya Akta & Honorarium) -->
                {% if not IS_STAFF %}
                <div class="grid grid-cols-2 gap-2 p-2.5 rounded bg-slate-50 border border-slate-200">
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Biaya Akta / PNBP (Rp)</label>
                        <input type="number" x-model="newJobBiaya" placeholder="0" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                    </div>
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Honorarium Notaris (Rp)</label>
                        <input type="number" x-model="newJobHonorarium" placeholder="0" class="w-full p-1.5 rounded border border-slate-300 text-xs font-mono">
                    </div>
                </div>
                {% endif %}

                <!-- Feedback Pesan / Error -->
                <template x-if="newJobError">
                    <div class="p-2.5 rounded bg-rose-50 border border-rose-200 text-rose-800 text-[11px] font-medium" x-text="newJobError"></div>
                </template>
                <template x-if="newJobMsg">
                    <div class="p-2.5 rounded bg-emerald-50 border border-emerald-200 text-emerald-800 text-[11px] font-medium" x-text="newJobMsg"></div>
                </template>
            </div>

            <!-- Modal Footer Actions -->
            <div class="mt-4 flex items-center justify-end space-x-2 pt-2.5 border-t border-slate-200">
                <button type="button" @click="showAddJobModal = false" :disabled="isSubmittingJob" class="px-3.5 py-1.5 bg-slate-100 text-slate-700 rounded text-xs font-medium hover:bg-slate-200 transition">
                    Batal
                </button>
                <button type="button"
                        :disabled="isSubmittingJob"
                        @click="
                            newJobError = '';
                            newJobMsg = '';
                            if (!newJobTitle.trim()) {
                                newJobError = 'Judul transaksi/pekerjaan wajib diisi.';
                                return;
                            }
                            if (!isCreatingNewClient && !newJobClientId) {
                                newJobError = 'Silakan pilih klien pemohon atau buat klien baru.';
                                return;
                            }
                            if (isCreatingNewClient && !newClientName.trim()) {
                                newJobError = 'Nama klien baru wajib diisi.';
                                return;
                            }

                            isSubmittingJob = true;

                            const submitJobPayload = (clientId) => {
                                const payload = {
                                    job_type: newJobCategory,
                                    akta_type: newJobAktaType,
                                    signature_method: newJobSigMethod,
                                    client: clientId,
                                    title: newJobTitle.trim(),
                                    nomor_akta: newJobNomor.trim(),
                                    tanggal_akta: newJobTanggal || null,
                                    biaya_akta: newJobBiaya || 0,
                                    honorarium: newJobHonorarium || 0
                                };

                                fetch('/api/v1/jobs/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify(payload)
                                })
                                .then(async res => {
                                    const data = await res.json();
                                    if (!res.ok) {
                                        const errText = typeof data === 'object' ? Object.entries(data).map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`).join(' | ') : JSON.stringify(data);
                                        throw new Error(errText);
                                    }
                                    return data;
                                })
                                .then(data => {
                                    newJobMsg = 'Transaksi baru berhasil disimpan! Memuat ulang workdesk...';
                                    setTimeout(() => {
                                        window.location.href = '/?tab=' + newJobCategory;
                                    }, 600);
                                })
                                .catch(err => {
                                    isSubmittingJob = false;
                                    newJobError = 'Gagal menyimpan transaksi: ' + err.message;
                                });
                            };

                            if (isCreatingNewClient) {
                                fetch('/api/v1/clients/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify({
                                        name: newClientName.trim(),
                                        nik_or_npwp: newClientNik.trim() || '3171000000000001',
                                        phone_number: newClientPhone.trim() || '+628000000000',
                                        client_type: newClientType || (newClientName.toUpperCase().startsWith('PT') || newClientName.toUpperCase().startsWith('CV') ? 'BADAN_HUKUM' : 'INDIVIDU')
                                    })
                                })
                                .then(async res => {
                                    const cData = await res.json();
                                    if (!res.ok) {
                                        const errText = typeof cData === 'object' ? Object.entries(cData).map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`).join(' | ') : JSON.stringify(cData);
                                        throw new Error(errText);
                                    }
                                    return cData;
                                })
                                .then(cData => {
                                    submitJobPayload(cData.id);
                                })
                                .catch(err => {
                                    isSubmittingJob = false;
                                    newJobError = 'Gagal membuat klien baru: ' + err.message;
                                });
                            } else {
                                submitJobPayload(newJobClientId);
                            }
                        "
                        class="inline-flex items-center space-x-1.5 px-4 py-1.5 bg-emerald-700 hover:bg-emerald-600 text-white rounded text-xs font-semibold shadow-xs transition disabled:opacity-50">
                    <span x-show="!isSubmittingJob">Simpan Transaksi</span>
                    <span x-show="isSubmittingJob">Menyimpan...</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal H: Pembaruan Tahap & Progres Akta (US-01 / US-02) -->
    <div x-show="showStatusModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="if (!isUpdatingStatus) showStatusModal = false" class="bg-white rounded max-w-lg w-full p-5 shadow-2xl border border-slate-300 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-slate-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Pembaruan Tahap & Progres Akta</h3>
                </div>
                <button @click="showStatusModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>

            <div class="mt-3 space-y-3 text-xs">
                <!-- Info Pekerjaan Terpilih -->
                <div class="p-2.5 bg-slate-50 rounded border border-slate-200">
                    <div class="font-bold text-slate-900 text-xs" x-text="updateJobTitle"></div>
                    <div class="text-[11px] text-slate-600 mt-0.5">
                        Klien / Pemohon: <span class="font-medium text-slate-800" x-text="updateJobClient"></span>
                    </div>
                </div>

                <!-- Pilihan 5 Tahapan Progres Akta -->
                <div>
                    <label class="block text-slate-700 font-semibold mb-1.5">Pilih Tahapan Status Berkas</label>
                    <div class="space-y-1.5">
                        <!-- Tahap 1: DRAFT -->
                        <label class="flex items-start p-2 rounded border cursor-pointer transition text-xs"
                               :class="updateJobStatus === 'DRAFT' ? 'bg-slate-100 border-slate-800 ring-1 ring-slate-800' : 'bg-white border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="statusRadio" value="DRAFT" x-model="updateJobStatus" class="mt-0.5 text-slate-900">
                            <div class="ml-2.5">
                                <span class="font-bold text-slate-900 block">Tahap 1: Draf Awal / Berkas Masuk</span>
                                <span class="text-[10px] text-slate-500">Penerimaan berkas fisik identitas KTP/KK dan penyusunan draf klausul akta.</span>
                            </div>
                        </label>

                        <!-- Tahap 2: VERIFIKASI_EKYC -->
                        <label class="flex items-start p-2 rounded border cursor-pointer transition text-xs"
                               :class="updateJobStatus === 'VERIFIKASI_EKYC' ? 'bg-sky-50 border-sky-800 ring-1 ring-sky-800' : 'bg-white border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="statusRadio" value="VERIFIKASI_EKYC" x-model="updateJobStatus" class="mt-0.5 text-sky-800">
                            <div class="ml-2.5">
                                <span class="font-bold text-sky-950 block">Tahap 2: Verifikasi Identitas e-KYC Dukcapil</span>
                                <span class="text-[10px] text-sky-800">Pemeriksaan biometrik/kependudukan NIK dan status perkawinan para pihak.</span>
                            </div>
                        </label>

                        <!-- Tahap 3: PEMBACAAN_TTD -->
                        <label class="flex items-start p-2 rounded border cursor-pointer transition text-xs"
                               :class="updateJobStatus === 'PEMBACAAN_TTD' ? 'bg-amber-50 border-amber-800 ring-1 ring-amber-800' : 'bg-white border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="statusRadio" value="PEMBACAAN_TTD" x-model="updateJobStatus" class="mt-0.5 text-amber-800">
                            <div class="ml-2.5">
                                <span class="font-bold text-amber-950 block">Tahap 3: Pembacaan & TTD Fisik Minuta Akta (Verleiden)</span>
                                <span class="text-[10px] text-amber-800">Kehadiran para pihak di hadapan Notaris, tanda tangan basah & cap sidik jari (UUJN Ps. 16).</span>
                            </div>
                        </label>

                        <!-- Tahap 4: PROSES_INSTANSI -->
                        <label class="flex items-start p-2 rounded border cursor-pointer transition text-xs"
                               :class="updateJobStatus === 'PROSES_INSTANSI' ? 'bg-indigo-50 border-indigo-800 ring-1 ring-indigo-800' : 'bg-white border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="statusRadio" value="PROSES_INSTANSI" x-model="updateJobStatus" class="mt-0.5 text-indigo-800">
                            <div class="ml-2.5">
                                <span class="font-bold text-indigo-950 block">Tahap 4: Proses Pendaftaran / Validasi Instansi</span>
                                <span class="text-[10px] text-indigo-800">Proses SK Kemenkumham Ditjen AHU Online, validasi pajak, atau Kantor Pertanahan ATR/BPN.</span>
                            </div>
                        </label>

                        <!-- Tahap 5: SELESAI -->
                        <label class="flex items-start p-2 rounded border cursor-pointer transition text-xs"
                               :class="updateJobStatus === 'SELESAI' ? 'bg-emerald-50 border-emerald-800 ring-1 ring-emerald-800' : 'bg-white border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="statusRadio" value="SELESAI" x-model="updateJobStatus" class="mt-0.5 text-emerald-800">
                            <div class="ml-2.5">
                                <span class="font-bold text-emerald-950 block">Tahap 5: Akta Selesai & Salinan Siap Diambil</span>
                                <span class="text-[10px] text-emerald-800">Salinan akta resmi telah terbit dan siap diserahkan kepada pihak klien.</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- DYNAMIC CONTEXTUAL PROCESS PANELS PER STAGE -->

                <!-- PROSES TAHAP 1: Draf Awal / Berkas Masuk -->
                <div x-show="updateJobStatus === 'DRAFT'" class="p-3 bg-slate-50 rounded border border-slate-200 space-y-2">
                    <div class="flex items-center space-x-2 text-slate-900 font-bold text-xs">
                        <span class="w-5 h-5 rounded-full bg-slate-800 text-white flex items-center justify-center text-[10px]">1</span>
                        <span>Aktivitas Tahap 1: Pengumpulan Berkas & Draf Awal</span>
                    </div>
                    <p class="text-[11px] text-slate-600 leading-relaxed">
                        Penerimaan dokumen identitas fisik (KTP/KK/NPWP), bukti kepemilikan hak (Sertipikat Tanah/BPKB), atau legalitas badan usaha. Penomoran akta belum diperlukan pada tahap ini.
                    </p>
                    <div class="pt-1 flex flex-wrap gap-2">
                        <button type="button" @click="showStatusModal = false; showOcrModal = true;"
                                class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 text-xs font-medium transition shadow-xs">
                            <svg class="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                            <span>Buka Scan OCR Dokumen</span>
                        </button>
                        <button type="button" @click="showStatusModal = false; showDriveModal = true; currentJobTitle = updateJobTitle; currentDriveFolder = 'gdrive_root';"
                                class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 text-xs font-medium transition shadow-xs">
                            <svg class="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"/></svg>
                            <span>Buka Folder Drive Berkas</span>
                        </button>
                    </div>
                </div>

                <!-- PROSES TAHAP 2: Verifikasi e-KYC Dukcapil -->
                <div x-show="updateJobStatus === 'VERIFIKASI_EKYC'" class="p-3 bg-sky-50/80 rounded border border-sky-200 space-y-2">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2 text-sky-950 font-bold text-xs">
                            <span class="w-5 h-5 rounded-full bg-sky-700 text-white flex items-center justify-center text-[10px]">2</span>
                            <span>Aktivitas Tahap 2: Verifikasi Identitas e-KYC Dukcapil</span>
                        </div>
                        <span class="text-[10px] font-mono px-2 py-0.5 rounded uppercase font-semibold"
                              :class="updateJobEkycStatus === 'VERIFIED' ? 'bg-emerald-100 text-emerald-800 border border-emerald-300' : 'bg-amber-100 text-amber-800 border border-amber-300'">
                            <span x-text="updateJobEkycStatus === 'VERIFIED' ? 'Terverifikasi' : 'Belum Diverifikasi'"></span>
                        </span>
                    </div>
                    <p class="text-[11px] text-sky-900 leading-relaxed">
                        Pemeriksaan data kependudukan NIK dan status perkawinan para pihak ke Ditjen Dukcapil dengan enkripsi AES-256-GCM guna mencegah penyelundupan hukum identitas penghadap.
                    </p>
                    <div class="pt-1 flex items-center justify-between gap-2">
                        <div class="flex items-center space-x-2">
                            <label class="text-[11px] text-sky-900 font-semibold">Status Validasi:</label>
                            <select x-model="updateJobEkycStatus" class="p-1 rounded border border-sky-300 text-xs bg-white text-sky-900 font-medium">
                                <option value="UNVERIFIED">Belum Diverifikasi</option>
                                <option value="VERIFIED">Terverifikasi e-KYC Dukcapil</option>
                                <option value="FAILED">Gagal / Tidak Cocok</option>
                            </select>
                        </div>
                        <button type="button" @click="showStatusModal = false; showEkycModal = true;"
                                class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-sky-700 hover:bg-sky-600 text-white text-xs font-medium transition shadow-xs">
                            <span>Buka Gateway Dukcapil</span>
                        </button>
                    </div>
                </div>

                <!-- PROSES TAHAP 3: Pembacaan & TTD Fisik Minuta Akta (Verleiden) -->
                <div x-show="updateJobStatus === 'PEMBACAAN_TTD'" class="p-3 bg-amber-50/80 rounded border border-amber-200 space-y-2.5">
                    <div class="flex items-center space-x-2 text-amber-950 font-bold text-xs">
                        <span class="w-5 h-5 rounded-full bg-amber-700 text-white flex items-center justify-center text-[10px]">3</span>
                        <span>Aktivitas Tahap 3: Pembacaan & Tanda Tangan Minuta Fisik (Verleiden)</span>
                    </div>
                    <div class="p-2 rounded bg-amber-100/70 border border-amber-300/80 text-[11px] text-amber-900 leading-relaxed">
                        <strong>Kepatuhan Hukum Wajib (UUJN No. 2/2014 Pasal 16):</strong>
                        Para pihak wajib hadir secara fisik di hadapan Notaris. Akta dibacakan di hadapan saksi-saksi, serta dibubuhi <u>tanda tangan basah (wet-ink)</u> dan <u>cap sidik jari jempol fisik</u> pada lembar Minuta Akta konvensional.
                    </div>
                    <!-- Di tahap inilah nomor akta resmi diterbitkan -->
                    <div class="space-y-1.5 pt-1">
                        <span class="text-[11px] font-bold text-amber-950 block">Penomoran Akta & Repertorium Resmi:</span>
                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="block text-[11px] text-amber-900 font-medium mb-0.5">Nomor Akta</label>
                                <input type="text" x-model="updateJobNomor" placeholder="Contoh: 38" class="w-full p-1.5 rounded border border-amber-300 text-xs font-mono bg-white">
                            </div>
                            <div>
                                <label class="block text-[11px] text-amber-900 font-medium mb-0.5">Nomor Buku Repertorium</label>
                                <input type="text" x-model="updateJobRepertorium" placeholder="Contoh: 45/2026" class="w-full p-1.5 rounded border border-amber-300 text-xs font-mono bg-white">
                            </div>
                        </div>
                        <div>
                            <label class="block text-[11px] text-amber-900 font-medium mb-0.5">Tanggal Pelaksanaan Akta</label>
                            <input type="date" x-model="updateJobTanggal" class="w-full p-1.5 rounded border border-amber-300 text-xs font-mono bg-white">
                        </div>
                    </div>

                    <!-- Upload Dokumen Minuta Fisik (TTD Basah & Cap Sidik Jari Jempol) -->
                    <div class="pt-2 border-t border-amber-200/80 space-y-1.5">
                        <div class="flex items-center justify-between">
                            <label class="block text-[11px] text-amber-950 font-bold">
                                Upload Scan Minuta Akta Fisik (TTD Basah & Cap Sidik Jari Jempol):
                            </label>
                            <span class="text-[10px] text-amber-800 font-mono font-semibold">UUJN Ps. 16</span>
                        </div>
                        
                        <!-- Tampilan jika sudah ada berkas yang tersimpan -->
                        <template x-if="updateJobMinutaUrl">
                            <div class="p-2 rounded bg-amber-100/90 border border-amber-300 flex items-center justify-between text-xs">
                                <div class="flex items-center space-x-2 truncate">
                                    <svg class="w-4 h-4 text-amber-800 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                    <span class="font-mono text-[11px] text-amber-950 font-medium truncate" x-text="updateJobMinutaName || 'Berkas Minuta Terunggah'"></span>
                                </div>
                                <a :href="updateJobMinutaUrl" target="_blank" class="shrink-0 px-2.5 py-1 rounded bg-amber-800 hover:bg-amber-900 text-white font-medium text-[11px] transition shadow-xs">
                                    Buka Minuta
                                </a>
                            </div>
                        </template>

                        <!-- Input File Upload -->
                        <div class="space-y-1">
                            <input type="file" id="updateJobMinutaInput" accept=".pdf,image/jpeg,image/png,image/webp"
                                   class="block w-full text-xs text-slate-700 file:mr-2 file:py-1 file:px-2.5 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-amber-800 file:text-white hover:file:bg-amber-700 bg-white border border-amber-300 rounded cursor-pointer">
                            <p class="text-[10px] text-amber-800">
                                Format didukung: PDF, JPG, PNG (Maks 20MB). Memuat lembar tanda tangan basah & cap sidik jari fisik para pihak/saksi.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- PROSES TAHAP 4: Pengesahan & Pendaftaran Instansi -->
                <div x-show="updateJobStatus === 'PROSES_INSTANSI'" class="p-3 bg-indigo-50/80 rounded border border-indigo-200 space-y-2.5">
                    <div class="flex items-center space-x-2 text-indigo-950 font-bold text-xs">
                        <span class="w-5 h-5 rounded-full bg-indigo-700 text-white flex items-center justify-center text-[10px]">4</span>
                        <span>Aktivitas Tahap 4: Pengesahan & Validasi Portal Instansi</span>
                    </div>
                    <p class="text-[11px] text-indigo-900 leading-relaxed">
                        Pendaftaran berkas ke portal kementerian / instansi pemerintah terkait:
                        <br>&bull; <strong>Akta PT / Badan Usaha:</strong> Permohonan SK Pengesahan Menteri Hukum & HAM via Ditjen AHU Online.
                        <br>&bull; <strong>Jaminan Fidusia:</strong> Pendaftaran sertifikat jaminan fidusia online (antrean Celery).
                        <br>&bull; <strong>Akta PPAT / Tanah:</strong> Validasi BPHTB Bapenda, PPh KPP Pratama, dan pendaftaran ke Kantor Pertanahan ATR/BPN.
                    </p>
                    <div class="space-y-1.5 pt-1">
                        <label class="block text-[11px] text-indigo-950 font-semibold">Nomor Registrasi / Tanda Terima Instansi (AHU / BPN)</label>
                        <input type="text" x-model="updateJobRegId" placeholder="Contoh: AHU-0012345.AH.01.01.2026 atau No. Berkas BPN 8921/2026" class="w-full p-1.5 rounded border border-indigo-300 text-xs font-mono bg-white">
                    </div>
                    <div class="pt-1 flex flex-wrap gap-2">
                        <button type="button" @click="showStatusModal = false; showFidusiaModal = true; fidusiaJobId = updateJobId;"
                                class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-white hover:bg-indigo-100 border border-indigo-300 text-indigo-900 text-xs font-medium transition shadow-xs">
                            <span>Antrean AHU Fidusia</span>
                        </button>
                        <button type="button" @click="showStatusModal = false; showTaxModal = true;"
                                class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-white hover:bg-indigo-100 border border-indigo-300 text-indigo-900 text-xs font-medium transition shadow-xs">
                            <span>Kalkulator Pajak BPHTB/PPh</span>
                        </button>
                    </div>
                </div>

                <!-- PROSES TAHAP 5: Akta Selesai & Salinan Siap Diambil -->
                <div x-show="updateJobStatus === 'SELESAI'" class="p-3 bg-emerald-50/80 rounded border border-emerald-200 space-y-2.5">
                    <div class="flex items-center space-x-2 text-emerald-950 font-bold text-xs">
                        <span class="w-5 h-5 rounded-full bg-emerald-700 text-white flex items-center justify-center text-[10px]">5</span>
                        <span>Aktivitas Tahap 5: Akta Selesai & Salinan Siap Diambil</span>
                    </div>
                    <div class="p-2 rounded bg-emerald-100/70 border border-emerald-300/80 text-[11px] text-emerald-900 leading-relaxed">
                        <strong>Status Final:</strong> Minuta Akta telah dijahit dan disimpan ke dalam lemari arsip warkah Notaris. <strong>Salinan Akta resmi (*Grosse Akta*)</strong> telah dicap basah dan siap diserahkan kepada klien/penghadap di kantor Notaris.
                    </div>
                    <!-- Ringkasan Nomor & Tanggal Akta -->
                    <div class="grid grid-cols-3 gap-2 pt-1 font-mono text-xs">
                        <div class="p-1.5 bg-white rounded border border-emerald-200">
                            <span class="text-[10px] text-slate-500 block">No. Akta</span>
                            <span class="font-bold text-slate-900" x-text="updateJobNomor || '-'"></span>
                        </div>
                        <div class="p-1.5 bg-white rounded border border-emerald-200">
                            <span class="text-[10px] text-slate-500 block">No. Repertorium</span>
                            <span class="font-bold text-slate-900" x-text="updateJobRepertorium || '-'"></span>
                        </div>
                        <div class="p-1.5 bg-white rounded border border-emerald-200">
                            <span class="text-[10px] text-slate-500 block">Tanggal Akta</span>
                            <span class="font-bold text-slate-900" x-text="updateJobTanggal || '-'"></span>
                        </div>
                    </div>
                    <p class="text-[10px] text-emerald-800 font-medium">
                        Portal pelacakan WhatsApp klien otomatis menampilkan status hijau bahwa salinan akta telah siap diambil.
                    </p>
                </div>

                <!-- Pesan Notifikasi -->
                <div class="p-2 rounded bg-slate-100 text-[10px] text-slate-600 border border-slate-200">
                    Pembaruan ini secara otomatis menyinkronkan status stepper pada portal pelacakan WhatsApp klien (Zero-Login).
                </div>

                <template x-if="updateStatusError">
                    <div class="p-2 rounded bg-rose-50 border border-rose-200 text-rose-800 text-[11px] font-medium" x-text="updateStatusError"></div>
                </template>
                <template x-if="updateStatusMsg">
                    <div class="p-2 rounded bg-emerald-50 border border-emerald-200 text-emerald-800 text-[11px] font-medium" x-text="updateStatusMsg"></div>
                </template>
            </div>

            <!-- Footer Actions -->
            <div class="mt-4 flex items-center justify-end space-x-2 pt-2.5 border-t border-slate-200">
                <button type="button" @click="showStatusModal = false" :disabled="isUpdatingStatus" class="px-3.5 py-1.5 bg-slate-100 text-slate-700 rounded text-xs font-medium hover:bg-slate-200 transition">
                    Batal
                </button>
                <button type="button"
                        :disabled="isUpdatingStatus"
                        @click="
                            updateStatusError = '';
                            updateStatusMsg = '';
                            isUpdatingStatus = true;

                            const formData = new FormData();
                            formData.append('status', updateJobStatus);
                            formData.append('nomor_akta', (updateJobNomor || '').trim());
                            formData.append('nomor_repertorium', (updateJobRepertorium || '').trim());
                            if (updateJobTanggal) {
                                formData.append('tanggal_akta', updateJobTanggal);
                            }
                            formData.append('dukcapil_verification_status', updateJobEkycStatus);
                            formData.append('fidusia_registration_id', (updateJobRegId || '').trim());

                            const minutaInput = document.getElementById('updateJobMinutaInput');
                            if (minutaInput && minutaInput.files && minutaInput.files[0]) {
                                formData.append('minuta_document', minutaInput.files[0]);
                            }

                            fetch('/api/v1/jobs/' + updateJobId + '/', {
                                method: 'PATCH',
                                headers: {
                                    'X-CSRFToken': '{{ csrf_token }}'
                                },
                                body: formData
                            })
                            .then(async res => {
                                const data = await res.json();
                                if (!res.ok) {
                                    const errText = typeof data === 'object' ? Object.entries(data).map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`).join(' | ') : JSON.stringify(data);
                                    throw new Error(errText);
                                }
                                return data;
                            })
                            .then(data => {
                                updateStatusMsg = 'Status akta berhasil diperbarui! Memuat ulang workdesk...';
                                setTimeout(() => {
                                    window.location.reload();
                                }, 500);
                            })
                            .catch(err => {
                                isUpdatingStatus = false;
                                updateStatusError = 'Gagal memperbarui status: ' + err.message;
                            });
                        "
                        class="inline-flex items-center space-x-1.5 px-4 py-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded text-xs font-semibold shadow-xs transition disabled:opacity-50">
                    <span x-show="!isUpdatingStatus">Simpan Pembaruan Status</span>
                    <span x-show="isUpdatingStatus">Menyimpan...</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal I: Live Legal Deed Editor (On-The-Fly) -->
    <div x-show="showDraftModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/75 p-3 sm:p-5">
        <div @click.away="showDraftModal = false" class="bg-white rounded-lg max-w-5xl w-full h-[92vh] flex flex-col shadow-2xl border border-slate-300 overflow-hidden">
            <!-- Header -->
            <div class="px-5 py-3 border-b border-slate-200 bg-slate-50 flex items-center justify-between shrink-0">
                <div class="flex items-center space-x-2.5">
                    <div class="w-7 h-7 rounded bg-slate-900 text-white flex items-center justify-center font-bold text-xs">
                        §
                    </div>
                    <div>
                        <div class="flex items-center space-x-2">
                            <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Editor Draf Naskah Akta (On-The-Fly)</h3>
                            <span class="px-1.5 py-0.2 rounded text-[10px] font-mono font-medium bg-amber-100 text-amber-900 border border-amber-200">Legal Folio</span>
                        </div>
                        <div class="text-[11px] text-slate-500 truncate max-w-xl" x-text="currentDraftTitle"></div>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button type="button" @click="showDraftModal = false" class="text-slate-400 hover:text-slate-700 p-1 text-lg font-bold leading-none">&times;</button>
                </div>
            </div>

            <!-- Toolbar Subheader -->
            <div class="px-5 py-2 bg-slate-100/80 border-b border-slate-200 flex flex-wrap items-center justify-between gap-2 text-xs shrink-0">
                <div class="flex items-center space-x-3 text-slate-600 font-mono text-[11px]">
                    <div>Karakter: <span class="font-semibold text-slate-900" x-text="(currentDraftContent || '').length"></span></div>
                    <div>&bull;</div>
                    <div>Kata: <span class="font-semibold text-slate-900" x-text="(currentDraftContent || '').trim() ? (currentDraftContent.trim().split(/\s+/).length) : 0"></span></div>
                    <div>&bull;</div>
                    <div>Baris: <span class="font-semibold text-slate-900" x-text="(currentDraftContent || '').split('\n').length"></span></div>
                </div>
                
                <div class="flex items-center space-x-2">
                    <!-- Copy to Clipboard -->
                    <button type="button"
                            @click="
                                navigator.clipboard.writeText(currentDraftContent);
                                copyNotice = 'Naskah tersalin ke clipboard!';
                                setTimeout(() => { copyNotice = ''; }, 2500);
                            "
                            class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-white hover:bg-slate-50 border border-slate-300 text-slate-700 text-[11px] font-medium transition shadow-xs">
                        <svg class="w-3 h-3 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                        <span x-text="copyNotice || 'Salin Naskah'">Salin Naskah</span>
                    </button>

                    <!-- Reset Template Button -->
                    <button type="button"
                            :disabled="isResettingDraft"
                            @click="
                                if (!confirm('Apakah Anda yakin ingin me-reset naskah ini kembali ke draf template standar otomatis? Suntingan kustom akan ditimpa.')) return;
                                isResettingDraft = true;
                                draftSavedNotice = '';
                                draftErrorNotice = '';
                                fetch('/api/v1/jobs/' + currentDraftJobId + '/reset-draft/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    }
                                })
                                .then(async res => {
                                    const data = await res.json();
                                    if (!res.ok) throw new Error(data.detail || 'Gagal reset');
                                    return data;
                                })
                                .then(data => {
                                    isResettingDraft = false;
                                    currentDraftContent = data.draft_content;
                                    draftSavedNotice = 'Berhasil di-reset ke template standar sesuai data transaksi!';
                                    setTimeout(() => { draftSavedNotice = ''; }, 4000);
                                })
                                .catch(err => {
                                    isResettingDraft = false;
                                    draftErrorNotice = 'Gagal reset draf: ' + err.message;
                                });
                            "
                            class="inline-flex items-center space-x-1 px-2.5 py-1 rounded bg-white hover:bg-rose-50 border border-slate-300 hover:border-rose-300 text-slate-700 hover:text-rose-700 text-[11px] font-medium transition shadow-xs disabled:opacity-50">
                        <svg class="w-3 h-3 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        <span x-show="!isResettingDraft">Reset Template Standar</span>
                        <span x-show="isResettingDraft">Mereset...</span>
                    </button>
                </div>
            </div>

            <!-- Feedback Notice Banners -->
            <template x-if="draftSavedNotice">
                <div class="px-5 py-2 bg-emerald-50 border-b border-emerald-200 text-emerald-800 text-xs font-medium flex items-center justify-between">
                    <span x-text="draftSavedNotice"></span>
                    <button type="button" @click="draftSavedNotice = ''" class="text-emerald-600 hover:text-emerald-900 font-bold">&times;</button>
                </div>
            </template>
            <template x-if="draftErrorNotice">
                <div class="px-5 py-2 bg-rose-50 border-b border-rose-200 text-rose-800 text-xs font-medium flex items-center justify-between">
                    <span x-text="draftErrorNotice"></span>
                    <button type="button" @click="draftErrorNotice = ''" class="text-rose-600 hover:text-rose-900 font-bold">&times;</button>
                </div>
            </template>

            <!-- Editor Body: Legal Folio Monospace Textarea -->
            <div class="flex-1 p-4 bg-slate-200/50 flex flex-col overflow-hidden">
                <div class="flex-1 flex flex-col bg-[#fafaf9] rounded border border-slate-300 shadow-inner overflow-hidden">
                    <textarea x-model="currentDraftContent"
                              class="w-full h-full p-4 font-mono text-xs leading-relaxed text-slate-900 bg-[#fafaf9] border-0 focus:outline-none focus:ring-0 resize-none font-normal"
                              placeholder="Ketik atau sunting naskah klausul akta di sini..."
                              spellcheck="false"></textarea>
                </div>
            </div>

            <!-- Footer -->
            <div class="px-5 py-3 border-t border-slate-200 bg-white flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2.5 shrink-0">
                <div class="text-[11px] text-slate-500">
                    Perubahan naskah disimpan langsung ke database dan tercatat dalam Jejak Audit (UUJN No. 2/2014).
                </div>
                <div class="flex items-center space-x-2">
                    <button type="button" @click="showDraftModal = false" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-medium transition">
                        Tutup
                    </button>
                    <button type="button"
                            :disabled="isSavingDraft"
                            @click="
                                isSavingDraft = true;
                                draftSavedNotice = '';
                                draftErrorNotice = '';
                                fetch('/api/v1/jobs/' + currentDraftJobId + '/', {
                                    method: 'PATCH',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify({
                                        draft_content: currentDraftContent
                                    })
                                })
                                .then(async res => {
                                    const data = await res.json();
                                    if (!res.ok) {
                                        const errText = typeof data === 'object' ? Object.entries(data).map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`).join(' | ') : JSON.stringify(data);
                                        throw new Error(errText);
                                    }
                                    return data;
                                })
                                .then(data => {
                                    isSavingDraft = false;
                                    draftSavedNotice = 'Draf akta berhasil disimpan on-the-fly!';
                                    setTimeout(() => { draftSavedNotice = ''; }, 3500);
                                })
                                .catch(err => {
                                    isSavingDraft = false;
                                    draftErrorNotice = 'Gagal menyimpan draf: ' + err.message;
                                });
                            "
                            class="inline-flex items-center space-x-1.5 px-4 py-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded text-xs font-semibold shadow-xs transition disabled:opacity-50">
                        <svg x-show="!isSavingDraft" class="w-3.5 h-3.5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        <span x-show="!isSavingDraft">Simpan Perubahan Draf</span>
                        <span x-show="isSavingDraft">Menyimpan...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal J: Generator Draf Minuta Akta Word (.DOCX) — docxtpl Engine -->
    <div x-show="showDocxModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="if (!isGeneratingDocx) showDocxModal = false" class="bg-white rounded max-w-lg w-full p-5 shadow-2xl border border-slate-300 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">Generator Draf Minuta Akta Word (.DOCX)</h3>
                </div>
                <button type="button" @click="showDocxModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>

            <div class="mt-3 space-y-3 text-xs">
                <div class="p-2.5 bg-blue-50/80 border border-blue-200 rounded text-blue-900 leading-relaxed text-[11px]">
                    <span class="font-bold">Kepatuhan Hukum & Arsitektur:</span>
                    <br>&bull; <strong>(UUJN Ps. 16):</strong> Draf otomatis menyertakan klausul fisik pembacaan <em>(verleiden)</em>, tanda tangan basah, dan cap sidik jari.
                    <br>&bull; <strong>(BYOS):</strong> Berkas dapat disimpan langsung ke Google Drive Notaris <code>(folder 1_Berkas)</code>.
                </div>

                <div>
                    <label class="block text-slate-700 font-semibold mb-1">Pekerjaan / Akta Terkait</label>
                    <input type="text" :value="docxJobTitle + ' (' + docxJobClient + ')'" readonly class="w-full p-2 rounded border border-slate-200 bg-slate-50 text-slate-700 text-xs cursor-not-allowed">
                </div>

                <div>
                    <label class="block text-slate-700 font-semibold mb-1">Pilihan Template Dokumen Notariat (.docx)</label>
                    <select x-model="docxTemplateType" class="w-full p-2 rounded border border-slate-300 text-xs bg-white text-slate-800 focus:ring-1 focus:ring-blue-500">
                        <option value="PT">Minuta Akta Pendirian Perseroan Terbatas (PT) - UU No. 40/2007</option>
                        <option value="AJB">Minuta Akta Jual Beli (AJB) PPAT - Perkaban BPN No. 8/2012</option>
                        <option value="KUASA">Akta Kuasa Untuk Menjual (KUHPerdata & UUJN)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-slate-700 font-semibold mb-1">Komparisi Kustom (Opsional)</label>
                    <textarea x-model="docxCustomKomparisi"
                              rows="3"
                              placeholder="Biarkan kosong untuk menggunakan komparisi baku otomatis dari data klien/KTP..."
                              class="w-full p-2 rounded border border-slate-300 text-xs font-mono text-slate-800 placeholder:text-slate-400 focus:ring-1 focus:ring-blue-500"></textarea>
                </div>

                <!-- Notifikasi Berhasil -->
                <template x-if="docxSuccessNotice">
                    <div class="p-3 bg-emerald-50 border border-emerald-200 rounded text-emerald-800 text-[11px] space-y-1.5">
                        <div class="flex items-center space-x-1.5 font-bold">
                            <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <span x-text="docxSuccessNotice"></span>
                        </div>
                        <template x-if="docxDownloadUrl">
                            <div>
                                <a :href="docxDownloadUrl" target="_blank" class="inline-flex items-center space-x-1 px-2.5 py-1 bg-emerald-700 hover:bg-emerald-600 text-white rounded font-semibold text-[10px] transition">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                    <span>Buka / Unduh File DOCX</span>
                                </a>
                            </div>
                        </template>
                    </div>
                </template>

                <!-- Notifikasi Galat -->
                <template x-if="docxErrorNotice">
                    <div class="p-2.5 bg-rose-50 border border-rose-200 rounded text-rose-800 text-[11px] flex items-start space-x-1.5">
                        <svg class="w-4 h-4 text-rose-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span x-text="docxErrorNotice"></span>
                    </div>
                </template>
            </div>

            <!-- Footer Actions -->
            <div class="mt-4 pt-3 border-t border-slate-200 flex flex-wrap justify-end gap-2">
                <button type="button" @click="showDocxModal = false" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-medium transition">
                    Tutup
                </button>

                <!-- Generate & Unduh Langsung -->
                <button type="button"
                        :disabled="isGeneratingDocx"
                        @click="
                            isGeneratingDocx = true;
                            docxSuccessNotice = '';
                            docxErrorNotice = '';
                            docxDownloadUrl = '';
                            fetch('/api/v1/jobs/' + docxJobId + '/generate-draft/', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRFToken': '{{ csrf_token }}'
                                },
                                body: JSON.stringify({
                                    template_type: docxTemplateType,
                                    custom_komparisi: docxCustomKomparisi
                                })
                            })
                            .then(async r => {
                                const d = await r.json();
                                if (!r.ok) throw new Error(d.message || JSON.stringify(d));
                                return d;
                            })
                            .then(d => {
                                isGeneratingDocx = false;
                                docxSuccessNotice = d.message || 'Draf .docx berhasil dibuat!';
                                docxDownloadUrl = d.data?.local_url || d.data?.drive_result?.file_url;
                            })
                            .catch(e => {
                                isGeneratingDocx = false;
                                docxErrorNotice = 'Gagal membuat berkas docx: ' + e.message;
                            });
                        "
                        class="inline-flex items-center space-x-1.5 px-3.5 py-1.5 bg-blue-700 hover:bg-blue-600 text-white rounded text-xs font-semibold shadow-xs transition disabled:opacity-50">
                    <svg x-show="!isGeneratingDocx" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    <span x-show="!isGeneratingDocx">Generate Draf DOCX</span>
                    <span x-show="isGeneratingDocx">Membuat Dokumen...</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Modal K: Pengiriman Notifikasi WhatsApp Otomatis (Celery Worker) -->
    <div x-show="showWaModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
        <div @click.away="if (!isSendingWa) showWaModal = false" class="bg-white rounded max-w-lg w-full p-5 shadow-2xl border border-slate-300 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between pb-2.5 border-b border-slate-200">
                <div class="flex items-center space-x-2">
                    <svg class="w-4 h-4 text-emerald-600" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wide">WhatsApp Automated Notification Engine</h3>
                </div>
                <button type="button" @click="showWaModal = false" class="text-slate-400 hover:text-slate-600 text-lg font-bold leading-none">&times;</button>
            </div>

            <div class="mt-3 space-y-3 text-xs">
                <div class="p-2.5 bg-emerald-50 border border-emerald-200 rounded text-emerald-900 leading-relaxed text-[11px]">
                    <span class="font-bold">Asinkron & Zero-Data-Leakage :</span>
                    <br>&bull; Pengiriman pesan diproses oleh background worker Celery & Redis dengan auto-retry idempoten.
                    <br>&bull; Menyertakan tautan pelacakan Zero-Login unik tanpa membocorkan biaya rahasia internal kantor.
                </div>

                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Nama Klien</label>
                        <input type="text" :value="waClientName" readonly class="w-full p-2 rounded border border-slate-200 bg-slate-50 text-slate-700 text-xs">
                    </div>
                    <div>
                        <label class="block text-slate-700 font-semibold mb-1">Nomor WhatsApp</label>
                        <input type="text" :value="waClientPhone" readonly class="w-full p-2 rounded border border-slate-200 bg-slate-50 text-slate-700 text-xs font-mono">
                    </div>
                </div>

                <div>
                    <label class="block text-slate-700 font-semibold mb-1">Pilih Peristiwa Notifikasi (Trigger Event)</label>
                    <select x-model="waEventType" class="w-full p-2 rounded border border-slate-300 text-xs bg-white text-slate-800 focus:ring-1 focus:ring-emerald-500">
                        <option value="PEMBACAAN_TTD">Tahap 3: Undangan Fisik Pembacaan & Tanda Tangan Basah (Verleiden)</option>
                        <option value="INVOICE_CREATED">Pemberitahuan Tagihan Pembayaran Akta</option>
                        <option value="AKTA_SELESAI">Tahap 5: Konfirmasi Salinan Minuta Akta Siap Diambil</option>
                        <option value="STATUS_UPDATE">Pembaruan Progres Pekerjaan Umum</option>
                    </select>
                </div>

                <!-- Live Preview Template Pesan -->
                <div class="p-3 bg-slate-50 border border-slate-200 rounded">
                    <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Preview Format Pesan:</p>
                    <p class="text-[11px] text-slate-700 font-sans leading-relaxed whitespace-pre-line"
                       x-text="
                           waEventType === 'PEMBACAAN_TTD'
                           ? 'Yth. Bapak/Ibu ' + waClientName + ',\nBerkas akta Anda ' + waJobTitle + ' telah memasuki Tahap 3 (Verleiden). Silakan hadir langsung ke kantor Notaris membawa KTP asli untuk tanda tangan basah & cap sidik jari minuta (UUJN Ps. 16).\nTautan pelacakan: ' + window.location.origin + '/track/...'
                           : (waEventType === 'AKTA_SELESAI'
                              ? 'Kabar baik Bapak/Ibu ' + waClientName + '! 🎉\nProses pengerjaan akta ' + waJobTitle + ' telah SELESAI. Salinan resmi akta autentik Anda sudah siap diambil di kantor kami.\nTautan: ' + window.location.origin + '/track/...'
                              : 'Pembaruan status resmi berkas akta ' + waJobTitle + ' untuk Bapak/Ibu ' + waClientName + ' dapat dipantau di: ' + window.location.origin + '/track/...')
                       ">
                    </p>
                </div>

                <!-- Alert Berhasil -->
                <template x-if="waSuccessNotice">
                    <div class="p-2.5 bg-emerald-50 border border-emerald-200 rounded text-emerald-800 text-[11px] flex items-center space-x-1.5">
                        <svg class="w-4 h-4 text-emerald-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        <span x-text="waSuccessNotice"></span>
                    </div>
                </template>

                <!-- Alert Galat -->
                <template x-if="waErrorNotice">
                    <div class="p-2.5 bg-rose-50 border border-rose-200 rounded text-rose-800 text-[11px] flex items-start space-x-1.5">
                        <svg class="w-4 h-4 text-rose-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span x-text="waErrorNotice"></span>
                    </div>
                </template>
            </div>

            <!-- Footer Actions -->
            <div class="mt-4 pt-3 border-t border-slate-200 flex justify-end space-x-2">
                <button type="button" @click="showWaModal = false" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-medium transition">
                    Tutup
                </button>
                <button type="button"
                        :disabled="isSendingWa"
                        @click="
                            isSendingWa = true;
                            waSuccessNotice = '';
                            waErrorNotice = '';
                            fetch('/api/v1/jobs/' + waJobId + '/notify-whatsapp/', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRFToken': '{{ csrf_token }}'
                                },
                                body: JSON.stringify({
                                    event_type: waEventType
                                })
                            })
                            .then(async r => {
                                const d = await r.json();
                                if (!r.ok) throw new Error(d.message || JSON.stringify(d));
                                return d;
                            })
                            .then(d => {
                                isSendingWa = false;
                                waSuccessNotice = d.message || 'Notifikasi WhatsApp berhasil dikirim!';
                                setTimeout(() => { waSuccessNotice = ''; }, 4500);
                            })
                            .catch(e => {
                                isSendingWa = false;
                                waErrorNotice = 'Gagal mengirim pesan: ' + e.message;
                            });
                        "
                        class="inline-flex items-center space-x-1.5 px-3.5 py-1.5 bg-emerald-700 hover:bg-emerald-600 text-white rounded text-xs font-semibold shadow-xs transition disabled:opacity-50">
                    <svg x-show="!isSendingWa" class="w-3.5 h-3.5 text-emerald-200" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                    <span x-show="!isSendingWa">Kirim Pesan via Celery</span>
                    <span x-show="isSendingWa">Mengirim Notifikasi...</span>
                </button>
            </div>
        </div>
    </div>

    <!-- ================================================================= -->
    <!-- Modal L: Flagging Pembayaran Cepat / 'Sudah Bayar'  -->
    <!-- ================================================================= -->
    <div x-show="showPayModal"
         class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4"
         x-cloak>
        <div class="bg-white rounded-lg border border-slate-200 shadow-xl max-w-md w-full p-5 space-y-4"
             @click.away="showPayModal = false">
            <div class="flex items-center justify-between pb-3 border-b border-slate-100">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded bg-emerald-50 border border-emerald-200 flex items-center justify-center text-emerald-700">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900">Konfirmasi Pelunasan Tagihan</h3>
                        <p class="text-[11px] text-slate-500">Flagging pembayaran & pembukaan kunci stage gate</p>
                    </div>
                </div>
                <button @click="showPayModal = false" class="text-slate-400 hover:text-slate-600 text-sm font-bold">&times;</button>
            </div>

            <!-- Ringkasan Akta & Tagihan -->
            <div class="p-3 bg-slate-50 rounded border border-slate-200 space-y-1 text-xs">
                <div class="font-semibold text-slate-900" x-text="payJobTitle"></div>
                <div class="text-slate-600 text-[11px]">Klien: <span class="font-medium text-slate-800" x-text="payClientName"></span></div>
                {% if CAN_VIEW_FINANCIALS %}
                <div class="pt-2 mt-2 border-t border-slate-200/80 flex items-center justify-between font-mono-num">
                    <span class="text-slate-500">Sisa Tagihan Belum Bayar:</span>
                    <span class="font-bold text-rose-700 text-sm" x-text="'Rp ' + Number(payRemaining).toLocaleString('id-ID')"></span>
                </div>
                {% endif %}
            </div>

            <!-- Formulir Pembayaran -->
            <div class="space-y-3 text-xs">
                <div>
                    <label class="block text-slate-700 font-medium mb-1">Nominal Pembayaran (Rp)</label>
                    <input type="number" step="1000" x-model="payAmount" class="w-full px-3 py-1.5 border border-slate-300 rounded font-mono-num text-xs focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500">
                    <span class="text-[10px] text-slate-400 mt-0.5 block">Default terisi sebesar seluruh sisa tagihan untuk pelunasan instan.</span>
                </div>

                <div>
                    <label class="block text-slate-700 font-medium mb-1">Metode Pembayaran</label>
                    <select x-model="payMethod" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs bg-white focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="TRANSFER_BANK">Transfer Bank (BCA / Mandiri / BRI)</option>
                        <option value="TUNAI">Kas Tunai Kantor Notaris</option>
                        <option value="QRIS">QRIS Statis / Dinamis</option>
                        <option value="GIRO">Bilyet Giro / Cek Bank</option>
                    </select>
                </div>

                <div>
                    <label class="block text-slate-700 font-medium mb-1">Nomor Referensi / Catatan Transaksi</label>
                    <input type="text" x-model="payRef" placeholder="Contoh: Ref BCA 98124 / Kasir Andi" class="w-full px-3 py-1.5 border border-slate-300 rounded text-xs focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500">
                </div>
            </div>

            <!-- Notifikasi Pesan -->
            <div x-show="paySuccessMsg" class="p-2.5 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded text-xs" x-text="paySuccessMsg"></div>
            <div x-show="payErrorMsg" class="p-2.5 bg-rose-50 border border-rose-200 text-rose-800 rounded text-xs" x-text="payErrorMsg"></div>

            <!-- Tombol Aksi -->
            <div class="pt-3 border-t border-slate-100 flex justify-end space-x-2">
                <button type="button" @click="showPayModal = false" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-medium transition">
                    Batal
                </button>
                <button type="button"
                        :disabled="isSubmittingPayment"
                        @click="
                            isSubmittingPayment = true;
                            paySuccessMsg = '';
                            payErrorMsg = '';

                            const doMarkPaid = (invId) => {
                                fetch('/api/v1/billing/invoices/' + invId + '/mark-paid/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify({
                                        amount: payAmount,
                                        payment_method: payMethod,
                                        catatan: payRef
                                    })
                                })
                                .then(async r => {
                                    const d = await r.json();
                                    if (!r.ok) throw new Error(d.message || JSON.stringify(d));
                                    return d;
                                })
                                .then(d => {
                                    isSubmittingPayment = false;
                                    paySuccessMsg = d.message || 'Pembayaran berhasil dikonfirmasi!';
                                    setTimeout(() => { window.location.reload(); }, 600);
                                })
                                .catch(e => {
                                    isSubmittingPayment = false;
                                    payErrorMsg = 'Gagal memproses pembayaran: ' + e.message;
                                });
                            };

                            if (payInvoiceId) {
                                doMarkPaid(payInvoiceId);
                            } else {
                                // Buat invoice otomatis terlebih dahulu jika belum ada
                                fetch('/api/v1/billing/invoices/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify({
                                        job: payJobId,
                                        total_tagihan: payTotalTagihan || payRemaining
                                    })
                                })
                                .then(async r => {
                                    const d = await r.json();
                                    if (!r.ok) throw new Error(JSON.stringify(d));
                                    return d;
                                })
                                .then(newInv => {
                                    doMarkPaid(newInv.id);
                                })
                                .catch(e => {
                                    isSubmittingPayment = false;
                                    payErrorMsg = 'Gagal membuat invoice otomatis: ' + e.message;
                                });
                            }
                        "
                        class="inline-flex items-center space-x-1.5 px-3.5 py-1.5 bg-emerald-700 hover:bg-emerald-600 text-white rounded text-xs font-semibold shadow-xs transition disabled:opacity-50">
                    <span x-show="!isSubmittingPayment">Konfirmasi & Buka Kunci</span>
                    <span x-show="isSubmittingPayment">Memproses...</span>
                </button>
            </div>
        </div>
    </div>

</div>

<script>
window.positionAksiMenu = function (trigger, menu) {
    var t = trigger.getBoundingClientRect();
    var vw = window.innerWidth;
    var vh = window.innerHeight;
    var gap = 6;
    var edge = 8;
    var menuW = menu.offsetWidth || 256;
    var contentH = menu.scrollHeight || menu.offsetHeight;
    if (!contentH) {
        return { top: (t.bottom + gap) + 'px', right: (vw - t.right) + 'px', maxHeight: '' };
    }
    var spaceBelow = vh - t.bottom;
    var spaceAbove = t.top;
    var top;
    if (contentH + gap <= spaceBelow) {
        top = t.bottom + gap;
    } else if (contentH + gap <= spaceAbove) {
        top = t.top - contentH - gap;
    } else if (spaceBelow >= spaceAbove) {
        top = t.bottom + gap;
    } else {
        top = t.top - contentH - gap;
    }
    var maxBottom = vh - edge;
    if (top < edge) top = edge;
    if (top > maxBottom - 56) top = Math.max(edge, maxBottom - 56);
    var maxH = null;
    if (top + contentH > maxBottom) maxH = maxBottom - top;
    if (maxH !== null && maxH < 56) maxH = 56;
    var right = vw - t.right;
    if (right < edge) right = edge;
    if (right > vw - menuW - edge) right = Math.max(edge, vw - menuW - edge);
    return { top: top + 'px', right: right + 'px', maxHeight: maxH === null ? '' : maxH + 'px' };
};
</script>
{% endblock %}