<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login Admin - Explore Lumajang</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --ocean: #0f4c81;
            --ocean-dark: #083a63;
            --aqua: #14b8c4;
            --ink: #111827;
            --muted: #6b7280;
            --line: #d7e7f1;
            --soft: #f8fafc;
        }

        body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 24px;
            background: linear-gradient(135deg, #d9eef8 0%, #eaf6ff 48%, #f6fafd 100%);
            color: var(--ink);
            font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .login-wrap {
            width: min(100%, 460px);
            animation: fadeIn .45s ease both;
        }

        .login-card {
            border: 1px solid var(--line);
            border-radius: 28px;
            box-shadow: 0 24px 70px rgba(15, 76, 129, .14);
            overflow: hidden;
        }

        .brand-icon {
            width: 78px;
            height: 78px;
            display: grid;
            place-items: center;
            margin: 0 auto 20px;
            border-radius: 24px;
            overflow: hidden;
            background: var(--ocean);
            box-shadow: 0 16px 28px rgba(15, 76, 129, .22);
        }

        .brand-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .form-label {
            font-size: .9rem;
            font-weight: 600;
            color: #374151;
        }

        .form-control {
            min-height: 52px;
            border-radius: 14px;
            border-color: var(--line);
            background: var(--soft);
            padding-left: 16px;
            transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
        }

        .form-control:focus {
            border-color: rgba(15, 76, 129, .72);
            background: #ffffff;
            box-shadow: 0 0 0 .25rem rgba(15, 76, 129, .12);
        }

        .password-toggle {
            min-width: 52px;
            border-radius: 14px;
            border-color: var(--line);
            color: var(--muted);
            background: var(--soft);
        }

        .btn-login {
            min-height: 52px;
            border: 0;
            border-radius: 14px;
            background: var(--ocean);
            font-weight: 700;
            box-shadow: 0 14px 30px rgba(15, 76, 129, .22);
            transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
        }

        .btn-login:hover,
        .btn-login:focus {
            background: var(--ocean-dark);
            transform: translateY(-1px);
            box-shadow: 0 18px 36px rgba(15, 76, 129, .28);
        }

        .alert-modern {
            border: 1px solid #fecaca;
            border-radius: 16px;
            background: #fff7f7;
            color: #991b1b;
        }

        .text-muted {
            color: var(--muted) !important;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 575.98px) {
            body {
                padding: 18px;
            }

            .login-card {
                border-radius: 20px;
            }
        }
    </style>
</head>
<body>
    <main class="login-wrap">
        <div class="card login-card">
            <div class="card-body p-4 p-sm-5">
                <div class="text-center mb-4">
                    <div class="brand-icon">
                        <img src="{{ asset('images/explore-lumajang-logo.png') }}" alt="Explore Lumajang">
                    </div>
                    <h1 class="h4 fw-bold mb-2">Explore Lumajang</h1>
                    <p class="text-muted mb-0">Admin panel untuk mengelola aplikasi wisata</p>
                </div>

                @if ($errors->any())
                    <div class="alert alert-modern d-flex align-items-start gap-2 mb-4" role="alert">
                        <i class="bi bi-exclamation-circle-fill mt-1"></i>
                        <div>{{ $errors->first() }}</div>
                    </div>
                @endif

                <form method="POST" action="{{ route('login.store') }}" id="loginForm" novalidate>
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="email">Email</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 rounded-start-4">
                                <i class="bi bi-envelope text-muted"></i>
                            </span>
                            <input
                                type="email"
                                name="email"
                                id="email"
                                class="form-control border-start-0 rounded-end-4 @error('email') is-invalid @enderror"
                                value="{{ old('email') }}"
                                placeholder="admin@example.com"
                                autocomplete="email"
                                required
                                autofocus
                            >
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label" for="password">Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 rounded-start-4">
                                <i class="bi bi-lock text-muted"></i>
                            </span>
                            <input
                                type="password"
                                name="password"
                                id="password"
                                class="form-control border-start-0 border-end-0 @error('password') is-invalid @enderror"
                                placeholder="Masukkan password"
                                autocomplete="current-password"
                                required
                            >
                            <button class="btn password-toggle border-start-0" type="button" id="togglePassword" aria-label="Tampilkan password">
                                <i class="bi bi-eye"></i>
                            </button>
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <button class="btn btn-login w-100 text-white" type="submit" id="loginButton">
                        <span class="login-ready">
                            <i class="bi bi-box-arrow-in-right me-2"></i>Login
                        </span>
                        <span class="login-loading d-none">
                            <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>Memproses...
                        </span>
                    </button>
                </form>
            </div>
        </div>
    </main>

    <script>
        const form = document.getElementById('loginForm');
        const button = document.getElementById('loginButton');
        const ready = button.querySelector('.login-ready');
        const loading = button.querySelector('.login-loading');
        const password = document.getElementById('password');
        const toggle = document.getElementById('togglePassword');

        toggle.addEventListener('click', () => {
            const isHidden = password.type === 'password';
            password.type = isHidden ? 'text' : 'password';
            toggle.setAttribute('aria-label', isHidden ? 'Sembunyikan password' : 'Tampilkan password');
            toggle.querySelector('i').className = isHidden ? 'bi bi-eye-slash' : 'bi bi-eye';
        });

        form.addEventListener('submit', (event) => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
                form.classList.add('was-validated');
                return;
            }

            button.disabled = true;
            ready.classList.add('d-none');
            loading.classList.remove('d-none');
        });
    </script>
</body>
</html>
