<!DOCTYPE html>
<html lang="id" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login — POS UMKM</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>tailwind.config = { theme: { extend: { fontFamily: { sans: ['Plus Jakarta Sans','sans-serif'] } } } }</script>
</head>
<body class="h-full bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 font-sans flex items-center justify-center p-4">

<div class="w-full max-w-sm">
    @php 
        $storeName = \App\Models\Setting::get('store_name', 'POS UMKM');
        $storeLogo = \App\Models\Setting::get('store_logo');
    @endphp
    {{-- Logo --}}
    <div class="text-center mb-8">
        @if($storeLogo)
            <img src="{{ asset($storeLogo) }}" class="inline-flex w-24 h-24 object-contain mb-4 drop-shadow-2xl">
        @else
            <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-500 rounded-2xl shadow-2xl shadow-blue-500/40 mb-4">
                <span class="text-3xl font-black text-white">{{ substr($storeName, 0, 1) }}</span>
            </div>
        @endif
        <h1 class="text-2xl font-bold text-white uppercase tracking-wider">{{ $storeName }}</h1>
        <p class="text-slate-400 text-sm mt-1">Silakan masuk ke sistem kasir</p>
    </div>

    {{-- Card --}}
    <div class="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-2xl">
        @if($errors->any())
        <div class="mb-4 px-4 py-3 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
            {{ $errors->first() }}
        </div>
        @endif

        <form method="POST" action="{{ route('login.post') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-1.5">Username</label>
                <input
                    type="text" name="username" value="{{ old('username') }}"
                    class="w-full px-4 py-2.5 bg-white/10 border border-white/20 rounded-xl text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                    placeholder="Masukkan username" autofocus required>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
                <div class="relative">
                    <input
                        type="password" name="password" id="pwd"
                        class="w-full px-4 py-2.5 bg-white/10 border border-white/20 rounded-xl text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                        placeholder="••••••••" required>
                    <button type="button" onclick="togglePwd()" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white text-xs transition">
                        👁
                    </button>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" name="remember" id="remember" class="rounded">
                <label for="remember" class="text-sm text-slate-400">Ingat saya</label>
            </div>

            <button type="submit"
                class="w-full py-2.5 bg-blue-500 hover:bg-blue-400 text-white font-semibold rounded-xl transition shadow-lg shadow-blue-500/30 text-sm">
                Masuk ke Sistem
            </button>
        </form>

        {{-- Demo credentials --}}
        <div class="mt-5 pt-5 border-t border-white/10">
            <p class="text-xs text-slate-500 text-center mb-3">Akun demo:</p>
            <div class="grid grid-cols-2 gap-2 text-xs">
                <button onclick="fillLogin('admin','admin123')" class="px-3 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition text-left">
                    <div class="font-semibold text-slate-300">Admin</div>
                    <div>admin / admin123</div>
                </button>
                <button onclick="fillLogin('kasir1','kasir123')" class="px-3 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition text-left">
                    <div class="font-semibold text-slate-300">Kasir</div>
                    <div>kasir1 / kasir123</div>
                </button>
            </div>
        </div>
    </div>

    <p class="text-center text-xs text-slate-600 mt-6">POS UMKM &copy; {{ date('Y') }}</p>
</div>

<script>
    function fillLogin(u, p) {
        document.querySelector('[name=username]').value = u;
        document.querySelector('[name=password]').value = p;
    }
    function togglePwd() {
        const f = document.getElementById('pwd');
        f.type = f.type === 'password' ? 'text' : 'password';
    }
</script>
</body>
</html>
