@extends('admin.auth_layout')

@section('content')
    <div class="relative z-10 w-full animate-slide-up">
        <!-- Logo Icon -->
        <div class="flex flex-col items-center mb-8">
            <div class="h-12 w-12 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 text-white rounded-2xl flex items-center justify-center text-xl font-black shadow-lg shadow-indigo-500/20 mb-3">
                DV
            </div>
            <h2 class="text-xl font-black text-white tracking-wide uppercase">Admin Control Room</h2>
            <p class="text-slate-400 text-xs font-semibold mt-1">Please sign in to access client billing & logs</p>
        </div>

        @if($errors->any())
            <div class="bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-semibold rounded-2xl p-4 mb-6 flex items-center gap-2.5">
                <i class="bi bi-exclamation-triangle-fill text-sm"></i>
                <span>{{ $errors->first() }}</span>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.login.post') }}" class="space-y-5">
            @csrf
            <div>
                <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Email Address</label>
                <div class="relative">
                    <input name="email" type="email" value="{{ old('email') }}" required placeholder="admin@example.com" class="w-full bg-slate-950/40 text-white border border-white/10 rounded-2xl px-4 py-3.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 transition-all focus:outline-none pl-10" />
                    <i class="bi bi-envelope absolute left-3.5 top-3.5 text-slate-500 text-sm"></i>
                </div>
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Security Key (Password)</label>
                <div class="relative">
                    <input name="password" type="password" required placeholder="••••••••" class="w-full bg-slate-950/40 text-white border border-white/10 rounded-2xl px-4 py-3.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 transition-all focus:outline-none pl-10" />
                    <i class="bi bi-lock absolute left-3.5 top-3.5 text-slate-500 text-sm"></i>
                </div>
            </div>
            <div class="pt-2">
                <button type="submit" class="w-full py-3.5 px-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-2xl shadow-lg shadow-indigo-500/20 hover:opacity-95 active:scale-98 transition-all font-extrabold text-sm focus:outline-none flex items-center justify-center gap-2">
                    <span>Authenticate Account</span>
                    <i class="bi bi-shield-lock-fill"></i>
                </button>
            </div>
        </form>
    </div>
@endsection