<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Monitoring Pasien CP</title>
    <link rel="icon" type="image/png" href="{{ asset('asset/logo/favicon.png') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        brand: { 50:'#eef4ff',100:'#dce9ff',500:'#3B82F6',600:'#2563EB',700:'#1D4ED8',900:'#1e3a5f' },
                        teal:  { 400:'#2dd4bf',500:'#14b8a6',600:'#0d9488' },
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); }
        .input-field {
            width:100%; padding:0.75rem 1rem;
            border: 1.5px solid #e2e8f0; border-radius:12px;
            font-size:0.9rem; transition: all .2s;
            background: #f8fafc;
        }
        .input-field:focus { outline:none; border-color:#3B82F6; background:#fff; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
        .btn-primary {
            width:100%; padding:.85rem; border-radius:12px;
            background: linear-gradient(135deg, #1e3a5f, #2563EB);
            color:#fff; font-weight:600; font-size:0.95rem;
            transition: all .2s; border:none; cursor:pointer;
        }
        .btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(37,99,235,.35); }
        .floating-dot {
            position:absolute; border-radius:50%;
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)}
        }
        .error-msg { color:#ef4444; font-size:0.78rem; margin-top:4px; }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center relative overflow-hidden"
      style="background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0d4f6f 100%)">

    {{-- Animated background dots --}}
    <div class="floating-dot w-72 h-72 opacity-10" style="background:#3b82f6;top:-5%;left:-10%;animation-delay:0s"></div>
    <div class="floating-dot w-96 h-96 opacity-10" style="background:#14b8a6;bottom:-10%;right:-10%;animation-delay:2s"></div>
    <div class="floating-dot w-48 h-48 opacity-10" style="background:#6366f1;top:40%;right:15%;animation-delay:4s"></div>

    <div class="relative z-10 w-full max-w-md px-4">
        <div class="glass rounded-3xl shadow-2xl p-10">

            {{-- Logo & Title --}}
            <div class="text-center mb-8">
                <div class="w-20 h-20 mx-auto mb-5 bg-white rounded-2xl shadow-lg flex items-center justify-center">
                    <img src="{{ asset('asset/logo/rs-waras-wiris.png') }}" class="w-14 h-14 object-contain" alt="Logo">
                </div>
                <h1 class="text-2xl font-bold text-brand-900">Selamat Datang</h1>
                <p class="text-slate-500 text-sm mt-1">Sistem Monitoring Pasien Cerebral Palsy</p>
                <p class="text-slate-400 text-xs mt-0.5">RSUD Waras Wiris</p>
            </div>

            {{-- Error --}}
            @if($errors->any())
            <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm flex items-center gap-2">
                <span>⚠</span> {{ $errors->first() }}
            </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-5">
                @csrf

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Alamat Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" required
                           class="input-field" placeholder="contoh@email.com">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Password</label>
                    <input type="password" name="password" required
                           class="input-field" placeholder="••••••••">
                </div>

                <button type="submit" class="btn-primary mt-2">
                    Masuk ke Sistem
                </button>
            </form>

            <p class="text-center text-xs text-slate-400 mt-6">
                © {{ date('Y') }} Rumah Sakit Umum Daerah Waras Wiris
            </p>
        </div>
    </div>
</body>
</html>
