<!DOCTYPE html>
<html lang="bn" class="h-full bg-slate-900">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>লগইন — Teletalk CashVault</title>
    
    <!-- Google Web Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Hind Siliguri"', 'Inter', 'sans-serif'],
                    },
                    colors: {
                        blue: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#22c55e',
                            600: '#00a651', /* Official Teletalk Brand Green */
                            700: '#15803d',
                            800: '#166534',
                            900: '#14532d',
                            950: '#052e16',
                        },
                        indigo: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            400: '#fb923c',
                            500: '#f15a22', /* Official Teletalk Brand Orange */
                            600: '#e04b12',
                            700: '#b83709',
                            800: '#932c07',
                            900: '#7c2404',
                            950: '#431407',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="h-full text-slate-200 flex items-center justify-center p-4 font-sans antialiased bg-slate-950">

    <div class="max-w-md w-full bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 shadow-2xl relative overflow-hidden">
        
        <!-- Background light circle decoration -->
        <span class="absolute -top-10 -right-10 w-24 h-24 bg-blue-600/15 blur-2xl rounded-full block"></span>

        <!-- Brand Icon -->
        <div class="flex flex-col items-center text-center space-y-2 mb-8">
            <span class="text-4xl bg-gradient-to-tr from-blue-600 to-indigo-600 p-3 rounded-2xl text-white shadow-lg">⚡</span>
            <div>
                <h1 class="text-lg font-black tracking-wider text-white font-mono uppercase">Teletalk CashVault</h1>
                <p class="text-xs text-slate-400 font-bold">টেলিটক কর্পোরেট ক্যাশ ও লেজার পোর্টাল</p>
            </div>
        </div>

        @if($errors->any())
            <div class="mb-5 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-2xl p-3.5 leading-relaxed">
                🛑 ত্রুটি: {{ $errors->first() }}
            </div>
        @endif

        @if(session('error'))
            <div class="mb-5 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-2xl p-3.5 leading-relaxed">
                🛑 {{ session('error') }}
            </div>
        @endif

        @if(session('success'))
            <div class="mb-5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-bold rounded-2xl p-3.5 leading-relaxed">
                ✅ {{ session('success') }}
            </div>
        @endif

        <!-- Login Form -->
        <form action="{{ route('login') }}" method="POST" class="space-y-4 text-xs font-bold text-slate-300">
            @csrf

            <div>
                <label class="block mb-1.5 text-slate-400">অফিসিয়াল ইমেইল (User ID) *</label>
                <input type="email" name="email" required placeholder="name@company.com" 
                       value="{{ old('email') }}"
                       class="w-full bg-slate-900 border border-slate-800 rounded-xl p-3 text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all font-mono">
            </div>

            <div>
                <div class="flex items-center justify-between mb-1.5">
                    <label class="text-slate-400">পাসওয়ার্ড (PIN / Profile Key) *</label>
                    <a href="{{ route('password.request') }}" class="text-[10px] text-blue-400 hover:underline font-bold">পাসওয়ার্ড ভুলে গেছেন? (Reset PIN)</a>
                </div>
                <input type="password" name="password" required placeholder="••••••••" 
                       class="w-full bg-slate-900 border border-slate-800 rounded-xl p-3 text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all">
            </div>

            <div class="flex items-center justify-between pt-1">
                <label class="flex items-center gap-2 cursor-pointer text-[10px] text-slate-400">
                    <input type="checkbox" name="remember" class="accent-blue-600 rounded">
                    <span>লগইন সেশন মনে রাখুন (Remember)</span>
                </label>
            </div>

            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-extrabold p-3 rounded-xl shadow-lg shadow-blue-500/10 transition-all text-xs uppercase tracking-wider block mt-2">
                🔒 এনক্রিপ্ট লগইন করুন (Access Vault)
            </button>
        </form>

        <!-- Quick credentials helper info -->
        <div class="mt-8 pt-5 border-t border-slate-900 text-center">
            <h5 class="text-[10px] font-black uppercase text-slate-500 tracking-wider mb-2.5">সেভ করা ডেমো অ্যাকাউন্ট সমূহ (Demo Credentials)</h5>
            <div class="space-y-1.5 text-[9px] text-slate-400">
                <p>🙋‍♂️ **সুপার এডমিন:** `mdashikurcse@gmail.com` | `password`</p>
                <p>👷 **ক্যাশিয়ার কর্মী:** `cashier@teletalkcorp.com` | `password`</p>
                <p>🧐 **অডিট মেম্বার:** `auditor@teletalkcorp.com` | `password`</p>
            </div>
        </div>

    </div>

</body>
</html>
