@extends('layouts.admin')

@yield('title', 'Broadcast Pesan')

@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">Broadcast Pesan</h1>
                <p class="text-white/40">Kirim pesan ke seluruh user yang pernah menggunakan bot.</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2 space-y-8">
                <div class="glass-card rounded-[2.5rem] p-10">
                    <form action="{{ route('admin.telegram.broadcast.send') }}" method="POST" class="space-y-6">
                        @csrf
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-white/40">Isi Pesan Broadcast</label>
                            <textarea name="message" rows="8" required
                                class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-indigo-500 transition-all text-white/80"
                                placeholder="Tulis pesan Anda di sini... (Support HTML)"></textarea>
                            <p class="text-xs text-white/20">Anda bisa menggunakan tag HTML seperti &lt;b&gt;tebal&lt;/b&gt;
                                atau &lt;i&gt;miring&lt;/i&gt;.</p>
                        </div>

                        <button type="submit"
                            class="w-full bg-indigo-600 hover:bg-indigo-500 px-8 py-4 rounded-2xl font-bold transition-all shadow-lg shadow-indigo-600/20 flex items-center justify-center gap-3">
                            <i class="fas fa-paper-plane"></i> Kirim Broadcast Sekarang
                        </button>
                    </form>
                </div>
            </div>

            <div class="space-y-8">
                <div class="glass-card rounded-[2rem] p-8">
                    <h3 class="font-bold mb-6 flex items-center gap-2">
                        <i class="fas fa-history text-indigo-400"></i> User Terbaru
                    </h3>
                    <div class="space-y-4">
                        @foreach($users as $user)
                            <div class="flex items-center gap-4">
                                <div
                                    class="w-10 h-10 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-400 text-xs">
                                    {{ substr($user->name, 0, 1) }}
                                </div>
                                <div class="overflow-hidden">
                                    <p class="text-sm font-bold truncate">{{ $user->name }}</p>
                                    <p class="text-xs text-white/20">@ {{ $user->username ?? 'User' }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="p-8 rounded-[2rem] bg-amber-500/10 border border-amber-500/20">
                    <h4 class="font-bold text-amber-500 mb-2 flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle"></i> Penting
                    </h4>
                    <p class="text-xs text-white/40 leading-relaxed">Hindari spam berlebihan untuk mencegah Bot Anda
                        di-banned atau di-block oleh user. Gunakan fitur ini dengan bijak.</p>
                </div>
            </div>
        </div>
    </div>
@endsection