<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
            <flux:text>
                Integrasikan WhatsApp untuk pengiriman invoice, kode verifikasi, serta
                broadcast voucher atau informasi kepada pelanggan secara cepat dan efikien.
            </flux:text>
        </div>
    </div>

    <div class="mt-6 space-y-4">
        <flux:callout icon="{{ $whatsapp['zawa_id'] ? 'check-circle' : 'link' }}"
            color="{{ $whatsapp['zawa_id'] ? 'emerald' : 'gray' }}">
            <flux:heading>Langkah 1: Buat Sesi WA</flux:heading>
            <flux:callout.text>
                Klik tombol untuk membuat sesi WhatsApp dan mendapatkan <code>sessionId</code>.
            </flux:callout.text>

            <x-slot name="actions">
                @if (!$whatsapp['zawa_id'])
                    <flux:button wire:click="createSession">Buat Sesi</flux:button>
                @else
                    <span class="text-sm text-emerald-600 font-medium">✅ Sesi sudah dibuat</span>
                @endif
            </x-slot>
        </flux:callout>

        <flux:callout icon="{{ $whatsapp['qr_code'] ? 'check-circle' : 'qr-code' }}"
            color="{{ $whatsapp['qr_code'] ? 'emerald' : 'gray' }}"
            class="{{ $whatsapp['zawa_id'] ? '' : 'opacity-50 pointer-events-none' }}">
            <flux:heading>Langkah 2: Generate QR Code</flux:heading>
            <flux:callout.text>
                Gunakan <code>sessionId</code> untuk men-generate QR code yang akan discan di WhatsApp.
            </flux:callout.text>

            <x-slot name="actions">
                @if (!$whatsapp['qr_code'] && $whatsapp['zawa_id'])
                    <flux:button wire:click="generateQrCode">Generate QR Code</flux:button>
                @endif
            </x-slot>

            @if ($whatsapp['qr_code'])
                <div class="mt-4 flex flex-col">
                    <img src="{{ $whatsapp['qr_code'] }}" alt="QR Code WhatsApp" class="w-56 h-56 rounded-lg shadow" />
                    <p class="mt-2 text-sm text-emerald-600 font-medium">Scan QR ini di WhatsApp</p>
                </div>
            @endif
        </flux:callout>
    </div>

</flux:main>
