<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Admin - MJM AC Mobil</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #1A0000 0%, #2D0010 50%, #C0392B 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }

        body::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(192,57,43,0.3), transparent);
            top: -200px;
            right: -200px;
        }

        body::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(128,0,32,0.4), transparent);
            bottom: -100px;
            left: -100px;
        }

        .login-card {
            background: white;
            border-radius: 28px;
            padding: 48px 40px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 40px 80px rgba(0,0,0,0.4);
            position: relative;
            z-index: 1;
        }

        .login-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 32px;
            justify-content: center;
        }

        .login-logo img {
            height: 52px;
            object-fit: contain;
        }

        .login-logo-text { font-weight: 800; font-size: 1.3rem; color: #C0392B; }
        .login-logo-sub { font-size: 0.65rem; color: #9CA3AF; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

        .login-title { text-align: center; margin-bottom: 8px; }
        .login-title h1 { font-size: 1.6rem; font-weight: 800; color: #1A1A1A; }
        .login-subtitle { text-align: center; color: #6B7280; font-size: 0.88rem; margin-bottom: 32px; }

        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #374151; margin-bottom: 8px; }

        .form-group input {
            width: 100%;
            padding: 14px 16px;
            border: 1.5px solid #E5E7EB;
            border-radius: 12px;
            font-size: 0.95rem;
            font-family: inherit;
            color: #1A1A1A;
            transition: all 0.3s;
            outline: none;
        }

        .form-group input:focus { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.1); }

        .btn-login {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #C0392B, #800020);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 8px;
        }

        .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(192,57,43,0.4); }

        .alert-error {
            background: rgba(192,57,43,0.08);
            border: 1px solid rgba(192,57,43,0.2);
            color: #C0392B;
            padding: 12px 16px;
            border-radius: 10px;
            font-size: 0.85rem;
            margin-bottom: 20px;
        }

        .back-link { display: block; text-align: center; margin-top: 24px; color: #9CA3AF; text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
        .back-link:hover { color: #C0392B; }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="login-logo">
            <img src="{{ \App\Models\SiteSetting::get('logo', '/images/logo_mjm.png') }}" alt="{{ \App\Models\SiteSetting::get('site_name', 'MJM AC Mobil') }}">
            <div>
                <div class="login-logo-text">{{ \App\Models\SiteSetting::get('site_name', 'MJM AC MOBIL') }}</div>
                <div class="login-logo-sub">Admin Panel</div>
            </div>
        </div>

        <div class="login-title"><h1>Selamat Datang</h1></div>
        <p class="login-subtitle">Masuk ke panel admin untuk mengelola website</p>

        @if($errors->any())
        <div class="alert-error">⚠️ Email atau password yang Anda masukkan salah.</div>
        @endif

        <form action="{{ route('login') }}" method="POST">
            @csrf
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="admin@mjmacmobil.com" required autofocus>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Masukkan password" required>
            </div>
            <button type="submit" class="btn-login">🔐 Masuk ke Panel Admin</button>
        </form>

        <a href="/" class="back-link">← Kembali ke halaman utama</a>
    </div>
</body>
</html>
