@extends('layouts.admin')

@section('title', 'Manage Admins')

@section('content')
    <header class="mb-10 flex items-center justify-between">
        <div>
            <h1 class="text-4xl font-black text-white tracking-tight">Manage Admins</h1>
            <p class="text-white/40 font-medium">Control platform access and monitor user accounts.</p>
        </div>
        <a href="{{ route('super.admins.create') }}"
            class="px-8 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-black uppercase tracking-widest transition-all shadow-xl shadow-indigo-600/20 text-sm">
            Tambah Admin Manual
        </a>
    </header>

    <div class="glass-card rounded-[3rem] overflow-hidden border border-white/5">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="text-[10px] font-black text-white/20 uppercase tracking-[0.2em] border-b border-white/5">
                        <th class="px-8 py-6">Admin User</th>
                        <th class="px-8 py-6">Plan / Status</th>
                        <th class="px-8 py-6">Password Awal</th>
                        <th class="px-8 py-6">Expiry</th>
                        <th class="px-8 py-6">Bot Status</th>
                        <th class="px-8 py-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @foreach($admins as $admin)
                        <tr class="hover:bg-white/[0.02] transition-colors">
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-4">
                                    <div
                                        class="w-12 h-12 rounded-2xl bg-indigo-600/10 flex items-center justify-center text-indigo-400 font-black">
                                        {{ strtoupper(substr($admin->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <p class="font-bold text-white">{{ $admin->name }}</p>
                                        <p class="text-xs text-white/20 tracking-wide">{{ $admin->email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                <div class="flex flex-col">
                                    <span class="text-sm font-bold text-white">{{ $admin->plan?->name ?? 'No Plan' }}</span>
                                    @if($admin->is_trial)
                                        <span class="text-[10px] text-amber-500 font-black uppercase">Trial</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                @if($admin->initial_password)
                                    <div class="flex items-center gap-3 group/pass">
                                        <code id="pass-{{ $admin->id }}" class="bg-indigo-500/20 px-3 py-1 rounded-lg text-indigo-300 text-xs font-mono select-all blur-[4px] group-hover/pass:blur-none transition-all duration-300">
                                            {{ $admin->initial_password }}
                                        </code>
                                        <button type="button" onclick="togglePass('pass-{{ $admin->id }}', this)" class="text-white/20 hover:text-indigo-400 transition-colors">
                                            <i class="fas fa-eye text-xs"></i>
                                        </button>
                                    </div>
                                @else
                                    <span class="text-white/20 italic text-[10px] uppercase font-black tracking-widest text-xs">System Only</span>
                                @endif
                            </td>
                            <td class="px-8 py-6">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-white/60">
                                        {{ $admin->subscription_expires_at ? $admin->subscription_expires_at->format('d M Y') : 'Never' }}
                                    </span>
                                    @if($admin->subscription_expires_at && $admin->subscription_expires_at->isPast())
                                        <span class="text-[10px] text-red-500 font-black uppercase">Expired</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-2">
                                    <div class="w-2 h-2 rounded-full {{ $admin->bot_token ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]' : 'bg-white/10' }}"></div>
                                    <span class="text-[10px] font-black uppercase tracking-widest {{ $admin->bot_token ? 'text-emerald-400' : 'text-white/20' }}">
                                        {{ $admin->bot_token ? 'Connected' : 'Offline' }}
                                    </span>
                                </div>
                            </td>
                            <td class="px-8 py-6 text-right">
                                <form action="{{ route('super.admins.toggle-block', $admin) }}" method="POST" class="inline">
                                    @csrf
                                    @if($admin->is_blocked)
                                        <button type="submit"
                                            class="px-6 py-2.5 rounded-xl bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500 hover:text-white transition-all text-xs font-black uppercase tracking-widest border border-emerald-500/20">
                                            Activate
                                        </button>
                                    @else
                                        <button type="submit"
                                            class="px-6 py-2.5 rounded-xl bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white transition-all text-xs font-black uppercase tracking-widest border border-red-500/20">
                                            Block Access
                                        </button>
                                    @endif
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function togglePass(id, btn) {
        const el = document.getElementById(id);
        const icon = btn.querySelector('i');
        
        if (el.classList.contains('blur-[4px]')) {
            el.classList.remove('blur-[4px]');
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            el.classList.add('blur-[4px]');
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
</script>
@endpush