@extends('layouts.admin')

@yield('title', 'Setup Bot Wizard')

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="mb-10 flex items-center gap-4">
            <a href="{{ route('admin.telegram.index') }}"
                class="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center text-white/40 hover:bg-white/10 hover:text-white transition-all">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h1 class="text-3xl font-bold">Bot Setup Wizard</h1>
                <p class="text-white/40">Ikuti langkah berikut untuk menyambungkan Bot baru.</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <!-- Steps Sidebar -->
            <div class="space-y-4">
                <div class="p-4 rounded-2xl bg-indigo-600 border border-indigo-500 shadow-lg shadow-indigo-600/20">
                    <span class="block text-xs font-bold text-indigo-200 mb-1 uppercase tracking-wider">Langkah 1</span>
                    <p class="font-bold text-sm">Dapatkan Token</p>
                </div>
                <div class="p-4 rounded-2xl bg-white/5 border border-white/5 opacity-40">
                    <span class="block text-xs font-bold text-white/40 mb-1 uppercase tracking-wider">Langkah 2</span>
                    <p class="font-bold text-sm">Input ke Aplikasi</p>
                </div>
                <div class="p-4 rounded-2xl bg-white/5 border border-white/5 opacity-40">
                    <span class="block text-xs font-bold text-white/40 mb-1 uppercase tracking-wider">Langkah 3</span>
                    <p class="font-bold text-sm">Pasang Webhook</p>
                </div>
            </div>

            <!-- Main Content -->
            <div class="md:col-span-3 space-y-8">
                <div class="glass-card rounded-[2.5rem] p-10">
                    <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-sm">1</span>
                        Dapatkan Token dari @BotFather
                    </h2>

                    <div class="prose prose-invert max-w-none text-white/60 space-y-4 mb-10">
                        <p>Untuk membuat bot baru atau menggunakan bot yang sudah ada, Anda perlu mendapatkan <b>API
                                Token</b> dari Telegram:</p>
                        <ol class="list-decimal list-inside space-y-3">
                            <li>Buka aplikasi Telegram dan cari <a href="https://t.me/BotFather" target="_blank"
                                    class="text-indigo-400 font-bold hover:underline">@BotFather</a>.</li>
                            <li>Ketikkan perintah <code class="bg-white/10 px-2 py-0.5 rounded text-white">/newbot</code>
                                untuk membuat bot baru.</li>
                            <li>Ikuti instruksi untuk nama dan username bot.</li>
                            <li>Salin kode token yang diberikan (contoh: <code
                                    class="bg-white/10 px-2 py-0.5 rounded text-white">123456:ABC-DEF...</code>).</li>
                        </ol>
                    </div>

                    <div class="p-6 rounded-2xl bg-indigo-600/10 border border-indigo-500/20 flex items-start gap-4">
                        <div
                            class="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center text-indigo-400 mt-1">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-indigo-300 mb-1">Sudah punya Token?</h4>
                            <p class="text-sm text-white/40">Jika Anda sudah memiliki token, Anda bisa langsung
                                memasukkannya di halaman <b>Pengaturan</b>.</p>
                            <a href="{{ route('admin.settings') }}"
                                class="mt-4 inline-block text-indigo-400 font-bold text-sm hover:underline">Ke Pengaturan
                                &rarr;</a>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-between px-10">
                    <p class="text-sm text-white/20">Langkah 1 dari 3</p>
                    <div class="flex gap-4">
                        <a href="{{ route('admin.telegram.index') }}"
                            class="px-8 py-3 rounded-2xl font-bold text-white/40 hover:text-white transition-all">
                            Batal
                        </a>
                        <a href="{{ route('admin.settings') }}"
                            class="bg-white text-black px-10 py-3 rounded-2xl font-bold hover:bg-white/90 transition-all">
                            Lanjut ke Langkah 2
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection