@extends('layouts.adminlte')

@section('title', 'LEAD CLIENT')
@section('page_title', 'LEAD CLIENT / MARKETING')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .lead-page-shell { display:flex; flex-direction:column; gap:12px; }
        .crm-system-shell { border:1px solid #dbe3ee; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.06); }
        .crm-system-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:12px 16px; background:#111827; color:#fff; }
        .crm-system-title { margin:0; font-size:22px; line-height:1.1; font-weight:900; }
        .crm-system-subtitle { margin-top:4px; color:#cbd5e1; font-size:12px; font-weight:700; }
        .crm-system-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:10px; background:#f8fafc; border-top:1px solid rgba(255,255,255,.08); }
        .crm-system-tab { border:1px solid #dbe3ee; background:#eef2f7; color:#334155; border-radius:7px; padding:8px 11px; font-size:12px; font-weight:900; }
        .crm-system-tab.active { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.22); }
        .crm-tab-panel { display:none; }
        .crm-tab-panel.active { display:block; }
        .crm-detail-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; align-items:start; }
        .crm-summary-grid { display:grid; grid-template-columns:repeat(3, minmax(140px, 1fr)); gap:8px; }
        .crm-summary-item { border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; padding:9px 10px; min-height:58px; }
        .crm-summary-item span { display:block; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; }
        .crm-summary-item strong { display:block; color:#0f172a; font-size:13px; margin-top:3px; word-break:break-word; }
        .crm-work-grid { display:grid; grid-template-columns:repeat(2, minmax(160px, 1fr)); gap:8px; margin-top:10px; }
        .crm-work-item { display:flex; gap:8px; align-items:flex-start; border:1px solid #dbeafe; background:#eff6ff; border-radius:8px; padding:9px 10px; color:#1e3a8a; font-size:12px; font-weight:800; }
        .crm-work-item i { margin-top:2px; color:#2563eb; }
        .crm-task-toolbar { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr auto; gap:8px; margin-bottom:10px; }
        .crm-task-status { border-radius:999px; padding:3px 8px; font-size:11px; font-weight:900; display:inline-flex; }
        .crm-task-waiting { background:#f1f5f9; color:#475569; }
        .crm-task-progress { background:#dbeafe; color:#1d4ed8; }
        .crm-task-revision { background:#fef3c7; color:#92400e; }
        .crm-task-done { background:#dcfce7; color:#166534; }
        .crm-task-cancelled { background:#fee2e2; color:#991b1b; }
        .crm-task-file-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
        .crm-task-file-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid #dbe3ee; background:#f8fafc; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; text-decoration:none; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .crm-task-rev-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid #fde68a; background:#fffbeb; color:#92400e; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:900; text-decoration:none; margin:2px 3px 0 0; }
        .crm-task-checklist { display:grid; grid-template-columns:repeat(2, minmax(260px, 1fr)); gap:8px; margin-top:8px; }
        .crm-task-checkitem { display:flex; align-items:flex-start; gap:8px; border:1px solid #e5e7eb; background:#f8fafc; border-radius:8px; padding:8px 9px; font-size:11px; font-weight:800; color:#334155; white-space:normal; min-height:44px; }
        .crm-task-checkitem input { margin-top:2px; }
        .crm-task-table { border-collapse:separate; border-spacing:0 10px; }
        .crm-task-table thead th { background:#f8fafc; color:#64748b; border:0; font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
        .crm-task-row td { background:#fff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; vertical-align:middle; padding:11px 10px; }
        .crm-task-row td:first-child { border-left:1px solid #e5e7eb; border-radius:10px 0 0 10px; }
        .crm-task-row td:last-child { border-right:1px solid #e5e7eb; border-radius:0 10px 10px 0; }
        .crm-task-row.is-done td { background:#f0fdf4; }
        .crm-task-row.is-revision td { background:#fffbeb; }
        .crm-task-title { font-size:13px; font-weight:900; color:#0f172a; }
        .crm-task-docno { display:inline-flex; border-radius:999px; background:#eef2ff; color:#3730a3; padding:2px 7px; font-size:11px; font-weight:900; margin-bottom:4px; }
        .crm-task-actions { display:grid; grid-template-columns:repeat(3, 32px); gap:5px; justify-content:end; }
        .crm-task-actions .btn { width:32px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
        .crm-task-status-select { width:128px; }
        .crm-dept-score-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; margin:8px 0 10px; }
        .crm-dept-score-card { border:1px solid #dbe3ee; border-radius:8px; background:#f8fafc; padding:8px 9px; }
        .crm-dept-score-card strong { display:flex; justify-content:space-between; gap:8px; font-size:12px; text-transform:uppercase; }
        .crm-dept-score-card small { color:#64748b; font-weight:700; }
        .crm-dept-score-bar { height:6px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin-top:6px; }
        .crm-dept-score-bar span { display:block; height:100%; background:#2563eb; }
        .crm-priority-score-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin:8px 0 10px; }
        .crm-priority-score-card { border:1px solid #bfdbfe; border-left:4px solid #2563eb; border-radius:8px; background:#eff6ff; padding:9px 10px; }
        .crm-priority-score-card.is-risk { border-color:#fecaca; border-left-color:#dc2626; background:#fef2f2; }
        .crm-priority-score-card strong { display:flex; justify-content:space-between; gap:8px; color:#0f172a; font-size:13px; }
        .crm-priority-score-card small { color:#475569; font-weight:700; }
        .crm-doc-module { display:grid; grid-template-columns:320px 1fr; gap:12px; align-items:start; }
        .crm-doc-card { border:1px solid #dbe3ee; border-radius:10px; background:#fff; padding:11px; }
        .crm-doc-card h5 { margin:0 0 8px; font-size:13px; font-weight:900; color:#0f172a; }
        .crm-doc-stat { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
        .crm-doc-stat div { background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:8px; }
        .crm-doc-stat span { display:block; color:#64748b; font-size:10px; font-weight:900; text-transform:uppercase; }
        .crm-doc-stat strong { display:block; font-size:16px; color:#0f172a; }
        .crm-doc-list { display:grid; gap:8px; }
        .crm-doc-item { border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; padding:9px; }
        .crm-doc-item-title { font-weight:900; color:#0f172a; font-size:12px; word-break:break-word; }
        .crm-doc-item-meta { color:#64748b; font-size:11px; margin-top:2px; }
        .crm-task-preview-box { text-align:left; display:grid; gap:8px; }
        .crm-task-preview-box .preview-group { border:1px solid #e5e7eb; border-radius:8px; padding:9px 10px; background:#f8fafc; }
        .crm-detail-box { border:1px solid #dbe3ee; border-radius:8px; background:#fff; padding:12px; }
        .crm-detail-box h4 { margin:0 0 8px; font-size:13px; font-weight:900; color:#0f172a; }
        .crm-detail-box pre { margin:0; white-space:pre-wrap; background:#0f172a; color:#dbeafe; border-radius:7px; padding:10px; font-size:11px; max-height:160px; overflow:auto; }
        .crm-empty-note { border:1px dashed #cbd5e1; border-radius:8px; background:#f8fafc; padding:10px 12px; color:#475569; font-size:12px; font-weight:700; }
        .crm-project-link { border:0; background:transparent; padding:0; color:#0d6efd; font-weight:900; text-align:left; }
        .crm-detail-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:14px 16px; background:#fff; border-bottom:1px solid #e5e7eb; }
        .crm-detail-title { margin:0; font-size:16px; font-weight:900; color:#0f172a; }
        .crm-detail-subtitle { color:#64748b; font-size:12px; margin-top:2px; }
        .lead-board { display:grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap:8px; }
        .lead-kpi { border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.04); }
        .lead-kpi span { color:#64748b; font-size:11px; text-transform:uppercase; font-weight:700; }
        .lead-kpi strong { display:block; font-size:22px; line-height:1.1; color:#0f172a; }
        .lead-card { border:1px solid #dbe3ee; border-radius:8px; box-shadow:0 10px 28px rgba(15,23,42,.05); }
        .lead-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #e5e7eb; background:#fff; }
        .lead-toolbar-title { font-size:15px; font-weight:800; color:#0f172a; margin:0; }
        .lead-toolbar-subtitle { color:#64748b; font-size:12px; margin-top:2px; }
        .lead-filter-band { padding:12px 14px; background:#f8fafc; border-bottom:1px solid #e5e7eb; }
        .lead-filter-grid { display:grid; grid-template-columns:160px 220px 150px 150px 178px minmax(280px, 1fr); gap:8px; align-items:end; }
        .lead-filter-field label { display:block; margin-bottom:4px; color:#475569; font-size:11px; font-weight:900; text-transform:uppercase; }
        .lead-search-box { display:flex; align-items:center; gap:8px; height:36px; border:1px solid #93c5fd; border-radius:8px; background:#fff; padding:0 8px; box-shadow:0 0 0 3px rgba(59,130,246,.08); }
        .lead-search-box:focus-within { border-color:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.16); }
        .lead-search-box i { color:#2563eb; }
        .lead-search-box input { border:0; outline:0; box-shadow:none !important; padding:0; height:32px; font-weight:700; min-width:0; }
        .lead-search-clear { border:0; background:#e2e8f0; color:#334155; border-radius:999px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; }
        .lead-search-clear:hover { background:#cbd5e1; }
        #leadTable_filter { display:none; }
        .lead-table-wrap { padding:0 14px 12px; }
        .lead-row-title { font-weight:800; color:#0f172a; }
        .lead-row-sub { color:#64748b; font-size:12px; margin-top:2px; }
        .lead-actions { display:flex; flex-wrap:wrap; gap:4px; }
        .lead-status-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
        .lead-status-tab { border:1px solid #dbe3ee; background:#fff; color:#334155; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800; }
        .lead-status-tab.active { background:#0d6efd; border-color:#0d6efd; color:#fff; }
        .attachment-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
        .attachment-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; border:1px solid #dbe3ee; background:#f8fafc; border-radius:999px; padding:3px 8px; font-size:12px; text-decoration:none; }
        .status-pill { border-radius:999px; padding:3px 8px; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
        .status-lead,.status-inquiry { background:#e0f2fe; color:#075985; }
        .status-tender_received,.status-estimating { background:#fef3c7; color:#92400e; }
        .status-quotation_ready,.status-submitted,.status-negotiation { background:#ede9fe; color:#5b21b6; }
        .status-won { background:#dcfce7; color:#166534; }
        .status-lost,.status-archived { background:#fee2e2; color:#991b1b; }
        .status-survey { background:#ccfbf1; color:#115e59; }
        .status-quotation { background:#f3e8ff; color:#6b21a8; }
        .status-follow_up { background:#ffedd5; color:#9a3412; }
        .qualification-pill { border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; display:inline-flex; margin-top:4px; }
        .qualification-not_checked { background:#f1f5f9; color:#475569; }
        .qualification-qualified { background:#dcfce7; color:#166534; }
        .qualification-need_review,.qualification-hold { background:#fef3c7; color:#92400e; }
        .qualification-rejected { background:#fee2e2; color:#991b1b; }
        .deadline-pill { border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; display:inline-flex; margin-top:4px; }
        .deadline-open { background:#e0f2fe; color:#075985; }
        .deadline-due_soon { background:#fef3c7; color:#92400e; }
        .deadline-overdue { background:#fee2e2; color:#991b1b; }
        .deadline-closed { background:#e2e8f0; color:#334155; }
        .deadline-no_deadline { background:#f1f5f9; color:#64748b; }
        .qualification-summary { display:grid; grid-template-columns:1.2fr .8fr; gap:10px; margin-bottom:12px; }
        .qualification-summary-box { border:1px solid #dbe3ee; background:#f8fafc; border-radius:8px; padding:10px 12px; }
        .qualification-summary-box span { display:block; color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; }
        .qualification-summary-box strong { display:block; color:#0f172a; font-size:14px; margin-top:2px; }
        .qualification-score-card { border:1px solid #dbe3ee; border-radius:8px; padding:10px; background:#fff; height:100%; }
        .qualification-score-card label { font-size:12px; font-weight:800; color:#334155; margin-bottom:6px; }
        .qualification-score-card small { display:block; color:#64748b; min-height:30px; margin-top:5px; }
        .qualification-meter { border:1px solid #dbe3ee; background:#f8fafc; border-radius:8px; padding:12px; }
        .qualification-meter-score { font-size:28px; font-weight:900; color:#0f172a; line-height:1; }
        .qualification-meter .progress { height:10px; }
        .competitor-row { display:grid; grid-template-columns: 1.2fr .8fr .8fr 1fr auto; gap:6px; margin-bottom:6px; }
        .forecast-box { border:1px solid #dbe3ee; border-radius:8px; padding:10px; background:#fff; }
        .forecast-total { background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:8px 10px; font-weight:800; }
        .forecast-choice { display:grid; grid-template-columns:repeat(3, minmax(160px, 1fr)); gap:8px; }
        .forecast-choice-card { border:1px solid #dbe3ee; border-radius:8px; padding:10px; background:#fff; }
        .forecast-choice-card span { display:flex; align-items:center; gap:6px; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; }
        .forecast-choice-card strong { display:block; color:#0f172a; font-size:15px; margin-top:3px; }
        .forecast-choice-score { border-color:#93c5fd; background:#eff6ff; }
        .forecast-choice-self { border-color:#86efac; background:#f0fdf4; }
        .forecast-choice-sub { border-color:#facc15; background:#fffbeb; }
        .qualification-group { border:1px solid #dbe3ee; border-radius:10px; padding:12px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.04); }
        .qualification-group + .qualification-group { margin-top:12px; }
        .qualification-group-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:12px; font-weight:900; color:#0f172a; text-transform:uppercase; }
        .qualification-group-title span { color:#64748b; font-weight:700; text-transform:none; }
        .qualification-group-title i { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; }
        .qualification-group-scoring { border-color:#93c5fd; background:#eff6ff; }
        .qualification-group-scoring .qualification-group-title i { background:#2563eb; }
        .qualification-group-forecast { border-color:#facc15; background:#fffbeb; }
        .qualification-group-forecast .qualification-group-title i { background:#ca8a04; }
        .qualification-group-competitor { border-color:#fda4af; background:#fff1f2; }
        .qualification-group-competitor .qualification-group-title i { background:#e11d48; }
        .forecast-vs-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
        @media (max-width: 992px) { .forecast-vs-grid { grid-template-columns: 1fr; } }
        @media (max-width: 992px) { .forecast-choice { grid-template-columns: 1fr; } }
        .form-group-box { border:1px solid #e5e7eb; border-radius:8px; padding:12px; background:#fff; }
        .form-group-title { font-weight:800; font-size:12px; color:#334155; text-transform:uppercase; margin-bottom:10px; }
        .scope-editor { min-height:132px; border:1px solid #ced4da; border-radius:.375rem; padding:.5rem .75rem; background:#fff; overflow:auto; }
        .scope-editor:focus { outline:0; border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25); }
        @media (max-width: 992px) {
            .crm-system-header { flex-direction:column; }
            .crm-detail-grid { grid-template-columns:1fr; }
            .crm-summary-grid,.crm-work-grid { grid-template-columns:1fr; }
            .crm-task-toolbar { grid-template-columns:1fr; }
            .crm-task-checklist { grid-template-columns:1fr; }
            .crm-doc-module { grid-template-columns:1fr; }
            .lead-board { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
            .lead-filter-grid { grid-template-columns:1fr 1fr; }
        }
        @media (max-width: 575.98px) {
            .lead-filter-grid { grid-template-columns:1fr; }
        }
    </style>
@endpush

@section('content')
    @php
        $crmTabs = [
            ['key' => 'pipeline', 'label' => 'Pipeline', 'icon' => 'fa-diagram-project', 'note' => 'Lead, tender, status, deadline, PIC, score.'],
            ['key' => 'handover-task', 'label' => 'Handover Task', 'icon' => 'fa-list-check', 'note' => 'Assign pekerjaan internal ke Engineering, PPIC, Safety, HRD, Procurement.'],
            ['key' => 'client', 'label' => 'Client', 'icon' => 'fa-users', 'note' => 'Master pelanggan, contact person, riwayat proyek.'],
            ['key' => 'tender', 'label' => 'Tender', 'icon' => 'fa-briefcase', 'note' => 'Dokumen tender, akses portal, qualification, competitor.'],
            ['key' => 'estimasi-rab', 'label' => 'Estimasi / RAB', 'icon' => 'fa-calculator', 'note' => 'Engineering isi scope, BOQ, budget, vendor/subvendor forecast.'],
            ['key' => 'quotation', 'label' => 'Quotation', 'icon' => 'fa-file-signature', 'note' => 'Penawaran, margin vs RAB, approval internal, submit client.'],
            ['key' => 'follow-up', 'label' => 'Follow Up', 'icon' => 'fa-phone-volume', 'note' => 'Reminder, hasil call/meeting, next action.'],
            ['key' => 'kontrak', 'label' => 'Kontrak', 'icon' => 'fa-file-contract', 'note' => 'Tender won, SPK/PO/Kontrak, nilai final, tanggal mulai.'],
            ['key' => 'billing', 'label' => 'Billing', 'icon' => 'fa-receipt', 'note' => 'Progress claim, invoice, payment, retensi.'],
            ['key' => 'laporan', 'label' => 'Laporan', 'icon' => 'fa-chart-line', 'note' => 'Funnel, win rate, tender overdue, margin forecast.'],
            ['key' => 'setting', 'label' => 'Setting', 'icon' => 'fa-gear', 'note' => 'Akses marketing, visibility nominal, masking password, status flow.'],
        ];
    @endphp
    <div class="lead-page-shell">
        <div class="crm-system-shell">
            <div class="crm-system-header">
                <div>
                    <h2 class="crm-system-title">CRM System</h2>
                    <div class="crm-system-subtitle">Buka detail project untuk melihat tender, RAB, quotation, kontrak, billing.</div>
                </div>
                <a class="btn btn-light btn-sm" href="{{ route('crm_handover_task.index') }}">
                    <i class="fas fa-list-check me-1"></i>Handover Task Dept
                </a>
            </div>
        </div>

        <div id="crmPipelinePanel">
            <div class="lead-board">
                <div class="lead-kpi"><span>Total Lead</span><strong id="kpiTotal">0</strong></div>
                <div class="lead-kpi"><span>Estimating</span><strong id="kpiEstimating">0</strong></div>
                <div class="lead-kpi"><span>Submitted</span><strong id="kpiSubmitted">0</strong></div>
                <div class="lead-kpi"><span>Won</span><strong id="kpiWon">0</strong></div>
                <div class="lead-kpi"><span>Lost</span><strong id="kpiLost">0</strong></div>
            </div>

            <div class="card lead-card mt-2">
                <div class="lead-toolbar">
                    <div>
                        <h3 class="lead-toolbar-title">Tender Management</h3>
                        <div class="lead-toolbar-subtitle">Lead client, resource akses tender, scope, dokumen, deadline.</div>
                    </div>
                    <button class="btn btn-primary btn-sm" id="btnAddLead">
                        <i class="fas fa-plus me-1"></i>Tambah Lead
                    </button>
                </div>
                <div class="lead-filter-band">
                @if ($isLeadManager)
                    <div class="row g-2 align-items-end mb-2">
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Akses Data Marketing</label>
                            <select class="form-select form-select-sm" id="globalVisibilityMode">
                                <option value="own_only" @selected(($leadSettings['visibility_mode'] ?? 'own_only') === 'own_only')>PIC lihat miliknya saja</option>
                                <option value="all" @selected(($leadSettings['visibility_mode'] ?? 'own_only') === 'all')>Semua marketing lihat semua</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Nominal Default</label>
                            <select class="form-select form-select-sm" id="globalAmountVisibility">
                                <option value="show" @selected(($leadSettings['amount_visibility'] ?? 'show') === 'show')>Tampil</option>
                                <option value="mask" @selected(($leadSettings['amount_visibility'] ?? 'show') === 'mask')>Mask ***</option>
                                <option value="hide" @selected(($leadSettings['amount_visibility'] ?? 'show') === 'hide')>Sembunyi</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Password Download Dokumen</label>
                            <input type="password" class="form-control form-control-sm" id="documentDownloadPassword" value="{{ $leadSettings['document_download_password'] ?? '' }}" placeholder="Kosong = tanpa password">
                        </div>
                        <div class="col-md-auto">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnSaveLeadSettings">
                                <i class="fas fa-save me-1"></i>Simpan Setting
                            </button>
                        </div>
                    </div>
                @endif
                <div class="lead-status-tabs" id="leadStatusTabs">
                    <button type="button" class="lead-status-tab active" data-status="">Semua <span data-count="all">0</span></button>
                    @foreach ($statuses as $status)
                        <button type="button" class="lead-status-tab" data-status="{{ $status }}">
                            {{ ucwords(str_replace('_', ' ', $status)) }} <span data-count="{{ $status }}">0</span>
                        </button>
                    @endforeach
                </div>
                <div class="lead-filter-grid">
                <div class="lead-filter-field">
                    <label>Status</label>
                    <select class="form-select form-select-sm" id="statusFilter">
                        <option value="">Semua Status</option>
                        @foreach ($statuses as $status)
                            <option value="{{ $status }}">{{ ucwords(str_replace('_', ' ', $status)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="lead-filter-field">
                    <label>Client</label>
                    <select class="form-select form-select-sm" id="clientFilter">
                        <option value="">Semua Client</option>
                        @foreach ($clients as $client)
                            <option value="{{ $client['id'] }}">{{ $client['code'] }} - {{ $client['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="lead-filter-field">
                    <label>Deadline Dari</label>
                    <input type="date" class="form-control form-control-sm" id="deadlineFrom">
                </div>
                <div class="lead-filter-field">
                    <label>Deadline Sampai</label>
                    <input type="date" class="form-control form-control-sm" id="deadlineTo">
                </div>
                <div class="lead-filter-field">
                    <label>Aksi</label>
                    <div class="d-flex gap-1">
                    <button type="button" class="btn btn-outline-warning btn-sm flex-fill" id="btnReviewMonth">
                        <i class="fas fa-calendar-days me-1"></i>Review 1 Bulan
                    </button>
                    <button type="button" class="btn btn-outline-success btn-sm" id="btnExportLead">
                        <i class="fas fa-file-export"></i>
                    </button>
                    </div>
                </div>
                <div class="lead-filter-field">
                    <label>Pencarian</label>
                    <div class="lead-search-box">
                        <i class="fas fa-magnifying-glass"></i>
                        <input type="search" class="form-control form-control-sm" id="quickSearch" placeholder="Cari client, proyek, PIC, sumber, lead no">
                        <button type="button" class="lead-search-clear" id="btnClearQuickSearch" title="Bersihkan pencarian">
                            <i class="fas fa-xmark"></i>
                        </button>
                    </div>
                </div>
                </div>
            </div>
                <div class="lead-table-wrap">
                    <div class="table-responsive">
                    <table id="leadTable" class="table table-striped table-hover align-middle w-100">
                        <thead>
                        <tr>
                            <th style="width:60px">#</th>
                            <th>Lead</th>
                            <th>Client</th>
                            <th>Project</th>
                            <th>PIC</th>
                            <th>Deadline</th>
                            <th>Qual Score</th>
                            <th class="text-end">Nilai Tender</th>
                            <th>Status</th>
                            <th style="width:130px">Actions</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card lead-card d-none" id="crmProjectDetail">
            <div class="crm-detail-head">
                <div>
                    <h3 class="crm-detail-title" id="crmDetailTitle">Detail Project</h3>
                    <div class="crm-detail-subtitle" id="crmDetailSubtitle">-</div>
                </div>
                <button type="button" class="btn btn-sm btn-light" id="btnBackToPipeline">
                    <i class="fas fa-arrow-left me-1"></i>Kembali
                </button>
            </div>
            <div class="crm-system-tabs">
                @foreach ($crmTabs as $tab)
                    <button type="button" class="crm-system-tab {{ $loop->first ? 'active' : '' }}" data-crm-tab="{{ $tab['key'] }}">
                        <i class="fas {{ $tab['icon'] }} me-1"></i>{{ $tab['label'] }}
                    </button>
                @endforeach
            </div>
            @foreach ($crmTabs as $tab)
                <div class="crm-tab-panel p-3 {{ $loop->first ? 'active' : '' }}" data-crm-panel="{{ $tab['key'] }}">
                    <div class="crm-detail-content" data-crm-content="{{ $tab['key'] }}"></div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="modal fade" id="qualificationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="qualificationTitle">Tender Qualification</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="qualificationForm">
                    <div class="modal-body">
                        <input type="hidden" id="qualificationLeadId">
                        <div class="qualification-summary">
                            <div class="qualification-summary-box">
                                <span>Project</span>
                                <strong id="qualificationProjectText">-</strong>
                                <div class="small text-muted mt-1" id="qualificationClientText">-</div>
                                <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="btnEditLeadFromQualification">
                                    <i class="fas fa-pen-to-square me-1"></i>Edit Nilai Tender Lead
                                </button>
                            </div>
                            <div class="qualification-meter">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div>
                                        <div class="small text-muted fw-bold">Qualification Score</div>
                                        <div class="qualification-meter-score"><span id="qualificationScorePreview">0</span><small class="fs-6">/100</small></div>
                                    </div>
                                    <span class="badge text-bg-secondary" id="qualificationRecommendation">Need Review</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar" id="qualificationScoreBar" style="width:0%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="qualification-group qualification-group-scoring">
                            <div class="qualification-group-title">
                                <div><i class="fas fa-clipboard-check me-1"></i>Scoring Matrix</div>
                                <span>Weighted Bid/No-Bid v1, red flag override aktif</span>
                            </div>
                            <div class="row g-3">
                                @foreach ([
                                'scopeFit' => ['Kesesuaian Scope', '12%', 'Pekerjaan cocok dengan kompetensi utama perusahaan.'],
                                'manpowerReady' => ['Kesiapan Manpower', '10%', 'Tim tersedia pada estimasi periode pekerjaan.'],
                                'vendorReady' => ['Material / Vendor', '8%', 'Material khusus dan vendor pendukung mudah diamankan.'],
                                'deadlineRisk' => ['Risiko Deadline', '12%', 'Deadline tender dan pelaksanaan masih realistis.'],
                                'paymentRisk' => ['Risiko Pembayaran', '14%', 'Termin, reputasi client, dan risiko collection aman.'],
                                'winChance' => ['Peluang Menang', '12%', 'Relasi, harga, spesifikasi, dan kompetitor mendukung.'],
                                'documentComplete' => ['Kelengkapan Dokumen', '8%', 'Dokumen tender cukup jelas untuk dihitung RAB.'],
                                'budgetFit' => ['Budget Fit', '10%', 'Nilai tender sepadan dengan kapasitas dan target margin.'],
                                'siteAccess' => ['Akses Site', '6%', 'Survey, mobilisasi, security, dan permit site memungkinkan.'],
                                'strategicValue' => ['Nilai Strategis', '4%', 'Client/proyek membuka peluang repeat order atau portfolio.'],
                                'technicalComplexity' => ['Kompleksitas Teknis', '4%', 'Semakin tinggi berarti pekerjaan semakin mudah dikendalikan.'],
                                ] as $id => [$label, $weight, $hint])
                                    <div class="col-md-3">
                                        <div class="qualification-score-card">
                                            <label>{{ $label }} <span class="text-muted">({{ $weight }})</span></label>
                                            <select class="form-select form-select-sm qualification-score" id="{{ $id }}">
                                                <option value="1">1 - Buruk</option>
                                                <option value="2">2 - Lemah</option>
                                                <option value="3" selected>3 - Cukup</option>
                                                <option value="4">4 - Baik</option>
                                                <option value="5">5 - Sangat Baik</option>
                                            </select>
                                            <small>{{ $hint }}</small>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="col-md-3">
                                    <label class="form-label">Keputusan</label>
                                    <select class="form-select" id="qualificationDecision">
                                        <option value="qualified">Qualified - lanjut RAB</option>
                                        <option value="need_review">Need Review</option>
                                        <option value="hold">Hold</option>
                                        <option value="rejected">Rejected</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Dokumen Wajib / Missing Info</label>
                                    <textarea class="form-control" id="requiredDocuments" rows="3" placeholder="BOQ, drawing, spesifikasi, jadwal aanwijzing, syarat administrasi..."></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Catatan Risiko</label>
                                    <textarea class="form-control" id="riskNotes" rows="3" placeholder="Risk teknis, komersial, deadline, pembayaran, site access..."></textarea>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Metode Submit</label>
                                    <input type="text" class="form-control" id="submissionMethod" maxlength="120" placeholder="Portal/email/hardcopy">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Rencana Eksekusi</label>
                                    <select class="form-select" id="executionPlan">
                                        <option value="self_perform">Self Perform</option>
                                        <option value="sub_vendor">Sub Vendor</option>
                                        <option value="hybrid">Hybrid</option>
                                        <option value="need_review">Need Review</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="qualification-group qualification-group-forecast">
                            <div class="qualification-group-title">
                                <div><i class="fas fa-scale-balanced me-1"></i>VS Forecasting</div>
                                <span>Nilai tender dibanding margin target, self perform, sub vendor, competitor</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-3">
                                <label class="form-label">Target Margin (%)</label>
                                    <input type="number" class="form-control" id="marginEstimate" min="0" step="0.01" placeholder="Default 15">
                                    <small class="text-muted">Default 15%, ubah sesuai target tender.</small>
                                </div>
                            <div class="col-md-2">
                                <label class="form-label">Margin Target Rupiah</label>
                                <input type="text" class="form-control" id="marginAmount" inputmode="numeric" placeholder="Rp 0">
                                <small class="text-muted">% target x nilai tender.</small>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Nilai Tender / Budget Client</label>
                                <input type="text" class="form-control" id="clientBudget" inputmode="numeric" placeholder="Rp 0">
                                <small class="text-muted">Auto dari nilai tender lead, bisa disesuaikan di sini.</small>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Durasi Estimasi</label>
                                <input type="text" class="form-control" id="expectedDuration" maxlength="120" placeholder="Contoh: 45 hari">
                            </div>
                            <div class="col-12">
                                <div class="forecast-choice">
                                    <div class="forecast-choice-card forecast-choice-score">
                                        <span><i class="fas fa-clipboard-check"></i>Qualification Score</span>
                                        <strong id="forecastScoreSummary">0/100 - Need Review</strong>
                                    </div>
                                    <div class="forecast-choice-card forecast-choice-self">
                                        <span><i class="fas fa-person-digging"></i>Self Perform</span>
                                        <strong id="forecastSelfSummary">Isi cost internal</strong>
                                    </div>
                                    <div class="forecast-choice-card forecast-choice-sub">
                                        <span><i class="fas fa-handshake"></i>Sub Vendor</span>
                                        <strong id="forecastSubSummary">Isi rekanan pekerjaan</strong>
                                    </div>
                                </div>
                                <div class="alert alert-info py-2 px-3 mt-2 mb-0" id="forecastRecommendation">
                                    Isi nilai tender dan cost untuk melihat rekomendasi pilihan.
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="forecast-box">
                                    <div class="form-group-title">Self Perform Forecast</div>
                                    <div class="row g-2">
                                        <div class="col-md-3"><input type="text" class="form-control self-cost" id="selfMaterialCost" placeholder="Material"></div>
                                        <div class="col-md-3"><input type="text" class="form-control self-cost" id="selfManpowerCost" placeholder="Manpower"></div>
                                        <div class="col-md-3"><input type="text" class="form-control self-cost" id="selfEquipmentCost" placeholder="Alat"></div>
                                        <div class="col-md-3"><input type="text" class="form-control self-cost" id="selfOverheadCost" placeholder="Overhead"></div>
                                        <div class="col-md-4"><div class="forecast-total">Total Cost: <span id="selfTotalCost">Rp 0</span></div></div>
                                        <div class="col-md-4"><div class="forecast-total">Sisa Margin: <span id="selfMarginAmount">Rp 0</span></div></div>
                                        <div class="col-md-4"><div class="forecast-total">Margin %: <span id="selfMarginPercent">0%</span></div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label mb-0">Sub Vendor / Rekanan Pekerjaan</label>
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddSubVendor">
                                        <i class="fas fa-plus me-1"></i>Tambah Sub Vendor
                                    </button>
                                </div>
                                <div id="subVendorList"></div>
                                <input type="hidden" id="subVendor">
                                <div class="row g-2 mt-1">
                                    <div class="col-md-4"><div class="forecast-total">Sub Vendor Min: <span id="subVendorTotalMin">Rp 0</span></div></div>
                                    <div class="col-md-4"><div class="forecast-total">Sub Vendor Max: <span id="subVendorTotalMax">Rp 0</span></div></div>
                                    <div class="col-md-4"><div class="forecast-total">Forecast Margin: <span id="subVendorMargin">Rp 0</span></div></div>
                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="qualification-group qualification-group-competitor">
                            <div class="qualification-group-title">
                                <div><i class="fas fa-users-viewfinder me-1"></i>Kompetitor / Pesaing Tender</div>
                                <span>Pembanding lawan tender, bukan dasar margin internal</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label class="form-label mb-0">Nama Pesaing / Forecasting Nilai</label>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddCompetitor">
                                    <i class="fas fa-plus me-1"></i>Tambah Kompetitor
                                </button>
                            </div>
                            <div id="competitorList"></div>
                            <input type="hidden" id="competitor">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="qualificationSubmitBtn">Save Qualification</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="leadModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="leadModalTitle">Tambah Lead</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="leadForm">
                    <div class="modal-body">
                        <input type="hidden" id="leadId" />
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label">No Lead</label>
                                <input type="text" class="form-control" id="leadNo" maxlength="60" placeholder="Auto" readonly />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Nama Client</label>
                                <select class="form-select" id="clientId" required>
                                    <option value="">- Pilih Client -</option>
                                    @foreach ($clients as $client)
                                        <option value="{{ $client['id'] }}">{{ $client['code'] }} - {{ $client['name'] }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" id="clientName" />
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Logo Client</label>
                                <input type="file" class="form-control" id="clientLogoFile" accept="image/*" />
                                <div class="small text-muted mt-1" id="clientLogoCurrent">-</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Nama Proyek / Tender</label>
                                <input type="text" class="form-control" id="projectName" maxlength="180" required />
                            </div>
                            <div class="col-md-6">
                                <div class="form-group-box">
                                    <div class="form-group-title">Contact Person</div>
                                    <div class="row g-2">
                                        <div class="col-md-4">
                                            <label class="form-label">Nama</label>
                                            <input type="text" class="form-control" id="contactPerson" maxlength="120" />
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Phone</label>
                                            <input type="text" class="form-control" id="phone" maxlength="40" />
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control" id="email" maxlength="120" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">PIC Marketing</label>
                                <input type="text" class="form-control" id="picMarketing" maxlength="120" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Lokasi</label>
                                <input type="text" class="form-control" id="location" maxlength="180" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Pick Point Location</label>
                                <div class="input-group">
                                    <input type="number" step="0.0000001" class="form-control" id="locationLat" placeholder="Lat">
                                    <input type="number" step="0.0000001" class="form-control" id="locationLng" placeholder="Lng">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group-box">
                                    <div class="form-group-title">
                                        <i class="fas fa-map-location-dot me-1"></i>Tender Area & Rate Referensi
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-md-3">
                                            <label class="form-label">Tender Area</label>
                                            <input type="text" class="form-control" id="tenderArea" maxlength="120" placeholder="Contoh: Jakarta / Site A" />
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Jenis Scope Tender</label>
                                            <select class="form-select" id="tenderScopeType">
                                                <option value="">- Pilih -</option>
                                                <option value="open_tender">Open Tender</option>
                                                <option value="direct_appointment">Direct Appointment</option>
                                                <option value="rfq">RFQ / Request for Quotation</option>
                                                <option value="rfp">RFP / Request for Proposal</option>
                                                <option value="prequalification">Prequalification</option>
                                                <option value="repeat_order">Repeat Order</option>
                                                <option value="framework_contract">Framework / Blanket Contract</option>
                                                <option value="maintenance_contract">Maintenance Contract</option>
                                                <option value="emergency_work">Emergency Work</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Estimasi UMR Area</label>
                                            <input type="text" class="form-control tender-rate" id="estimatedUmrArea" inputmode="numeric" placeholder="Rp 0" />
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Estimasi Meal</label>
                                            <input type="text" class="form-control tender-rate" id="estimatedMealRate" inputmode="numeric" placeholder="Rp 0" />
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Rate BBM</label>
                                            <input type="text" class="form-control tender-rate" id="estimatedBbmRate" inputmode="numeric" placeholder="Rp 0" />
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Rate Manpower</label>
                                            <input type="text" class="form-control tender-rate" id="estimatedManpowerRate" inputmode="numeric" placeholder="Rp 0" />
                                        </div>
                                        <div class="col-12 small text-muted">
                                            Optional. Hanya referensi awal costing tender.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group-box">
                                    <div class="form-group-title">Resource Akses Tender</div>
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="form-label">URL Akses</label>
                                            <input type="url" class="form-control" id="resourceAccessUrl" maxlength="255" />
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Username</label>
                                            <input type="text" class="form-control" id="resourceAccessUsername" maxlength="120" />
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Password</label>
                                            <div class="input-group">
                                                <input type="password" class="form-control" id="resourceAccessPassword" maxlength="120" autocomplete="new-password" />
                                                <button class="btn btn-outline-secondary" type="button" id="toggleTenderPassword">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Sumber Tender</label>
                                <input type="text" class="form-control" id="source" maxlength="80" list="sourceSuggestions" placeholder="Email / website / rekanan" />
                                <datalist id="sourceSuggestions">
                                    <option value="email"></option>
                                    <option value="website"></option>
                                    <option value="rekanan"></option>
                                    <option value="portal tender"></option>
                                    <option value="referral"></option>
                                </datalist>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Deadline Tender</label>
                                <input type="date" class="form-control" id="deadlineDate" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Nilai Tender / Budget Client</label>
                                <input type="text" class="form-control" id="estimatedValue" inputmode="numeric" placeholder="Rp 0" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="status" required>
                                    @foreach ($statuses as $status)
                                        <option value="{{ $status }}">{{ ucwords(str_replace('_', ' ', $status)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Akses Tender</label>
                                <select class="form-select" id="visibility">
                                    <option value="default">Default sistem</option>
                                    <option value="private">Hanya PIC</option>
                                    <option value="team">Tim</option>
                                    <option value="all">Semua</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Nominal</label>
                                <select class="form-select" id="amountVisibility">
                                    <option value="default">Default sistem</option>
                                    <option value="show">Tampil</option>
                                    <option value="mask">Mask</option>
                                    <option value="hide">Sembunyi</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Lampiran Dokumen</label>
                                <input type="file" class="form-control" id="attachmentFile" multiple />
                                <div class="small text-muted mt-1" id="attachmentCurrent">-</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Scope Pekerjaan</label>
                                <select class="form-select mb-2" id="workScopeFields" multiple>
                                    <option value="civil">Civil</option>
                                    <option value="structure">Structure</option>
                                    <option value="architecture">Architecture</option>
                                    <option value="mechanical">Mechanical</option>
                                    <option value="electrical">Electrical</option>
                                    <option value="instrument">Instrument</option>
                                    <option value="piping">Piping</option>
                                    <option value="mep">MEP</option>
                                    <option value="fabrication">Fabrication</option>
                                    <option value="installation">Installation</option>
                                    <option value="maintenance">Maintenance</option>
                                    <option value="manpower_supply">Manpower Supply</option>
                                    <option value="material_supply">Material Supply</option>
                                    <option value="equipment_rental">Equipment Rental</option>
                                    <option value="safety_hse">Safety / HSE</option>
                                    <option value="project_management">Project Management</option>
                                </select>
                                <div class="scope-editor" id="scopeSummaryEditor" contenteditable="true"></div>
                                <textarea class="d-none" id="scopeSummary"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" id="notes" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            let documentDownloadPasswordRequired = @json(trim((string) ($leadSettings['document_download_password'] ?? '')) !== '');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            let activeDetailLead = null;
            let activeHandoverTasks = [];
            const activateCrmTab = (key) => {
                $('.crm-system-tab').removeClass('active');
                $(`.crm-system-tab[data-crm-tab="${key}"]`).addClass('active');
                $('.crm-tab-panel').removeClass('active');
                $(`.crm-tab-panel[data-crm-panel="${key}"]`).addClass('active');
            };
            $('.crm-system-tab').on('click', function () {
                activateCrmTab($(this).data('crm-tab'));
            });

            const clientRows = @json($clients);
            const picUsers = @json($picUsers ?? []);
            const fmtMoney = (n) => Number(n || 0).toLocaleString('id-ID', { maximumFractionDigits: 0 });
            const fmtRupiahText = (n) => `Rp ${fmtMoney(n)}`;
            const fmtDate = (date) => date.toISOString().slice(0, 10);
            const cleanMoney = (value) => String(value || '').replace(/[^\d]/g, '');
            const esc = (value) => $('<div>').text(value ?? '-').html();
            const formatRupiah = (value) => {
                const raw = cleanMoney(value);
                return raw ? `Rp ${Number(raw).toLocaleString('id-ID')}` : '';
            };
            const renderCrmTabDetail = ({ key, title, query, fields = [], modules = [], works = [] }) => {
                const fieldHtml = fields.length
                    ? fields.map((item) => `
                        <div class="crm-summary-item">
                            <span>${esc(item[0])}</span>
                            <strong>${esc(item[1])}</strong>
                        </div>
                    `).join('')
                    : '<div class="crm-summary-item"><span>Data</span><strong>Belum ada data khusus</strong></div>';
                const workHtml = works.length
                    ? `<div class="crm-work-grid">${works.map((item) => `<div class="crm-work-item"><i class="fas fa-check-circle"></i><div>${esc(item)}</div></div>`).join('')}</div>`
                    : '';
                const moduleHtml = modules.length
                    ? `<div class="crm-empty-note mt-2"><strong>Modul yang perlu dibuat:</strong><ul>${modules.map((item) => `<li>${esc(item)}</li>`).join('')}</ul></div>`
                    : '<div class="crm-empty-note mt-2">Data tersedia dari Lead Client existing.</div>';
                $(`[data-crm-content="${key}"]`).html(`
                    <div class="crm-detail-grid">
                        <div class="crm-detail-box">
                            <h4>${esc(title)}</h4>
                            <div class="crm-summary-grid">${fieldHtml}</div>
                            ${workHtml}
                            ${moduleHtml}
                        </div>
                        <div class="crm-detail-box">
                            <h4>Query / sumber data</h4>
                            <pre>${esc(query)}</pre>
                        </div>
                    </div>
                `);
            };
            const taskStatusBadge = (status) => `<span class="crm-task-status crm-task-${esc(status || 'waiting')}">${esc(status || 'waiting')}</span>`;
            const checklistTemplates = {
                engineering: ['Scope teknis final', 'RAB/BOQ awal', 'Drawing/shop drawing', 'Metode kerja teknis'],
                administrasi: ['Legalitas tender', 'Format proposal', 'Lampiran administrasi', 'Checklist submit'],
                ppic: ['Time schedule', 'Kurva S awal', 'Manpower plan', 'Milestone pekerjaan'],
                safety: ['JSA', 'Metode kerja aman', 'APD/izin kerja', 'Risk assessment'],
                hrd: ['Kebutuhan manpower', 'Estimasi biaya orang', 'Status ketersediaan', 'Permit/akses pekerja'],
                procurement: ['List material', 'Vendor/subvendor', 'Lead time', 'Harga referensi'],
                marketing: ['Dokumen dari client', 'Catatan follow up', 'Approval submit', 'Status tender'],
            };
            const taskChecklist = (task) => Array.isArray(task?.checklist) && task.checklist.length
                ? task.checklist
                : (checklistTemplates[String(task?.department || '').toLowerCase()] || ['Deskripsi pekerjaan', 'Lampiran pendukung', 'Catatan PIC', 'Status penyelesaian']).map((label) => ({ label, done: false }));
            const checklistItemFiles = (task, idx) => (Array.isArray(task?.attachments) ? task.attachments : [])
                .filter((file) => Number(file.checklist_item_index) === Number(idx));
            const renderChecklistItemFiles = (task, idx) => {
                const files = checklistItemFiles(task, idx);
                if (!files.length) return '<span class="small text-muted">belum ada file</span>';
                return files.map((file) => `
                    <a class="crm-task-file-chip crm-task-file-preview" href="${esc(file.preview_url || file.download_url)}" data-name="${esc(file.name || 'Dokumen')}" target="_blank" title="Lihat ${esc(file.name || '')}">
                        <i class="fas fa-paperclip"></i>${esc(file.name || 'File')}
                    </a>
                    ${file.download_url ? `<a class="crm-task-file-chip crm-task-download-protected" href="${esc(file.download_url)}" target="_blank" title="Download"><i class="fas fa-download"></i></a>` : ''}
                    ${file.delete_url ? `<button type="button" class="btn btn-xs btn-danger crm-task-file-delete" data-task-id="${task.id}" data-file-id="${file.id}" title="Hapus dokumen"><i class="fas fa-times"></i></button>` : ''}
                `).join('');
            };
            const renderTaskChecklist = (task) => {
                const items = taskChecklist(task);
                return `<div class="crm-task-checklist">${items.map((item, idx) => `
                    <div class="crm-task-checkitem">
                        <label class="d-inline-flex align-items-center gap-1 mb-0" style="min-width:130px;">
                            <input type="checkbox" class="crm-task-check-toggle" data-id="${task.id}" data-idx="${idx}" ${item.done ? 'checked' : ''}>
                            <span>${esc(item.label || '-')}</span>
                        </label>
                        <span class="d-inline-flex align-items-center gap-1 flex-wrap flex-fill">${renderChecklistItemFiles(task, idx)}</span>
                        <button type="button" class="btn btn-xs btn-primary ms-auto crm-task-upload" data-id="${task.id}" data-idx="${idx}" data-label="${esc(item.label || '')}" title="Upload dokumen item ini">
                            <i class="fas fa-upload"></i>
                        </button>
                    </div>
                `).join('')}</div>`;
            };
            const taskPreviewHtml = (task) => {
                const items = taskChecklist(task);
                return `
                    <div class="crm-task-preview-box">
                        <div class="preview-group"><b>${esc(task.document_no || '-')}</b><br>${esc(task.task_title || '-')}<br><span class="text-muted">${esc(task.notes || '-')}</span></div>
                        <div class="preview-group"><b>Yang harus dilengkapi</b><ul class="mb-0">${items.map((item) => `<li>${item.done ? '<i class="fas fa-check text-success"></i>' : '<i class="fas fa-circle text-muted"></i>'} ${esc(item.label || '-')}</li>`).join('')}</ul></div>
                        <div class="preview-group"><b>Timeline</b><br>Due: ${esc(task.due_date || '-')}<br>Submit: ${esc(task.submitted_at || '-')}<br>Selesai: ${esc(task.completed_at || '-')}</div>
                    </div>
                `;
            };
            const renderTaskFiles = (task) => {
                const files = Array.isArray(task.attachments) ? task.attachments : [];
                const revisions = Array.isArray(task.revisions) ? task.revisions : [];
                const taskFiles = files.filter((file) => file.checklist_item_index === null || file.checklist_item_index === undefined || file.checklist_item_index === '');
                const fileHtml = taskFiles.length ? `<div class="crm-task-file-list">${taskFiles.map((file) => `
                    <a class="crm-task-file-chip crm-task-file-preview" href="${esc(file.preview_url || file.download_url)}" data-name="${esc(file.name || 'Dokumen')}" target="_blank" title="Lihat ${esc(file.name || '')}">
                        <i class="fas fa-paperclip"></i>R${esc(file.revision_no)} ${esc(file.name || 'File')}
                    </a>
                    ${file.download_url ? `<a class="crm-task-file-chip crm-task-download-protected" href="${esc(file.download_url)}" target="_blank" title="Download"><i class="fas fa-download"></i></a>` : ''}
                    ${file.delete_url ? `<button type="button" class="btn btn-xs btn-danger crm-task-file-delete" data-task-id="${task.id}" data-file-id="${file.id}" title="Hapus dokumen"><i class="fas fa-times"></i></button>` : ''}
                `).join('')}</div>` : '<div class="small text-muted">File umum: belum ada</div>';
                const revHtml = revisions.length ? `<div class="mt-1">${revisions.map((rev) => `
                    <a class="crm-task-rev-chip crm-task-download-protected" href="${esc(rev.zip_url)}" target="_blank">
                        <i class="fas fa-file-archive"></i>Rev ${esc(rev.revision_no)} (${esc(rev.count)})
                    </a>
                `).join('')}</div>` : '';
                return `${fileHtml}${revHtml}`;
            };
            const renderDepartmentScores = (tasks) => {
                const groups = {};
                tasks.forEach((task) => {
                    const key = String(task.department || 'lainnya').toLowerCase();
                    groups[key] = groups[key] || { tasks: 0, doneTasks: 0, checklist: 0, doneChecklist: 0, files: 0 };
                    const checklist = taskChecklist(task);
                    groups[key].tasks += 1;
                    groups[key].doneTasks += task.status === 'done' ? 1 : 0;
                    groups[key].checklist += checklist.length;
                    groups[key].doneChecklist += checklist.filter((item) => !!item.done).length;
                    groups[key].files += Array.isArray(task.attachments) ? task.attachments.length : 0;
                });
                const html = Object.entries(groups).map(([dept, item]) => {
                    const total = item.checklist || item.tasks || 1;
                    const score = Math.round(((item.doneChecklist || item.doneTasks) / total) * 100);
                    return `
                        <div class="crm-dept-score-card">
                            <strong><span>${esc(dept)}</span><span>${score}%</span></strong>
                            <small>${item.doneChecklist}/${item.checklist} checklist | ${item.files} file | ${item.doneTasks}/${item.tasks} task done</small>
                            <div class="crm-dept-score-bar"><span style="width:${Math.max(0, Math.min(100, score))}%"></span></div>
                        </div>
                    `;
                }).join('');
                return html ? `<div class="crm-dept-score-grid">${html}</div>` : '';
            };
            const taskReadinessScore = (tasks, keywords) => {
                const matched = tasks.filter((task) => {
                    const text = [
                        task.department,
                        task.document_no,
                        task.task_title,
                        task.notes,
                        ...taskChecklist(task).map((item) => item.label || ''),
                    ].join(' ').toLowerCase();
                    return keywords.some((keyword) => text.includes(keyword));
                });
                const checklist = matched.flatMap((task) => taskChecklist(task));
                const fileCount = matched.reduce((sum, task) => sum + (Array.isArray(task.attachments) ? task.attachments.length : 0), 0);
                const doneChecklist = checklist.filter((item) => !!item.done).length;
                const checklistScore = checklist.length ? Math.round((doneChecklist / checklist.length) * 70) : 0;
                const fileScore = Math.min(30, fileCount * 10);
                return { tasks: matched.length, checklist: checklist.length, doneChecklist, fileCount, score: Math.min(100, checklistScore + fileScore) };
            };
            const renderPriorityReadinessScores = (tasks) => {
                const items = [
                    ['RAB / BOQ', taskReadinessScore(tasks, ['rab', 'boq', 'bom', 'estimasi'])],
                    ['Quotation / Penawaran', taskReadinessScore(tasks, ['quotation', 'penawaran', 'proposal', 'submit'])],
                ];
                return `<div class="crm-priority-score-grid">${items.map(([label, item]) => `
                    <div class="crm-priority-score-card ${item.score < 70 ? 'is-risk' : ''}">
                        <strong><span><i class="fas fa-bolt me-1"></i>P1 ${esc(label)}</span><span>${item.score}%</span></strong>
                        <small>${item.doneChecklist}/${item.checklist} checklist | ${item.fileCount} file | ${item.tasks} task terkait</small>
                        <div class="crm-dept-score-bar"><span style="width:${item.score}%"></span></div>
                    </div>
                `).join('')}</div>`;
            };
            const taskMatchesKeywords = (task, keywords) => {
                const text = [
                    task.department,
                    task.document_no,
                    task.task_title,
                    task.notes,
                    ...taskChecklist(task).map((item) => item.label || ''),
                ].join(' ').toLowerCase();
                return keywords.some((keyword) => text.includes(keyword));
            };
            const taskDocumentsByKeywords = (tasks, keywords) => {
                const matched = tasks.filter((task) => taskMatchesKeywords(task, keywords));
                const files = [];
                matched.forEach((task) => {
                    (Array.isArray(task.attachments) ? task.attachments : []).forEach((file) => {
                        files.push({ ...file, task_title: task.task_title, document_no: task.document_no, department: task.department });
                    });
                });
                const checklist = matched.flatMap((task) => taskChecklist(task));
                return { matched, files, checklist, doneChecklist: checklist.filter((item) => !!item.done).length };
            };
            const renderDocumentModule = (key, title, config, tasks = [], loading = false) => {
                const data = taskDocumentsByKeywords(tasks, config.keywords);
                const fileHtml = data.files.length ? data.files.map((file) => `
                    <div class="crm-doc-item">
                        <div class="crm-doc-item-title">${esc(file.name || 'Dokumen')}</div>
                        <div class="crm-doc-item-meta">${esc(file.department || '-')} | ${esc(file.document_no || '-')} | ${esc(file.task_title || '-')} | Rev ${esc(file.revision_no || 1)}</div>
                        <div class="mt-2 d-flex flex-wrap gap-1">
                            <a class="crm-task-file-chip crm-task-file-preview" href="${esc(file.preview_url || file.download_url)}" data-name="${esc(file.name || 'Dokumen')}" target="_blank"><i class="fas fa-eye"></i>Preview</a>
                            <a class="crm-task-file-chip crm-task-download-protected" href="${esc(file.download_url)}" target="_blank"><i class="fas fa-download"></i>Download</a>
                        </div>
                    </div>
                `).join('') : `<div class="crm-empty-note">${loading ? 'Loading dokumen...' : 'Belum ada dokumen. Upload dari checklist task terkait.'}</div>`;
                $(`[data-crm-content="${key}"]`).html(`
                    <div class="crm-doc-module">
                        <div class="crm-doc-card">
                            <h5>${esc(title)}</h5>
                            <div class="crm-doc-stat">
                                <div><span>Task terkait</span><strong>${data.matched.length}</strong></div>
                                <div><span>File</span><strong>${data.files.length}</strong></div>
                                <div><span>Checklist</span><strong>${data.doneChecklist}/${data.checklist.length}</strong></div>
                                <div><span>Status</span><strong>${data.files.length ? 'Ada' : 'Belum'}</strong></div>
                            </div>
                            <button type="button" class="btn btn-primary btn-sm w-100 crm-doc-create-task" data-doc-type="${esc(config.type)}">
                                <i class="fas fa-plus me-1"></i>${esc(config.button)}
                            </button>
                            <div class="small text-muted mt-2">${esc(config.note)}</div>
                        </div>
                        <div class="crm-doc-card">
                            <h5>Dokumen Terkait</h5>
                            <div class="crm-doc-list">${fileHtml}</div>
                        </div>
                    </div>
                `);
            };
            const renderRabQuotationPanels = (tasks = [], loading = false) => {
                renderDocumentModule('estimasi-rab', 'Estimasi / RAB', {
                    type: 'rab',
                    button: 'Buat Task RAB',
                    note: 'Sumber dokumen: task/checklist yang mengandung RAB, BOQ, BOM, atau estimasi.',
                    keywords: ['rab', 'boq', 'bom', 'estimasi'],
                }, tasks, loading);
                renderDocumentModule('quotation', 'Quotation / Penawaran', {
                    type: 'quotation',
                    button: 'Buat Task Quotation',
                    note: 'Sumber dokumen: task/checklist yang mengandung quotation, penawaran, proposal, atau submit.',
                    keywords: ['quotation', 'penawaran', 'proposal', 'submit'],
                }, tasks, loading);
            };
            const renderPicOptions = (selectedId = '') => [
                '<option value="">Pilih PIC</option>',
                ...picUsers.map((user) => {
                    const text = `${user.name || user.email || '-'}${user.department ? ' - ' + user.department : ''}`;
                    return `<option value="${esc(user.id)}" data-name="${esc(user.name || user.email || '')}" ${String(selectedId || '') === String(user.id || '') ? 'selected' : ''}>${esc(text)}</option>`;
                })
            ].join('');
            const renderHandoverTaskPanel = (row, tasks = [], loading = false) => {
                const id = Number(row?.id || 0);
                const rowsHtml = tasks.length ? tasks.map((task) => `
                    <tr class="crm-task-row is-${esc(task.status || 'waiting')}">
                        <td style="width:110px;"><strong>${esc(task.department)}</strong><div class="small text-muted">${esc(task.pic_name || '-')}</div></td>
                        <td>
                            <div class="crm-task-docno">${esc(task.document_no || 'Belum ada nomor dokumen')}</div>
                            <div class="crm-task-title">${esc(task.task_title)}</div>
                            <div class="small text-muted">${esc(task.notes || '')}</div>
                            ${renderTaskChecklist(task)}
                        </td>
                        <td style="width:220px;">${renderTaskFiles(task)}</td>
                        <td style="width:140px;">
                            <div><strong>Due:</strong> ${esc(task.due_date || '-')}</div>
                            <div class="small text-muted">Submit: ${esc(task.submitted_at || '-')}</div>
                            <div class="small text-muted">Selesai: ${esc(task.completed_at || '-')}</div>
                        </td>
                        <td style="width:120px;">
                            <select class="form-select form-select-sm crm-task-status-select" data-id="${task.id}">
                                ${['waiting', 'progress', 'revision', 'done', 'cancelled'].map((s) => `<option value="${s}" ${s === task.status ? 'selected' : ''}>${s}</option>`).join('')}
                            </select>
                        </td>
                        <td class="text-end" style="width:112px;">
                            <div class="crm-task-actions">
                                <button type="button" class="btn btn-sm btn-primary crm-task-upload" data-id="${task.id}">
                                    <i class="fas fa-upload"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-info text-white crm-task-preview" data-id="${task.id}">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-warning crm-task-edit" data-id="${task.id}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a class="btn btn-sm btn-success crm-task-download-protected" href="${esc(task.zip_url)}" target="_blank" title="Download semua file task">
                                    <i class="fas fa-file-archive"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-danger crm-task-delete" data-id="${task.id}">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `).join('') : `<tr><td colspan="6" class="text-center text-muted py-3">${loading ? 'Loading task...' : 'Belum ada handover task.'}</td></tr>`;
                const counts = tasks.reduce((acc, task) => {
                    acc[task.status] = (acc[task.status] || 0) + 1;
                    return acc;
                }, {});
                $('[data-crm-content="handover-task"]').html(`
                    <div class="crm-detail-box">
                        <h4>Handover Task Internal</h4>
                        <div class="crm-summary-grid mb-2">
                            <div class="crm-summary-item"><span>Total Task</span><strong>${tasks.length}</strong></div>
                            <div class="crm-summary-item"><span>Progress/Revisi</span><strong>${(counts.progress || 0) + (counts.revision || 0)}</strong></div>
                            <div class="crm-summary-item"><span>Done</span><strong>${counts.done || 0}</strong></div>
                        </div>
                        ${renderPriorityReadinessScores(tasks)}
                        ${renderDepartmentScores(tasks)}
                        <div class="crm-task-toolbar">
                            <select class="form-select form-select-sm" id="crmTaskDepartment">
                                <option value="engineering">Engineering</option>
                                <option value="administrasi">Administrasi</option>
                                <option value="ppic">PPIC / Planning</option>
                                <option value="safety">Safety / HSE</option>
                                <option value="hrd">HRD / Permit</option>
                                <option value="procurement">Procurement</option>
                                <option value="marketing">Marketing</option>
                            </select>
                            <select class="form-select form-select-sm" id="crmTaskPicUser">${renderPicOptions()}</select>
                            <input type="text" class="form-control form-control-sm" id="crmTaskDocumentNo" placeholder="Nomor dokumen">
                            <input type="text" class="form-control form-control-sm" id="crmTaskTitle" placeholder="Pekerjaan, contoh: RAB awal">
                            <input type="date" class="form-control form-control-sm" id="crmTaskDueDate">
                            <button type="button" class="btn btn-sm btn-primary" id="btnCrmTaskAdd" data-lead-id="${id}">
                                <i class="fas fa-plus me-1"></i>Task
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0 crm-task-table">
                                <thead>
                                    <tr>
                                        <th>Dept / PIC</th>
                                        <th>Dokumen / Task</th>
                                        <th>Lampiran / Revisi</th>
                                        <th>Timeline</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>${rowsHtml}</tbody>
                            </table>
                        </div>
                    </div>
                `);
                $('#crmTaskPicUser').select2({ theme: 'bootstrap-5', width: '100%' });
            };
            const loadHandoverTasks = (row) => {
                renderHandoverTaskPanel(row, [], true);
                renderRabQuotationPanels([], true);
                $.getJSON(`{{ url('/lead-client') }}/${row.id}/tasks`)
                    .done((resp) => {
                        activeHandoverTasks = resp?.data || [];
                        renderHandoverTaskPanel(row, activeHandoverTasks);
                        renderRabQuotationPanels(activeHandoverTasks);
                    })
                    .fail((xhr) => {
                        $('[data-crm-content="handover-task"]').html(`<div class="crm-empty-note">${esc(xhr.responseJSON?.message || 'Gagal load handover task')}</div>`);
                        renderRabQuotationPanels([], false);
                    });
            };
            const renderCrmDetailPanels = (row) => {
                const id = Number(row?.id || 0);
                const clientId = Number(row?.client_id || 0);
                const projectId = Number(row?.project_id || 0);
                renderCrmTabDetail({
                    key: 'pipeline',
                    title: 'Pipeline Lead',
                    fields: [
                        ['Lead No', row?.lead_no],
                        ['Status', row?.status],
                        ['Deadline', row?.deadline_date],
                        ['PIC Marketing', row?.pic_marketing],
                        ['Qualification Score', row?.qualification_score ?? 'Not Checked'],
                        ['Nilai Tender', row?.estimated_value_masked ? '***' : fmtRupiahText(row?.estimated_value)],
                    ],
                    works: [
                        'Validasi data client, contact person, nilai tender, deadline.',
                        'Lengkapi akses portal tender, dokumen, scope pekerjaan.',
                        'Jalankan Qualification untuk bid / no-bid.',
                        'Jika layak, lanjut Estimasi / RAB oleh engineering.',
                        'Jika RAB sudah siap, buat Quotation dan approval margin.',
                        'Update status tender sampai won/lost/archived.',
                    ],
                    query: `SELECT * FROM lead_clients WHERE id = ${id};`,
                });
                renderHandoverTaskPanel(row, [], true);
                renderCrmTabDetail({
                    key: 'client',
                    title: 'Client',
                    fields: [
                        ['Client', row?.client_name],
                        ['Contact Person', row?.contact_person],
                        ['Phone', row?.phone],
                        ['Email', row?.email],
                    ],
                    query: clientId
                        ? `SELECT * FROM master_clients WHERE id = ${clientId};\nSELECT * FROM lead_clients WHERE client_id = ${clientId} ORDER BY deadline_date DESC;`
                        : `SELECT * FROM lead_clients WHERE id = ${id};`,
                });
                renderCrmTabDetail({
                    key: 'tender',
                    title: 'Tender',
                    fields: [
                        ['Resource URL', row?.resource_access_url],
                        ['Sumber Tender', row?.source],
                        ['Jenis Scope Tender', row?.tender_scope_type || '-'],
                        ['Bidang Pekerjaan', Array.isArray(row?.work_scope_fields) && row.work_scope_fields.length ? row.work_scope_fields.join(', ') : '-'],
                        ['Pick Point', row?.location_lat && row?.location_lng ? `${row.location_lat}, ${row.location_lng}` : '-'],
                        ['Logo Client', row?.client_logo_url ? 'Ada' : '-'],
                        ['Nilai Tender', row?.estimated_value_masked ? '***' : fmtRupiahText(row?.estimated_value)],
                        ['Lampiran', Array.isArray(row?.attachments) ? `${row.attachments.length} file` : '0 file'],
                    ],
                    query: `SELECT * FROM lead_clients WHERE id = ${id};\nSELECT * FROM lead_client_attachments WHERE lead_client_id = ${id};`,
                });
                renderRabQuotationPanels([], true);
                renderCrmTabDetail({
                    key: 'follow-up',
                    title: 'Follow Up',
                    fields: [
                        ['PIC', row?.pic_marketing],
                        ['Deadline', row?.deadline_date],
                        ['Catatan Lead', row?.notes ? 'Ada' : 'Belum ada'],
                    ],
                    query: `SELECT * FROM lead_clients WHERE id = ${id};\n-- Modul follow up activity belum ada.`,
                    modules: ['crm_follow_ups', 'next action reminder', 'log call/meeting/email', 'notification schedule'],
                });
                renderCrmTabDetail({
                    key: 'kontrak',
                    title: 'Kontrak',
                    fields: [
                        ['Project ID', projectId || '-'],
                        ['Status', row?.status],
                        ['Project URL', row?.project_url || '-'],
                    ],
                    query: projectId
                        ? `SELECT * FROM master_projects WHERE id = ${projectId};\nSELECT * FROM lead_clients WHERE project_id = ${projectId};`
                        : `SELECT * FROM lead_clients WHERE id = ${id} AND status = 'won';\n-- Project/kontrak belum dibuat.`,
                    modules: ['crm_contracts', 'SPK/PO/Kontrak file', 'nilai kontrak final', 'tanggal mulai dan selesai'],
                });
                renderCrmTabDetail({
                    key: 'billing',
                    title: 'Billing',
                    fields: [
                        ['Nilai Tender', row?.estimated_value_masked ? '***' : fmtRupiahText(row?.estimated_value)],
                        ['Status', row?.status],
                    ],
                    query: projectId
                        ? `SELECT * FROM master_project_progress_schedules WHERE project_id = ${projectId};\nSELECT * FROM master_project_progress_invoices WHERE project_id = ${projectId};`
                        : `-- Billing aktif setelah project/kontrak dibuat dari lead_clients.id = ${id}.`,
                    modules: ['progress_claims', 'crm_invoices', 'payments', 'retention tracking'],
                });
                renderCrmTabDetail({
                    key: 'laporan',
                    title: 'Laporan',
                    fields: [
                        ['Client', row?.client_name],
                        ['Status', row?.status],
                        ['Score', row?.qualification_score ?? '-'],
                    ],
                    query: `SELECT status, COUNT(*) total FROM lead_clients GROUP BY status;\nSELECT client_id, COUNT(*) total, SUM(estimated_value) nilai FROM lead_clients GROUP BY client_id;`,
                    modules: ['dashboard funnel CRM', 'win rate report', 'overdue tender report', 'margin forecast report'],
                });
                renderCrmTabDetail({
                    key: 'setting',
                    title: 'Setting',
                    fields: [
                        ['Visibility', row?.visibility || 'default'],
                        ['Nominal', row?.amount_visibility || 'default'],
                        ['Can Edit', row?.can_edit ? 'Ya' : 'Tidak'],
                    ],
                    query: `SELECT * FROM app_settings WHERE key LIKE 'lead_client.%';\nSELECT * FROM users WHERE id = ${Number(row?.owner_id || 0)};`,
                    modules: ['CRM role matrix', 'default masking nominal', 'status flow setting', 'required approval by stage'],
                });
            };
            const renderAttachments = (row) => {
                const files = Array.isArray(row?.attachments) ? row.attachments : [];
                if (!files.length) return '-';
                return `<div class="attachment-list">${files.map((file) => `
                    <a class="attachment-chip" href="${file.url}" target="_blank">
                        <i class="fas fa-paperclip"></i>${file.name || 'Dokumen'}
                    </a>
                `).join('')}</div>`;
            };
            const addForecastRow = (target, item = {}) => {
                const row = $(`
                    <div class="competitor-row">
                        <input type="text" class="form-control form-control-sm forecast-name" placeholder="Nama" maxlength="180">
                        <input type="text" class="form-control form-control-sm forecast-min" placeholder="Min Rp">
                        <input type="text" class="form-control form-control-sm forecast-max" placeholder="Max Rp">
                        <input type="text" class="form-control form-control-sm forecast-notes" placeholder="Catatan">
                        <button type="button" class="btn btn-outline-danger btn-sm forecast-remove"><i class="fas fa-times"></i></button>
                    </div>
                `);
                row.find('.forecast-name').val(item.name || '');
                row.find('.forecast-min').val(item.amount_min ? formatRupiah(item.amount_min) : '');
                row.find('.forecast-max').val(item.amount_max ? formatRupiah(item.amount_max) : '');
                row.find('.forecast-notes').val(item.notes || '');
                $(target).append(row);
            };
            const addCompetitorRow = (item = {}) => addForecastRow('#competitorList', item);
            const addSubVendorRow = (item = {}) => addForecastRow('#subVendorList', item);
            const collectForecastRows = (target) => $(`${target} .competitor-row`).toArray().map((el) => ({
                name: $(el).find('.forecast-name').val(),
                amount_min: Number(cleanMoney($(el).find('.forecast-min').val()) || 0),
                amount_max: Number(cleanMoney($(el).find('.forecast-max').val()) || 0),
                notes: $(el).find('.forecast-notes').val(),
            })).filter((item) => String(item.name || '').trim() !== '');
            const collectCompetitors = () => collectForecastRows('#competitorList');
            const collectSubVendors = () => collectForecastRows('#subVendorList');
            const updateForecastMargins = () => {
                const budget = Number(cleanMoney($('#clientBudget').val()) || 0);
                const selfTotal = ['#selfMaterialCost', '#selfManpowerCost', '#selfEquipmentCost', '#selfOverheadCost']
                    .reduce((sum, id) => sum + Number(cleanMoney($(id).val()) || 0), 0);
                const selfMargin = Math.max(0, budget - selfTotal);
                const selfPct = budget > 0 ? ((selfMargin / budget) * 100) : 0;
                $('#selfTotalCost').text(formatRupiah(selfTotal) || 'Rp 0');
                $('#selfMarginAmount').text(formatRupiah(selfMargin) || 'Rp 0');
                $('#selfMarginPercent').text(budget > 0 ? `${selfPct.toFixed(2)}%` : '0%');

                const subRows = collectSubVendors();
                const subMin = subRows.reduce((sum, row) => sum + Number(row.amount_min || 0), 0);
                const subMax = subRows.reduce((sum, row) => sum + Number(row.amount_max || 0), 0);
                const subTarget = subMax || subMin;
                const subMargin = Math.max(0, budget - subTarget);
                $('#subVendorTotalMin').text(formatRupiah(subMin) || 'Rp 0');
                $('#subVendorTotalMax').text(formatRupiah(subMax) || 'Rp 0');
                $('#subVendorMargin').text(formatRupiah(subMargin) || 'Rp 0');
                $('#forecastSelfSummary').text(selfTotal > 0 ? `${formatRupiah(selfMargin) || 'Rp 0'} (${selfPct.toFixed(2)}%)` : 'Isi cost internal');
                $('#forecastSubSummary').text(subTarget > 0 ? `${formatRupiah(subMargin) || 'Rp 0'} dari ${formatRupiah(subTarget)}` : 'Isi rekanan pekerjaan');
                const plan = $('#executionPlan').val();
                const best = subTarget > 0 && subMargin > selfMargin ? 'Sub Vendor' : (selfTotal > 0 ? 'Self Perform' : '');
                const planText = plan === 'hybrid' ? 'Hybrid' : (plan === 'sub_vendor' ? 'Sub Vendor' : (plan === 'self_perform' ? 'Self Perform' : 'Need Review'));
                $('#forecastRecommendation')
                    .toggleClass('alert-success', Boolean(best))
                    .toggleClass('alert-info', !best)
                    .text(best ? `Rekomendasi angka: ${best}. Pilihan rencana sekarang: ${planText}.` : 'Isi nilai tender dan cost untuk melihat rekomendasi pilihan.');
            };
            const statusLabel = (s) => (s || 'lead').replaceAll('_', ' ').replace(/\b\w/g, (m) => m.toUpperCase());
            const statusPill = (s) => `<span class="status-pill status-${s || 'lead'}">${statusLabel(s)}</span>`;
            const qualificationPill = (s, score) => `<div class="qualification-pill qualification-${s || 'not_checked'}">${statusLabel(s || 'not_checked')} ${Number(score || 0) ? Number(score || 0) + '/100' : ''}</div>`;
            const deadlinePill = (d) => `<div>${d?.date || ''}</div><span class="deadline-pill deadline-${d?.code || 'no_deadline'}">${d?.label || '-'}</span>`;
            const qualificationWeights = {
                scopeFit: 12,
                manpowerReady: 10,
                vendorReady: 8,
                deadlineRisk: 12,
                paymentRisk: 14,
                winChance: 12,
                documentComplete: 8,
                budgetFit: 10,
                siteAccess: 6,
                strategicValue: 4,
                technicalComplexity: 4,
            };
            const redFlagIds = ['deadlineRisk', 'paymentRisk', 'documentComplete', 'technicalComplexity'];
            const selectedClient = () => clientRows.find((r) => String(r.id) === String($('#clientId').val()));
            const modal = new bootstrap.Modal(document.getElementById('leadModal'));
            const qualificationModal = new bootstrap.Modal(document.getElementById('qualificationModal'));
            let rowsCache = [];
            let activeQualificationRow = null;

            $('#clientFilter').select2({ theme: 'bootstrap-5', width: '100%' });
            $('#clientId').select2({ theme: 'bootstrap-5', width: '100%', dropdownParent: $('#leadModal') });
            $('#workScopeFields').select2({ theme: 'bootstrap-5', width: '100%', dropdownParent: $('#leadModal'), placeholder: 'Pilih bidang pekerjaan' });

            const table = $('#leadTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                searching: true,
                order: [[0, 'desc']],
                ajax: {
                    url: '{{ route('lead_client.data') }}',
                    data: (d) => {
                        d.status = $('#statusFilter').val();
                        d.client_id = $('#clientFilter').val();
                        d.deadline_from = $('#deadlineFrom').val();
                        d.deadline_to = $('#deadlineTo').val();
                    },
                    dataSrc: (json) => {
                        rowsCache = json.data || [];
                        updateKpi(json.meta || {});
                        return rowsCache;
                    },
                },
                columns: [
                    { data: 'id' },
                    { data: 'lead_no', render: (v, t, r) => `<div class="lead-row-title">${v || '-'}</div>${renderAttachments(r)}` },
                    { data: 'client_name', render: (v, t, r) => `<div class="lead-row-title">${v || '-'}</div><div class="lead-row-sub">${r.contact_person || '-'} ${r.phone ? '| ' + r.phone : ''}</div>` },
                    { data: 'project_name', render: (v, t, r) => `<button type="button" class="crm-project-link btn-project-detail" data-id="${r.id}">${v || '-'}</button><div class="lead-row-sub">${r.location || '-'}${r.resource_access_url ? ' | akses tender' : ''}</div>` },
                    { data: 'pic_marketing', render: (v, t, r) => `<div>${v || '-'}</div><div class="lead-row-sub">${r.owner_name ? 'Owner: ' + r.owner_name : ''}</div>` },
                    { data: 'deadline_date', render: (v, t, r) => deadlinePill({ date: v || '-', ...(r.deadline_status || {}) }) },
                    { data: 'qualification_score', render: (v, t, r) => qualificationPill(r.qualification_status, v) },
                    { data: 'estimated_value', className: 'text-end', render: (v, t, r) => r.estimated_value_masked ? '<span class="text-muted">***</span>' : fmtRupiahText(v) },
                    { data: 'status', render: (v) => statusPill(v) },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => {
                            const edit = row.can_edit ? `<button class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>` : '';
                            const qual = row.can_edit ? `<button class="btn btn-sm btn-outline-dark btn-qualification" data-id="${row.id}">Qualification</button>` : '';
                            const approve = row.can_approve_internal && ['quotation', 'quotation_ready', 'quotation_review', 'estimating'].includes(row.status)
                                ? `<button class="btn btn-sm btn-primary btn-approve-internal" data-id="${row.id}"><i class="fas fa-check me-1"></i>Approve</button>`
                                : '';
                            const revision = row.can_edit
                                ? `<button class="btn btn-sm btn-warning btn-request-revision" data-id="${row.id}"><i class="fas fa-rotate-left me-1"></i>Revisi</button>`
                                : '';
                            const add = row.can_edit ? `<button class="btn btn-sm btn-outline-success btn-add-tender" data-id="${row.id}">
                                    <i class="fas fa-plus me-1"></i>Tender
                                </button>` : '';
                            const project = row.can_edit && row.status === 'won'
                                ? (row.project_id
                                    ? `<a class="btn btn-sm btn-success" href="${row.project_url}"><i class="fas fa-folder-open me-1"></i>Open Project</a>`
                                    : `<button class="btn btn-sm btn-outline-success btn-create-project" data-id="${row.id}"><i class="fas fa-diagram-project me-1"></i>Create Project</button>`)
                                : '';
                            const del = row.can_delete ? `<button class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>` : '';
                            return `<div class="lead-actions">${edit}${qual}${approve}${revision}${add}${project}${del || '<span class="text-muted small">View only</span>'}</div>`;
                        }
                    }
                ]
            });

            const updateKpi = (meta = {}) => {
                $('#kpiTotal').text(meta.total || 0);
                $('#kpiEstimating').text(meta.estimating || 0);
                $('#kpiSubmitted').text(meta.submitted || 0);
                $('#kpiWon').text(meta.won || 0);
                $('#kpiLost').text(meta.lost || 0);
                $('#leadStatusTabs [data-count="all"]').text(meta.total || 0);
                Object.entries(meta.status_counts || {}).forEach(([status, count]) => {
                    $(`#leadStatusTabs [data-count="${status}"]`).text(count || 0);
                });
            };

            const resetForm = () => {
                $('#leadForm')[0].reset();
                $('#leadId').val('');
                $('#clientId').val('').trigger('change');
                $('#workScopeFields').val([]).trigger('change');
                $('#status').val('lead');
                $('#visibility').val('default');
                $('#amountVisibility').val('default');
                $('#clientLogoFile').val('');
                $('#clientLogoCurrent').text('-');
                $('#scopeSummaryEditor').html('');
                $('#scopeSummary').val('');
                $('#attachmentCurrent').text('-');
            };
            const openProjectDetail = (row) => {
                if (!row) return;
                activeDetailLead = row;
                $('#crmDetailTitle').text(row.project_name || 'Detail Project');
                $('#crmDetailSubtitle').text(`${row.client_name || '-'} | ${row.lead_no || '-'} | ${row.status || '-'}`);
                renderCrmDetailPanels(row);
                loadHandoverTasks(row);
                $('#crmPipelinePanel').addClass('d-none');
                $('#crmProjectDetail').removeClass('d-none');
                activateCrmTab('pipeline');
                window.scrollTo({ top: $('#crmProjectDetail').offset().top - 80, behavior: 'smooth' });
            };
            $('#leadTable').on('click', '.btn-project-detail', function () {
                openProjectDetail(rowsCache.find((row) => String(row.id) === String($(this).data('id'))));
            });
            $('#btnBackToPipeline').on('click', function () {
                $('#crmProjectDetail').addClass('d-none');
                $('#crmPipelinePanel').removeClass('d-none');
            });
            $(document).on('click', '#btnCrmTaskAdd', function () {
                if (!activeDetailLead) return;
                const $btn = $(this);
                const html = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Save');
                $.post(`{{ url('/lead-client') }}/${activeDetailLead.id}/tasks`, {
                    department: $('#crmTaskDepartment').val(),
                    pic_user_id: $('#crmTaskPicUser').val(),
                    pic_name: $('#crmTaskPicUser option:selected').data('name') || '',
                    document_no: $('#crmTaskDocumentNo').val(),
                    task_title: $('#crmTaskTitle').val(),
                    due_date: $('#crmTaskDueDate').val(),
                    status: 'waiting',
                    notes: '',
                    checklist_json: JSON.stringify((checklistTemplates[$('#crmTaskDepartment').val()] || []).map((label) => ({ label, done: false }))),
                }).done(() => {
                    loadHandoverTasks(activeDetailLead);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan task', 'error');
                }).always(() => {
                    $btn.prop('disabled', false).html(html);
                });
            });
            $(document).on('click', '.crm-doc-create-task', function () {
                if (!activeDetailLead) return;
                const type = String($(this).data('doc-type') || '');
                const isRab = type === 'rab';
                const $btn = $(this);
                const html = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Save');
                $.post(`{{ url('/lead-client') }}/${activeDetailLead.id}/tasks`, {
                    department: isRab ? 'engineering' : 'marketing',
                    pic_user_id: '',
                    pic_name: isRab ? 'Engineering PIC' : (activeDetailLead.pic_marketing || 'Marketing PIC'),
                    document_no: `${activeDetailLead.lead_no || 'LEAD'}-${isRab ? 'RAB' : 'QUOT'}`,
                    task_title: isRab ? 'RAB + BOQ final' : 'Quotation / Penawaran client',
                    due_date: activeDetailLead.deadline_date || '',
                    status: 'waiting',
                    notes: isRab ? 'Lengkapi RAB, BOQ/BOM, drawing, dan scope teknis.' : 'Lengkapi dokumen penawaran, proposal, submit, dan approval client.',
                    checklist_json: JSON.stringify(isRab
                        ? ['RAB final', 'BOQ/BOM final', 'Drawing pendukung', 'Scope teknis final'].map((label) => ({ label, done: false }))
                        : ['Draft quotation', 'Proposal penawaran', 'Approval internal', 'Submit ke client'].map((label) => ({ label, done: false }))),
                }).done(() => {
                    loadHandoverTasks(activeDetailLead);
                    Swal.fire('OK', isRab ? 'Task RAB dibuat' : 'Task Quotation dibuat', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal buat task dokumen', 'error');
                }).always(() => {
                    $btn.prop('disabled', false).html(html);
                });
            });
            $(document).on('change', '.crm-task-status-select', function () {
                if (!activeDetailLead) return;
                const task = activeHandoverTasks.find((item) => Number(item.id) === Number($(this).data('id')));
                if (!task) return;
                $.ajax({
                    url: `{{ url('/lead-client/tasks') }}/${task.id}`,
                    type: 'PUT',
                    data: {
                        department: task.department,
                        pic_user_id: task.pic_user_id || '',
                        pic_name: task.pic_name,
                        document_no: task.document_no || '',
                        task_title: task.task_title,
                        due_date: task.due_date,
                        status: $(this).val(),
                        notes: task.notes,
                        checklist_json: JSON.stringify(taskChecklist(task)),
                    },
                }).done(() => {
                    loadHandoverTasks(activeDetailLead);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal update task', 'error');
                    loadHandoverTasks(activeDetailLead);
                });
            });
            $(document).on('change', '.crm-task-check-toggle', function () {
                if (!activeDetailLead) return;
                const task = activeHandoverTasks.find((item) => Number(item.id) === Number($(this).data('id')));
                if (!task) return;
                const idx = Number($(this).data('idx'));
                const checklist = taskChecklist(task);
                if (checklist[idx]) checklist[idx].done = $(this).is(':checked');
                $.ajax({
                    url: `{{ url('/lead-client/tasks') }}/${task.id}`,
                    type: 'PUT',
                    data: {
                        department: task.department,
                        pic_user_id: task.pic_user_id || '',
                        pic_name: task.pic_name,
                        document_no: task.document_no || '',
                        task_title: task.task_title,
                        due_date: task.due_date,
                        status: task.status,
                        notes: task.notes,
                        checklist_json: JSON.stringify(checklist),
                    },
                }).done(() => {
                    task.checklist = checklist;
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal update checklist', 'error');
                    loadHandoverTasks(activeDetailLead);
                });
            });
            $(document).on('click', '.crm-task-preview', function () {
                const task = activeHandoverTasks.find((item) => Number(item.id) === Number($(this).data('id')));
                if (!task) return;
                Swal.fire({
                    title: 'Preview Task',
                    html: taskPreviewHtml(task),
                    width: 720,
                    confirmButtonText: 'Tutup',
                });
            });
            $(document).on('click', '.crm-task-edit', function () {
                if (!activeDetailLead) return;
                const task = activeHandoverTasks.find((item) => Number(item.id) === Number($(this).data('id')));
                if (!task) return;
                const checklist = taskChecklist(task);
                Swal.fire({
                    title: 'Edit Task',
                    html: `
                        <div class="text-start">
                            <label class="form-label small fw-bold">Departemen</label>
                            <select id="editTaskDepartment" class="form-select mb-2">
                                ${Object.keys(checklistTemplates).map((key) => `<option value="${key}" ${key === task.department ? 'selected' : ''}>${key}</option>`).join('')}
                            </select>
                            <label class="form-label small fw-bold">Nomor Dokumen</label>
                            <input id="editTaskDocumentNo" class="form-control mb-2" value="${esc(task.document_no || '')}">
                            <label class="form-label small fw-bold">Judul Task</label>
                            <input id="editTaskTitle" class="form-control mb-2" value="${esc(task.task_title || '')}">
                            <label class="form-label small fw-bold">Due Date</label>
                            <input id="editTaskDueDate" type="date" class="form-control mb-2" value="${esc(task.due_date || '')}">
                            <label class="form-label small fw-bold">Deskripsi</label>
                            <textarea id="editTaskNotes" class="form-control mb-2" rows="3">${esc(task.notes || '')}</textarea>
                            <label class="form-label small fw-bold">Item yang harus dilengkapi</label>
                            <textarea id="editTaskChecklist" class="form-control" rows="5">${esc(checklist.map((item) => `${item.done ? '[x]' : '[ ]'} ${item.label}`).join('\n'))}</textarea>
                        </div>
                    `,
                    width: 760,
                    showCancelButton: true,
                    confirmButtonText: 'Simpan',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const title = $('#editTaskTitle').val();
                        if (!String(title || '').trim()) {
                            Swal.showValidationMessage('Judul task wajib diisi');
                            return false;
                        }
                        return true;
                    },
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    const editedChecklist = String($('#editTaskChecklist').val() || '').split(/\r?\n/)
                        .map((line) => line.trim())
                        .filter(Boolean)
                        .map((line) => ({
                            done: /^\[x\]/i.test(line),
                            label: line.replace(/^\[(x| )\]\s*/i, ''),
                        }));
                    $.ajax({
                        url: `{{ url('/lead-client/tasks') }}/${task.id}`,
                        type: 'PUT',
                        data: {
                            department: $('#editTaskDepartment').val(),
                            pic_user_id: task.pic_user_id || '',
                            pic_name: task.pic_name,
                            document_no: $('#editTaskDocumentNo').val(),
                            task_title: $('#editTaskTitle').val(),
                            due_date: $('#editTaskDueDate').val(),
                            status: task.status,
                            notes: $('#editTaskNotes').val(),
                            checklist_json: JSON.stringify(editedChecklist),
                        },
                    }).done((resp) => {
                        Swal.fire('OK', resp?.message || 'Task tersimpan', 'success');
                        loadHandoverTasks(activeDetailLead);
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal edit task', 'error');
                    });
                });
            });
            $(document).on('click', '.crm-task-upload', function () {
                if (!activeDetailLead) return;
                const taskId = Number($(this).data('id'));
                const checklistIndexRaw = $(this).data('idx');
                const checklistIndex = checklistIndexRaw === undefined || checklistIndexRaw === '' ? null : Number(checklistIndexRaw);
                const checklistLabel = ($(this).data('label') || '').toString();
                const task = activeHandoverTasks.find((item) => Number(item.id) === taskId);
                if (!task) return;
                const checklist = taskChecklist(task);
                const checklistOptions = checklist.map((item, idx) => `<option value="${idx}" ${idx === checklistIndex ? 'selected' : ''}>${esc(item.label || '-')}</option>`).join('');
                Swal.fire({
                    title: checklistLabel ? `Upload: ${checklistLabel}` : 'Submit dokumen task',
                    html: `
                        <div class="text-start">
                            <label class="form-label small fw-bold">Group Checklist</label>
                            <select id="taskChecklistGroup" class="form-select mb-2">
                                <option value="">File umum task</option>
                                ${checklistOptions}
                            </select>
                            <label class="form-label small fw-bold">Nomor Revisi</label>
                            <input id="taskRevisionNo" type="number" min="1" class="form-control mb-2" value="${esc(task.next_revision_no || 1)}">
                            <label class="form-label small fw-bold">Lampiran</label>
                            <input id="taskAttachmentFiles" type="file" class="form-control mb-2" accept=".pdf,.doc,.docx,.jpg,.jpeg" multiple>
                            <div class="small text-muted mb-2">Hanya PDF, DOC/DOCX, JPG. Nama file otomatis dibakukan dari nomor dokumen dan item checklist.</div>
                            <label class="form-label small fw-bold">Status Setelah Submit</label>
                            <select id="taskUploadStatus" class="form-select">
                                <option value="progress">Progress</option>
                                <option value="revision">Revisi Submit</option>
                                <option value="done">Selesai</option>
                            </select>
                        </div>
                    `,
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonText: 'Upload',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const files = document.getElementById('taskAttachmentFiles')?.files || [];
                        if (!files.length) {
                            Swal.showValidationMessage('Lampiran wajib dipilih');
                            return false;
                        }
                        return true;
                    },
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    const formData = new FormData();
                    formData.append('revision_no', $('#taskRevisionNo').val() || task.next_revision_no || 1);
                    formData.append('status', $('#taskUploadStatus').val() || 'progress');
                    const selectedChecklistIndex = $('#taskChecklistGroup').val();
                    if (selectedChecklistIndex !== '') {
                        const selectedItem = checklist[Number(selectedChecklistIndex)] || {};
                        formData.append('checklist_item_index', String(selectedChecklistIndex));
                        formData.append('checklist_item_label', selectedItem.label || '');
                    }
                    Array.from(document.getElementById('taskAttachmentFiles')?.files || [])
                        .forEach((file) => formData.append('attachments[]', file));
                    $.ajax({
                        url: `{{ url('/lead-client/tasks') }}/${taskId}/attachments`,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                    }).done((resp) => {
                        Swal.fire('OK', resp?.message || 'Dokumen tersimpan', 'success');
                        loadHandoverTasks(activeDetailLead);
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal upload dokumen', 'error');
                    });
                });
            });
            $(document).on('click', '.crm-task-file-delete', function () {
                if (!activeDetailLead) return;
                const taskId = Number($(this).data('task-id'));
                const fileId = Number($(this).data('file-id'));
                Swal.fire({
                    title: 'Hapus dokumen?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Hapus',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/lead-client/tasks') }}/${taskId}/attachments/${fileId}`,
                        type: 'DELETE',
                    }).done((resp) => {
                        Swal.fire('OK', resp?.message || 'Dokumen dihapus', 'success');
                        loadHandoverTasks(activeDetailLead);
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus dokumen', 'error');
                    });
                });
            });
            $(document).on('click', '.crm-task-file-preview', function (e) {
                e.preventDefault();
                const url = this.href;
                const name = $(this).data('name') || 'Preview Dokumen';
                Swal.fire({
                    title: esc(name),
                    html: `<iframe src="${esc(url)}" style="width:100%;height:72vh;border:1px solid #dbe3ee;border-radius:8px;background:#fff"></iframe>`,
                    width: '92vw',
                    showConfirmButton: false,
                    showCloseButton: true,
                    customClass: { popup: 'p-2' },
                });
            });
            $(document).on('click', '.crm-task-delete', function () {
                if (!activeDetailLead) return;
                const taskId = Number($(this).data('id'));
                Swal.fire({
                    title: 'Hapus task?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({ url: `{{ url('/lead-client/tasks') }}/${taskId}`, type: 'DELETE' })
                        .done(() => loadHandoverTasks(activeDetailLead))
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus task', 'error'));
                });
            });

            $('#estimatedValue').on('input', function () {
                this.value = formatRupiah(this.value);
            });
            $('.tender-rate').on('input', function () {
                this.value = formatRupiah(this.value);
            });
            $('#toggleTenderPassword').on('click', function () {
                const input = document.getElementById('resourceAccessPassword');
                const icon = this.querySelector('i');
                const show = input.type === 'password';
                input.type = show ? 'text' : 'password';
                icon.classList.toggle('fa-eye', !show);
                icon.classList.toggle('fa-eye-slash', show);
            });
            $('#btnAddCompetitor').on('click', () => addCompetitorRow());
            $('#btnAddSubVendor').on('click', () => {
                addSubVendorRow();
                updateForecastMargins();
            });
            $('#competitorList,#subVendorList').on('click', '.forecast-remove', function () {
                $(this).closest('.competitor-row').remove();
                updateForecastMargins();
            });
            $('#competitorList,#subVendorList').on('input', '.forecast-min,.forecast-max', function () {
                this.value = formatRupiah(this.value);
                updateForecastMargins();
            });
            $('#clientBudget,#marginAmount,.self-cost').on('input', function () {
                this.value = formatRupiah(this.value);
                updateForecastMargins();
            });
            let syncingMargin = false;
            $('#marginEstimate,#clientBudget').on('input change', function () {
                if (syncingMargin) return;
                const budget = Number(cleanMoney($('#clientBudget').val()) || 0);
                const pct = Number($('#marginEstimate').val() || 0);
                if (budget > 0 && pct > 0) {
                    syncingMargin = true;
                    $('#marginAmount').val(formatRupiah(Math.round((budget * pct) / 100)));
                    syncingMargin = false;
                }
            });
            $('#marginAmount').on('input change', function () {
                if (syncingMargin) return;
                const budget = Number(cleanMoney($('#clientBudget').val()) || 0);
                const amount = Number(cleanMoney($('#marginAmount').val()) || 0);
                if (budget > 0 && amount > 0) {
                    syncingMargin = true;
                    $('#marginEstimate').val(((amount / budget) * 100).toFixed(2));
                    syncingMargin = false;
                }
            });

            $('#btnAddLead').on('click', function () {
                $('#leadModalTitle').text('Tambah Lead Client');
                resetForm();
                modal.show();
            });

            const fillFormFromRow = (row, mode = 'edit') => {
                const additional = mode === 'additional';
                $('#leadModalTitle').text(additional ? `Additional Tender - ${row.client_name || 'Client'}` : 'Edit Lead Client');
                $('#leadId').val(additional ? '' : row.id);
                $('#leadNo').val(additional ? '' : (row.lead_no || ''));
                $('#clientId').val(row.client_id || '').trigger('change');
                $('#clientName').val(row.client_name || '');
                $('#clientLogoFile').val('');
                $('#clientLogoCurrent').html(!additional && row.client_logo_url ? `<a href="${row.client_logo_url}" target="_blank">${row.client_logo_name || 'Logo'}</a>` : '-');
                $('#projectName').val(additional ? '' : (row.project_name || ''));
                $('#contactPerson').val(row.contact_person || '');
                $('#phone').val(row.phone || '');
                $('#email').val(row.email || '');
                $('#resourceAccessUrl').val(row.resource_access_url || '');
                $('#resourceAccessUsername').val(row.resource_access_username || '');
                $('#resourceAccessPassword').val(row.resource_access_password || '');
                $('#location').val(row.location || '');
                $('#locationLat').val(row.location_lat || '');
                $('#locationLng').val(row.location_lng || '');
                $('#tenderArea').val(row.tender_area || '');
                $('#tenderScopeType').val(row.tender_scope_type || '');
                $('#workScopeFields').val(Array.isArray(row.work_scope_fields) ? row.work_scope_fields : []).trigger('change');
                $('#estimatedUmrArea').val(row.estimated_umr_area ? formatRupiah(row.estimated_umr_area) : '');
                $('#estimatedMealRate').val(row.estimated_meal_rate ? formatRupiah(row.estimated_meal_rate) : '');
                $('#estimatedBbmRate').val(row.estimated_bbm_rate ? formatRupiah(row.estimated_bbm_rate) : '');
                $('#estimatedManpowerRate').val(row.estimated_manpower_rate ? formatRupiah(row.estimated_manpower_rate) : '');
                $('#source').val(row.source || '');
                $('#deadlineDate').val(additional ? '' : (row.deadline_date || ''));
                $('#estimatedValue').val(additional ? '' : formatRupiah(row.estimated_value || ''));
                $('#picMarketing').val(row.pic_marketing || '');
                $('#status').val(additional ? 'lead' : (row.status || 'lead'));
                $('#visibility').val(additional ? 'default' : (row.visibility || 'default'));
                $('#amountVisibility').val(additional ? 'default' : (row.amount_visibility || 'default'));
                $('#scopeSummary').val(additional ? '' : (row.scope_summary || ''));
                $('#scopeSummaryEditor').html(additional ? '' : (row.scope_summary || ''));
                $('#notes').val('');
                $('#attachmentFile').val('');
                $('#attachmentCurrent').html(additional ? '-' : renderAttachments(row));
            };

            $('#leadTable').on('click', '.btn-edit', function () {
                const row = rowsCache.find((r) => Number(r.id) === Number($(this).data('id')));
                if (!row) return;
                fillFormFromRow(row, 'edit');
                modal.show();
            });

            $('#leadTable').on('click', '.btn-add-tender', function () {
                const row = rowsCache.find((r) => Number(r.id) === Number($(this).data('id')));
                if (!row) return;
                fillFormFromRow(row, 'additional');
                modal.show();
                setTimeout(() => $('#projectName').trigger('focus'), 250);
            });
            $('#leadTable').on('click', '.btn-create-project', function () {
                const id = $(this).data('id');
                const $btn = $(this);
                const html = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Creating');
                $.post(`{{ url('/lead-client') }}/${id}/create-project`)
                    .done((resp) => {
                        Swal.fire({
                            title: 'Project dibuat',
                            text: resp?.message || 'Handover selesai',
                            icon: 'success',
                            showCancelButton: true,
                            confirmButtonText: 'Open Project',
                            cancelButtonText: 'Tutup',
                        }).then((result) => {
                            if (result.isConfirmed && resp?.project_url) window.location.href = resp.project_url;
                        });
                        table.ajax.reload(null, false);
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Create project failed', 'error'))
                    .always(() => $btn.prop('disabled', false).html(html));
            });

            $('#leadTable').on('click', '.btn-approve-internal', function () {
                const id = $(this).data('id');
                const $btn = $(this);
                const html = $btn.html();
                Swal.fire({
                    title: 'Approve internal quotation?',
                    input: 'textarea',
                    inputLabel: 'Catatan approval',
                    inputPlaceholder: 'Opsional',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Approve',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Approve');
                    $.post(`{{ url('/lead-client') }}/${id}/approve-internal`, { note: result.value || '' })
                        .done((resp) => {
                            Swal.fire('OK', resp?.message || 'Approved', 'success');
                            table.ajax.reload(null, false);
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal approve', 'error'))
                        .always(() => $btn.prop('disabled', false).html(html));
                });
            });

            $('#leadTable').on('click', '.btn-request-revision', function () {
                const id = $(this).data('id');
                const $btn = $(this);
                const html = $btn.html();
                Swal.fire({
                    title: 'Catat revisi tender',
                    html: `
                        <select id="revisionSource" class="form-select mb-2">
                            <option value="internal">Internal</option>
                            <option value="client">Client</option>
                        </select>
                        <textarea id="revisionNote" class="form-control" rows="4" placeholder="Catatan revisi" required></textarea>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Simpan Revisi',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const note = $('#revisionNote').val();
                        if (!String(note || '').trim()) {
                            Swal.showValidationMessage('Catatan revisi wajib diisi');
                            return false;
                        }
                        return { source: $('#revisionSource').val(), note };
                    },
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Revisi');
                    $.post(`{{ url('/lead-client') }}/${id}/request-revision`, result.value)
                        .done((resp) => {
                            Swal.fire('OK', resp?.message || 'Revisi dicatat', 'success');
                            table.ajax.reload(null, false);
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan revisi', 'error'))
                        .always(() => $btn.prop('disabled', false).html(html));
                });
            });

            const updateQualificationScore = () => {
                const score = Math.round(Object.entries(qualificationWeights)
                    .reduce((sum, [id, weight]) => sum + ((Number(document.getElementById(id)?.value || 3) / 5) * weight), 0));
                const hasRedFlag = redFlagIds.some((id) => Number(document.getElementById(id)?.value || 3) <= 2);
                $('#qualificationScorePreview').text(score);
                $('#qualificationScoreBar').css('width', `${score}%`);
                const recommendation = hasRedFlag ? 'Need Review' : (score >= 75 ? 'Qualified' : (score >= 60 ? 'Need Review' : (score >= 45 ? 'Hold' : 'Rejected')));
                const badge = recommendation === 'Qualified' ? 'success' : (recommendation === 'Need Review' ? 'warning' : (recommendation === 'Hold' ? 'secondary' : 'danger'));
                $('#qualificationRecommendation')
                    .removeClass('text-bg-success text-bg-warning text-bg-secondary text-bg-danger')
                    .addClass(`text-bg-${badge}`)
                    .text(hasRedFlag ? `${recommendation} - Red Flag` : recommendation);
                $('#forecastScoreSummary').text(`${score}/100 - ${hasRedFlag ? `${recommendation} Red Flag` : recommendation}`);
            };
            $('.qualification-score').on('change', updateQualificationScore);
            $('#executionPlan').on('change', updateForecastMargins);
            $('#btnEditLeadFromQualification').on('click', function () {
                if (!activeQualificationRow) return;
                qualificationModal.hide();
                fillFormFromRow(activeQualificationRow, 'edit');
                modal.show();
                setTimeout(() => $('#estimatedValue').trigger('focus'), 250);
            });
            $('#leadTable').on('click', '.btn-qualification', function () {
                const row = rowsCache.find((r) => Number(r.id) === Number($(this).data('id')));
                if (!row) return;
                activeQualificationRow = row;
                const q = row.qualification || {};
                $('#qualificationTitle').text(`Tender Qualification - ${row.lead_no || '-'}`);
                $('#qualificationProjectText').text(row.project_name || '-');
                $('#qualificationClientText').text(`${row.client_name || '-'} | Deadline: ${row.deadline_date || '-'} | Nilai Tender: ${row.estimated_value_masked ? '***' : fmtMoney(row.estimated_value)}`);
                $('#btnEditLeadFromQualification').prop('disabled', !row.can_edit);
                $('#qualificationLeadId').val(row.id);
                $('#scopeFit').val(q.scope_fit || 3);
                $('#manpowerReady').val(q.manpower_ready || 3);
                $('#vendorReady').val(q.vendor_ready || 3);
                $('#deadlineRisk').val(q.deadline_risk || 3);
                $('#paymentRisk').val(q.payment_risk || 3);
                $('#winChance').val(q.win_chance || 3);
                $('#documentComplete').val(q.document_complete || 3);
                $('#budgetFit').val(q.budget_fit || 3);
                $('#siteAccess').val(q.site_access || 3);
                $('#strategicValue').val(q.strategic_value || 3);
                $('#technicalComplexity').val(q.technical_complexity || 3);
                const tenderValue = Number(q.client_budget || row.estimated_value || 0);
                const targetMargin = Number(q.margin_estimate || 15);
                const targetMarginAmount = Number(q.margin_amount || Math.round((tenderValue * targetMargin) / 100));
                $('#marginEstimate').val(targetMargin || '');
                $('#marginAmount').val(targetMarginAmount ? formatRupiah(targetMarginAmount) : '');
                $('#clientBudget').val(tenderValue ? formatRupiah(tenderValue) : '');
                $('#selfMaterialCost').val(q.self_material_cost ? formatRupiah(q.self_material_cost) : '');
                $('#selfManpowerCost').val(q.self_manpower_cost ? formatRupiah(q.self_manpower_cost) : '');
                $('#selfEquipmentCost').val(q.self_equipment_cost ? formatRupiah(q.self_equipment_cost) : '');
                $('#selfOverheadCost').val(q.self_overhead_cost ? formatRupiah(q.self_overhead_cost) : '');
                $('#executionPlan').val(q.execution_plan || 'need_review');
                $('#expectedDuration').val(q.expected_duration || '');
                $('#submissionMethod').val(q.submission_method || '');
                $('#competitorList').empty();
                const competitors = Array.isArray(q.competitors)
                    ? q.competitors
                    : (q.competitor ? [{ name: q.competitor }] : []);
                if (competitors.length) competitors.forEach(addCompetitorRow);
                else addCompetitorRow();
                $('#subVendorList').empty();
                const subVendors = Array.isArray(q.sub_vendors) ? q.sub_vendors : [];
                if (subVendors.length) subVendors.forEach(addSubVendorRow);
                else addSubVendorRow();
                updateForecastMargins();
                $('#requiredDocuments').val(q.required_documents || '');
                $('#riskNotes').val(q.risk_notes || '');
                $('#qualificationDecision').val(row.qualification_status && row.qualification_status !== 'not_checked' ? row.qualification_status : 'qualified');
                updateQualificationScore();
                qualificationModal.show();
            });
            $('#qualificationForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#qualificationLeadId').val();
                const $btn = $('#qualificationSubmitBtn');
                const html = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Saving');
                $.post(`{{ url('/lead-client') }}/${id}/qualification`, {
                    scope_fit: $('#scopeFit').val(),
                    manpower_ready: $('#manpowerReady').val(),
                    vendor_ready: $('#vendorReady').val(),
                    deadline_risk: $('#deadlineRisk').val(),
                    payment_risk: $('#paymentRisk').val(),
                    win_chance: $('#winChance').val(),
                    document_complete: $('#documentComplete').val(),
                    budget_fit: $('#budgetFit').val(),
                    site_access: $('#siteAccess').val(),
                    strategic_value: $('#strategicValue').val(),
                    technical_complexity: $('#technicalComplexity').val(),
                    margin_estimate: $('#marginEstimate').val() || 0,
                    margin_amount: cleanMoney($('#marginAmount').val()) || 0,
                    client_budget: cleanMoney($('#clientBudget').val()) || 0,
                    self_material_cost: cleanMoney($('#selfMaterialCost').val()) || 0,
                    self_manpower_cost: cleanMoney($('#selfManpowerCost').val()) || 0,
                    self_equipment_cost: cleanMoney($('#selfEquipmentCost').val()) || 0,
                    self_overhead_cost: cleanMoney($('#selfOverheadCost').val()) || 0,
                    expected_duration: $('#expectedDuration').val(),
                    submission_method: $('#submissionMethod').val(),
                    competitor: JSON.stringify(collectCompetitors()),
                    sub_vendor: JSON.stringify(collectSubVendors()),
                    execution_plan: $('#executionPlan').val(),
                    required_documents: $('#requiredDocuments').val(),
                    risk_notes: $('#riskNotes').val(),
                    decision: $('#qualificationDecision').val(),
                }).done((resp) => {
                    qualificationModal.hide();
                    Swal.fire('Success', resp?.message || 'Qualification tersimpan', 'success');
                    table.ajax.reload(null, false);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Qualification gagal', 'error');
                }).always(() => {
                    $btn.prop('disabled', false).html(html);
                });
            });

            $('#leadTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Hapus lead?',
                    text: 'Data lead client akan dihapus.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({ url: `{{ url('/lead-client') }}/${id}`, type: 'DELETE' })
                        .done((resp) => {
                            Swal.fire('Success', resp?.message || 'Deleted', 'success');
                            table.ajax.reload(null, false);
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            $('#leadForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#leadId').val();
                const client = selectedClient();
                $('#clientName').val(client?.name || '');
                $('#scopeSummary').val($('#scopeSummaryEditor').html());
                const formData = new FormData();
                const payload = {
                    lead_no: $('#leadNo').val(),
                    client_id: $('#clientId').val(),
                    client_name: $('#clientName').val(),
                    project_name: $('#projectName').val(),
                    contact_person: $('#contactPerson').val(),
                    phone: $('#phone').val(),
                    email: $('#email').val(),
                    resource_access_url: $('#resourceAccessUrl').val(),
                    resource_access_username: $('#resourceAccessUsername').val(),
                    resource_access_password: $('#resourceAccessPassword').val(),
                    location: $('#location').val(),
                    location_lat: $('#locationLat').val(),
                    location_lng: $('#locationLng').val(),
                    tender_area: $('#tenderArea').val(),
                    tender_scope_type: $('#tenderScopeType').val(),
                    estimated_umr_area: cleanMoney($('#estimatedUmrArea').val()) || 0,
                    estimated_meal_rate: cleanMoney($('#estimatedMealRate').val()) || 0,
                    estimated_bbm_rate: cleanMoney($('#estimatedBbmRate').val()) || 0,
                    estimated_manpower_rate: cleanMoney($('#estimatedManpowerRate').val()) || 0,
                    source: $('#source').val(),
                    deadline_date: $('#deadlineDate').val(),
                    estimated_value: cleanMoney($('#estimatedValue').val()) || 0,
                    pic_marketing: $('#picMarketing').val(),
                    status: $('#status').val(),
                    scope_summary: $('#scopeSummary').val(),
                    notes: $('#notes').val(),
                    visibility: $('#visibility').val(),
                    amount_visibility: $('#amountVisibility').val(),
                };
                Object.entries(payload).forEach(([key, value]) => formData.append(key, value ?? ''));
                ($('#workScopeFields').val() || []).forEach((value) => formData.append('work_scope_fields[]', value));
                const logoFile = document.getElementById('clientLogoFile')?.files?.[0];
                if (logoFile) formData.append('client_logo_file', logoFile);
                Array.from(document.getElementById('attachmentFile')?.files || [])
                    .forEach((file) => formData.append('attachment_files[]', file));
                if (id) formData.append('_method', 'PUT');
                $.ajax({
                    url: id ? `{{ url('/lead-client') }}/${id}` : '{{ route('lead_client.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                }).done((resp) => {
                    modal.hide();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                    table.ajax.reload(null, false);
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#clientId').on('change', function () {
                const client = selectedClient();
                if (!client) return;
                $('#clientName').val(client.name || '');
                if (!$('#contactPerson').val()) $('#contactPerson').val(client.contact_person || '');
                if (!$('#phone').val()) $('#phone').val(client.phone || '');
                if (!$('#email').val()) $('#email').val(client.email || '');
            });
            $('#leadStatusTabs').on('click', '.lead-status-tab', function () {
                $('#leadStatusTabs .lead-status-tab').removeClass('active');
                $(this).addClass('active');
                $('#statusFilter').val($(this).data('status') || '');
                table.ajax.reload();
            });
            $('#statusFilter').on('change', function () {
                const status = $(this).val() || '';
                $('#leadStatusTabs .lead-status-tab').removeClass('active');
                $(`#leadStatusTabs .lead-status-tab[data-status="${status}"]`).addClass('active');
                table.ajax.reload();
            });
            $('#clientFilter').on('change', () => table.ajax.reload());
            $('#deadlineFrom,#deadlineTo').on('change', () => table.ajax.reload());
            $('#quickSearch').on('input', function () { table.search(this.value).draw(); });
            $('#btnClearQuickSearch').on('click', function () {
                $('#quickSearch').val('');
                table.search('').draw();
                $('#quickSearch').trigger('focus');
            });
            $('#btnReviewMonth').on('click', function () {
                const start = new Date();
                const end = new Date();
                end.setMonth(end.getMonth() + 1);
                $('#deadlineFrom').val(fmtDate(start));
                $('#deadlineTo').val(fmtDate(end));
                table.ajax.reload();
            });
            $('#btnExportLead').on('click', function () {
                const params = new URLSearchParams({
                    status: $('#statusFilter').val() || '',
                    client_id: $('#clientFilter').val() || '',
                    deadline_from: $('#deadlineFrom').val() || '',
                    deadline_to: $('#deadlineTo').val() || '',
                    q: $('#quickSearch').val() || '',
                });
                window.location.href = `{{ route('lead_client.export') }}?${params.toString()}`;
            });
            $('#btnSaveLeadSettings').on('click', function () {
                const $btn = $(this);
                const html = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan');
                $.post('{{ route('lead_client.settings') }}', {
                    visibility_mode: $('#globalVisibilityMode').val(),
                    amount_visibility: $('#globalAmountVisibility').val(),
                    document_download_password: $('#documentDownloadPassword').val(),
                }).done((resp) => {
                    documentDownloadPasswordRequired = String($('#documentDownloadPassword').val() || '').trim() !== '';
                    Swal.fire('Success', resp?.message || 'Setting tersimpan', 'success');
                    table.ajax.reload(null, false);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Setting gagal disimpan', 'error');
                }).always(() => {
                    $btn.prop('disabled', false).html(html);
                });
            });
            $(document).on('click', '.crm-task-download-protected', function (e) {
                if (!documentDownloadPasswordRequired) return;
                e.preventDefault();
                const url = new URL(this.href, window.location.origin);
                Swal.fire({
                    title: 'Password download',
                    input: 'password',
                    inputPlaceholder: 'Password dokumen',
                    showCancelButton: true,
                    confirmButtonText: 'Download',
                    cancelButtonText: 'Batal',
                    inputValidator: (value) => value ? null : 'Password wajib diisi',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    url.searchParams.set('password', result.value);
                    window.open(url.toString(), '_blank');
                });
            });
        });
    </script>
@endpush