@extends('layout.app')

@section('title', 'Pengaturan WhatsApp Basic Gateway - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="WhatsApp Automation Center" 
    subtitle="Kelola koneksi, kirim otomatis ke pelanggan, tagihan, dan notifikasi lain"
    :breadcrumbs="[
        ['name' => 'Pengaturan', 'url' => route('pengaturan.dashboard')],
        ['name' => 'WhatsApp Basic']
    ]"
>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0 me-2" id="refresh-stats-btn">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">bar_chart</i> Refresh Statistik
    </button>
    <button type="button" class="btn btn-sm bg-gradient-info mb-0" id="btnCheckStatus">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">check_circle</i> Cek Status
    </button>
</x-material-page-header>

<div class="container-fluid py-4">
    @if(session('success'))
        <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
            <span class="alert-text">{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
            <span class="alert-text">{{ session('error') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row mb-4">
        <div class="col-xl-4 col-md-6 mb-3">
            <div class="card h-100 mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-md icon-shape bg-gradient-success shadow-success shadow text-center border-radius-lg me-3">
                            <i class="material-symbols-rounded opacity-10">phone_android</i>
                        </div>
                        <div>
                            <h6 class="mb-1">1. Login Gateway</h6>
                            <p class="mb-0 text-sm text-muted">Scan QR sekali lalu biarkan perangkat WhatsApp tetap aktif.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 mb-3">
            <div class="card h-100 mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-md icon-shape bg-gradient-info shadow-info shadow text-center border-radius-lg me-3">
                            <i class="material-symbols-rounded opacity-10">send</i>
                        </div>
                        <div>
                            <h6 class="mb-1">2. Cron Kirim Tagihan</h6>
                            <p class="mb-0 text-sm text-muted">Scheduler menarik data tagihan & mengirim ke nomor pelanggan otomatis.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 mb-3">
            <div class="card h-100 mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-md icon-shape bg-gradient-warning shadow-warning shadow text-center border-radius-lg me-3">
                            <i class="material-symbols-rounded opacity-10">bar_chart</i>
                        </div>
                        <div>
                            <h6 class="mb-1">3. Monitoring</h6>
                            <p class="mb-0 text-sm text-muted">Gunakan statistik & log untuk memastikan semua pesan terkirim.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-8">
            <!-- Device Status & QR Code -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">phone_android</i> Status Device & QR Login
                    </h6>
                    <button type="button" class="btn btn-sm bg-gradient-primary mb-0" id="btnInitialize">
                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">qr_code</i> Initialize Session
                    </button>
                </div>
                <div class="card-body">
                    <!-- Device Status -->
                    <div class="mb-4">
                        <h5 class="mb-3">Device Status</h5>
                        <div id="deviceStatus" class="p-3 bg-light rounded">
                            <p class="text-muted mb-0">Click "Cek Status" to see device status</p>
                        </div>
                    </div>

                    <!-- QR Code Section -->
                    <div id="qrSection" style="display: none;">
                        <h5 class="mb-3">QR Code Login</h5>
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <div id="qrCodeContainer">
                                    <p class="text-muted">Generating QR code...</p>
                                </div>
                                <p class="text-muted mt-3 mb-0">
                                    <i class="fas fa-info-circle"></i> Scan QR code ini dengan aplikasi WhatsApp mobile Anda
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Automation Overview -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Automation Overview
                        </h6>
                        <small class="text-muted">Tagihan dikirim otomatis sesuai konfigurasi di bawah.</small>
                    </div>
                    <span class="badge bg-gradient-{{ data_get($automationConfig, 'enabled', true) ? 'success' : 'secondary' }} font-weight-bold text-uppercase">
                        {{ data_get($automationConfig, 'enabled', true) ? 'Aktif' : 'Nonaktif' }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <p class="mb-1 text-muted text-xs">Session ID</p>
                                <h5 class="mb-0">{{ data_get($automationConfig, 'session_id', 'default') }}</h5>
                            </div>
                            <div class="mb-3">
                                <p class="mb-1 text-muted text-xs">Jadwal Harian</p>
                                <h5 class="mb-0">{{ data_get($automationConfig, 'tagihan.schedule_time', '08:00') }} WIB</h5>
                            </div>
                            <div class="mb-3">
                                <p class="mb-1 text-muted text-xs">Rentang Tagihan</p>
                                <h5 class="mb-0">≤ {{ data_get($automationConfig, 'tagihan.days_before_due', 3) }} hari sebelum jatuh tempo</h5>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <p class="mb-1 text-muted text-xs">Limit Pesan / Hari</p>
                                <h5 class="mb-0">{{ number_format(data_get($automationConfig, 'tagihan.daily_limit', 100)) }}</h5>
                            </div>
                            <div class="mb-3">
                                <p class="mb-1 text-muted text-xs">Tagihan Lewat Tempo</p>
                                <h5 class="mb-0">
                                    {{ data_get($automationConfig, 'tagihan.include_overdue', true) ? 'Ikut dikirim' : 'Tidak dikirim' }}
                                </h5>
                            </div>
                            <div class="mb-3">
                                <p class="mb-1 text-muted text-xs">Dry Run</p>
                                <h5 class="mb-0">
                                    {{ data_get($automationConfig, 'tagihan.dry_run', false) ? 'Simulasi' : 'Produksi' }}
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-secondary mt-3 mb-0">
                        <strong>Command yang berjalan otomatis:</strong>
                        <code class="d-block mt-1">php artisan whatsapp:auto-send --type=tagihan --session={{ data_get($automationConfig, 'session_id', 'default') }}</code>
                        <small class="d-block text-muted mt-2">Pastikan cron menjalankan `php artisan schedule:run` tiap menit.</small>
                    </div>
                </div>
            </div>

            <!-- Template Pesan Tagihan -->
            @php
                $defaultTagihanTemplate = trim(config('whatsapp-basic.templates.tagihan')) ?: <<<'EOT'
Halo {nama_pelanggan},

Ini adalah pemberitahuan tagihan layanan internet Anda periode {periode}.

Detail Tagihan:
• ID Layanan: {nomor_pelanggan}
• Total Tagihan: Rp {total_tagihan}
• Jatuh Tempo: {jatuh_tempo}

Silakan selesaikan pembayaran melalui tautan berikut:
{payment_link}

Invoice PDF: {invoice_url}

Jika sudah melakukan pembayaran, abaikan pesan ini.
Terima kasih telah menggunakan layanan kami.
- Tim ISP
EOT;
            @endphp
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">description</i> Template Pesan Tagihan
                        </h6>
                        <small class="text-muted">Gunakan placeholder sesuai data pelanggan & tagihan.</small>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-sm bg-gradient-secondary mb-0" id="resetTagihanTemplate">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">refresh</i> Reset
                        </button>
                        <button type="button" class="btn btn-sm bg-gradient-success mb-0" id="copyTagihanTemplate">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">content_copy</i> Salin & Lampirkan
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form id="tagihanTemplateForm">
                        @csrf
                        <div class="alert alert-info mb-3">
                            Placeholder tersedia:
                            <code>{nama_pelanggan}</code>,
                            <code>{nomor_pelanggan}</code>,
                            <code>{nomor_invoice}</code>,
                            <code>{periode}</code>,
                            <code>{total_tagihan}</code>,
                            <code>{total_tagihan_currency}</code>,
                            <code>{jatuh_tempo}</code>,
                            <code>{payment_link}</code>,
                            <code>{invoice_url}</code>,
                            <code>{tagihan_status}</code>,
                            <code>{nomor_whatsapp}</code>
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Isi Template</label>
                            <textarea id="tagihanTemplateField"
                                      class="form-control font-monospace @error('tagihan_template') is-invalid @enderror"
                                      rows="9"
                                      spellcheck="false"
                                      required>{{ $defaultTagihanTemplate }}</textarea>
                            <small class="text-muted">Edit sesuai kebutuhan, placeholder akan diganti otomatis oleh sistem.</small>
                            @error('tagihan_template')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group mb-0">
                            <label class="form-label">Lampiran Invoice (opsional)</label>
                            <input type="url"
                                   class="form-control @error('invoice_link') is-invalid @enderror"
                                   id="tagihanInvoiceLink"
                                   placeholder="https://your-domain.com/invoice/INV-001.pdf">
                            <small class="text-muted">Isikan URL invoice / PDF. Link akan otomatis ditambahkan saat template disalin.</small>
                            @error('invoice_link')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </form>
                    <div id="tagihanTemplateResult" class="mt-3 text-sm text-muted">Template siap digunakan.</div>
                </div>
            </div>

            <!-- Upcoming Tagihan -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">calendar_today</i> Tagihan Siap Dikirim
                    </h6>
                    <span class="badge bg-gradient-primary text-white text-uppercase">
                        {{ $upcomingTagihan->count() }} pelanggan
                    </span>
                </div>
                <div class="card-body">
                    @if($upcomingTagihan->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pelanggan</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Invoice</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Jatuh Tempo</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Total</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($upcomingTagihan as $tagihan)
                                        <tr>
                                            <td>
                                                <strong class="text-xs font-weight-bold">{{ $tagihan->pelanggan_nama }}</strong><br>
                                                <small class="text-xs text-muted">{{ $tagihan->nomor_pelanggan }}</small>
                                            </td>
                                            <td><span class="badge bg-gradient-secondary">{{ $tagihan->nomor_invoice ?? 'INV-'.$tagihan->id }}</span></td>
                                            <td><span class="text-xs font-weight-bold">{{ \Carbon\Carbon::parse($tagihan->tanggal_jatuh_tempo)->format('d M Y') }}</span></td>
                                            <td><span class="text-xs font-weight-bold">Rp {{ number_format($tagihan->total_tagihan, 0, ',', '.') }}</span></td>
                                            <td>
                                                <span class="badge bg-gradient-{{ $tagihan->status_tagihan === 'Jatuh Tempo' ? 'danger' : 'warning' }}">
                                                    {{ $tagihan->status_tagihan }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">receipt_long</i>
                            <p class="text-muted mb-0">Belum ada tagihan dalam antrean pengiriman.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Automation Logs -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">history</i> Log Pengiriman Otomatis
                    </h6>
                    <span class="badge bg-gradient-secondary text-white text-uppercase">{{ $recentLogs->count() }} terbaru</span>
                </div>
                <div class="card-body">
                    @if($recentLogs->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Waktu</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pelanggan</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nomor</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentLogs as $log)
                                        @php
                                            $payload = json_decode($log->payload, true) ?? [];
                                        @endphp
                                        <tr>
                                            <td><span class="text-xs font-weight-bold">{{ \Carbon\Carbon::parse($log->created_at)->format('d M Y H:i') }}</span></td>
                                            <td>
                                                <strong class="text-xs font-weight-bold">{{ data_get($payload, 'pelanggan.nama', '-') }}</strong><br>
                                                <small class="text-xs text-muted">Invoice: {{ data_get($payload, 'tagihan.nomor_invoice', '-') }}</small>
                                            </td>
                                            <td><span class="text-xs font-weight-bold">{{ $log->target_number }}</span></td>
                                            <td>
                                                <span class="badge bg-gradient-{{ $log->status === 'sent' ? 'success' : ($log->status === 'failed' ? 'danger' : 'warning') }}">
                                                    {{ ucfirst($log->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">history</i>
                            <p class="text-muted mb-0">Belum ada log pengiriman otomatis.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Webhook Configuration -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">webhook</i> Konfigurasi Webhook
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <form id="webhookForm">
                        @csrf
                        <div class="form-group mb-3">
                            <label class="form-label">Webhook URL <span class="text-danger">*</span></label>
                            <input type="url" 
                                   class="form-control @error('webhook_url') is-invalid @enderror" 
                                   name="webhook_url" 
                                   placeholder="https://your-domain.com/webhook" 
                                   required>
                            <small class="text-muted">URL yang akan menerima notifikasi pesan masuk</small>
                            @error('webhook_url')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Events <span class="text-danger">*</span></label>
                            <select class="form-control @error('events') is-invalid @enderror" name="events[]" multiple required>
                                <option value="messages" selected>Messages</option>
                                <option value="status" selected>Status</option>
                            </select>
                            <small class="text-muted">Pilih event yang akan dikirim ke webhook</small>
                            @error('events')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Secret Token (Opsional)</label>
                            <input type="text" 
                                   class="form-control @error('secret_token') is-invalid @enderror" 
                                   name="secret_token" 
                                   placeholder="Random secret token untuk keamanan">
                            <small class="text-muted">Token akan dikirim di header X-Webhook-Token</small>
                            @error('secret_token')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn bg-gradient-warning mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Set Webhook
                            </button>
                        </div>
                    </form>
                    <div id="webhookResult" class="mt-3"></div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <!-- Active Sessions -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">person</i> Active Sessions
                    </h6>
                </div>
                <div class="card-body">
                    <div id="sessionsList">
                        @if($sessions->count() > 0)
                            @foreach($sessions as $session)
                                <div class="mb-3 p-3 bg-light rounded">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <strong>Session: {{ $session->session_id }}</strong>
                                        <span class="badge bg-gradient-{{ $session->status === 'ready' ? 'success' : ($session->status === 'qr_ready' ? 'warning' : 'secondary') }}">
                                            {{ ucfirst($session->status) }}
                                        </span>
                                    </div>
                                    @if($session->phone_number)
                                        <p class="mb-1 text-sm"><strong>Number:</strong> {{ $session->phone_number }}</p>
                                    @endif
                                    @if($session->device_info)
                                        <p class="mb-1 text-sm"><strong>Device:</strong> {{ $session->device_info }}</p>
                                    @endif
                                    @if($session->connected_at)
                                        <p class="mb-0 text-sm text-muted">
                                            <strong>Connected:</strong> {{ \Carbon\Carbon::parse($session->connected_at)->format('d M Y H:i') }}
                                        </p>
                                    @endif
                                </div>
                            @endforeach
                        @else
                            <p class="text-muted text-center">Belum ada session aktif</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">bar_chart</i> Statistik
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase text-xs">Total Pesan</h5>
                            <span class="h2 font-weight-bold" id="stat-total">{{ $stats['total_messages'] }}</span>
                        </div>
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase text-xs">Masuk</h5>
                            <span class="h2 font-weight-bold text-info" id="stat-incoming">{{ $stats['incoming_messages'] }}</span>
                        </div>
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase text-xs">Keluar</h5>
                            <span class="h2 font-weight-bold text-success" id="stat-outgoing">{{ $stats['outgoing_messages'] }}</span>
                        </div>
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase text-xs">Connected</h5>
                            <span class="h2 font-weight-bold text-primary" id="stat-sessions">{{ $stats['connected_sessions'] }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Blueprint Otomasi -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">auto_awesome</i> Blueprint Otomasi
                    </h6>
                </div>
                <div class="card-body">
                    <div class="timeline timeline-one-side" data-timeline-axis-style="dashed">
                        <div class="timeline-block">
                            <span class="timeline-step bg-gradient-success text-white">
                                <i class="ni ni-mobile-button"></i>
                            </span>
                            <div class="timeline-content">
                                <small class="text-muted font-weight-bold">Langkah 1</small>
                                <h5 class="mt-1 mb-0">Hubungkan Device</h5>
                                <p class="text-sm text-muted mb-0">Scan QR sekali, sistem akan menjaga sesi agar tetap aktif dan siap kirim.</p>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-gradient-info text-white">
                                <i class="ni ni-single-copy-04"></i>
                            </span>
                            <div class="timeline-content">
                                <small class="text-muted font-weight-bold">Langkah 2</small>
                                <h5 class="mt-1 mb-0">Siapkan Template</h5>
                                <p class="text-sm text-muted mb-0">Gunakan composer di kiri untuk membuat pesan tagihan, pengingat, atau broadcast promo.</p>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-gradient-warning text-white">
                                <i class="ni ni-sound-wave"></i>
                            </span>
                            <div class="timeline-content">
                                <small class="text-muted font-weight-bold">Langkah 3</small>
                                <h5 class="mt-1 mb-0">Aktifkan Webhook</h5>
                                <p class="text-sm text-muted mb-0">Terima event pesan masuk/status dan trigger automasi lanjutan (misal auto-close tiket).</p>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-gradient-danger text-white">
                                <i class="ni ni-chart-bar-32"></i>
                            </span>
                            <div class="timeline-content">
                                <small class="text-muted font-weight-bold">Langkah 4</small>
                                <h5 class="mt-1 mb-0">Monitor & Iterasi</h5>
                                <p class="text-sm text-muted mb-0">Gunakan statistik, debug panel, dan log permintaan untuk memastikan SLA tercapai.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Webhooks List -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">send</i> Webhooks Aktif
                    </h6>
                </div>
                <div class="card-body">
                    <div id="webhooksList">
                        @if($webhooks->count() > 0)
                            @foreach($webhooks as $webhook)
                                <div class="mb-2 p-2 bg-light rounded">
                                    <p class="mb-1 text-sm"><strong>URL:</strong> {{ Str::limit($webhook->webhook_url, 40) }}</p>
                                    <p class="mb-0 text-xs text-muted">
                                        Events: {{ json_decode($webhook->events, true) ? implode(', ', json_decode($webhook->events, true)) : 'All' }}
                                    </p>
                                </div>
                            @endforeach
                        @else
                            <p class="text-muted text-center text-sm">Belum ada webhook yang dikonfigurasi</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Actions
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <button type="button" class="btn bg-gradient-danger mb-0 w-100" id="btnLogout">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">logout</i> Logout Device
                    </button>
                    <small class="text-muted d-block mt-2 text-center">Hapus session dan logout dari WhatsApp</small>
                </div>
            </div>

            <!-- Uji Coba Kirim Pesan -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">send</i> Uji Coba Kirim Pesan
                    </h6>
                    <span class="badge bg-gradient-success text-white text-uppercase">Manual</span>
                </div>
                <div class="card-body pt-3">
                    <form id="testMessageForm">
                        @csrf
                        <div class="form-group mb-3">
                            <label class="form-label">Nomor WhatsApp <span class="text-danger">*</span></label>
                            <input type="text"
                                   class="form-control @error('number') is-invalid @enderror"
                                   name="number"
                                   placeholder="Contoh: 6281234567890"
                                   required>
                            <small class="text-muted">Gunakan format internasional tanpa tanda +.</small>
                            @error('number')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Pesan <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('message') is-invalid @enderror"
                                      name="message"
                                      rows="3"
                                      placeholder="Tulis pesan singkat untuk uji coba"
                                      required></textarea>
                            @error('message')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn bg-gradient-success mb-0 w-100">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">send</i> Kirim Pesan Uji
                            </button>
                        </div>
                    </form>
                    <div id="testMessageResult" class="mt-3 text-sm text-muted"></div>
                    <small class="d-block mt-2 text-muted">
                        Pesan dikirim menggunakan session aktif saat ini. Gunakan fitur ini untuk memastikan gateway berfungsi.
                    </small>
                </div>
            </div>

            <!-- Debug Panel -->
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">bug_report</i> Debug Panel
                    </h6>
                    <div>
                        <button type="button" class="btn btn-sm bg-gradient-warning mb-0 me-1" id="btnToggleDebug">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">visibility</i> Toggle Debug
                        </button>
                        <button type="button" class="btn btn-sm bg-gradient-secondary mb-0" id="btnClearDebug">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">delete</i> Clear
                        </button>
                    </div>
                </div>
                <div class="card-body pt-3" id="debugPanel" style="display: none;">
                    <div class="mb-3">
                        <h6 class="font-weight-bold">Configuration:</h6>
                        <pre id="debugConfig" class="bg-light p-2 rounded small" style="max-height: 150px; overflow-y: auto;"></pre>
                    </div>
                    <div class="mb-3">
                        <h6 class="font-weight-bold">Error Logs:</h6>
                        <div id="debugLogs" class="bg-dark text-light p-2 rounded small" style="max-height: 300px; overflow-y: auto; font-family: monospace;">
                            <div class="text-muted">No errors yet...</div>
                        </div>
                    </div>
                    <div>
                        <h6 class="font-weight-bold">Request/Response Logs:</h6>
                        <div id="debugRequests" class="bg-dark text-light p-2 rounded small" style="max-height: 300px; overflow-y: auto; font-family: monospace;">
                            <div class="text-muted">No requests yet...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    let sessionId = 'default';
    let qrCheckInterval = null;
    let debugMode = false;
    let errorLogs = [];
    let requestLogs = [];

    // Debug Functions
    function logError(error, context = {}) {
        const errorLog = {
            timestamp: new Date().toISOString(),
            error: error.message || error,
            stack: error.stack,
            context: context
        };
        errorLogs.push(errorLog);
        
        if (debugMode) {
            updateDebugLogs();
        }
        
        console.error('[WhatsApp Basic Error]', errorLog);
    }

    function logRequest(url, method, requestData, responseData, status) {
        const requestLog = {
            timestamp: new Date().toISOString(),
            url: url,
            method: method,
            request: requestData,
            response: responseData,
            status: status
        };
        requestLogs.push(requestLog);
        
        if (debugMode) {
            updateDebugRequests();
        }
        
        console.log('[WhatsApp Basic Request]', requestLog);
    }

    function updateDebugLogs() {
        const logsContainer = document.getElementById('debugLogs');
        if (!logsContainer) return;
        
        if (errorLogs.length === 0) {
            logsContainer.innerHTML = '<div class="text-muted">No errors yet...</div>';
            return;
        }
        
        let html = '';
        errorLogs.slice(-20).reverse().forEach((log, index) => {
            html += `<div class="mb-2 p-2 bg-danger text-white rounded">
                <div class="font-weight-bold">[${new Date(log.timestamp).toLocaleTimeString()}] Error #${errorLogs.length - index}</div>
                <div>${log.error}</div>
                ${log.context && Object.keys(log.context).length > 0 ? `<div class="text-warning small mt-1">Context: ${JSON.stringify(log.context, null, 2)}</div>` : ''}
                ${log.stack ? `<div class="text-muted small mt-1" style="font-size: 10px;">${log.stack}</div>` : ''}
            </div>`;
        });
        logsContainer.innerHTML = html;
        logsContainer.scrollTop = logsContainer.scrollHeight;
    }

    function updateDebugRequests() {
        const requestsContainer = document.getElementById('debugRequests');
        if (!requestsContainer) return;
        
        if (requestLogs.length === 0) {
            requestsContainer.innerHTML = '<div class="text-muted">No requests yet...</div>';
            return;
        }
        
        let html = '';
        requestLogs.slice(-20).reverse().forEach((log, index) => {
            const statusClass = log.status >= 200 && log.status < 300 ? 'text-success' : 'text-danger';
            html += `<div class="mb-2 p-2 bg-secondary rounded">
                <div class="font-weight-bold ${statusClass}">[${new Date(log.timestamp).toLocaleTimeString()}] ${log.method} ${log.url} - ${log.status}</div>
                ${log.request ? `<div class="text-info small mt-1">Request: <pre class="mb-0" style="font-size: 10px;">${JSON.stringify(log.request, null, 2)}</pre></div>` : ''}
                ${log.response ? `<div class="text-warning small mt-1">Response: <pre class="mb-0" style="font-size: 10px;">${JSON.stringify(log.response, null, 2)}</pre></div>` : ''}
            </div>`;
        });
        requestsContainer.innerHTML = html;
        requestsContainer.scrollTop = requestsContainer.scrollHeight;
    }

    function updateDebugConfig() {
        const configContainer = document.getElementById('debugConfig');
        if (!configContainer) return;
        
        const config = {
            sessionId: sessionId,
            csrfToken: csrfToken ? 'Set' : 'Not Set',
            qrCheckInterval: qrCheckInterval ? 'Active' : 'Inactive',
            currentUrl: window.location.href,
            userAgent: navigator.userAgent,
            timestamp: new Date().toISOString()
        };
        
        configContainer.textContent = JSON.stringify(config, null, 2);
    }

    // Toggle Debug Panel
    const btnToggleDebug = document.getElementById('btnToggleDebug');
    const debugPanel = document.getElementById('debugPanel');
    if (btnToggleDebug && debugPanel) {
        btnToggleDebug.addEventListener('click', function() {
            debugMode = !debugMode;
            debugPanel.style.display = debugMode ? 'block' : 'none';
            btnToggleDebug.innerHTML = debugMode 
                ? '<i class="fas fa-eye-slash"></i> Hide Debug' 
                : '<i class="fas fa-eye"></i> Show Debug';
            
            if (debugMode) {
                updateDebugConfig();
                updateDebugLogs();
                updateDebugRequests();
            }
        });
    }

    // Clear Debug Logs
    const btnClearDebug = document.getElementById('btnClearDebug');
    if (btnClearDebug) {
        btnClearDebug.addEventListener('click', function() {
            if (confirm('Clear all debug logs?')) {
                errorLogs = [];
                requestLogs = [];
                updateDebugLogs();
                updateDebugRequests();
            }
        });
    }

    // Enhanced fetch wrapper for logging
    function debugFetch(url, options = {}) {
        const method = options.method || 'GET';
        let requestData = null;
        
        // Handle different body types
        if (options.body) {
            if (options.body instanceof FormData) {
                // Convert FormData to object for logging
                requestData = {};
                for (let pair of options.body.entries()) {
                    requestData[pair[0]] = pair[1];
                }
            } else if (typeof options.body === 'string') {
                try {
                    requestData = JSON.parse(options.body);
                } catch (e) {
                    requestData = options.body;
                }
            } else {
                requestData = options.body;
            }
        }
        
        return fetch(url, options)
            .then(async response => {
                const responseData = await response.json().catch(async () => {
                    const text = await response.text();
                    return { text: text, _raw: true };
                });
                logRequest(url, method, requestData, responseData, response.status);
                return { response, data: responseData };
            })
            .catch(error => {
                logError(error, { url, method, requestData });
                logRequest(url, method, requestData, { error: error.message }, 0);
                throw error;
            });
    }

    // Helper function untuk set result
    function setResult(el, message, isSuccess) {
        if (!el) return;
        el.textContent = message;
        el.classList.remove('text-success', 'text-danger', 'text-muted');
        el.classList.add(isSuccess ? 'text-success' : 'text-danger');
    }

    // Helper function untuk show error notification
    function showErrorNotification(data) {
        let errorMsg = '<strong>Error:</strong> ' + (data.error || data.message || 'Failed to initialize session');
        
        if (data.details) {
            errorMsg += '<br><br><strong>Details:</strong><br>' + data.details.replace(/\n/g, '<br>');
        }
        
        if (data.solution) {
            errorMsg += '<br><br><strong>Solution:</strong><br>' + data.solution.replace(/\n/g, '<br>');
        }
        
        // Create alert element
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger alert-dismissible fade show';
        alertDiv.innerHTML = `
            <i class="ni ni-fat-remove mr-2"></i>
            ${errorMsg}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        `;
        
        // Insert at the top of the container
        const container = document.querySelector('.container-fluid.mt--7');
        if (container) {
            container.insertBefore(alertDiv, container.firstChild);
            // Auto dismiss after 10 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 10000);
        } else {
            // Fallback to alert if container not found
            alert(errorMsg.replace(/<br>/g, '\n').replace(/<strong>|<\/strong>/g, ''));
        }
    }

    // Helper function untuk show info notification
    function showNotification(type, title, message) {
        const alertClass = type === 'info' ? 'alert-info' : (type === 'success' ? 'alert-success' : 'alert-warning');
        const icon = type === 'info' ? 'ni ni-info' : (type === 'success' ? 'ni ni-check-bold' : 'ni ni-notification-70');
        
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert ${alertClass} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="${icon} mr-2"></i>
            <strong>${title}:</strong> ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        `;
        
        const container = document.querySelector('.container-fluid.mt--7');
        if (container) {
            container.insertBefore(alertDiv, container.firstChild);
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        } else {
            alert(message);
        }
    }

    // Initialize Session
    const btnInitialize = document.getElementById('btnInitialize');
    if (btnInitialize) {
        btnInitialize.addEventListener('click', function() {
            btnInitialize.disabled = true;
            btnInitialize.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Initializing...';

            debugFetch(`{{ route('whatsapp-basic.session.initialize') }}?session_id=${sessionId}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                }
            })
            .then(({ response, data }) => {
                if (!response.ok) {
                    // Create error object with response data
                    const error = new Error(data.error || data.message || 'Failed to initialize session');
                    error.responseData = data;
                    logError(error, { action: 'initialize', sessionId });
                    throw error;
                }
                return data;
            })
            .then(data => {
                if (data.success) {
                    sessionId = data.session_id || sessionId;
                    if (data.note) {
                        // Show info message in a better way
                        showNotification('info', 'Info', data.note);
                    }
                    document.getElementById('qrSection').style.display = 'block';
                    checkQRCode();
                } else {
                    showErrorNotification(data);
                    console.error('Initialize failed:', data);
                }
            })
            .catch(error => {
                console.error('Initialize error:', error);
                logError(error, { action: 'initialize', sessionId });
                
                if (error.responseData) {
                    showErrorNotification(error.responseData);
                } else {
                    showErrorNotification({
                        error: error.message || 'Failed to initialize session',
                        details: 'Network error or unexpected response',
                        solution: 'Please check your network connection and try again'
                    });
                }
            })
            .finally(() => {
                btnInitialize.disabled = false;
                btnInitialize.innerHTML = '<i class="fas fa-qrcode"></i> Initialize Session';
            });
        });
    }

    // Template Tagihan Interactions
    const copyTemplateBtn = document.getElementById('copyTagihanTemplate');
    const resetTemplateBtn = document.getElementById('resetTagihanTemplate');
    const tagihanTemplateField = document.getElementById('tagihanTemplateField');
    const tagihanInvoiceLinkInput = document.getElementById('tagihanInvoiceLink');
    const tagihanTemplateResult = document.getElementById('tagihanTemplateResult');
    const defaultTagihanTemplate = tagihanTemplateField ? tagihanTemplateField.defaultValue.trim() : '';

    function setTemplateStatus(message, variant = 'muted') {
        if (!tagihanTemplateResult) return;
        tagihanTemplateResult.textContent = message;
        tagihanTemplateResult.className = `mt-3 text-sm text-${variant}`;
    }

    if (tagihanTemplateResult) {
        setTemplateStatus('Template siap digunakan.', 'muted');
    }

    if (tagihanTemplateField) {
        tagihanTemplateField.addEventListener('input', () => {
            setTemplateStatus('Template diperbarui. Klik "Salin & Lampirkan" untuk menggunakan versi terbaru.', 'warning');
        });
    }

    if (tagihanInvoiceLinkInput) {
        tagihanInvoiceLinkInput.addEventListener('input', () => {
            setTemplateStatus('Link invoice akan dilampirkan saat menyalin.', 'info');
        });
    }

    if (resetTemplateBtn && tagihanTemplateField) {
        resetTemplateBtn.addEventListener('click', () => {
            tagihanTemplateField.value = defaultTagihanTemplate;
            if (tagihanInvoiceLinkInput) {
                tagihanInvoiceLinkInput.value = '';
            }
            setTemplateStatus('Template dikembalikan ke versi default.', 'success');
        });
    }

    async function copyTextToClipboard(text) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(text);
        } else {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            textarea.remove();
        }
    }

    if (copyTemplateBtn && tagihanTemplateField) {
        copyTemplateBtn.addEventListener('click', async function() {
            let text = tagihanTemplateField.value.trim();
            const invoiceLink = tagihanInvoiceLinkInput ? tagihanInvoiceLinkInput.value.trim() : '';

            if (!text) {
                setTemplateStatus('Template tidak boleh kosong.', 'danger');
                tagihanTemplateField.focus();
                return;
            }

            if (invoiceLink) {
                if (text.includes('{invoice_url}')) {
                    text = text.replace(/\{invoice_url\}/g, invoiceLink);
                } else {
                    text += `\n\nLampiran Invoice:\n${invoiceLink}`;
                }
            }

            try {
                await copyTextToClipboard(text);
                copyTemplateBtn.innerHTML = '<i class="fas fa-check"></i> Tersalin!';
                setTemplateStatus('Template berhasil disalin ke clipboard.', 'success');
                setTimeout(() => {
                    copyTemplateBtn.innerHTML = '<i class="fas fa-copy"></i> Salin & Lampirkan';
                }, 2000);
            } catch (error) {
                logError(error, { action: 'copyTemplate' });
                setTemplateStatus('Gagal menyalin template. Silakan salin manual.', 'danger');
                alert('Gagal menyalin template. Silakan salin manual.');
            }
        });
    }

    // Check QR Code
    function checkQRCode() {
        if (qrCheckInterval) {
            clearInterval(qrCheckInterval);
        }

        let checkCount = 0;
        const maxChecks = 150; // 5 minutes (150 * 2 seconds)

        qrCheckInterval = setInterval(function() {
            checkCount++;
            
            debugFetch(`{{ route('whatsapp-basic.session.qr', ':sessionId') }}`.replace(':sessionId', sessionId), {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                }
            })
            .then(({ response, data }) => {
                const qrContainer = document.getElementById('qrCodeContainer');
                
                // QR code is ready
                if (data.success && data.qr_code) {
                    qrContainer.innerHTML = `
                        <div class="text-center">
                            <img src="${data.qr_code}" alt="QR Code" class="img-fluid mb-3" style="max-width: 300px; border: 2px solid #ddd; padding: 10px; background: white;">
                            <p class="text-muted mb-0">
                                <i class="fas fa-info-circle"></i> Scan QR code ini dengan aplikasi WhatsApp mobile Anda
                            </p>
                            <p class="text-muted small mt-2">
                                Status: <span class="badge badge-warning">${data.status || 'QR Ready'}</span>
                            </p>
                        </div>
                    `;
                } 
                // Already connected
                else if (data.connected || data.status === 'ready' || data.status === 'authenticated') {
                    clearInterval(qrCheckInterval);
                    document.getElementById('qrSection').style.display = 'none';
                    showNotification('success', 'Berhasil', 'WhatsApp berhasil terhubung!');
                    checkDeviceStatus();
                    setTimeout(() => location.reload(), 2000);
                }
                // QR not ready yet - show status
                else {
                    const statusMessage = data.message || data.error || 'Menunggu QR code...';
                    const statusBadge = data.status ? `<span class="badge badge-info">${data.status}</span>` : '';
                    
                    qrContainer.innerHTML = `
                        <div class="text-center p-4">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p class="text-muted mb-2">${statusMessage}</p>
                            ${statusBadge ? `<p class="mb-0">${statusBadge}</p>` : ''}
                            ${data.note ? `<p class="text-warning small mt-2"><i class="fas fa-exclamation-triangle"></i> ${data.note}</p>` : ''}
                            <p class="text-muted small mt-3">Checking... (${checkCount}/${maxChecks})</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('QR check error:', error);
                logError(error, { action: 'checkQR', sessionId, checkCount });
                
                const qrContainer = document.getElementById('qrCodeContainer');
                qrContainer.innerHTML = `
                    <div class="text-center p-4">
                        <p class="text-danger">
                            <i class="fas fa-exclamation-triangle"></i> Error checking QR code
                        </p>
                        <p class="text-muted small">${error.message || 'Unknown error'}</p>
                        ${debugMode ? `<p class="text-warning small mt-2">Check Debug Panel for details</p>` : ''}
                    </div>
                `;
            });

            // Stop checking after max attempts
            if (checkCount >= maxChecks) {
                clearInterval(qrCheckInterval);
                const qrContainer = document.getElementById('qrCodeContainer');
                qrContainer.innerHTML = `
                    <div class="alert alert-warning">
                        <i class="fas fa-clock"></i> QR code timeout. Silakan klik "Initialize Session" lagi.
                    </div>
                `;
            }
        }, 2000);
    }

    // Check Device Status
    const btnCheckStatus = document.getElementById('btnCheckStatus');
    if (btnCheckStatus) {
        btnCheckStatus.addEventListener('click', function() {
            checkDeviceStatus();
        });
    }

    function checkDeviceStatus() {
        debugFetch(`{{ route('whatsapp-basic.device.status') }}?session_id=${sessionId}`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        })
        .then(({ response, data }) => {
            const statusEl = document.getElementById('deviceStatus');
            
            // Handle error response
            if (!data.success) {
                let errorHtml = '<div class="alert alert-warning mb-0">';
                errorHtml += '<strong><i class="fas fa-exclamation-triangle"></i> Error:</strong> ' + (data.error || 'Failed to get device status');
                if (data.details) {
                    errorHtml += '<br><small class="text-muted">' + data.details + '</small>';
                }
                if (data.solution) {
                    errorHtml += '<br><small class="text-info"><i class="fas fa-lightbulb"></i> ' + data.solution.replace(/\n/g, '<br>') + '</small>';
                }
                if (data.message) {
                    errorHtml += '<br><small>' + data.message + '</small>';
                }
                
                // If session not found, show button to initialize
                if (data.status === 'not_found' || data.error === 'Session not found') {
                    errorHtml += '<br><br><button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById(\'btnInitialize\').click();">';
                    errorHtml += '<i class="fas fa-qrcode"></i> Initialize Session Sekarang';
                    errorHtml += '</button>';
                }
                
                errorHtml += '</div>';
                statusEl.innerHTML = errorHtml;
                return;
            }
            
            // Display status information
            let html = '<div class="row">';
            html += '<div class="col-md-6 mb-2"><strong>Status:</strong> ';
            html += data.connected ? '<span class="badge badge-success">Connected</span>' : '<span class="badge badge-danger">Disconnected</span>';
            html += '</div>';
            if (data.status) {
                html += '<div class="col-md-6 mb-2"><strong>Status Detail:</strong> <span class="badge badge-info">' + data.status + '</span></div>';
            }
            if (data.number) {
                html += '<div class="col-md-6 mb-2"><strong>Number:</strong> ' + data.number + '</div>';
            }
            if (data.device) {
                html += '<div class="col-md-6 mb-2"><strong>Device:</strong> ' + data.device + '</div>';
                if (String(data.device).toLowerCase() === 'unknown device') {
                    html += '<div class="col-12 mb-2"><div class="alert alert-warning mb-0 py-2 px-3"><i class="fas fa-info-circle mr-1"></i>Perangkat belum terdeteksi sepenuhnya. Pastikan WhatsApp di ponsel sudah terbuka dan coba ulangi proses inisialisasi bila perlu.</div></div>';
                }
            }
            if (data.connected_at) {
                html += '<div class="col-md-6 mb-2"><strong>Connected At:</strong> ' + new Date(data.connected_at).toLocaleString() + '</div>';
            }
            if (data.last_activity) {
                html += '<div class="col-md-6 mb-2"><strong>Last Activity:</strong> ' + new Date(data.last_activity).toLocaleString() + '</div>';
            }
            if (data.message) {
                html += '<div class="col-12 mt-2"><small class="text-muted">' + data.message + '</small></div>';
            }
            html += '</div>';
            statusEl.innerHTML = html;
        })
        .catch(error => {
            logError(error, { action: 'checkDeviceStatus', sessionId });
            const statusEl = document.getElementById('deviceStatus');
            statusEl.innerHTML = `
                <div class="alert alert-danger mb-0">
                    <strong><i class="fas fa-exclamation-circle"></i> Error:</strong> Failed to check device status
                    <br><small class="text-muted">${error.message || 'Network error or unexpected response'}</small>
                    ${debugMode ? '<br><small class="text-warning">Check Debug Panel for details</small>' : ''}
                </div>
            `;
        });
    }

    // Automation Composer
    const autoMessageForm = document.getElementById('autoMessageForm');
    if (autoMessageForm) {
        const autoTemplateSelect = document.getElementById('autoTemplateSelect');
        const autoPreview = document.getElementById('autoMessagePreview');
        const autoMessageField = document.getElementById('autoMessageField');
        const autoResultEl = document.getElementById('autoMessageResult');
        const autoFields = autoMessageForm.querySelectorAll('[data-auto-field]');
        const autoPelangganInput = document.getElementById('autoPelangganSearch');
        const autoNumberInput = autoMessageForm.querySelector('input[name="number"]');
        const toggleManualBtn = document.getElementById('toggleManualNumber');
        const pelangganOptions = Array.isArray(window.whatsappPelangganOptions) ? window.whatsappPelangganOptions : [];
        let numberLocked = true;

        if (autoNumberInput) {
            autoNumberInput.readOnly = true;
        }
        function normalizePhone(number) {
            if (!number) return '';
            let digits = String(number).replace(/[^0-9]/g, '');
            if (!digits) {
                return '';
            }
            if (digits.startsWith('0')) {
                digits = '62' + digits.substring(1);
            } else if (!digits.startsWith('62')) {
                digits = '62' + digits;
            }
            return digits;
        }

        function findPelangganByInput(value) {
            if (!value) return null;
            const lowered = value.toLowerCase();
            return pelangganOptions.find(item => {
                const label = `${item.nama} (${item.nomor_pelanggan})`.toLowerCase();
                return label === lowered ||
                    (item.nomor_pelanggan && item.nomor_pelanggan.toLowerCase() === lowered) ||
                    (item.nama && item.nama.toLowerCase() === lowered);
            }) || null;
        }

        function applyPelangganToForm(pelanggan) {
            if (!pelanggan) {
                return;
            }

            const formattedPhone = normalizePhone(pelanggan.nomor_telepon);
            if (autoNumberInput && formattedPhone && (numberLocked || !autoNumberInput.value)) {
                autoNumberInput.value = formattedPhone;
            }

            const namaField = autoMessageForm.querySelector('[data-auto-field="customer_name"]');
            if (namaField && pelanggan.nama) {
                namaField.value = pelanggan.nama;
            }

            const serviceField = autoMessageForm.querySelector('[data-auto-field="service_code"]');
            if (serviceField && pelanggan.nomor_pelanggan) {
                serviceField.value = pelanggan.nomor_pelanggan;
            }

            renderAutoPreview();
        }

        function handlePelangganInput() {
            const match = findPelangganByInput(autoPelangganInput.value);
            if (match) {
                applyPelangganToForm(match);
            }
        }

        if (autoPelangganInput) {
            autoPelangganInput.addEventListener('change', handlePelangganInput);
            autoPelangganInput.addEventListener('input', handlePelangganInput);
        }

        if (toggleManualBtn && autoNumberInput) {
            toggleManualBtn.addEventListener('click', function() {
                numberLocked = !numberLocked;
                autoNumberInput.readOnly = numberLocked;
                toggleManualBtn.textContent = numberLocked ? 'Ubah manual' : 'Kunci otomatis';
                toggleManualBtn.classList.toggle('text-danger', !numberLocked);
                if (numberLocked) {
                    handlePelangganInput();
                }
            });
        }


        const currencyFormatter = new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            maximumFractionDigits: 0
        });

        function getAutoFieldValue(key) {
            const field = autoMessageForm.querySelector(`[data-auto-field="${key}"]`);
            return field && field.value ? field.value.trim() : '';
        }

        function formatCurrency(value) {
            if (!value) return '';
            const amount = Number(value);
            if (Number.isNaN(amount)) {
                return value;
            }
            return currencyFormatter.format(amount);
        }

        const templateBuilders = {
            tagihan: (data) => {
                const lines = [
                    `Halo ${data.customer_name || 'Pelanggan ISP'},`,
                    '',
                    'Berikut detail tagihan layanan internet Anda:',
                    data.service_code ? `• ID Layanan: ${data.service_code}` : '',
                    data.invoice_amount ? `• Total: *${formatCurrency(data.invoice_amount)}*` : '',
                    data.due_date ? `• Jatuh Tempo: ${data.due_date}` : '',
                    '',
                    data.payment_link ? `Bayar cepat: ${data.payment_link}` : '',
                    data.additional_notes || '',
                    '',
                    'Terima kasih sudah menggunakan layanan kami.',
                    'Tim ISP'
                ];
                return lines.filter(Boolean).join('\n');
            },
            pengingat: (data) => {
                const lines = [
                    `Halo ${data.customer_name || 'Pelanggan'},`,
                    '',
                    'Ini adalah pengingat jatuh tempo layanan internet Anda.',
                    data.due_date ? `Jatuh tempo pada ${data.due_date}.` : '',
                    data.invoice_amount ? `Nominal yang perlu dibayar: ${formatCurrency(data.invoice_amount)}.` : '',
                    data.service_code ? `Referensi layanan: ${data.service_code}.` : '',
                    '',
                    data.payment_link ? `Silakan selesaikan pembayaran melalui ${data.payment_link}` : '',
                    data.additional_notes || '',
                    '',
                    'Jika sudah membayar, abaikan pesan ini. Terima kasih.'
                ];
                return lines.filter(Boolean).join('\n');
            },
            informasi: (data) => {
                const lines = [
                    `Hai ${data.customer_name || 'Sahabat ISP'},`,
                    '',
                    'Kami memiliki update terbaru terkait layanan Anda:',
                    data.service_code ? `- Layanan: ${data.service_code}` : '',
                    data.additional_notes || '- Tidak ada catatan tambahan.',
                    '',
                    data.payment_link ? `Detail lebih lanjut: ${data.payment_link}` : '',
                    'Tetap terhubung dan nikmati pengalaman internet terbaik bersama kami!'
                ];
                return lines.filter(Boolean).join('\n');
            }
        };

        function renderAutoPreview() {
            if (!autoPreview || !autoMessageField) return;
            const templateKey = (autoTemplateSelect && autoTemplateSelect.value) || 'tagihan';
            const builder = templateBuilders[templateKey] || templateBuilders.tagihan;
            const payload = {
                customer_name: getAutoFieldValue('customer_name'),
                service_code: getAutoFieldValue('service_code'),
                invoice_amount: getAutoFieldValue('invoice_amount'),
                due_date: getAutoFieldValue('due_date'),
                payment_link: getAutoFieldValue('payment_link'),
                additional_notes: getAutoFieldValue('additional_notes')
            };

            const message = builder(payload).trim();
            autoMessageField.value = message;

            if (message) {
                autoPreview.innerHTML = message.replace(/\n/g, '<br>');
            } else {
                autoPreview.innerHTML = '<span class="text-muted">Lengkapi form untuk melihat preview pesan otomatis.</span>';
            }
        }

        renderAutoPreview();

        if (autoTemplateSelect) {
            autoTemplateSelect.addEventListener('change', renderAutoPreview);
        }

        autoFields.forEach(field => {
            field.addEventListener('input', renderAutoPreview);
        });

        autoMessageForm.addEventListener('submit', function(e) {
            e.preventDefault();
            renderAutoPreview();

            if (!autoMessageField.value.trim()) {
                setResult(autoResultEl, 'Lengkapi data template sebelum mengirim.', false);
                return;
            }

            setResult(autoResultEl, 'Mengirim pesan otomatis...', true);

            const formData = new FormData(autoMessageForm);
            formData.set('message', autoMessageField.value.trim());
            formData.append('session_id', sessionId);

            debugFetch('{{ route("whatsapp-basic.message.send") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(({ response, data }) => {
                if (data.success) {
                    setResult(autoResultEl, 'Pesan otomatis berhasil dikirim!', true);
                    autoMessageForm.reset();
                    renderAutoPreview();
                } else {
                    setResult(autoResultEl, 'Error: ' + (data.error || 'Gagal mengirim pesan otomatis'), false);
                    logError(new Error(data.error || 'Failed to send auto message'), { action: 'sendAutoMessage', data });
                }
            })
            .catch(error => {
                logError(error, { action: 'sendAutoMessage' });
                setResult(autoResultEl, 'Gagal mengirim pesan otomatis', false);
            });
        });
    }

    // Send Test Message
    const testMessageForm = document.getElementById('testMessageForm');
    if (testMessageForm) {
        testMessageForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const resultEl = document.getElementById('testMessageResult');
            setResult(resultEl, 'Mengirim pesan...', true);

            const formData = new FormData(testMessageForm);
            formData.append('session_id', sessionId);

            debugFetch('{{ route("whatsapp-basic.message.send") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(({ response, data }) => {
                if (data.success) {
                    setResult(resultEl, 'Pesan berhasil dikirim!', true);
                    testMessageForm.reset();
                } else {
                    setResult(resultEl, 'Error: ' + (data.error || 'Failed to send message'), false);
                    logError(new Error(data.error || 'Failed to send message'), { action: 'sendMessage', data });
                }
            })
            .catch(error => {
                logError(error, { action: 'sendMessage' });
                setResult(resultEl, 'Failed to send message', false);
            });
        });
    }

    // Send Media
    const sendMediaForm = document.getElementById('sendMediaForm');
    if (sendMediaForm) {
        sendMediaForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const resultEl = document.getElementById('sendMediaResult');
            setResult(resultEl, 'Mengirim media...', true);

            const formData = new FormData(sendMediaForm);
            formData.append('session_id', sessionId);

            debugFetch('{{ route("whatsapp-basic.media.send") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(({ response, data }) => {
                if (data.success) {
                    setResult(resultEl, 'Media berhasil dikirim!', true);
                    sendMediaForm.reset();
                } else {
                    setResult(resultEl, 'Error: ' + (data.error || 'Failed to send media'), false);
                    logError(new Error(data.error || 'Failed to send media'), { action: 'sendMedia', data });
                }
            })
            .catch(error => {
                logError(error, { action: 'sendMedia' });
                setResult(resultEl, 'Failed to send media', false);
            });
        });
    }

    // Set Webhook
    const webhookForm = document.getElementById('webhookForm');
    if (webhookForm) {
        webhookForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const resultEl = document.getElementById('webhookResult');
            setResult(resultEl, 'Mengkonfigurasi webhook...', true);

            const formData = new FormData(webhookForm);
            const events = Array.from(webhookForm.querySelectorAll('select[name="events[]"] option:checked')).map(opt => opt.value);

            const data = {
                webhook_url: formData.get('webhook_url'),
                events: events.length > 0 ? events : ['messages', 'status'],
                secret_token: formData.get('secret_token') || null
            };

            debugFetch('{{ route("whatsapp-basic.webhook.set") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            })
            .then(({ response, data: responseData }) => {
                if (responseData.success) {
                    setResult(resultEl, 'Webhook berhasil dikonfigurasi!', true);
                    setTimeout(() => location.reload(), 1500);
                } else {
                    setResult(resultEl, 'Error: ' + (responseData.error || 'Failed to set webhook'), false);
                    logError(new Error(responseData.error || 'Failed to set webhook'), { action: 'setWebhook', data: responseData });
                }
            })
            .catch(error => {
                logError(error, { action: 'setWebhook' });
                setResult(resultEl, 'Failed to set webhook', false);
            });
        });
    }

    // Logout Device
    const btnLogout = document.getElementById('btnLogout');
    if (btnLogout) {
        btnLogout.addEventListener('click', function() {
            if (!confirm('Apakah Anda yakin ingin logout dari WhatsApp? Session akan dihapus.')) {
                return;
            }

            btnLogout.disabled = true;
            btnLogout.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Logging out...';

            const formData = new FormData();
            formData.append('session_id', sessionId);

            debugFetch('{{ route("whatsapp-basic.device.logout") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(({ response, data }) => {
                if (data.success) {
                    alert('Device berhasil di-logout');
                    location.reload();
                } else {
                    alert('Error: ' + (data.error || 'Failed to logout'));
                    logError(new Error(data.error || 'Failed to logout'), { action: 'logout', data });
                    btnLogout.disabled = false;
                    btnLogout.innerHTML = '<i class="ni ni-user-run"></i> Logout Device';
                }
            })
            .catch(error => {
                logError(error, { action: 'logout' });
                alert('Failed to logout device');
                btnLogout.disabled = false;
                btnLogout.innerHTML = '<i class="ni ni-user-run"></i> Logout Device';
            });
        });
    }

    // Refresh Stats
    const refreshStatsBtn = document.getElementById('refresh-stats-btn');
    if (refreshStatsBtn) {
        refreshStatsBtn.addEventListener('click', function() {
            location.reload();
        });
    }

    // Auto check status on load
    checkDeviceStatus();
    
    // Update config periodically
    setInterval(() => {
        if (debugMode) {
            updateDebugConfig();
        }
    }, 5000);
    
    // Log page load
    console.log('[WhatsApp Basic] Page loaded', {
        sessionId: sessionId,
        url: window.location.href,
        timestamp: new Date().toISOString()
    });
});
</script>
@endsection