@extends('layouts.admin')

@section('title', 'Pengaturan')

@section('content')
    <header class="mb-10">
        <h1 class="text-4xl font-black text-white tracking-tight">Pengaturan</h1>
        <p class="text-white/40 font-medium">Konfigurasi Bot Telegram dan Webhook.</p>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-8">
            <!-- Telegram Configuration -->
            <div class="premium-card rounded-[3rem] p-8 bg-indigo-600/5 border border-white/5 shadow-2xl">
                <h2 class="text-xl font-black text-white tracking-tight mb-8 flex items-center gap-3">
                    <i class="fab fa-telegram text-indigo-400"></i>
                    Konfigurasi Telegram
                </h2>
                <form action="{{ route('admin.saveSettings') }}" method="POST" class="space-y-6">
                    @csrf
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-white/40">Bot Token (dari @BotFather)</label>
                        <input type="text" name="tg_bot_token" value="{{ $user->bot_token }}"
                            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">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-white/40">Channel ID (Tempat simpan file)</label>
                        <input type="text" name="channel_id" value="{{ $user->channel_id }}"
                            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">
                        <p class="text-xs text-white/20">Contoh: -100123456789</p>
                    </div>

                    <hr class="border-white/5 my-6">

                    <h3 class="text-lg font-bold mb-4 text-indigo-300">Force Subscribe (Wajib Join)</h3>
                    <p class="text-sm text-white/40 mb-4">Daftarkan hingga 5 ID Channel/Grup yang wajib diikuti user.</p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @php $fsubChannels = $user->fsub_channels ?? []; @endphp
                        @for($i = 0; $i < 5; $i++)
                            <div class="space-y-2">
                                <label class="block text-xs font-medium text-white/30">Channel Slot #{{ $i + 1 }}</label>
                                <input type="text" name="fsub_channels[]" value="{{ $fsubChannels[$i] ?? '' }}"
                                    placeholder="-100..."
                                    class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 outline-none focus:border-indigo-500 transition-all text-sm text-white/80">
                            </div>
                        @endfor
                    </div>

                    <div class="space-y-2 mt-4">
                        <label class="block text-sm font-medium text-white/40">Pesan Force Subscribe</label>
                        <textarea name="fsub_message" rows="3"
                            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="Silakan bergabung dengan channel di bawah ini untuk mendapatkan file:">{{ $user->fsub_message }}</textarea>
                    </div>

                    <button type="submit"
                        class="bg-indigo-600 hover:bg-indigo-500 px-8 py-4 rounded-2xl font-bold transition-all shadow-lg shadow-indigo-600/20">
                        Simpan Konfigurasi
                    </button>
                </form>
            </div>

            <!-- Webhook Configuration -->
            <div class="premium-card rounded-[3rem] p-8 bg-purple-600/5 border border-white/5 shadow-2xl">
                <h2 class="text-xl font-black text-white tracking-tight mb-8 flex items-center gap-3">
                    <i class="fas fa-plug text-purple-400"></i>
                    Webhook Bot
                </h2>
                <div class="space-y-4">
                    <p class="text-sm text-white/60">Gunakan fitur ini untuk menghubungkan Bot Telegram Anda dengan aplikasi
                        web ini secara otomatis.</p>
                    <div class="bg-black/20 p-4 rounded-xl border border-white/5">
                        <p class="text-xs text-white/40 mb-1">Webhook URL Unique Anda:</p>
                        <code
                            class="text-indigo-300 break-all text-sm">{{ url('/api/telegram/webhook/' . $user->id) }}</code>
                    </div>
                    <div class="flex gap-4">
                        <form action="{{ route('admin.setupWebhook') }}" method="POST">
                            @csrf
                            <button type="submit"
                                class="bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 px-6 py-3 rounded-xl text-sm font-semibold transition-all text-indigo-300">
                                Pasang Webhook
                            </button>
                        </form>
                        <form action="#" method="POST">
                            @csrf
                            <button type="submit"
                                class="text-red-400 hover:text-red-300 px-6 py-3 text-sm font-semibold transition-all">
                                Hapus Webhook
                            </button>
                        </form>
                    </div>
                    @if(session('webhook_status'))
                        <div class="mt-4 p-4 bg-indigo-500/10 rounded-xl text-indigo-300 text-xs">
                            {!! session('webhook_status') !!}
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="space-y-8">
            <!-- Info Card -->
            <div class="glass-card p-6 rounded-3xl bg-indigo-600/10">
                <h3 class="font-bold mb-3">Tips</h3>
                <ul class="text-sm text-white/60 space-y-3">
                    <li class="flex gap-2">
                        <span class="text-indigo-400">•</span>
                        Pastikan Bot sudah menjadi Admin di Channel tujuan.
                    </li>
                    <li class="flex gap-2">
                        <span class="text-indigo-400">•</span>
                        Webhook membutuhkan HTTPS/SSL agar bisa berfungsi.
                    </li>
                    <li class="flex gap-2">
                        <span class="text-indigo-400">•</span>
                        Update Toko/Channel jika bot tidak merespon.
                    </li>
                </ul>
            </div>
        </div>
    </div>
@endsection