@extends('root')

@section('title', 'Auto Reply')

@push('styles')
<style>
    .card {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 0.75rem;
        transition: box-shadow 0.3s ease-in-out;
    }
    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    .nav-pills .nav-link {
        color: #6c757d;
        font-weight: 500;
        padding: 0.45rem 0.85rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .nav-pills .nav-link:hover {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }
    .nav-pills .nav-link.active {
        background-color: #0d6efd;
        color: white;
        box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
    }
    .table thead th {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .table tbody td {
        vertical-align: middle;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .badge { font-weight: 500; }
    .auto-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .auto-tabs-scroll::-webkit-scrollbar { display: none; }
    .auto-tabs-scroll .nav { flex-wrap: nowrap; }
    .setting-block { background: #f8f9fc; border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1.25rem; }
    .setting-block .setting-label { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; color: #6c757d; margin-bottom: 0.5rem; }
    .info-card { border-left: 3px solid #0d6efd; }
    .info-card.success { border-left-color: #198754; }
    .info-card.warning { border-left-color: #fd7e14; }
    .greeting-package-badge { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
    .greeting-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; margin-bottom: 0.5rem; }
    #tab-greeting .setting-block { background: #f8f9fc; border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1.25rem; }
    #tab-greeting .setting-block.setting-block-highlight { background: linear-gradient(135deg, #e7f1ff 0%, #f0f4ff 100%); border: 1px solid rgba(13, 110, 253, 0.15); }
    #tab-greeting .form-check-input { width: 2.5em; height: 1.25em; }
    #tab-ai .rotate-180 { transform: rotate(180deg); }
    #tab-ai [data-bs-toggle="collapse"] .ti-chevron-down { transition: transform 0.2s ease; }
    @media (max-width: 768px) {
        .nav-pills .nav-link { font-size: 0.8rem; padding: 0.4rem 0.65rem; }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Auto Reply',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Auto Reply'
    ])

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show rounded-3 shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <i class="ti ti-check-circle fs-4 me-2"></i>
                <div>{{ session('success') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-primary text-white overflow-hidden" style="background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute top-0 end-0 opacity-10 p-3">
                        <i class="ti ti-robot fs-1" style="font-size: 5rem !important;"></i>
                    </div>
                    <h4 class="mb-2 text-white fw-bold">Otomatisasi Pesan</h4>
                    <p class="mb-0 text-white-50" style="max-width: 600px;">
                        Kelola balasan otomatis untuk meningkatkan responsivitas layanan Anda. Atur Welcome Message, filter kata kunci, dan template balasan cepat.
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Main Interface --}}
    <div class="card">
        <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4">
            <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3">
                <div class="auto-tabs-scroll w-100">
                    <ul class="nav nav-pills mb-3" role="tablist">
                        {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-simple-btn" data-bs-toggle="pill" data-bs-target="#tab-simple" type="button" role="tab">
                                <i class="ti ti-message-circle me-1"></i>Welcome
                            </button>
                        </li> --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-custom-btn" data-bs-toggle="pill" data-bs-target="#tab-custom" type="button" role="tab">
                                <i class="ti ti-keyboard me-1"></i>Balasan Custom
                                @if($customRules->count() > 0)
                                    <span class="badge bg-white text-primary ms-1 shadow-sm">{{ $customRules->count() }}</span>
                                @endif
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-qr-btn" data-bs-toggle="pill" data-bs-target="#tab-qr" type="button" role="tab">
                                <i class="ti ti-bolt me-1"></i>Quick Reply
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-greeting-btn" data-bs-toggle="pill" data-bs-target="#tab-greeting" type="button" role="tab">
                                <i class="ti ti-hand-wave me-1"></i>Greeting
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-ai-btn" data-bs-toggle="pill" data-bs-target="#tab-ai" type="button" role="tab">
                                <i class="ti ti-robot me-1"></i>AI Reply
                            </button>
                        </li>
                    </ul>
                </div>

                @if($showWabaSelector && $wabaPools->isNotEmpty())
                <form method="get" class="d-flex align-items-center gap-2 mb-3 bg-light rounded-pill px-3 py-1" id="wabaFilterForm">
                     <i class="ti ti-filter text-muted"></i>
                    <select name="waba_pool_id" class="form-select form-select-sm border-0 bg-transparent shadow-none" style="width: auto; min-width: 150px; cursor: pointer;" onchange="this.form.submit()">
                        @if($wabaPools->count() > 1)
                            <option value="">Semua WABA</option>
                        @endif
                        @foreach($wabaPools as $pool)
                            <option value="{{ $pool->id }}" {{ (string)$currentWabaPoolId === (string)$pool->id ? 'selected' : '' }}>
                                {{ $pool->account_name ?? $pool->phone_number ?? 'WABA #'.$pool->id }}
                            </option>
                        @endforeach
                    </select>
                </form>
                @endif
            </div>
        </div>
        <div class="card-body pt-3">
            <div class="tab-content">
                {{-- Tab 1: Welcome Message --}}
               <div class="tab-pane fade" id="tab-simple" role="tabpanel">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="card shadow-sm border-0">
                                <div class="card-body p-4">
                                    <h5 class="card-title fw-bold text-primary mb-3"><i class="ti ti-message-circle me-2"></i>Welcome Message</h5>
                                    <p class="text-muted small mb-4">Pesan ini akan dikirim otomatis jika pesan masuk <strong>tidak cocok</strong> dengan kata kunci apapun (Fallback).</p>

                                    <form id="simpleAutoreplyForm" method="POST" action="{{ route('client.balasan-otomatis.store-simple') }}">
                                        @csrf
                                        <input type="hidden" name="reply_payload" id="reply_payload" value="">
                                        <input type="hidden" name="waba_pool_id" value="{{ $currentWabaPoolId ?? '' }}">
                                        
                                        <div class="bg-light p-3 rounded-3 mb-4">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <label class="fw-bold mb-0">Status Aktif</label>
                                                <div class="form-check form-switch mb-0">
                                                    <input type="hidden" name="is_enabled" id="is_enabled_value" value="{{ ($config && $config->is_enabled) ? '1' : '0' }}">
                                                    <input class="form-check-input" type="checkbox" id="is_enabled" value="1" {{ ($config && $config->is_enabled) ? 'checked' : '' }} style="width: 3em; height: 1.5em;">
                                                </div>
                                            </div>
                                            <div class="small text-muted">Aktifkan untuk mengirim pesan sambutan ke pelanggan baru atau setelah sesi berakhir.</div>
                                        </div>

                                        <div class="row g-3 mb-4">
                                            <div class="col-md-6">
                                                <label class="form-label fw-bold small text-uppercase text-muted">Interval Idle</label>
                                                <select name="idle_minutes" class="form-select">
                                                    <option value="0" {{ ($config && (int)($config->idle_minutes ?? 0) === 0) ? 'selected' : '' }}>Selalu (Setiap pesan masuk)</option>
                                                    <option value="5" {{ ($config && (int)($config->idle_minutes ?? 0) === 5) ? 'selected' : '' }}>Setelah 5 mnt diam</option>
                                                    <option value="15" {{ ($config && (int)($config->idle_minutes ?? 0) === 15) ? 'selected' : '' }}>Setelah 15 mnt diam</option>
                                                    <option value="30" {{ ($config && (int)($config->idle_minutes ?? 0) === 30) ? 'selected' : '' }}>Setelah 30 mnt diam</option>
                                                    <option value="60" {{ ($config && (int)($config->idle_minutes ?? 0) === 60) ? 'selected' : '' }}>Setelah 1 Jam diam</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label fw-bold small text-uppercase text-muted">Tipe Pesan</label>
                                                <select class="form-select" id="reply_type" name="reply_type">
                                                    <option value="text" {{ ($config && $config->reply_type === 'text') ? 'selected' : '' }}>Teks Biasa</option>
                                                    <option value="image" {{ ($config && $config->reply_type === 'image') ? 'selected' : '' }}>Gambar</option>
                                                    <option value="button" {{ ($config && $config->reply_type === 'button') ? 'selected' : '' }}>Menu Tombol</option>
                                                    <option value="list" {{ ($config && $config->reply_type === 'list') ? 'selected' : '' }}>Menu List</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div id="field-text" class="reply-field mb-3 animate__animated animate__fadeIn">
                                            <label class="form-label fw-bold">Isi Pesan</label>
                                            <textarea class="form-control bg-light border-0" id="message_text" name="message" rows="4" placeholder="Halo! Terima kasih telah menghubungi kami...">{{ $config && $config->reply_type === 'text' ? ($config->reply_payload['message'] ?? '') : '' }}</textarea>
                                        </div>

                                        <!-- Media Fields (Hidden by default) -->
                                        <div id="field-media" class="reply-field d-none animate__animated animate__fadeIn">
                                            <div class="mb-3">
                                                <label class="form-label">Media URL</label>
                                                <input type="url" class="form-control" id="media_url" placeholder="https://...">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Caption</label>
                                                <textarea class="form-control" id="media_caption" rows="2"></textarea>
                                            </div>
                                        </div>

                                        <!-- Interactive Fields (Button/List) placeholders - Logic handled by JS -->
                                        <div id="field-button" class="reply-field d-none animate__animated animate__fadeIn">
                                            <div class="alert alert-info small"><i class="ti ti-info-circle me-1"></i> Konfigurasi tombol dapat diatur di bawah.</div>
                                            <div class="mb-2"><label class="form-label">Body Text</label><textarea class="form-control" id="btn_body" rows="2"></textarea></div>
                                            <div class="mb-2"><label class="form-label">Tombol (Max 3)</label><div id="btn_buttons_list"></div><button type="button" class="btn btn-sm btn-light border mt-2" id="btnAddBtn">+ Tambah Tombol</button></div>
                                        </div>

                                        <div id="field-list" class="reply-field d-none animate__animated animate__fadeIn">
                                            <div class="alert alert-info small"><i class="ti ti-info-circle me-1"></i> Konfigurasi list menu.</div>
                                            <div class="mb-2"><label class="form-label">Body Text</label><textarea class="form-control" id="list_body" rows="2"></textarea></div>
                                            <div class="mb-2"><label class="form-label">Tombol Buka Menu</label><input type="text" class="form-control" id="list_button" value="Menu"></div>
                                            <div id="list_sections_list"></div>
                                            <button type="button" class="btn btn-sm btn-light border mt-2" id="btnAddListSection">+ Tambah Section</button>
                                        </div>

                                        <div class="d-grid mt-4">
                                            <button type="submit" class="btn btn-primary btn-lg shadow-sm"><i class="ti ti-device-floppy me-2"></i> Simpan Perubahan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab 2: Balasan Custom (Kata Kunci) --}}
                <div class="tab-pane fade show active" id="tab-custom" role="tabpanel">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
                        <div>
                            <h5 class="mb-1 fw-bold text-dark">Daftar Rule Otomatis</h5>
                            <p class="text-muted small mb-0">Atur balasan spesifik berdasarkan kata kunci yang diterima.</p>
                        </div>
                        <a href="{{ route('client.balasan-otomatis.custom.create', $currentWabaPoolId ? ['waba_pool_id' => $currentWabaPoolId] : []) }}" class="btn btn-primary shadow-sm rounded-pill px-4">
                            <i class="ti ti-plus me-2"></i>Buat Rule Baru
                        </a>
                    </div>

                    @if($customRules->isEmpty())
                        <div class="text-center py-5">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="ti ti-message-off fs-1 text-muted opacity-50"></i>
                            </div>
                            <h6 class="fw-bold text-muted">Belum ada rule</h6>
                            <p class="small text-muted mb-3">Mulai dengan membuat rule pertama Anda.</p>
                            <a href="{{ route('client.balasan-otomatis.custom.create') }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">Buat Sekarang</a>
                        </div>
                    @else
                        <div class="table-responsive rounded-3 border-0 shadow-sm">
                            <table class="table table-hover mb-0 align-middle" style="min-width: 800px;">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="px-4 py-3 text-secondary border-bottom-0" width="50">#</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0" width="200">Kata Kunci</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0">Konten Balasan</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0" width="150">Target WABA</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0" width="100">Status</th>
                                        <th class="px-4 py-3 text-secondary border-bottom-0 text-end" width="120">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($customRules as $rule)
                                        <tr>
                                            <td class="px-4 text-muted fw-bold">{{ $rule->sort_order }}</td>
                                            <td class="px-3">
                                                <div class="d-flex flex-column">
                                                    <span class="fw-bold text-dark">{{ $rule->keyword }}</span>
                                                    <span class="small text-muted" style="font-size: 0.75rem;">
                                                        @if($rule->keyword_type === 'exact') <i class="ti ti-equal"></i> Sama Persis
                                                        @elseif($rule->keyword_type === 'starts_with') <i class="ti ti-arrow-bar-right"></i> Berawalan
                                                        @else <i class="ti ti-filter"></i> Mengandung
                                                        @endif
                                                    </span>
                                                </div>
                                            </td>
                                            <td class="px-3">
                                                <div class="d-flex align-items-center">
                                                    @if($rule->reply_type === 'text')
                                                        <div class="bg-light text-primary rounded p-2 me-2"><i class="ti ti-typography"></i></div>
                                                        <span class="text-truncate text-muted small" style="max-width: 250px;">{{ Str::limit($rule->reply_payload['message'] ?? '-', 50) }}</span>
                                                    @elseif(in_array($rule->reply_type, ['image','video','audio','document','sticker']))
                                                        <div class="bg-info bg-opacity-10 text-info rounded p-2 me-2"><i class="ti ti-photo"></i></div>
                                                        <span class="text-dark fw-bold small text-capitalize">{{ $rule->reply_type }}</span>
                                                    @else
                                                        <div class="bg-warning bg-opacity-10 text-warning rounded p-2 me-2"><i class="ti ti-click"></i></div>
                                                        <span class="text-dark fw-bold small text-capitalize">{{ $rule->reply_type }}</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="px-3">
                                                @if($rule->wabaPool)
                                                    <span class="badge bg-light text-dark border"><i class="ti ti-brand-whatsapp me-1"></i> {{ $rule->wabaPool->account_name ?? 'WABA' }}</span>
                                                @else
                                                    <span class="badge bg-primary bg-opacity-10 text-primary">Semua Akun</span>
                                                @endif
                                            </td>
                                            <td class="px-3">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" role="switch" checked disabled @if(!$rule->is_active) style="background-color: #e9ecef; border-color: #dee2e6;" @endif>
                                                </div>
                                            </td>
                                            <td class="px-4 text-end">
                                                <div class="btn-group">
                                                    <a href="{{ route('client.balasan-otomatis.custom.edit', $rule) }}" class="btn btn-sm btn-white text-primary border shadow-sm" data-bs-toggle="tooltip" title="Edit"><i class="ti ti-edit"></i></a>
                                                    <form action="{{ route('client.balasan-otomatis.custom.destroy', $rule) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus rule ini?');">
                                                        @csrf @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-white text-danger border shadow-sm" data-bs-toggle="tooltip" title="Hapus"><i class="ti ti-trash"></i></button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

                {{-- Tab 3: Quick Reply --}}
                <div class="tab-pane fade" id="tab-qr" role="tabpanel">
                    <!-- VIEW: LIST -->
                    <div id="qr-view-list">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
                            <div>
                                <h5 class="mb-1 fw-bold text-dark">Quick Replies</h5>
                                <p class="text-muted small mb-0">Template pesan cepat untuk agen CS.</p>
                            </div>
                            <button class="btn btn-primary shadow-sm rounded-pill px-4" id="qr-btn-create">
                                <i class="ti ti-plus me-2"></i>Tambah Template
                            </button>
                        </div>

                        <div id="qr-loading" class="text-center p-5 text-muted">
                            <div class="spinner-border text-primary mb-3" role="status"></div>
                            <p class="mb-0">Memuat data...</p>
                        </div>

                        <div id="qr-empty" class="text-center py-5 d-none">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="ti ti-bolt-off fs-1 text-muted opacity-50"></i>
                            </div>
                            <h6 class="fw-bold text-muted">Belum ada Quick Reply</h6>
                            <p class="small text-muted mb-0">Buat template untuk mempercepat respon CS.</p>
                        </div>

                        <div id="qr-table-container" class="table-responsive rounded-3 border-0 shadow-sm d-none">
                            <table class="table table-hover mb-0 align-middle">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="px-4 py-3 text-secondary border-bottom-0">Shortcut</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0">Kategori</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0">Konten</th>
                                        <th class="px-3 py-3 text-secondary border-bottom-0 text-center" width="100">Tipe</th>
                                        <th class="px-4 py-3 text-secondary border-bottom-0 text-end" width="120">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="qr-table-body"></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- VIEW: FORM -->
                    <div id="qr-view-form" class="d-none animate__animated animate__fadeIn">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="card shadow-sm border-0">
                                    <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                                         <button class="btn btn-sm btn-white border shadow-sm rounded-pill px-3" id="qr-form-back"><i class="ti ti-arrow-left me-1"></i> Kembali</button>
                                         <h6 class="mb-0 fw-bold text-primary" id="qr-form-title">Tambah Quick Reply</h6>
                                    </div>
                                    <div class="card-body p-4 pt-2">
                                        <form id="qr-form">
                                            <input type="hidden" id="qr-id">

                                            <div class="row g-3 mb-4">
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold small text-muted text-uppercase">Shortcut</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text bg-light border-end-0">/</span>
                                                        <input type="text" class="form-control" id="qr-input-shortcut" placeholder="salam">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold small text-muted text-uppercase">Kategori</label>
                                                    <input type="text" class="form-control" id="qr-input-category" list="qr-category-list" placeholder="Umum">
                                                    <datalist id="qr-category-list"></datalist>
                                                </div>
                                            </div>

                                            <div class="mb-4">
                                                <label class="form-label fw-bold small text-muted text-uppercase">Tipe Pesan</label>
                                                <div class="d-flex gap-2 overflow-auto pb-2">
                                                    <select class="form-select" id="qr-input-type">
                                                        <option value="text">Teks</option>
                                                        <option value="image">Gambar</option>
                                                        <option value="video">Video</option>
                                                        <option value="document">Dokumen</option>
                                                        <option value="button">Interactive Button</option>
                                                        <option value="list">Interactive List</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="bg-light p-4 rounded-3 border border-dashed mb-4">
                                                {{-- Panel: Teks --}}
                                                <div id="qr-field-text" class="qr-reply-field mb-0">
                                                    <label class="form-label fw-bold">Konten Pesan</label>
                                                    <textarea class="form-control" id="qr-input-content" rows="4" placeholder="Ketik pesan di sini..."></textarea>
                                                    <div class="mt-2 text-end">
                                                        <span class="badge bg-white text-muted border me-1" role="button" onclick="$('#qr-input-content').val($('#qr-input-content').val()+' {name}')"> {name} </span>
                                                        <span class="badge bg-white text-muted border" role="button" onclick="$('#qr-input-content').val($('#qr-input-content').val()+' {agent_name}')"> {agent_name} </span>
                                                    </div>
                                                </div>

                                                {{-- Panel: Media --}}
                                                <div id="qr-field-media" class="qr-reply-field d-none mb-0">
                                                    <label class="form-label fw-bold">Upload Media</label>
                                                    <div class="input-group mb-2">
                                                        <input type="file" class="form-control" id="qr-media-file-upload">
                                                    </div>
                                                    <input type="url" class="form-control mb-2" id="qr-media-url" placeholder="Atau paste URL HTTPS...">
                                                    <textarea class="form-control" id="qr-media-caption" rows="2" placeholder="Caption..."></textarea>
                                                </div>

                                                {{-- Panel: Interactive --}}
                                                <div id="qr-field-button" class="qr-reply-field d-none mb-0">
                                                    <div class="alert alert-warning small py-2"><i class="ti ti-alert-circle me-1"></i> Interactive Button</div>
                                                    <textarea class="form-control mb-2" id="qr-btn-body" rows="2" placeholder="Body text"></textarea>
                                                    <div id="qr-btn-list-container"></div>
                                                    <button type="button" class="btn btn-sm btn-dark mt-2" id="qr-btn-add">+ Tombol</button>
                                                </div>

                                                <div id="qr-field-list" class="qr-reply-field d-none mb-0">
                                                    <div class="alert alert-warning small py-2"><i class="ti ti-list me-1"></i> Interactive List</div>
                                                    <textarea class="form-control mb-2" id="qr-list-body" rows="2" placeholder="Body text"></textarea>
                                                    <input type="text" class="form-control mb-2" id="qr-list-btn-label" placeholder="Label Tombol">
                                                    <div id="qr-list-container"></div>
                                                    <button type="button" class="btn btn-sm btn-dark mt-2" id="qr-list-add-section">+ Section</button>
                                                </div>
                                            </div>

                                            <div class="d-grid">
                                                <button type="submit" class="btn btn-primary btn-lg shadow-sm" id="qr-btn-save"><i class="ti ti-device-floppy me-2"></i>Simpan Quick Reply</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab 4: Greeting Message --}}
                <div class="tab-pane fade" id="tab-greeting" role="tabpanel">
                    @php
                        $pkg = $clientPackageType ?? \App\Enums\PackageType::SHARED;
                        $isPkgShared = $pkg === \App\Enums\PackageType::SHARED;
                        $isPkgDedicated = $pkg === \App\Enums\PackageType::DEDICATED;
                        $isPkgSelfService = $pkg === \App\Enums\PackageType::SELF_SERVICE;
                        $greetingApplyShared = $greetingSetting->apply_for_shared ?? true;
                        $greetingApplyDedicated = $greetingSetting->apply_for_dedicated ?? true;
                        $greetingApplySelfService = $greetingSetting->apply_for_self_service ?? true;
                        $pkgLabel = $isPkgShared ? 'Shared' : ($isPkgDedicated ? 'Dedicated' : 'Self Service');
                        $pkgBadgeClass = $isPkgShared ? 'bg-info' : ($isPkgDedicated ? 'bg-success' : 'bg-purple');
                    @endphp
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="card shadow-sm border-0">
                                <div class="card-body p-4">
                                    <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                                        <h5 class="card-title fw-bold text-primary mb-0"><i class="ti ti-hand-wave me-2"></i>Greeting Message</h5>
                                        <span class="badge {{ $pkgBadgeClass }} greeting-package-badge">Paket {{ $pkgLabel }}</span>
                                    </div>
                                    <p class="text-muted small mb-4">Pesan sapaan otomatis dikirim sebagai <strong>service message</strong> (bukan campaign), maksimal 1x per 24 jam per nomor.</p>

                                    <form id="form-greeting">
                                        @csrf
                                        <div class="setting-block">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <label class="fw-bold mb-0">Status Aktif</label>
                                                <div class="form-check form-switch mb-0">
                                                    <input class="form-check-input" type="checkbox" id="greeting_is_active" name="is_active" {{ ($greetingSetting->is_active ?? false) ? 'checked' : '' }}>
                                                </div>
                                            </div>
                                            <div class="small text-muted">Aktifkan untuk mengirim sapaan otomatis ke pelanggan yang baru menghubungi.</div>
                                        </div>

                                        <div class="mb-4">
                                            <label class="form-label fw-bold greeting-section-title">Template Pesan</label>
                                            <textarea class="form-control bg-light border-0 rounded-3" id="greeting_message_template" name="message_template" rows="5" maxlength="4096" placeholder="{{ \App\Models\GreetingSetting::DEFAULT_TEMPLATE }}">{{ old('message_template', $greetingSetting->message_template ?? '') }}</textarea>
                                            <div class="form-text">Pesan utility, non-marketing. Aman untuk kebijakan WABA.</div>
                                        </div>

                                        <div class="setting-block">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <div>
                                                    <span class="greeting-section-title d-block">Tipe Pesan</span>
                                                    <span class="small text-muted">Greeting bisa berupa teks atau interactive button (mendukung header media).</span>
                                                </div>
                                                <select class="form-select form-select-sm" id="greeting_reply_type" style="width:auto; min-width: 180px;">
                                                    <option value="text">Teks</option>
                                                    <option value="interactive">Button (Interactive)</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div id="greeting-field-button" class="setting-block d-none">
                                            <div class="greeting-section-title">Konfigurasi Button</div>
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold small text-uppercase text-muted">Header</label>
                                                    <select class="form-select" id="greeting_btn_header_type">
                                                        <option value="none">Tanpa Header</option>
                                                        <option value="text">Header Text</option>
                                                        <option value="image">Header Image</option>
                                                        <option value="video">Header Video</option>
                                                        <option value="document">Header Document</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold small text-uppercase text-muted">Footer (Opsional)</label>
                                                    <input type="text" class="form-control" id="greeting_btn_footer" maxlength="60" placeholder="Contoh: CS kami online 24 jam">
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <input type="text" class="form-control d-none" id="greeting_btn_header_text" maxlength="60" placeholder="Teks header...">
                                                <div id="greeting_btn_header_media_wrapper" class="d-none">
                                                    <div class="input-group mt-2">
                                                        <input type="url" class="form-control" id="greeting_btn_header_media_url" placeholder="https://...">
                                                        <label class="btn btn-outline-secondary mb-0">
                                                            Upload <input type="file" id="greeting_btn_header_file_upload" hidden>
                                                        </label>
                                                        <button type="button" class="btn btn-outline-danger" id="greeting_btn_reset_header_media">Reset</button>
                                                    </div>
                                                    <div class="form-text">Header media harus URL HTTPS (image/video/document).</div>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <label class="form-label fw-semibold small text-uppercase text-muted mb-2">Tombol (Max 3)</label>
                                                <div id="greeting_btn_buttons_list"></div>
                                                <button type="button" class="btn btn-sm btn-light border mt-2" id="greeting_btn_add">+ Tambah Tombol</button>
                                                <div class="form-text">Judul tombol maksimal 20 karakter.</div>
                                            </div>
                                        </div>

                                        <div class="setting-block setting-block-highlight" style="display: none">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <div>
                                                    <span class="greeting-section-title d-block">Greeting untuk paket Anda</span>
                                                    <span class="small text-muted">Berlaku untuk tipe paket {{ $pkgLabel }} Anda.</span>
                                                </div>
                                                <div class="form-check form-switch mb-0">
                                                    @if($isPkgShared)
                                                        <input class="form-check-input" type="checkbox" id="greeting_apply_for_shared" name="apply_for_shared" value="1" {{ $greetingApplyShared ? 'checked' : '' }}>
                                                        <label class="form-check-label fw-semibold" for="greeting_apply_for_shared">Aktif</label>
                                                    @elseif($isPkgDedicated)
                                                        <input class="form-check-input" type="checkbox" id="greeting_apply_for_dedicated" name="apply_for_dedicated" value="1" {{ $greetingApplyDedicated ? 'checked' : '' }}>
                                                        <label class="form-check-label fw-semibold" for="greeting_apply_for_dedicated">Aktif</label>
                                                    @else
                                                        <input class="form-check-input" type="checkbox" id="greeting_apply_for_self_service" name="apply_for_self_service" value="1" {{ $greetingApplySelfService ? 'checked' : '' }}>
                                                        <label class="form-check-label fw-semibold" for="greeting_apply_for_self_service">Aktif</label>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        @if($isPkgShared)
                                        <div class="setting-block" style="display: none">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="pe-3">
                                                    <label class="fw-semibold mb-0" for="greeting_only_registered_contact">Hanya kontak terdaftar</label>
                                                    <div class="small text-muted mt-1">Hanya kirim ke nomor yang sudah ada di daftar kontak Anda.</div>
                                                </div>
                                                <div class="form-check form-switch mb-0 flex-shrink-0">
                                                    <input class="form-check-input" type="checkbox" id="greeting_only_registered_contact" name="only_registered_contact" value="1" {{ ($greetingSetting->only_registered_contact ?? true) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="greeting_only_registered_contact"></label>
                                                </div>
                                            </div>
                                        </div>
                                        @else
                                            <input type="hidden" name="only_registered_contact" id="greeting_only_registered_contact" value="0">
                                        @endif

                                        <div class="d-grid mt-4">
                                            <button type="submit" class="btn btn-primary btn-lg shadow-sm rounded-3"><i class="ti ti-device-floppy me-2"></i>Simpan Pengaturan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card shadow-sm border-0 info-card">
                                <div class="card-body p-4">
                                    <h6 class="fw-bold text-primary mb-3"><i class="ti ti-eye me-1"></i>Preview Pesan</h6>
                                    <div id="greeting-preview-box" class="bg-white border rounded-3 p-3 small" style="white-space: pre-wrap; min-height: 80px; line-height: 1.7;">{{ $greetingSetting->message_template ?: \App\Models\GreetingSetting::DEFAULT_TEMPLATE }}</div>
                                </div>
                            </div>
                            <div class="card shadow-sm border-0 mt-3 info-card success">
                                <div class="card-body p-4">
                                    <h6 class="fw-bold mb-3"><i class="ti ti-send me-1 text-success"></i>Test Kirim</h6>
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold small text-uppercase text-muted">Nomor Tujuan</label>
                                        <input type="text" id="greeting_test_phone" class="form-control" placeholder="6281234567890" maxlength="20">
                                    </div>
                                    @if($greetingWabaPools->isNotEmpty())
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold small text-uppercase text-muted">Device</label>
                                            <select id="greeting_test_waba_pool_id" class="form-select">
                                                <option value="">— Pertama tersedia —</option>
                                                @foreach($greetingWabaPools as $w)
                                                    <option value="{{ $w->id }}">{{ $w->phone_number }} ({{ $w->type }})</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    <div class="d-grid">
                                        <button type="button" id="btn-greeting-test-send" class="btn btn-outline-success"><i class="ti ti-send me-1"></i>Kirim Test</button>
                                    </div>
                                    <div id="greeting-test-result" class="mt-2 small"></div>
                                </div>
                            </div>
                            <div class="card shadow-sm border-0 mt-3 info-card warning">
                                <div class="card-body p-4">
                                    <h6 class="fw-bold mb-3"><i class="ti ti-info-circle me-1 text-warning"></i>Informasi</h6>
                                    <ul class="small text-muted ps-3 mb-0" style="line-height: 1.8;">
                                        <li>Dikirim sebagai <strong>service message</strong> (utility)</li>
                                        <li>Maks 1x per 24 jam per nomor per client</li>
                                        <li>Tidak mempengaruhi kuota marketing</li>
                                        <li>Otomatis skip jika sudah ada percakapan aktif</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab 5: AI Reply (Enhanced Pipeline) --}}
                <div class="tab-pane fade" id="tab-ai" role="tabpanel">

                    {{-- AI Configuration Quick Links --}}
                    <div class="row row-cards mb-4 mt-2">
                        <div class="col-md-6 col-lg-3">
                            <a href="{{ route('client.ai-intents.index') }}" class="card card-link card-link-pop text-decoration-none shadow-sm border-0 h-100">
                                <div class="card-body p-3 text-center">
                                    <span class="bg-primary-lt text-primary avatar avatar-md mb-2"><i class="ti ti-target fs-2"></i></span>
                                    <h5 class="fw-bold mb-1 text-dark">Data Intent</h5>
                                    <div class="text-muted" style="font-size: 0.70rem;">Latih pemahaman AI</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <a href="{{ route('client.ai-knowledge.index') }}" class="card card-link card-link-pop text-decoration-none shadow-sm border-0 h-100">
                                <div class="card-body p-3 text-center">
                                    <span class="bg-success-lt text-success avatar avatar-md mb-2"><i class="ti ti-books fs-2"></i></span>
                                    <h5 class="fw-bold mb-1 text-dark">Knowledge Base</h5>
                                    <div class="text-muted" style="font-size: 0.70rem;">Data Konteks RAG</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <a href="{{ route('client.ai-automations.index') }}" class="card card-link card-link-pop text-decoration-none shadow-sm border-0 h-100">
                                <div class="card-body p-3 text-center">
                                    <span class="bg-warning-lt text-warning avatar avatar-md mb-2"><i class="ti ti-api fs-2"></i></span>
                                    <h5 class="fw-bold mb-1 text-dark">API Webhook</h5>
                                    <div class="text-muted" style="font-size: 0.70rem;">Integrasi App luar</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <a href="{{ route('client.ai-analytics.index') }}" class="card card-link card-link-pop text-decoration-none shadow-sm border-0 h-100">
                                <div class="card-body p-3 text-center">
                                    <span class="bg-info-lt text-info avatar avatar-md mb-2"><i class="ti ti-chart-bar fs-2"></i></span>
                                    <h5 class="fw-bold mb-1 text-dark">AI Analytics</h5>
                                    <div class="text-muted" style="font-size: 0.70rem;">Pelatihan & Monitoring</div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="card shadow-sm border-0">
                                <div class="card-body p-4">
                                    <h5 class="card-title fw-bold text-primary mb-2"><i class="ti ti-robot me-2"></i>AI Setup & Persona</h5>
                                    <p class="text-muted small mb-4">Pengaturan utama AI fallback.</p>

                                    <form id="form-ai-setting">
                                        @csrf

                                        {{-- Status --}}
                                        <div class="setting-block">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <label class="fw-bold mb-0">Status Aktif</label>
                                                <div class="form-check form-switch mb-0">
                                                    <input class="form-check-input" type="checkbox" id="ai_is_active" {{ ($aiSetting->is_active ?? false) ? 'checked' : '' }} style="width: 3em; height: 1.5em;">
                                                </div>
                                            </div>
                                            <div class="small text-muted">Aktifkan AI untuk membalas pesan yang tidak cocok dengan rule apapun.</div>
                                        </div>

                                        {{-- Company Context (default visible) --}}
                                        <div class="setting-block">
                                            <div class="setting-label"><i class="ti ti-building me-1"></i>Konteks Bisnis</div>
                                            <div class="row g-3">
                                                <div class="col-md-5">
                                                    <label class="form-label fw-semibold small">Nama Perusahaan</label>
                                                    <input type="text" class="form-control" id="ai_company_name" value="{{ $aiSetting->company_name ?? '' }}" maxlength="100" placeholder="Nama brand / perusahaan Anda">
                                                </div>
                                                <div class="col-md-7">
                                                    <label class="form-label fw-semibold small">Konteks Bisnis</label>
                                                    <textarea class="form-control" id="ai_company_context" rows="2" maxlength="2000" placeholder="Contoh: Kami adalah platform WhatsApp API SaaS untuk bisnis...">{{ $aiSetting->company_context ?? '' }}</textarea>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Pengaturan lanjutan (opsional) --}}
                                        <div class="setting-block border border-primary border-opacity-25 rounded-3 bg-white shadow-sm mt-4">
                                            <button type="button" class="btn btn-link text-decoration-none p-3 w-100 text-start d-flex align-items-center justify-content-between" data-bs-toggle="collapse" data-bs-target="#ai-advanced-collapse" aria-expanded="false" aria-controls="ai-advanced-collapse">
                                                <div class="d-flex align-items-center gap-2">
                                                    <span class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;"><i class="ti ti-settings-2"></i></span>
                                                    <div class="d-flex flex-column">
                                                        <span class="fw-bold text-dark mb-0 fs-6">Pengaturan Lanjutan (Advanced)</span>
                                                        <span class="small text-muted" style="line-height:1;">Persona, Delay, LLM config, System Prompt</span>
                                                    </div>
                                                </div>
                                                <i class="ti ti-chevron-down fs-4 text-muted transition-transform" id="ai-advanced-chevron"></i>
                                            </button>
                                            <div class="collapse bg-light border-top" id="ai-advanced-collapse">
                                                <div class="p-4">

                                        {{-- Persona & Style --}}
                                        <div class="setting-block mb-0">
                                            <div class="setting-label"><i class="ti ti-mood-smile me-1"></i>Persona & Gaya</div>
                                            <div class="row g-3">
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Persona</label>
                                                    <select class="form-select" id="ai_persona_type">
                                                        <option value="friendly" {{ ($aiSetting->persona_type ?? 'semi_formal') === 'friendly' ? 'selected' : '' }}>Santai & Akrab</option>
                                                        <option value="semi_formal" {{ ($aiSetting->persona_type ?? 'semi_formal') === 'semi_formal' ? 'selected' : '' }}>Semi Formal</option>
                                                        <option value="corporate" {{ ($aiSetting->persona_type ?? 'semi_formal') === 'corporate' ? 'selected' : '' }}>Corporate / Formal</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Level Emoji (0–3)</label>
                                                    <input type="range" class="form-range" id="ai_emoji_level" min="0" max="3" step="1" value="{{ $aiSetting->emoji_level ?? 1 }}">
                                                    <div class="d-flex justify-content-between small text-muted px-1">
                                                        <span>Tanpa</span><span>Minimal</span><span>Normal</span><span>Banyak</span>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Max Panjang Respon</label>
                                                    <input type="number" class="form-control" id="ai_max_response_length" value="{{ $aiSetting->max_response_length ?? 500 }}" min="100" max="4096">
                                                    <div class="form-text">Maks karakter per pesan</div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Model Config --}}
                                        <div class="setting-block">
                                            <div class="setting-label"><i class="ti ti-cpu me-1"></i>Model AI</div>
                                            <div class="row g-3">
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Model</label>
                                                    <select class="form-select" id="ai_model">
                                                        @php $models = ['openai/gpt-4o-mini'=>'GPT-4o Mini (Fast)','openai/gpt-4o'=>'GPT-4o','anthropic/claude-3-haiku'=>'Claude 3 Haiku','anthropic/claude-3.5-sonnet'=>'Claude 3.5 Sonnet','google/gemini-flash-1.5'=>'Gemini Flash','meta-llama/llama-3.1-8b-instruct'=>'Llama 3.1 8B','meta-llama/llama-3.1-70b-instruct'=>'Llama 3.1 70B']; @endphp
                                                        @foreach($models as $val => $label)
                                                            <option value="{{ $val }}" {{ ($aiSetting->model ?? 'openai/gpt-4o-mini') === $val ? 'selected' : '' }}>{{ $label }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Max Tokens</label>
                                                    <input type="number" class="form-control" id="ai_max_tokens" value="{{ $aiSetting->max_tokens ?? 500 }}" min="100" max="4000">
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Temperature</label>
                                                    <input type="number" class="form-control" id="ai_temperature" value="{{ $aiSetting->temperature ?? 0.7 }}" min="0" max="2" step="0.1">
                                                    <div class="form-text">0 = deterministik, 1 = kreatif</div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Behavior Settings --}}
                                        <div class="setting-block">
                                            <div class="setting-label"><i class="ti ti-settings me-1"></i>Behavior</div>
                                            <div class="row g-3">
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Memory Percakapan</label>
                                                    <input type="number" class="form-control" id="ai_conversation_memory_count" value="{{ $aiSetting->conversation_memory_count ?? 10 }}" min="1" max="20">
                                                    <div class="form-text">Jumlah pesan terakhir yang diingat</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check form-switch mt-4">
                                                        <input class="form-check-input" type="checkbox" id="ai_response_delay_enabled" {{ ($aiSetting->response_delay_enabled ?? true) ? 'checked' : '' }}>
                                                        <label class="form-check-label small fw-semibold" for="ai_response_delay_enabled">Delay Natural</label>
                                                    </div>
                                                    <div class="form-text">Tunda respon 1-3 detik agar terasa manusia</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check form-switch mt-4">
                                                        <input class="form-check-input" type="checkbox" id="ai_anti_repetition_enabled" {{ ($aiSetting->anti_repetition_enabled ?? true) ? 'checked' : '' }}>
                                                        <label class="form-check-label small fw-semibold" for="ai_anti_repetition_enabled">Anti-Repetisi</label>
                                                    </div>
                                                    <div class="form-text">Hindari jawaban yang sama berulang</div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Conversational Closer --}}
                                        <div class="setting-block">
                                            <div class="setting-label"><i class="ti ti-brain me-1"></i>AI Conversational Closer</div>
                                            <div class="row g-3">
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Maks Bubble / Respons</label>
                                                    <select class="form-select" id="ai_max_bubbles">
                                                        <option value="1" {{ ($aiSetting->max_bubbles ?? 3) == 1 ? 'selected' : '' }}>1 bubble</option>
                                                        <option value="2" {{ ($aiSetting->max_bubbles ?? 3) == 2 ? 'selected' : '' }}>2 bubble</option>
                                                        <option value="3" {{ ($aiSetting->max_bubbles ?? 3) == 3 ? 'selected' : '' }}>3 bubble</option>
                                                    </select>
                                                    <div class="form-text">AI bisa kirim 1-3 pesan terpisah agar terasa natural</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check form-switch mt-4">
                                                        <input class="form-check-input" type="checkbox" id="ai_goal_tracking_enabled" {{ ($aiSetting->goal_tracking_enabled ?? false) ? 'checked' : '' }}>
                                                        <label class="form-check-label small fw-semibold" for="ai_goal_tracking_enabled">Goal Tracking</label>
                                                    </div>
                                                    <div class="form-text">Lacak tahapan lead (new → exploring → interested → registered)</div>
                                                </div>
                                            </div>

                                            <hr class="my-3">
                                            <div class="setting-label"><i class="ti ti-clock-play me-1"></i>Smart Follow-Up (Thinking Mode)</div>
                                            <div class="row g-3">
                                                <div class="col-md-3">
                                                    <div class="form-check form-switch mt-1">
                                                        <input class="form-check-input" type="checkbox" id="ai_followup_enabled" {{ ($aiSetting->followup_enabled ?? false) ? 'checked' : '' }}>
                                                        <label class="form-check-label small fw-semibold" for="ai_followup_enabled">Aktifkan</label>
                                                    </div>
                                                    <div class="form-text">Follow-up otomatis jika customer sunyi</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Delay (menit)</label>
                                                    <input type="number" class="form-control" id="ai_followup_delay_minutes" value="{{ $aiSetting->followup_delay_minutes ?? 5 }}" min="1" max="60">
                                                    <div class="form-text">Tunggu X menit sebelum follow-up</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label fw-semibold small">Maks Follow-up</label>
                                                    <input type="number" class="form-control" id="ai_followup_max_per_cycle" value="{{ $aiSetting->followup_max_per_cycle ?? 1 }}" min="1" max="5">
                                                    <div class="form-text">Per siklus percakapan</div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Escalation --}}
                                        <div class="setting-block">
                                            <div class="setting-label"><i class="ti ti-alert-triangle me-1"></i>Escalation (Serah ke Admin)</div>
                                            <div class="row g-3">
                                                <div class="col-md-4">
                                                    <label class="form-label fw-semibold small">Sensitivitas</label>
                                                    <select class="form-select" id="ai_escalation_sensitivity">
                                                        <option value="low" {{ ($aiSetting->escalation_sensitivity ?? 'medium') === 'low' ? 'selected' : '' }}>Rendah (sabar)</option>
                                                        <option value="medium" {{ ($aiSetting->escalation_sensitivity ?? 'medium') === 'medium' ? 'selected' : '' }}>Sedang</option>
                                                        <option value="high" {{ ($aiSetting->escalation_sensitivity ?? 'medium') === 'high' ? 'selected' : '' }}>Tinggi (cepat eskalasi)</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-8">
                                                    <label class="form-label fw-semibold small">Kata Kunci Eskalasi</label>
                                                    <input type="text" class="form-control" id="ai_escalation_keywords" value="{{ implode(', ', $aiSetting->escalation_keywords ?? \App\Models\AiSetting::DEFAULT_ESCALATION_KEYWORDS) }}" placeholder="refund, lapor, tuntut, ...">
                                                    <div class="form-text">Pisahkan dengan koma</div>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <label class="form-label fw-semibold small">Pesan Eskalasi</label>
                                                <textarea class="form-control bg-light border-0" id="ai_escalation_message" rows="2" maxlength="4096" placeholder="{{ \App\Models\AiSetting::DEFAULT_ESCALATION_MESSAGE }}">{{ $aiSetting->escalation_message ?? '' }}</textarea>
                                                <div class="form-text">Pesan yang dikirim saat AI serahkan ke admin</div>
                                            </div>
                                        </div>

                                        {{-- Fallback --}}
                                        <div class="mb-4">
                                            <label class="form-label fw-bold">Fallback Message (saat AI error)</label>
                                            <textarea class="form-control bg-light border-0" id="ai_fallback_message" rows="2" maxlength="4096">{{ $aiSetting->fallback_message ?? \App\Models\AiSetting::DEFAULT_FALLBACK }}</textarea>
                                        </div>

                                        {{-- Custom System Prompt (Advanced) --}}
                                        <div class="mb-0">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <label class="form-label fw-bold mb-0">System Prompt (Opsional / Lanjutan)</label>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#ai-prompt-collapse"><i class="ti ti-code me-1"></i>Tampilkan</button>
                                            </div>
                                            <div class="collapse" id="ai-prompt-collapse">
                                                <textarea class="form-control bg-light border-0" id="ai_system_prompt" rows="8" maxlength="8000" style="font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.82rem; line-height: 1.6;" placeholder="Kosongkan untuk menggunakan prompt otomatis berdasarkan pengaturan di atas.">{{ $aiSetting->system_prompt ?? '' }}</textarea>
                                                <div class="form-text">Jika diisi, prompt ini <strong>menggantikan</strong> prompt otomatis. Kosongkan agar sistem generate prompt dari pengaturan persona/escalation di atas.</div>
                                            </div>
                                        </div>

                                            {{-- Button Mapping (inside advanced) --}}
                                            <div class="card shadow-sm border-0 mt-4 bg-white">
                                                <div class="card-body p-4">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h6 class="fw-bold text-primary mb-0"><i class="ti ti-click me-2"></i>Button Mapping</h6>
                                                        <button type="button" class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm" id="btn-add-ai-button"><i class="ti ti-plus me-1"></i>Tambah Mapping</button>
                                                    </div>
                                                    <p class="text-muted small mb-3">Jika user menanyakan topik tertentu, AI akan menyarankan aksi tombol spesifik yang sudah Anda definisikan di sini.</p>
                                                    <div id="ai-buttons-list" class="bg-light rounded p-3 border border-dashed">
                                                        <div class="text-center text-muted small py-3"><i class="ti ti-loader ti-spin me-1"></i>Memuat...</div>
                                                    </div>
                                                </div>
                                            </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-grid mt-4">
                                            <button type="submit" class="btn btn-primary btn-lg shadow-sm"><i class="ti ti-device-floppy me-2"></i>Simpan Pengaturan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            {{-- Pipeline Flow --}}
                            <div class="card shadow-sm border-0 info-card">
                                <div class="card-body p-4">
                                    <h6 class="fw-bold text-primary mb-3"><i class="ti ti-arrow-down-circle me-1"></i>Pipeline AI</h6>
                                    <div class="d-flex flex-column gap-1">
                                        @foreach(['Pesan Masuk','Emotion Detection','Escalation Check','Memory Load (riwayat)','LLM + Persona','Button Mapper','Anti-Repetisi','Delay Engine','Kirim via WA API'] as $i => $step)
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge {{ $i < 2 ? 'bg-info' : ($i < 4 ? 'bg-warning' : ($i < 7 ? 'bg-primary' : 'bg-success')) }} bg-opacity-15 text-dark rounded-pill" style="min-width:22px; font-size:.65rem">{{ $i+1 }}</span>
                                            <span class="small">{{ $step }}</span>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Emotion Detection Info --}}
                            <div class="card shadow-sm border-0 mt-3 info-card warning">
                                <div class="card-body p-4">
                                    <h6 class="fw-bold mb-3"><i class="ti ti-heart me-1 text-warning"></i>Emotion Detection</h6>
                                    <div class="small text-muted" style="line-height: 1.7;">
                                        AI mendeteksi emosi customer secara otomatis:
                                        <div class="mt-2 d-flex flex-wrap gap-1">
                                            <span class="badge bg-secondary bg-opacity-10 text-dark">neutral</span>
                                            <span class="badge bg-info bg-opacity-10 text-dark">confused</span>
                                            <span class="badge bg-danger bg-opacity-10 text-dark">angry</span>
                                            <span class="badge bg-warning bg-opacity-10 text-dark">urgent</span>
                                            <span class="badge bg-secondary bg-opacity-10 text-dark">disappointed</span>
                                            <span class="badge bg-success bg-opacity-10 text-dark">happy</span>
                                        </div>
                                        <p class="mt-2 mb-0">Jika emosi level tinggi → AI otomatis empati lebih. Jika terlalu marah → eskalasi ke admin.</p>
                                    </div>
                                </div>
                            </div>

                            {{-- Priority --}}
                            <div class="card shadow-sm border-0 mt-3 info-card success">
                                <div class="card-body p-4">
                                    <h6 class="fw-bold mb-3"><i class="ti ti-list-numbers me-1 text-success"></i>Urutan Prioritas</h6>
                                    <div class="d-flex flex-column gap-2">
                                        <div class="d-flex align-items-center gap-2"><span class="badge bg-primary bg-opacity-10 text-primary rounded-pill" style="min-width:24px">1</span><span class="small">Greeting Message</span></div>
                                        <div class="d-flex align-items-center gap-2"><span class="badge bg-primary bg-opacity-10 text-primary rounded-pill" style="min-width:24px">2</span><span class="small">Balasan Custom (keyword)</span></div>
                                        <div class="d-flex align-items-center gap-2"><span class="badge bg-primary bg-opacity-10 text-primary rounded-pill" style="min-width:24px">3</span><span class="small">Welcome Message</span></div>
                                        <div class="d-flex align-items-center gap-2"><span class="badge bg-warning bg-opacity-25 text-dark rounded-pill" style="min-width:24px">4</span><span class="small fw-semibold">AI Reply (fallback)</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    const MAX_BTN = 3, MAX_LIST_SECTIONS = 10, MAX_LIST_ROWS = 10;
    let btnList = [{ id: 'btn_1', title: 'Ya' }, { id: 'btn_2', title: 'Tidak' }];
    let listSections = [{ title: 'Layanan', rows: [{ id: 'opt_1', title: 'Info', description: '' }, { id: 'opt_2', title: 'Order', description: '' }] }];
    const config = @json($config ? ['reply_type' => $config->reply_type, 'reply_payload' => $config->reply_payload] : null);
    const MEDIA_TYPES = ['image', 'video', 'audio', 'document', 'sticker'];
    const MEDIA_WITH_CAPTION = ['image', 'video', 'document'];

    if (config && MEDIA_TYPES.indexOf(config.reply_type) !== -1 && config.reply_payload) {
        $('#media_url').val(config.reply_payload.media_url || '');
        if (config.reply_payload.caption) $('#media_caption').val(config.reply_payload.caption);
        if (config.reply_payload.filename) $('#media_filename').val(config.reply_payload.filename);
    }
    if (config && config.reply_type === 'button' && config.reply_payload && config.reply_payload.interactive) {
        const act = config.reply_payload.interactive.action || {};
        const hdr = config.reply_payload.interactive.header || {};
        if (act.buttons && act.buttons.length) btnList = act.buttons.map((b, i) => ({ id: b.reply?.id || ('btn_' + (i + 1)), title: b.reply?.title || '' }));
        if (config.reply_payload.interactive.body) $('#btn_body').val(config.reply_payload.interactive.body.text || '');
        if (config.reply_payload.interactive.footer && config.reply_payload.interactive.footer.text) $('#btn_footer').val(config.reply_payload.interactive.footer.text);
        
        // Load Header
        if (hdr.type) {
            $('#btn_header_type').val(hdr.type);
            if (hdr.type === 'text') $('#btn_header_text').val(hdr.text || '');
            else if (['image', 'video', 'document'].indexOf(hdr.type) !== -1) $('#btn_header_media_url').val(hdr[hdr.type]?.link || '');
        }
    }
    if (config && config.reply_type === 'list' && config.reply_payload && config.reply_payload.interactive) {
        const act = config.reply_payload.interactive.action || {};
        if (act.sections && act.sections.length) listSections = act.sections.map(s => ({ title: s.title || '', rows: (s.rows || []).map(r => ({ id: r.id || '', title: r.title || '', description: r.description || '' })) }));
        if (config.reply_payload.interactive.body) $('#list_body').val(config.reply_payload.interactive.body.text || '');
        if (act.button) $('#list_button').val(act.button);
    }
    function renderBtnList() {
        $('#btn_buttons_list').empty();
        btnList.forEach((b, i) => {
            const $row = $('<div class="input-group input-group-sm mb-2"><input type="text" class="form-control btn-id" placeholder="ID" value="' + (b.id || '') + '"><input type="text" class="form-control btn-title" placeholder="Title" value="' + (b.title || '') + '"><button type="button" class="btn btn-outline-danger btn-remove-btn">×</button></div>');
            $row.find('.btn-id').on('input', function() { btnList[i].id = $(this).val(); });
            $row.find('.btn-title').on('input', function() { btnList[i].title = $(this).val(); });
            $row.find('.btn-remove-btn').on('click', function() { btnList.splice(i, 1); renderBtnList(); });
            $('#btn_buttons_list').append($row);
        });
        $('#btnAddBtn').prop('disabled', btnList.length >= MAX_BTN);
    }
    function renderListSections() {
        const $wrap = $('#list_sections_list').empty();
        const total = listSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0);
        listSections.forEach((sec, si) => {
            const $card = $('<div class="card mb-2 border"><div class="card-body py-2"><input type="text" class="form-control form-control-sm mb-2 sec-title" placeholder="Judul section"><div class="sec-rows"></div><button type="button" class="btn btn-sm btn-outline-secondary btn-add-row mt-1">+ Item</button></div></div>');
            $card.find('.sec-title').val(sec.title || '');
            (sec.rows || []).forEach((row, ri) => {
                const $r = $('<div class="d-flex gap-1 mb-1"><input type="text" class="form-control form-control-sm row-id" placeholder="id"><input type="text" class="form-control form-control-sm row-title" placeholder="title"><input type="text" class="form-control form-control-sm row-desc" placeholder="desc"><button type="button" class="btn btn-sm btn-outline-danger btn-rm-row">×</button></div>');
                $r.find('.row-id').val(row.id || ''); $r.find('.row-title').val(row.title || ''); $r.find('.row-desc').val(row.description || '');
                $r.find('.row-id').on('input', function() { listSections[si].rows[ri].id = $(this).val(); });
                $r.find('.row-title').on('input', function() { listSections[si].rows[ri].title = $(this).val(); });
                $r.find('.row-desc').on('input', function() { listSections[si].rows[ri].description = $(this).val(); });
                $r.find('.btn-rm-row').on('click', function() { listSections[si].rows.splice(ri, 1); renderListSections(); });
                $card.find('.sec-rows').append($r);
            });
            $card.find('.sec-title').on('input', function() { listSections[si].title = $(this).val(); });
            $card.find('.btn-add-row').on('click', function() {
                if (listSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0) >= MAX_LIST_ROWS) return;
                if (!listSections[si].rows) listSections[si].rows = [];
                listSections[si].rows.push({ id: 'opt_' + (listSections[si].rows.length + 1), title: '', description: '' });
                renderListSections();
            });
            $wrap.append($card);
        });
        $('#btnAddListSection').prop('disabled', listSections.length >= MAX_LIST_SECTIONS || total >= MAX_LIST_ROWS);
    }
    function buildPayload() {
        const type = $('#reply_type').val();
        if (type === 'text') return { message: $('#message_text').val().trim() };
        
        if (MEDIA_TYPES.indexOf(type) !== -1) {
             const p = { media_url: $('#media_url').val().trim() };
             if (MEDIA_WITH_CAPTION.indexOf(type) !== -1) {
                 const c = $('#media_caption').val().trim();
                 if (c) p.caption = c;
             }
             if (type === 'document') {
                 const f = $('#media_filename').val().trim();
                 if (f) p.filename = f;
             }
             return p;
        }

        if (type === 'button') {
            const body = $('#btn_body').val().trim(), footer = $('#btn_footer').val().trim();
            const headerType = $('#btn_header_type').val();
            const buttons = btnList.filter(b => b.title).map((b, i) => ({ type: 'reply', reply: { id: (b.id || ('btn_' + (i + 1))).trim(), title: b.title } }));
            
            if (!body || buttons.length === 0) return {};
            const obj = { type: 'button', body: { text: body }, action: { buttons } };
            if (footer) obj.footer = { text: footer };
            
            // Construct Header
            if (headerType && headerType !== 'none') {
                 if (headerType === 'text') {
                     const txt = $('#btn_header_text').val().trim();
                     if (txt) obj.header = { type: 'text', text: txt };
                 } else if (['image', 'video', 'document'].includes(headerType)) {
                     const url = $('#btn_header_media_url').val().trim();
                     if (url) obj.header = { type: headerType, [headerType]: { link: url } };
                 }
            }

            return { interactive: obj };
        }
        if (type === 'list') {
            const body = $('#list_body').val().trim(), buttonLabel = $('#list_button').val().trim() || 'Lihat pilihan';
            const sections = listSections.map(s => ({ title: (s.title || '').substring(0, 24), rows: (s.rows || []).filter(r => r.title).map(r => ({ id: (r.id || '').substring(0, 200), title: String(r.title).substring(0, 24), description: r.description ? String(r.description).substring(0, 72) : undefined })) })).filter(s => s.rows && s.rows.length);
            if (!body || sections.length === 0) return {};
            return { interactive: { type: 'list', body: { text: body }, action: { button: buttonLabel.substring(0, 20), sections } } };
        }
        return {};
    }
    
    function showReplyField(type) {
        $('.reply-field').addClass('d-none');
        if (type === 'text') {
            $('#field-text').removeClass('d-none');
        } else if (MEDIA_TYPES.indexOf(type) !== -1) {
            $('#field-media').removeClass('d-none');
            $('#media_url').prop('required', true);
            $('#media-caption-wrap').toggleClass('d-none', MEDIA_WITH_CAPTION.indexOf(type) === -1);
            $('#media-filename-wrap').toggleClass('d-none', type !== 'document');
        } else if (type === 'button') {
            $('#field-button').removeClass('d-none');
        } else if (type === 'list') {
            $('#field-list').removeClass('d-none');
        }
        
        // Reset required
        if (type !== 'text') $('#message_text').prop('required', false);
        if (MEDIA_TYPES.indexOf(type) === -1) $('#media_url').prop('required', false);
    }

    $('#reply_type').on('change', function() {
        showReplyField($(this).val());
    });
    
    // Toggle Header Inputs (Welcome Message)
    $('#btn_header_type').on('change', function() {
        const type = $(this).val();
        $('#btn_header_text').addClass('d-none').prop('required', false);
        $('#btn_header_media_wrapper').addClass('d-none');
        $('#btn_header_media_url').prop('required', false);
        
        if (type === 'text') {
            $('#btn_header_text').removeClass('d-none').prop('required', true);
        } else if (['image', 'video', 'document'].includes(type)) {
            $('#btn_header_media_wrapper').removeClass('d-none');
            $('#btn_header_media_url').prop('required', true);
        }
    }).trigger('change');

    // Toggle Header Inputs (Quick Reply)
    $('#qr-btn-header-type').on('change', function() {
        const type = $(this).val();
        $('#qr-btn-header-text').addClass('d-none').prop('required', false);
        $('#qr-btn-header-media-wrapper').addClass('d-none');
        $('#qr-btn-header-media-url').prop('required', false);
        
        if (type === 'text') {
            $('#qr-btn-header-text').removeClass('d-none').prop('required', true);
        } else if (['image', 'video', 'document'].includes(type)) {
            $('#qr-btn-header-media-wrapper').removeClass('d-none');
            $('#qr-btn-header-media-url').prop('required', true);
        }
    }).trigger('change');

    // Start Toggle logic
    showReplyField($('#reply_type').val());
    $('#simpleAutoreplyForm').on('submit', function() {
        $('#reply_payload').val(JSON.stringify(buildPayload()));
        $('#is_enabled_value').val($('#is_enabled').is(':checked') ? '1' : '0');
    });
    $('#btnAddBtn').on('click', function() { if (btnList.length >= MAX_BTN) return; btnList.push({ id: 'btn_' + (btnList.length + 1), title: '' }); renderBtnList(); });
    $('#btnAddListSection').on('click', function() {
        if (listSections.length >= MAX_LIST_SECTIONS || listSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0) >= MAX_LIST_ROWS) return;
        listSections.push({ title: 'Section ' + (listSections.length + 1), rows: [{ id: 'opt_1', title: '', description: '' }] });
        renderListSections();
    });
    $('.preset-simple').on('click', function() {
        // Pindah ke tab Welcome Message dulu
        document.querySelector('#tab-simple-btn').click();
        const type = $(this).data('type');
        $('#reply_type').val(type).trigger('change');
        if (type === 'text') { $('#message_text').val($(this).data('msg') || ''); return; }
        if (type === 'button') {
            $('#btn_body').val($(this).data('body') || 'Silakan pilih opsi:'); $('#btn_footer').val('');
            try { btnList = JSON.parse($(this).attr('data-btns') || '[]'); } catch(e) { btnList = [{ id: 'btn_1', title: 'Ya' }, { id: 'btn_2', title: 'Tidak' }]; }
            renderBtnList();
        }
        if (type === 'list') {
            $('#list_body').val($(this).data('body') || 'Silakan pilih layanan:'); $('#list_button').val($(this).data('btn') || 'Lihat pilihan');
            try { listSections = JSON.parse($(this).attr('data-sections') || '[]'); } catch(e) { listSections = [{ title: 'Layanan', rows: [{ id: 'info', title: 'Info', description: '' }, { id: 'order', title: 'Order', description: '' }] }]; }
            renderListSections();
        }
    });
    renderBtnList(); renderListSections();
    if (config) { $('#reply_type').val(config.reply_type); $('#reply_type').trigger('change'); }

    // ==========================================
    // Quick Reply Manager Logic
    // ==========================================
    const $qrViewList = $('#qr-view-list');
    const $qrViewForm = $('#qr-view-form');
    const $qrLoading = $('#qr-loading');
    const $qrEmpty = $('#qr-empty');
    const $qrTableContainer = $('#qr-table-container');
    const $qrTableBody = $('#qr-table-body');
    const $qrForm = $('#qr-form');
    const $qrFormTitle = $('#qr-form-title');
    const $qrInputId = $('#qr-id');
    const $qrInputShortcut = $('#qr-input-shortcut');
    const $qrInputCategory = $('#qr-input-category');
    const $qrInputContent = $('#qr-input-content');
    const $qrCategoryList = $('#qr-category-list');
    const $qrInputType = $('#qr-input-type');

    // Rich Media Fields
    const $qrMediaUrl = $('#qr-media-url');
    const $qrMediaCaption = $('#qr-media-caption');
    const $qrMediaFilename = $('#qr-media-filename');
    const $qrBtnBody = $('#qr-btn-body');
    const $qrBtnFooter = $('#qr-btn-footer');
    const $qrListBody = $('#qr-list-body');
    const $qrListBtnLabel = $('#qr-list-btn-label');

    let allQuickReplies = [];
    let qrInteractiveButtons = [];
    let qrListSections = [];
    const MAX_QR_BUTTONS = 3, MAX_QR_SECTIONS = 10, MAX_QR_ROWS = 10;
    const QR_MEDIA_TYPES = ['image', 'video', 'audio', 'document', 'sticker'];
    const QR_MEDIA_WITH_CAPTION = ['image', 'video', 'document'];

    // Load Data on Tab Click
    $('#tab-qr-btn').on('shown.bs.tab', function (e) {
        if (allQuickReplies.length === 0) {
            loadQuickReplies();
        }
    });

    function loadQuickReplies() {
        $qrLoading.removeClass('d-none');
        $qrEmpty.addClass('d-none');
        $qrTableContainer.addClass('d-none');

        $.get('{{ url("api/v1/quick-replies") }}')
            .done(function(res) {
                allQuickReplies = res.data || [];
                renderQuickReplies();
                updateCategoryDataList();
            })
            .fail(function() {
                alert('Gagal memuat data Quick Reply.');
            })
            .always(function() {
                $qrLoading.addClass('d-none');
            });
    }

    function renderQuickReplies() {
        if (allQuickReplies.length === 0) {
            $qrEmpty.removeClass('d-none');
            $qrTableContainer.addClass('d-none');
            return;
        }

        $qrEmpty.addClass('d-none');
        $qrTableContainer.removeClass('d-none');
        $qrTableBody.empty();

        const typeMap = {
            'text': '<i class="ti ti-message-2 text-muted"></i> Teks',
            'image': '<i class="ti ti-photo text-info"></i> Gambar',
            'video': '<i class="ti ti-video text-danger"></i> Video',
            'document': '<i class="ti ti-file text-primary"></i> Dok',
            'button': '<i class="ti ti-click text-warning"></i> Tombol',
            'list': '<i class="ti ti-list text-success"></i> List',
            'audio': '<i class="ti ti-microphone"></i> Audio',
            'sticker': '<i class="ti ti-sticker"></i> Stiker'
        };

        allQuickReplies.forEach(function(item) {
            const typeLabel = typeMap[item.reply_type] || item.reply_type;
            const tr = `
                <tr>
                    <td>${item.shortcut ? `<span class="badge bg-secondary">/${item.shortcut}</span>` : '-'}</td>
                    <td>${item.category || '-'}</td>
                    <td>
                        <div class="small fw-bold mb-1">${typeLabel}</div>
                        <div class="small text-truncate text-muted" style="max-width: 300px;">${escapeHtml(item.content)}</div>
                    </td>
                    <td><span class="badge bg-success">Aktif</span></td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary btn-qr-edit" data-id="${item.id}" title="Edit"><i class="ti ti-edit"></i></button>
                        <button class="btn btn-sm btn-outline-danger btn-qr-delete" data-id="${item.id}" title="Hapus"><i class="ti ti-trash"></i></button>
                    </td>
                </tr>
            `;
            $qrTableBody.append(tr);
        });
    }

    function updateCategoryDataList() {
        const categories = [...new Set(allQuickReplies.map(item => item.category).filter(Boolean))];
        let html = '';
        categories.forEach(cat => {
            html += `<option value="${cat}">`;
        });
        $qrCategoryList.html(html);
    }

    function showQrReplyField(type) {
        $('.qr-reply-field').addClass('d-none');
        if (type === 'text') $('#qr-field-text').removeClass('d-none');
        if (type === 'button') $('#qr-field-button').removeClass('d-none');
        if (type === 'list') $('#qr-field-list').removeClass('d-none');
        
        if (QR_MEDIA_TYPES.indexOf(type) !== -1) {
            $('#qr-field-media').removeClass('d-none');
            $('#qr-media-caption-wrap').toggleClass('d-none', QR_MEDIA_WITH_CAPTION.indexOf(type) === -1);
            $('#qr-media-filename-wrap').toggleClass('d-none', type !== 'document');
            $('#qr-media-url').prop('required', true);
        } else {
            $('#qr-media-url').prop('required', false);
        }

        if (type === 'text') $qrInputContent.prop('required', true);
        else $qrInputContent.prop('required', false);
    }

    $qrInputType.on('change', function() {
        showQrReplyField($(this).val());
    });

    function renderQrButtons() {
        const $list = $('#qr-btn-list-container').empty();
        qrInteractiveButtons.forEach((btn, idx) => {
            const $row = $('<div class="input-group input-group-sm mb-2"><input type="text" class="form-control btn-id" placeholder="ID" value="' + (btn.id || '') + '"><input type="text" class="form-control btn-title" placeholder="Title" value="' + (btn.title || '') + '"><button type="button" class="btn btn-outline-danger btn-remove-btn">×</button></div>');
            $row.find('.btn-id').on('input', function() { qrInteractiveButtons[idx].id = $(this).val(); });
            $row.find('.btn-title').on('input', function() { qrInteractiveButtons[idx].title = $(this).val(); });
            $row.find('.btn-remove-btn').on('click', function() { qrInteractiveButtons.splice(idx, 1); renderQrButtons(); });
            $list.append($row);
        });
        $('#qr-btn-add').prop('disabled', qrInteractiveButtons.length >= MAX_QR_BUTTONS);
    }

    $('#qr-btn-add').on('click', function() {
        if (qrInteractiveButtons.length >= MAX_QR_BUTTONS) return;
        qrInteractiveButtons.push({ id: 'btn_' + (qrInteractiveButtons.length + 1), title: '' });
        renderQrButtons();
    });

    function renderQrListSections() {
        const $wrap = $('#qr-list-container').empty();
        const totalRows = qrListSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0);
        qrListSections.forEach((sec, si) => {
             const $card = $('<div class="card mb-2 border"><div class="card-body py-2"><input type="text" class="form-control form-control-sm mb-2 sec-title" placeholder="Judul section" value="'+(sec.title||'')+'"><div class="sec-rows"></div><button type="button" class="btn btn-sm btn-outline-secondary btn-add-row mt-1">+ Item</button><button type="button" class="btn btn-sm btn-outline-danger btn-rm-sec mt-1 ms-1">Hapus Section</button></div></div>');
            
            (sec.rows || []).forEach((row, ri) => {
                const $r = $('<div class="d-flex gap-1 mb-1"><input type="text" class="form-control form-control-sm row-id" placeholder="id" value="'+(row.id||'')+'"><input type="text" class="form-control form-control-sm row-title" placeholder="title" value="'+(row.title||'')+'"><input type="text" class="form-control form-control-sm row-desc" placeholder="desc" value="'+(row.description||'')+'"><button type="button" class="btn btn-sm btn-outline-danger btn-rm-row">×</button></div>');
                $r.find('.row-id').on('input', function() { qrListSections[si].rows[ri].id = $(this).val(); });
                $r.find('.row-title').on('input', function() { qrListSections[si].rows[ri].title = $(this).val(); });
                $r.find('.row-desc').on('input', function() { qrListSections[si].rows[ri].description = $(this).val(); });
                $r.find('.btn-rm-row').on('click', function() { qrListSections[si].rows.splice(ri, 1); renderQrListSections(); });
                $card.find('.sec-rows').append($r);
            });

            $card.find('.sec-title').on('input', function() { qrListSections[si].title = $(this).val(); });
            $card.find('.btn-rm-sec').on('click', function() { qrListSections.splice(si, 1); renderQrListSections(); });
            $card.find('.btn-add-row').on('click', function() {
                if (qrListSections.reduce((s, sc) => s + (sc.rows ? sc.rows.length : 0), 0) >= MAX_QR_ROWS) return;
                if (!qrListSections[si].rows) qrListSections[si].rows = [];
                qrListSections[si].rows.push({ id: 'opt_' + (qrListSections[si].rows.length + 1), title: '', description: '' });
                renderQrListSections();
            });
            $wrap.append($card);
        });
        $('#qr-list-add-section').prop('disabled', qrListSections.length >= MAX_QR_SECTIONS || totalRows >= MAX_QR_ROWS);
    }

    $('#qr-list-add-section').on('click', function() {
        if (qrListSections.length >= MAX_QR_SECTIONS || qrListSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0) >= MAX_QR_ROWS) return;
        qrListSections.push({ title: 'Section ' + (qrListSections.length + 1), rows: [{ id: 'opt_1', title: '', description: '' }] });
        renderQrListSections();
    });

    function buildQrPayload() {
        const safeVal = ($el) => ($el && $el.length ? ($el.val() ?? '') : '');
        const type = safeVal($qrInputType);
        if (type === 'text') {
            const msg = String(safeVal($qrInputContent)).trim();
            return msg ? { message: msg } : {};
        }
        
        if (QR_MEDIA_TYPES.indexOf(type) !== -1) {
            const mediaUrl = String(safeVal($qrMediaUrl)).trim();
            if (!mediaUrl) return {};
            const p = { media_url: mediaUrl };
            const caption = String(safeVal($qrMediaCaption)).trim();
            if (QR_MEDIA_WITH_CAPTION.indexOf(type) !== -1 && caption) p.caption = caption;
            const filename = String(safeVal($qrMediaFilename)).trim();
            if (type === 'document' && filename) p.filename = filename;
            return p;
        }

        if (type === 'button') {
             const body = String(safeVal($qrBtnBody)).trim();
             const footer = String(safeVal($qrBtnFooter)).trim();
             const headerType = String(safeVal($('#qr-btn-header-type'))).trim();
             const buttons = qrInteractiveButtons
                 .filter(b => String(b?.title ?? '').trim())
                 .map((b, i) => ({
                     type: 'reply',
                     reply: {
                         id: String((b?.id ?? '') || ('btn_' + (i + 1))).trim(),
                         title: String(b?.title ?? '').trim().substring(0, 20)
                     }
                 }));
             
             if (!body || buttons.length === 0) return {};
             const obj = { type: 'button', body: { text: body }, action: { buttons } };
             if (footer) obj.footer = { text: footer };
             
             // Construct Header
             if (headerType && headerType !== 'none') {
                 if (headerType === 'text') {
                     const txt = String(safeVal($('#qr-btn-header-text'))).trim();
                     if (txt) obj.header = { type: 'text', text: txt };
                 } else if (['image', 'video', 'document'].includes(headerType)) {
                     const url = String(safeVal($('#qr-btn-header-media-url'))).trim();
                     if (url) obj.header = { type: headerType, [headerType]: { link: url } };
                 }
             }

             return { interactive: obj };
        }

        if (type === 'list') {
            const body = String(safeVal($qrListBody)).trim();
            const btnLabel = (String(safeVal($qrListBtnLabel)).trim() || 'Menu');
            const sections = qrListSections
                .map(s => ({
                    title: String(s?.title ?? '').substring(0, 24),
                    rows: (s?.rows || [])
                        .filter(r => String(r?.title ?? '').trim())
                        .map(r => ({
                            id: String(r?.id ?? '').substring(0, 200),
                            title: String(r?.title ?? '').substring(0, 24),
                            description: r?.description ? String(r.description).substring(0, 72) : undefined
                        }))
                }))
                .filter(s => s.rows && s.rows.length);
            if (!body || sections.length === 0) return {};
            return { interactive: { type: 'list', body: { text: body }, action: { button: btnLabel.substring(0, 20), sections } } };
        }
        return {};
    }

    function showQrForm(mode, data = null) {
        $qrViewList.addClass('d-none');
        $qrViewForm.removeClass('d-none');
        $qrForm[0].reset();
        
        // Reset state completely
        qrInteractiveButtons = [{ id: 'btn_1', title: '' }, { id: 'btn_2', title: '' }];
        qrListSections = [{ title: 'Section 1', rows: [{ id: 'opt_1', title: '', description: '' }] }];
        
        // Reset Hidden Inputs
        $qrInputId.val(''); 
        $qrMediaUrl.val('');
        $qrMediaCaption.val('');
        $qrMediaFilename.val('');
        $('#qr-media-file-upload').val('');

        if (mode === 'create') {
            $qrFormTitle.text('Tambah Quick Reply');
            $qrInputId.val(''); // Ensure ID is empty for create
            $qrInputType.val('text').trigger('change');
            $('#qr-btn-header-type').val('none').trigger('change');
            renderQrButtons();
            renderQrListSections();
        } else {
            $qrFormTitle.text('Edit Quick Reply');
            $qrInputId.val(data.id);
            $qrInputShortcut.val(data.shortcut);
            $qrInputCategory.val(data.category);
            $qrInputType.val(data.reply_type || 'text').trigger('change');
            
            const payload = data.reply_payload || {};
            if (data.reply_type === 'text') $qrInputContent.val(payload.message || data.content || '');
            else if (QR_MEDIA_TYPES.indexOf(data.reply_type) !== -1) {
                $qrMediaUrl.val(payload.media_url || '');
                $qrMediaCaption.val(payload.caption || '');
                $qrMediaFilename.val(payload.filename || '');
            } else if (data.reply_type === 'button' && payload.interactive) {
                const i = payload.interactive;
                 $qrBtnBody.val(i.body?.text || '');
                 $qrBtnFooter.val(i.footer?.text || '');
                 
                 if (i.action?.buttons) {
                     qrInteractiveButtons = i.action.buttons.map(b => ({ id: b.reply?.id || '', title: b.reply?.title || '' }));
                 } else {
                     qrInteractiveButtons = [{ id: 'btn_1', title: '' }, { id: 'btn_2', title: '' }];
                 }
                 
                 // Load Header for QR
                 const hdr = i.header || {};
                 if (hdr.type) {
                     $('#qr-btn-header-type').val(hdr.type).trigger('change');
                     if (hdr.type === 'text') $('#qr-btn-header-text').val(hdr.text || '');
                     else if (['image', 'video', 'document'].indexOf(hdr.type) !== -1) $('#qr-btn-header-media-url').val(hdr[hdr.type]?.link || '');
                 } else {
                     $('#qr-btn-header-type').val('none').trigger('change');
                 }
            } else if (data.reply_type === 'list' && payload.interactive) {
                const i = payload.interactive;
                $qrListBody.val(i.body?.text || '');
                $qrListBtnLabel.val(i.action?.button || '');
                
                if (i.action?.sections) {
                    qrListSections = i.action.sections.map(s => ({ title: s.title || '', rows: (s.rows || []).map(r => ({ id: r.id || '', title: r.title || '', description: r.description || '' })) }));
                } else {
                    qrListSections = [{ title: 'Section 1', rows: [{ id: 'opt_1', title: '', description: '' }] }];
                }
            }
            renderQrButtons();
            renderQrListSections();
        }
    }

    function showQrList() {
        $qrViewForm.addClass('d-none');
        $qrViewList.removeClass('d-none');
    }

    // Event Handlers
    $('#qr-btn-create').on('click', function() {
        showQrForm('create');
    });

    $('#qr-form-back').on('click', function() {
        showQrList();
    });

    $(document).on('click', '.btn-qr-edit', function() {
        const id = $(this).data('id');
        const data = allQuickReplies.find(item => item.id == id);
        if (data) showQrForm('edit', data);
    });

    $(document).on('click', '.btn-qr-delete', function() {
        const id = $(this).data('id');
        if (!confirm('Yakin ingin menghapus template ini?')) return;

        $.ajax({
            url: `{{ url("api/v1/quick-replies") }}/${id}`,
            method: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },
            success: function() {
                loadQuickReplies();
            },
            error: function() {
                alert('Gagal menghapus template.');
            }
        });
    });

    $qrForm.on('submit', function(e) {
        e.preventDefault();
        const id = $qrInputId.val();
        const isEdit = !!id;
        const url = isEdit ? `{{ url("api/v1/quick-replies") }}/${id}` : `{{ url("api/v1/quick-replies") }}`;
        const method = isEdit ? 'PUT' : 'POST';
        
        const payloadObj = buildQrPayload();
        if (Object.keys(payloadObj).length === 0) {
            alert('Konten Quick Reply tidak valid atau belum lengkap. Pastikan Body dan Button/List terisi.');
            return;
        }

        const payload = {
            shortcut: $qrInputShortcut.val(),
            category: $qrInputCategory.val(),
            reply_type: $qrInputType.val(),
            reply_payload: JSON.stringify(payloadObj),
            _token: '{{ csrf_token() }}'
        };

        const $btn = $('#qr-btn-save');
        $btn.prop('disabled', true).text('Menyimpan...');

        $.ajax({
            url: url,
            method: method,
            data: payload,
            success: function() {
                loadQuickReplies();
                showQrList();
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message || 'Gagal menyimpan template.';
                alert(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).text('Simpan Template');
            }
        });
    });

    function escapeHtml(text) {
        if (!text) return text;
        return text
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    // File Upload Logic (Repeated from Custom Form, could be refactored)
    function setupFileUpload(fileInputId, urlInputId, resetButtonId) {
        const $fileInput = $('#' + fileInputId);
        const $urlInput = $('#' + urlInputId);
        const $resetBtn = $('#' + resetButtonId);
        // Use existing media upload route from CustomAutoreplyController
        // It's generic enough (uses NasCloudService + Auth::user()->client)
        const uploadUrl = '{{ route("client.balasan-otomatis.custom.upload-media") }}';

        $fileInput.on('change', function() {
            if (!this.files || this.files.length === 0) return;
            const file = this.files[0];
            const formData = new FormData();
            formData.append('file', file);
            formData.append('_token', '{{ csrf_token() }}');

            // Loading state
            $urlInput.val('Uploading...').prop('disabled', true);
            $fileInput.prop('disabled', true);

            $.ajax({
                url: uploadUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    if (res.success) {
                        $urlInput.val(res.url).prop('readonly', true);
                        const typeVal = $urlInput.attr('id').includes('qr') ? $qrInputType.val() : $('#reply_type').val(); 
                        
                        // Auto-fill filename for documents if empty (Simple AutoReply)
                        if (urlInputId === 'media_url' && typeVal === 'document') {
                            if (!$('#media_filename').val()) $('#media_filename').val(res.filename);
                        }
                        // Auto-fill filename for documents if empty (Quick Reply)
                        if (urlInputId === 'qr-media-url' && typeVal === 'document') {
                            if (!$('#qr-media-filename').val()) $('#qr-media-filename').val(res.filename);
                        }
                    } else {
                        alert('Upload failed: ' + (res.error || 'Unknown error'));
                        $urlInput.val('');
                    }
                },
                error: function(xhr) {
                    alert('Upload error: ' + (xhr.responseJSON?.error || xhr.statusText));
                    $urlInput.val('');
                },
                complete: function() {
                    $urlInput.prop('disabled', false);
                    $fileInput.prop('disabled', false).val('');
                }
            });
        });

        $resetBtn.on('click', function() {
            $urlInput.val('').prop('readonly', false).focus();
            $fileInput.val('');
        });
    }

    // Initialize Uploaders
    // Welcome Message
    setupFileUpload('media_file_upload', 'media_url', 'btn_reset_media_url');
    setupFileUpload('btn_header_file_upload', 'btn_header_media_url', 'btn_reset_header_media');
    
    // Quick Reply
    setupFileUpload('qr-media-file-upload', 'qr-media-url', 'qr-btn-reset-media');
    setupFileUpload('qr-btn-header-file-upload', 'qr-btn-header-media-url', 'qr-btn-reset-header-media');
    
    // Greeting (Header Media)
    setupFileUpload('greeting_btn_header_file_upload', 'greeting_btn_header_media_url', 'greeting_btn_reset_header_media');

    // Buka tab dari URL hash (redirect dari route lain)
    var tabHash = window.location.hash;
    if (tabHash === '#tab-greeting' && $('#tab-greeting-btn').length) {
        $('#tab-greeting-btn')[0].click();
    } else if (tabHash === '#tab-ai' && $('#tab-ai-btn').length) {
        $('#tab-ai-btn')[0].click();
    }

    // AI Reply: rotate chevron when advanced section is toggled
    var aiAdvancedEl = document.getElementById('ai-advanced-collapse');
    if (aiAdvancedEl) {
        aiAdvancedEl.addEventListener('show.bs.collapse', function () {
            $('#ai-advanced-chevron').addClass('rotate-180');
        });
        aiAdvancedEl.addEventListener('hide.bs.collapse', function () {
            $('#ai-advanced-chevron').removeClass('rotate-180');
        });
    }

    // ==========================================
    // Greeting Message tab
    // ==========================================
    const GREETING_DEFAULT = 'Halo 👋\nTerima kasih telah menghubungi kami.\nSilakan kirimkan kebutuhan Anda, tim kami akan segera membantu.';
    const greetingConfig = @json(['reply_type' => $greetingSetting->reply_type ?? 'text', 'reply_payload' => $greetingSetting->reply_payload ?? null, 'message_template' => $greetingSetting->message_template ?? null]);

    var greetingPreview = $('#greeting-preview-box');
    var greetingTemplate = $('#greeting_message_template');
    var $greetingReplyType = $('#greeting_reply_type');
    var $greetingButtonBlock = $('#greeting-field-button');
    var $greetingHeaderType = $('#greeting_btn_header_type');
    var $greetingHeaderText = $('#greeting_btn_header_text');
    var $greetingHeaderMediaWrap = $('#greeting_btn_header_media_wrapper');
    var $greetingHeaderMediaUrl = $('#greeting_btn_header_media_url');
    var $greetingFooter = $('#greeting_btn_footer');

    const MAX_GREETING_BTN = 3;
    let greetingBtnList = [
        { id: 'btn_1', title: 'Info' },
        { id: 'btn_2', title: 'Order' },
    ];

    function renderGreetingBtnList() {
        const $wrap = $('#greeting_btn_buttons_list').empty();
        greetingBtnList.forEach((b, i) => {
            const $row = $('<div class="input-group input-group-sm mb-2">' +
                '<input type="text" class="form-control gbtn-id" placeholder="ID" value="' + (b.id || '') + '">' +
                '<input type="text" class="form-control gbtn-title" placeholder="Judul" value="' + (b.title || '') + '">' +
                '<button type="button" class="btn btn-outline-danger gbtn-remove">×</button>' +
            '</div>');
            $row.find('.gbtn-id').on('input', function() { greetingBtnList[i].id = $(this).val(); });
            $row.find('.gbtn-title').on('input', function() { greetingBtnList[i].title = ($(this).val() || '').substring(0, 20); });
            $row.find('.gbtn-remove').on('click', function() { greetingBtnList.splice(i, 1); renderGreetingBtnList(); updateGreetingPreview(); });
            $wrap.append($row);
        });
        $('#greeting_btn_add').prop('disabled', greetingBtnList.length >= MAX_GREETING_BTN);
    }

    function showGreetingFields(type) {
        if (type === 'interactive') $greetingButtonBlock.removeClass('d-none');
        else $greetingButtonBlock.addClass('d-none');
        updateGreetingPreview();
    }

    function buildGreetingInteractive() {
        const body = (greetingTemplate.val() || '').trim();
        const footer = ($greetingFooter.val() || '').trim();
        const headerType = $greetingHeaderType.val() || 'none';
        const buttons = greetingBtnList
            .filter(b => (b.title || '').trim() !== '')
            .slice(0, MAX_GREETING_BTN)
            .map((b, idx) => ({
                type: 'reply',
                reply: { id: (b.id || ('btn_' + (idx + 1))).trim(), title: String(b.title).substring(0, 20) }
            }));

        if (!body || buttons.length === 0) return null;

        const interactive = {
            type: 'button',
            body: { text: body },
            action: { buttons }
        };
        if (footer) interactive.footer = { text: footer };

        if (headerType && headerType !== 'none') {
            if (headerType === 'text') {
                const txt = ($greetingHeaderText.val() || '').trim();
                if (txt) interactive.header = { type: 'text', text: txt };
            } else if (['image', 'video', 'document'].includes(headerType)) {
                const url = ($greetingHeaderMediaUrl.val() || '').trim();
                if (url) interactive.header = { type: headerType, [headerType]: { link: url } };
            }
        }
        return interactive;
    }

    function updateGreetingPreview() {
        if (!greetingPreview.length) return;
        const type = $greetingReplyType.val() || 'text';
        if (type !== 'interactive') {
            greetingPreview.text((greetingTemplate.val() || '').trim() || GREETING_DEFAULT);
            return;
        }
        const interactive = buildGreetingInteractive();
        const body = (greetingTemplate.val() || '').trim() || GREETING_DEFAULT;
        const btnTitles = (greetingBtnList || []).map(b => (b.title || '').trim()).filter(Boolean);
        let preview = body;
        if (btnTitles.length) preview += '\n\n[Buttons]\n- ' + btnTitles.join('\n- ');
        greetingPreview.text(preview);
    }

    // Header type toggle (Greeting)
    $greetingHeaderType.on('change', function() {
        const type = $(this).val();
        $greetingHeaderText.addClass('d-none').prop('required', false);
        $greetingHeaderMediaWrap.addClass('d-none');
        $greetingHeaderMediaUrl.prop('required', false);

        if (type === 'text') {
            $greetingHeaderText.removeClass('d-none').prop('required', true);
        } else if (['image', 'video', 'document'].includes(type)) {
            $greetingHeaderMediaWrap.removeClass('d-none');
            $greetingHeaderMediaUrl.prop('required', true);
        }
        updateGreetingPreview();
    });

    // Add button
    $('#greeting_btn_add').on('click', function() {
        if (greetingBtnList.length >= MAX_GREETING_BTN) return;
        greetingBtnList.push({ id: 'btn_' + (greetingBtnList.length + 1), title: '' });
        renderGreetingBtnList();
        updateGreetingPreview();
    });

    // Init from saved config
    const initialType = (greetingConfig.reply_type === 'interactive') ? 'interactive' : 'text';
    $greetingReplyType.val(initialType);
    if (greetingConfig.reply_payload && greetingConfig.reply_payload.interactive) {
        const i = greetingConfig.reply_payload.interactive;
        if (i.type === 'button') {
            if (i.action && i.action.buttons) {
                greetingBtnList = i.action.buttons.map((b, idx) => ({
                    id: b.reply?.id || ('btn_' + (idx + 1)),
                    title: b.reply?.title || ''
                }));
            }
            if (i.footer && i.footer.text) $greetingFooter.val(i.footer.text);
            const hdr = i.header || {};
            if (hdr.type) {
                $greetingHeaderType.val(hdr.type);
                if (hdr.type === 'text') $greetingHeaderText.val(hdr.text || '');
                else if (['image', 'video', 'document'].includes(hdr.type)) $greetingHeaderMediaUrl.val(hdr[hdr.type]?.link || '');
            }
        }
    }
    renderGreetingBtnList();
    $greetingHeaderType.trigger('change');
    showGreetingFields($greetingReplyType.val());

    // Preview updates
    if (greetingTemplate.length) {
        greetingTemplate.on('input', updateGreetingPreview);
    }
    $greetingFooter.on('input', updateGreetingPreview);
    $greetingHeaderText.on('input', updateGreetingPreview);
    $greetingHeaderMediaUrl.on('input', updateGreetingPreview);

    $greetingReplyType.on('change', function() { showGreetingFields($(this).val()); });

    // Submit
    $('#form-greeting').on('submit', function(e) {
        e.preventDefault();
        const type = $greetingReplyType.val() || 'text';
        const payloadObj = (type === 'interactive')
            ? { interactive: buildGreetingInteractive() }
            : { message: (greetingTemplate.val() || '').trim() };

        if (type === 'interactive' && (!payloadObj.interactive || Object.keys(payloadObj.interactive).length === 0)) {
            if (window.toastr) toastr.error('Konfigurasi button belum lengkap. Pastikan body dan tombol terisi.');
            else alert('Konfigurasi button belum lengkap. Pastikan body dan tombol terisi.');
            return;
        }

        var data = {
            _token: $(this).find('input[name="_token"]').val(),
            is_active: $('#greeting_is_active').is(':checked'),
            message_template: $('#greeting_message_template').val() || '',
            reply_type: type,
            reply_payload: JSON.stringify(payloadObj),
            only_registered_contact: $('#greeting_only_registered_contact').is(':checked'),
            apply_for_shared: $('#greeting_apply_for_shared').is(':checked'),
            apply_for_dedicated: $('#greeting_apply_for_dedicated').is(':checked'),
            apply_for_self_service: $('#greeting_apply_for_self_service').is(':checked')
        };
        $.ajax({
            url: '{{ route("client.settings.greeting-message.store") }}',
            method: 'POST',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': data._token, 'Accept': 'application/json' },
            data: JSON.stringify(data)
        }).done(function(res) {
            if (res.success) { if (window.toastr) toastr.success(res.message); else alert(res.message); }
            else { if (window.toastr) toastr.error(res.message || 'Gagal menyimpan'); else alert(res.message || 'Gagal menyimpan'); }
        }).fail(function(xhr) {
            var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Gagal menyimpan';
            if (window.toastr) toastr.error(msg); else alert(msg);
        });
    });
    // ==========================================
    // AI Reply tab (Enhanced Pipeline)
    // ==========================================
    var csrfToken = $('input[name="_token"]').first().val();
    var ajaxHeaders = { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' };

    // --- Save AI Settings ---
    $('#form-ai-setting').on('submit', function(e) {
        e.preventDefault();
        var kwRaw = $('#ai_escalation_keywords').val() || '';
        var kwArr = kwRaw.split(',').map(function(k){ return k.trim(); }).filter(Boolean);
        var data = {
            _token: $(this).find('input[name="_token"]').val(),
            is_active: $('#ai_is_active').is(':checked'),
            model: $('#ai_model').val() || 'openai/gpt-4o-mini',
            max_tokens: parseInt($('#ai_max_tokens').val()) || 500,
            temperature: parseFloat($('#ai_temperature').val()) || 0.7,
            fallback_message: $('#ai_fallback_message').val() || '',
            system_prompt: $('#ai_system_prompt').val() || '',
            persona_type: $('#ai_persona_type').val() || 'semi_formal',
            emoji_level: parseInt($('#ai_emoji_level').val()) || 1,
            max_response_length: parseInt($('#ai_max_response_length').val()) || 500,
            conversation_memory_count: parseInt($('#ai_conversation_memory_count').val()) || 10,
            response_delay_enabled: $('#ai_response_delay_enabled').is(':checked'),
            anti_repetition_enabled: $('#ai_anti_repetition_enabled').is(':checked'),
            escalation_sensitivity: $('#ai_escalation_sensitivity').val() || 'medium',
            escalation_keywords: kwArr,
            escalation_message: $('#ai_escalation_message').val() || '',
            company_name: $('#ai_company_name').val() || '',
            company_context: $('#ai_company_context').val() || '',
            followup_enabled: $('#ai_followup_enabled').is(':checked'),
            followup_delay_minutes: parseInt($('#ai_followup_delay_minutes').val()) || 5,
            followup_max_per_cycle: parseInt($('#ai_followup_max_per_cycle').val()) || 1,
            max_bubbles: parseInt($('#ai_max_bubbles').val()) || 3,
            goal_tracking_enabled: $('#ai_goal_tracking_enabled').is(':checked')
        };
        var $btn = $(this).find('button[type="submit"]').prop('disabled', true);
        $.ajax({
            url: '{{ route("client.balasan-otomatis.ai-setting.store") }}',
            method: 'POST',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': data._token, 'Accept': 'application/json' },
            data: JSON.stringify(data)
        }).done(function(res) {
            if (res.success) { if (window.toastr) toastr.success(res.message); else alert(res.message); }
            else { if (window.toastr) toastr.error(res.message || 'Gagal menyimpan'); else alert(res.message || 'Gagal menyimpan'); }
        }).fail(function(xhr) {
            var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Gagal menyimpan';
            if (window.toastr) toastr.error(msg); else alert(msg);
        }).always(function() { $btn.prop('disabled', false); });
    });

    // --- Button Mapping CRUD ---
    function loadAiButtons() {
        $.get('{{ route("client.balasan-otomatis.ai-buttons.index") }}', function(res) {
            var $list = $('#ai-buttons-list');
            if (!res.data || res.data.length === 0) {
                $list.html('<div class="text-center text-muted small py-3">Belum ada button. Klik <strong>Tambah</strong> untuk membuat.</div>');
                return;
            }
            var html = '<div class="table-responsive"><table class="table table-sm table-hover mb-0 align-middle">'
                + '<thead><tr><th class="small fw-semibold">Key</th><th class="small fw-semibold">Judul</th><th class="small fw-semibold">Intent</th><th width="50"></th></tr></thead><tbody>';
            res.data.forEach(function(b) {
                var intents = (b.intent_triggers || []).join(', ') || '<span class="text-muted">-</span>';
                html += '<tr><td><code>' + b.button_key + '</code></td><td>' + b.button_title + '</td><td class="small">' + intents + '</td>'
                    + '<td><button class="btn btn-sm btn-outline-danger btn-del-ai-btn" data-id="' + b.id + '" title="Hapus"><i class="ti ti-trash"></i></button></td></tr>';
            });
            html += '</tbody></table></div>';
            $list.html(html);
        });
    }
    loadAiButtons();

    $('#btn-add-ai-button').on('click', function() {
        var key = prompt('Button Key (huruf kecil, underscore):', '');
        if (!key) return;
        key = key.toLowerCase().replace(/[^a-z0-9_]/g, '');
        if (!key) { alert('Key tidak valid'); return; }
        var title = prompt('Judul Button (max 20 karakter):', '');
        if (!title) return;
        title = title.substring(0, 20);
        var intentRaw = prompt('Intent Triggers (opsional, pisah koma):', '');
        var intents = intentRaw ? intentRaw.split(',').map(function(s){ return s.trim(); }).filter(Boolean) : [];
        $.ajax({
            url: '{{ route("client.balasan-otomatis.ai-buttons.store") }}',
            method: 'POST',
            contentType: 'application/json',
            headers: ajaxHeaders,
            data: JSON.stringify({ button_key: key, button_title: title, intent_triggers: intents })
        }).done(function(res) {
            if (res.success) { loadAiButtons(); if (window.toastr) toastr.success(res.message); }
            else { if (window.toastr) toastr.error(res.message); else alert(res.message); }
        }).fail(function(xhr) {
            var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Gagal menambahkan';
            if (window.toastr) toastr.error(msg); else alert(msg);
        });
    });

    $(document).on('click', '.btn-del-ai-btn', function() {
        if (!confirm('Hapus button ini?')) return;
        var id = $(this).data('id');
        $.ajax({
            url: '{{ url("client/balasan-otomatis/ai-buttons") }}/' + id,
            method: 'DELETE',
            headers: ajaxHeaders
        }).done(function(res) {
            loadAiButtons();
            if (window.toastr) toastr.success(res.message || 'Dihapus');
        }).fail(function() {
            if (window.toastr) toastr.error('Gagal menghapus'); else alert('Gagal menghapus');
        });
    });

    $('#btn-greeting-test-send').on('click', function() {
        var phone = $('#greeting_test_phone').val().trim();
        if (!phone) {
            $('#greeting-test-result').removeClass('text-success').addClass('text-danger').text('Masukkan nomor tujuan.');
            return;
        }
        var $btn = $(this).prop('disabled', true);
        $('#greeting-test-result').removeClass('text-success text-danger').addClass('text-muted').text('Mengirim...');
        $.ajax({
            url: '{{ route("client.settings.greeting-message.test-send") }}',
            method: 'POST',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val(), 'Accept': 'application/json' },
            data: JSON.stringify({ phone: phone, waba_pool_id: $('#greeting_test_waba_pool_id').length ? ($('#greeting_test_waba_pool_id').val() || null) : null })
        }).done(function(res) {
            if (res.success) {
                $('#greeting-test-result').removeClass('text-muted text-danger').addClass('text-success').text(res.message);
            } else {
                $('#greeting-test-result').removeClass('text-muted text-success').addClass('text-danger').text(res.message || 'Gagal mengirim');
            }
        }).fail(function(xhr) {
            var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Gagal mengirim. Cek koneksi.';
            $('#greeting-test-result').removeClass('text-muted text-success').addClass('text-danger').text(msg);
        }).always(function() { $btn.prop('disabled', false); });
    });

});
</script>
@endpush