@extends('layouts.admin')

@section('title', 'Profil Klien: ' . $client->name)
@section('page_title', 'Profil Klien 360°')

@section('admin_content')
<div>
    <!-- Back to CRM Directory -->
    <div style="margin-bottom:var(--ax-space-4);">
        <a href="{{ route('admin.crm') }}" style="display:inline-flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); color:var(--ax-text-muted); text-decoration:none; font-weight:600;">
            <i data-lucide="arrow-left" style="width:14px;height:14px;"></i>
            <span>Kembali ke Direktori Klien</span>
        </a>
    </div>

    @if(session('success'))
        <div style="margin-bottom: var(--ax-space-4); padding: 12px 16px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #15803d; border-radius: var(--ax-radius-md); font-size: var(--ax-text-xs); font-weight: 600; display: flex; align-items: center; gap: 8px;">
            <i data-lucide="check-circle" style="width:16px; height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <!-- Profile Header Card -->
    <div class="ax-card" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-card__body" style="padding:24px;">
            <div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;">
                <!-- User Identity -->
                <div style="display:flex; align-items:center; gap:16px;">
                    <div style="width:56px; height:56px; border-radius:9999px; background:rgba(83, 107, 91, 0.15); color:var(--jk-deepsage); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;">
                        {{ strtoupper(substr($client->name, 0, 1)) }}
                    </div>
                    <div>
                        <div style="display:flex; align-items:center; gap:10px;">
                            <h2 style="font-size:1.4rem; font-weight:700; color:var(--ax-text-strong); margin:0;">{{ $client->name }}</h2>
                            @if($client->hasVerifiedEmail())
                                <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">
                                    <i data-lucide="check" style="width:11px;height:11px;"></i> Email Terverifikasi
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800">
                                    <i data-lucide="alert-circle" style="width:11px;height:11px;"></i> Belum Verifikasi
                                </span>
                            @endif
                        </div>
                        <div style="font-size:var(--ax-text-xs); color:var(--ax-text-muted); margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:12px;">
                            <span style="display:flex; align-items:center; gap:4px;">
                                <i data-lucide="mail" style="width:13px;height:13px;"></i>
                                {{ $client->email }}
                            </span>
                            @if($client->phone)
                                <span style="display:flex; align-items:center; gap:4px;">
                                    <i data-lucide="phone" style="width:13px;height:13px;"></i>
                                    {{ $client->phone }}
                                </span>
                            @endif
                            <span style="display:flex; align-items:center; gap:4px;">
                                <i data-lucide="calendar" style="width:13px;height:13px;"></i>
                                Bergabung: {{ $client->created_at->format('d M Y') }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons Header -->
                <div style="display:flex; flex-wrap:wrap; gap:8px;">
                    @if($cleanPhone)
                        <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($waTemplates['greeting']) }}"
                           target="_blank"
                           class="ax-btn ax-btn--primary"
                           style="background:#25D366; border-color:#25D366; color:#fff;">
                            <i data-lucide="message-circle" style="width:14px;height:14px;"></i>
                            <span class="ax-btn__label">Chat WhatsApp</span>
                        </a>
                    @endif

                    @if(!$client->hasVerifiedEmail())
                        <form action="{{ route('admin.crm.manual-verify', $client->id) }}" method="POST" style="margin:0;">
                            @csrf
                            <button type="submit" class="ax-btn ax-btn--secondary" onclick="return confirm('Verifikasi email akun klien ini secara manual?')">
                                <i data-lucide="check-circle" style="width:14px;height:14px; color:#15803d;"></i>
                                <span class="ax-btn__label">Verifikasi Email Manual</span>
                            </button>
                        </form>
                    @endif

                    <!-- Impersonate Button -->
                    <form action="{{ route('admin.crm.impersonate', $client->id) }}" method="POST" style="margin:0;">
                        @csrf
                        <button type="submit" class="ax-btn ax-btn--secondary" onclick="return confirm('Buka dashboard sebagai klien {{ $client->name }}?')">
                            <i data-lucide="log-in" style="width:14px;height:14px;"></i>
                            <span class="ax-btn__label">Login Sebagai Klien</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 2-Column CRM Profile Layout -->
    <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--ax-space-6); align-items:start;">
        
        <!-- LEFT COLUMN: Wedding Context & Financials -->
        <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
            
            <!-- Card 1: Data Undangan & Acara Pernikahan -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Undangan Pernikahan</span>
                        <h3 class="ax-card__title">Detail Acara &amp; Desain</h3>
                    </div>
                    @if($activeInvitation)
                        <div style="display:flex; align-items:center; gap:8px;">
                            <a href="{{ route('invitation.public', $activeInvitation->slug) }}" target="_blank" class="ax-btn ax-btn--secondary" style="padding:6px 12px; font-size:11px;">
                                <i data-lucide="external-link" style="width:13px;height:13px;"></i>
                                <span>Lihat Undangan</span>
                            </a>
                        </div>
                    @endif
                </div>

                <div class="ax-card__body">
                    @if($activeInvitation)
                        <!-- Wedding Countdown Pill -->
                        @if($countdownDays !== null)
                            <div style="margin-bottom:16px; padding:12px 16px; border-radius:var(--ax-radius-lg); background: {{ $countdownDays >= 0 ? 'rgba(83, 107, 91, 0.1)' : 'var(--ax-surface-subtle)' }}; border:1px solid {{ $countdownDays >= 0 ? 'rgba(83, 107, 91, 0.25)' : 'var(--ax-border)' }}; display:flex; justify-content:space-between; align-items:center;">
                                <div style="display:flex; align-items:center; gap:10px;">
                                    <i data-lucide="hourglass" style="width:18px;height:18px; color:var(--jk-deepsage);"></i>
                                    <div>
                                        <strong style="font-size:var(--ax-text-xs); color:var(--ax-text-strong);">
                                            @if($countdownDays > 0)
                                                H-{{ $countdownDays }} Hari Menuju Hari Bahagia!
                                            @elseif($countdownDays === 0)
                                                Hari Bahagia Berlangsung Hari Ini! 🎉
                                            @else
                                                Acara Telah Berlangsung ({{ abs($countdownDays) }} hari lalu)
                                            @endif
                                        </strong>
                                        <span style="font-size:11px; color:var(--ax-text-muted); display:block;">
                                            Tanggal: {{ \Carbon\Carbon::parse($activeInvitation->event_datetime_1)->format('d F Y, H:i') }} WIB
                                        </span>
                                    </div>
                                </div>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $activeInvitation->is_paid ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                    {{ $activeInvitation->is_paid ? 'Published' : 'Draft Mode' }}
                                </span>
                            </div>
                        @endif

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-4); margin-bottom:16px;">
                            <div>
                                <small style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:700;">Pasangan Pengantin</small>
                                <strong style="font-size:var(--ax-text-sm); color:var(--ax-text-strong);">
                                    {{ $activeInvitation->groom_name }} &amp; {{ $activeInvitation->bride_name }}
                                </strong>
                                <span style="font-size:11px; color:var(--ax-text-muted); display:block;">
                                    Panggilan: {{ $activeInvitation->groom_nickname }} &amp; {{ $activeInvitation->bride_nickname }}
                                </span>
                            </div>

                            <div>
                                <small style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:700;">Desain &amp; Template</small>
                                <strong style="font-size:var(--ax-text-sm); color:var(--ax-text-strong);">
                                    {{ $activeInvitation->template->name ?? 'Default Template' }}
                                </strong>
                                <span style="font-size:11px; color:var(--ax-text-muted); display:block;">
                                    Tier: {{ ucfirst($activeInvitation->template->package_tier ?? 'Simple') }}
                                </span>
                            </div>
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-4); margin-bottom:16px;">
                            <div>
                                <small style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:700;">Lokasi / Venue Akad</small>
                                <span style="font-size:var(--ax-text-xs); color:var(--ax-text-strong); display:block;">
                                    {{ $activeInvitation->event_venue_1 ?? '-' }}
                                </span>
                            </div>

                            <div>
                                <small style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:700;">Masa Aktif Undangan</small>
                                <span style="font-size:var(--ax-text-xs); color:var(--ax-text-strong); display:block;">
                                    {{ $activeInvitation->expires_at ? $activeInvitation->expires_at->format('d M Y') : '1 Tahun (Standar)' }}
                                </span>
                            </div>
                        </div>

                        <!-- Manual Extension Form -->
                        <div style="background:var(--ax-surface-subtle); padding:12px 16px; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border); margin-bottom:12px;">
                            <form action="{{ route('admin.crm.extend', $client->id) }}" method="POST" style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0;">
                                @csrf
                                <input type="hidden" name="invitation_id" value="{{ $activeInvitation->id }}">
                                <div>
                                    <strong style="display:block; font-size:var(--ax-text-xs); color:var(--ax-text-strong);">Perpanjang Masa Aktif Manual</strong>
                                    <span style="font-size:10px; color:var(--ax-text-muted);">Berikan tambahan masa aktif sebagai bonus/kompensasi.</span>
                                </div>
                                <div style="display:flex; align-items:center; gap:8px;">
                                    <select name="days" style="padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:11px; background:var(--ax-surface);">
                                        <option value="30">+30 Hari</option>
                                        <option value="60">+60 Hari</option>
                                        <option value="90">+90 Hari</option>
                                        <option value="365">+1 Tahun</option>
                                    </select>
                                    <button type="submit" class="ax-btn ax-btn--secondary" style="padding:6px 12px; font-size:11px;" onclick="return confirm('Perpanjang masa aktif undangan ini?')">
                                        Perpanjang
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- VIP Subdomain & Managed Status Form -->
                        <div style="background:rgba(83,107,91,0.06); padding:14px 16px; border-radius:var(--ax-radius-md); border:1px solid rgba(83,107,91,0.25);">
                            <form action="{{ route('admin.crm.subdomain', $client->id) }}" method="POST" id="subdomainForm">
                                @csrf
                                <input type="hidden" name="invitation_id" value="{{ $activeInvitation->id }}">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                                    <div style="display:flex; align-items:center; gap:6px;">
                                        <i data-lucide="crown" style="width:16px;height:16px; color:#d97706;"></i>
                                        <strong style="font-size:var(--ax-text-xs); color:var(--ax-text-strong);">Pengaturan Khusus VIP (Subdomain &amp; Pengerjaan)</strong>
                                    </div>
                                    @if($activeInvitation->subdomain)
                                        <a href="{{ $activeInvitation->public_url }}" target="_blank" style="font-size:11px; font-weight:700; color:var(--jk-deepsage); text-decoration:underline;">
                                            Buka {{ $activeInvitation->subdomain }}.{{ config('app.vip_domain', 'janoerkoening.com') }} &rarr;
                                        </a>
                                    @endif
                                </div>

                                <div style="display:grid; grid-template-columns: 1.5fr 1fr; gap:12px; margin-bottom:10px;">
                                    <div>
                                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px; color:var(--ax-text-muted);">
                                            Subdomain Klien:
                                        </label>
                                        <div style="display:flex; align-items:center;">
                                            <input type="text" name="subdomain" id="subdomainInput" value="{{ $activeInvitation->subdomain }}" placeholder="contoh: jati" style="flex:1; padding:7px 10px; border:1px solid var(--ax-border); border-top-left-radius:var(--ax-radius-md); border-bottom-left-radius:var(--ax-radius-md); font-size:12px; font-family:var(--ax-font-mono); background:var(--ax-surface);">
                                            <span style="padding:7px 10px; background:var(--ax-surface-subtle); border:1px solid var(--ax-border); border-left:none; border-top-right-radius:var(--ax-radius-md); border-bottom-right-radius:var(--ax-radius-md); font-size:11px; color:var(--ax-text-muted); font-family:var(--ax-font-mono);">
                                                .{{ config('app.vip_domain', 'janoerkoening.com') }}
                                            </span>
                                        </div>
                                        <small id="subdomainCheckFeedback" style="display:block; font-size:10px; margin-top:4px; color:var(--ax-text-muted);">
                                            Hanya huruf kecil, angka, dan minus. Klik cek untuk verifikasi.
                                        </small>
                                    </div>

                                    <div>
                                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px; color:var(--ax-text-muted);">
                                            Status Pengerjaan Tim:
                                        </label>
                                        <select name="managed_status" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; background:var(--ax-surface);">
                                            <option value="">-- Standar (Self-service) --</option>
                                            @foreach(\App\Models\Invitation::MANAGED_STATUS_LABELS as $key => $lbl)
                                                <option value="{{ $key }}" {{ $activeInvitation->managed_status === $key ? 'selected' : '' }}>{{ $lbl }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div style="display:flex; justify-content:flex-end; gap:8px;">
                                    <button type="button" onclick="checkSubdomainAvailability()" class="ax-btn ax-btn--secondary" style="padding:6px 12px; font-size:11px;">
                                        <i data-lucide="search" style="width:12px;height:12px;"></i>
                                        <span>Cek Ketersediaan</span>
                                    </button>
                                    <button type="submit" class="ax-btn ax-btn--primary" style="padding:6px 14px; font-size:11px;">
                                        <i data-lucide="check" style="width:12px;height:12px;"></i>
                                        <span>Simpan Subdomain</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    @else
                        <div style="padding:24px; text-align:center; color:var(--ax-text-muted);">
                            <i data-lucide="mail-open" style="width:28px;height:28px; margin:0 auto 8px auto; display:block; opacity:0.5;"></i>
                            <span>Klien belum membuat draf undangan.</span>
                        </div>
                    @endif
                </div>
            </section>

            <!-- Card 2: Metrik Keterlibatan (Buku Tamu, Ucapan, Galeri) -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Aktivitas &amp; Interaksi</span>
                        <h3 class="ax-card__title">Statistik Penggunaan Platform</h3>
                    </div>
                </div>
                <div class="ax-card__body">
                    <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--ax-space-4); text-align:center;">
                        <div style="background:var(--ax-surface-subtle); padding:16px; border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                            <span style="font-size:1.5rem; font-weight:700; color:var(--jk-deepsage); display:block;">
                                {{ $activeInvitation ? $activeInvitation->guests->count() : 0 }}
                            </span>
                            <span style="font-size:11px; color:var(--ax-text-muted);">Tamu di Buku Tamu</span>
                        </div>

                        <div style="background:var(--ax-surface-subtle); padding:16px; border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                            <span style="font-size:1.5rem; font-weight:700; color:var(--jk-deepsage); display:block;">
                                {{ $activeInvitation ? $activeInvitation->wishes->count() : 0 }}
                            </span>
                            <span style="font-size:11px; color:var(--ax-text-muted);">Doa &amp; RSVP Masuk</span>
                        </div>

                        <div style="background:var(--ax-surface-subtle); padding:16px; border-radius:var(--ax-radius-lg); border:1px solid var(--ax-border);">
                            <span style="font-size:1.5rem; font-weight:700; color:var(--jk-deepsage); display:block;">
                                {{ $activeInvitation && is_array($activeInvitation->gallery_photos) ? count($activeInvitation->gallery_photos) : 0 }}
                            </span>
                            <span style="font-size:11px; color:var(--ax-text-muted);">Foto Galeri Diunggah</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Card 3: Riwayat Transaksi & Pembayaran -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Finansial &amp; Pesanan</span>
                        <h3 class="ax-card__title">Riwayat Transaksi (LTV: Rp {{ number_format($totalSpent, 0, ',', '.') }})</h3>
                    </div>
                </div>
                <div class="ax-card__body" style="padding:0; overflow-x:auto;">
                    <table class="ax-table" style="width:100%; border-collapse:collapse; font-size:var(--ax-text-xs);">
                        <thead>
                            <tr style="border-bottom:1px solid var(--ax-border); background:var(--ax-surface-subtle); text-align:left;">
                                <th style="padding:10px 14px; font-weight:700;">Kode Order</th>
                                <th style="padding:10px 14px; font-weight:700;">Paket</th>
                                <th style="padding:10px 14px; font-weight:700;">Total Bayar</th>
                                <th style="padding:10px 14px; font-weight:700;">Status</th>
                                <th style="padding:10px 14px; font-weight:700;">Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($client->orders as $o)
                                <tr style="border-bottom:1px solid var(--ax-border);">
                                    <td style="padding:12px 14px; font-weight:700; font-family:monospace;">
                                        {{ $o->order_code }}
                                    </td>
                                    <td style="padding:12px 14px;">
                                        {{ $o->package->name ?? 'Paket' }}
                                    </td>
                                    <td style="padding:12px 14px; font-weight:600;">
                                        Rp {{ number_format($o->total_amount, 0, ',', '.') }}
                                    </td>
                                    <td style="padding:12px 14px;">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $o->payment_status === 'paid' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                            {{ $o->payment_status }}
                                        </span>
                                    </td>
                                    <td style="padding:12px 14px; color:var(--ax-text-muted);">
                                        {{ $o->created_at->format('d M Y H:i') }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" style="padding:24px; text-align:center; color:var(--ax-text-muted);">
                                        Belum ada riwayat pesanan/transaksi.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>

        </div>

        <!-- RIGHT COLUMN: Admin Notes & WhatsApp Outreach Templates -->
        <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
            
            <!-- Card 4: Catatan Khusus Admin (Private Notes) -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Internal Admin</span>
                        <h3 class="ax-card__title">Catatan Follow-Up Klien</h3>
                    </div>
                </div>
                <div class="ax-card__body">
                    <form action="{{ route('admin.crm.notes', $client->id) }}" method="POST">
                        @csrf
                        <div style="margin-bottom:12px;">
                            <label style="display:block; font-size:11px; color:var(--ax-text-muted); margin-bottom:4px;">
                                Catatan ini hanya terlihat oleh admin (rahasia). Tulis riwayat diskusi, janji bayar, atau request khusus klien di sini:
                            </label>
                            <textarea name="admin_notes" rows="5" placeholder="Contoh: Klien minta tolong ubah lagu latar ke pop akustik. Sudah dihubungi via WA tgl 12..." style="width:100%; padding:10px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface); resize:vertical; line-height:1.5;">{{ $client->admin_notes }}</textarea>
                        </div>
                        <div style="display:flex; justify-content:flex-end;">
                            <button type="submit" class="ax-btn ax-btn--primary" style="padding:8px 14px; font-size:11px;">
                                <i data-lucide="save" style="width:13px;height:13px;"></i>
                                <span class="ax-btn__label">Simpan Catatan</span>
                            </button>
                        </div>
                    </form>
                </div>
            </section>

            <!-- Card 5: Template Pesan WhatsApp Cepat -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Outreach &amp; CRM</span>
                        <h3 class="ax-card__title">Template Chat WhatsApp</h3>
                    </div>
                </div>
                <div class="ax-card__body" style="display:flex; flex-direction:column; gap:12px;">
                    @if($cleanPhone)
                        <!-- Template 1: Greeting -->
                        <div style="background:var(--ax-surface-subtle); padding:12px; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                                <strong style="font-size:11px; color:var(--ax-text-strong);">1. Sapaan Ramah &amp; Bantuan</strong>
                                <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($waTemplates['greeting']) }}" target="_blank" class="ax-btn ax-btn--secondary" style="padding:4px 8px; font-size:10px; background:#25D366; color:#fff; border-color:#25D366;">
                                    Kirim WA
                                </a>
                            </div>
                            <p style="font-size:11px; color:var(--ax-text-muted); margin:0; line-height:1.4;">
                                {{ Str::limit($waTemplates['greeting'], 100) }}
                            </p>
                        </div>

                        <!-- Template 2: Followup Draft -->
                        <div style="background:var(--ax-surface-subtle); padding:12px; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                                <strong style="font-size:11px; color:var(--ax-text-strong);">2. Follow Up Draf Belum Bayar</strong>
                                <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($waTemplates['followup_draft']) }}" target="_blank" class="ax-btn ax-btn--secondary" style="padding:4px 8px; font-size:10px; background:#25D366; color:#fff; border-color:#25D366;">
                                    Kirim WA
                                </a>
                            </div>
                            <p style="font-size:11px; color:var(--ax-text-muted); margin:0; line-height:1.4;">
                                {{ Str::limit($waTemplates['followup_draft'], 100) }}
                            </p>
                        </div>

                        <!-- Template 3: Payment Confirm -->
                        <div style="background:var(--ax-surface-subtle); padding:12px; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                                <strong style="font-size:11px; color:var(--ax-text-strong);">3. Konfirmasi Bayar &amp; Live</strong>
                                <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($waTemplates['payment_confirm']) }}" target="_blank" class="ax-btn ax-btn--secondary" style="padding:4px 8px; font-size:10px; background:#25D366; color:#fff; border-color:#25D366;">
                                    Kirim WA
                                </a>
                            </div>
                            <p style="font-size:11px; color:var(--ax-text-muted); margin:0; line-height:1.4;">
                                {{ Str::limit($waTemplates['payment_confirm'], 100) }}
                            </p>
                        </div>

                        <!-- Template 4: H-Countdown -->
                        <div style="background:var(--ax-surface-subtle); padding:12px; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                                <strong style="font-size:11px; color:var(--ax-text-strong);">4. Ucapan Menjelang Hari H</strong>
                                <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($waTemplates['h_countdown']) }}" target="_blank" class="ax-btn ax-btn--secondary" style="padding:4px 8px; font-size:10px; background:#25D366; color:#fff; border-color:#25D366;">
                                    Kirim WA
                                </a>
                            </div>
                            <p style="font-size:11px; color:var(--ax-text-muted); margin:0; line-height:1.4;">
                                {{ Str::limit($waTemplates['h_countdown'], 100) }}
                            </p>
                        </div>
                    @else
                        <div style="padding:16px; text-align:center; color:var(--ax-text-muted); font-size:11px;">
                            Nomor WhatsApp klien tidak tersedia.
                        </div>
                    @endif
                </div>
            </section>

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

@push('scripts')
<script>
function checkSubdomainAvailability() {
    const input = document.getElementById('subdomainInput');
    const feedback = document.getElementById('subdomainCheckFeedback');
    const invId = document.querySelector('input[name="invitation_id"]').value;
    const val = input ? input.value.trim() : '';

    if (!val) {
        feedback.innerHTML = '<span style="color:#d97706;">Subdomain kosong (akan menonaktifkan subdomain).</span>';
        return;
    }

    feedback.innerHTML = '<span style="color:var(--ax-text-muted);">Memeriksa ketersediaan...</span>';

    fetch(`{{ route('admin.crm.check-subdomain') }}?subdomain=${encodeURIComponent(val)}&invitation_id=${invId}`)
        .then(res => res.json())
        .then(data => {
            if (data.valid) {
                feedback.innerHTML = `<span style="color:#16a34a; font-weight:600;">✓ ${data.message} Link: <code>${data.url}</code></span>`;
            } else {
                feedback.innerHTML = `<span style="color:#dc2626; font-weight:600;">✕ ${data.message}</span>`;
            }
        })
        .catch(() => {
            feedback.innerHTML = '<span style="color:#dc2626;">Gagal memeriksa ketersediaan subdomain.</span>';
        });
}
</script>
@endpush