<!DOCTYPE html>
<html class="light" lang="id">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Login - Laundry System</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.material.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />

    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#13a4ec",
                        "background-light": "#f6f7f8",
                        "background-dark": "#101c22",
                    },
                    fontFamily: {
                        "display": ["Inter", "sans-serif"]
                    }
                },
            },
        }
    </script>
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>

<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col font-display">

    <main class="flex-1 flex flex-col items-center justify-center p-2 sm:p-12 relative h-screen overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-10 pointer-events-none overflow-hidden">
            <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary rounded-full blur-3xl"></div>
            <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-primary rounded-full blur-3xl"></div>
        </div>

        <div class="z-10 w-full max-w-[400px] sm:max-w-[480px] bg-white dark:bg-[#1a262e] rounded-xl shadow-xl border border-gray-100 dark:border-gray-800 p-3 sm:p-8">
            <div class="mb-2 sm:mb-6">
                <h1 class="text-[#111618] dark:text-white tracking-tight text-lg sm:text-[32px] font-bold leading-tight text-center pb-0 sm:pb-1">Login</h1>
                <p class="text-[#617c89] dark:text-gray-400 text-[9px] sm:text-sm font-normal leading-tight text-center mt-0.5 sm:mt-0">Kelola pesanan, layanan, dan laporan Anda dengan efisien.</p>
            </div>

            @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400 text-center">
                {{ session('status') }}
            </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="flex flex-col gap-1.5 sm:gap-4">
                @csrf

                <div class="flex flex-col gap-0.5 sm:gap-2">
                    <label class="text-[#111618] dark:text-gray-200 text-[10px] sm:text-sm font-medium leading-none">Alamat Email</label>
                    <input name="email" value="{{ old('email') }}" required autofocus
                        class="w-full rounded-lg text-[#111618] dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-[#dbe2e6] dark:border-gray-700 bg-white dark:bg-background-dark focus:border-primary h-8 sm:h-12 placeholder:text-[#617c89] px-2 py-1 text-[10px] sm:text-sm font-normal leading-normal"
                        placeholder="email@gmail.com" type="email" />
                    @error('email')
                    <p class="text-red-500 text-[9px] sm:text-xs mt-0.5">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex flex-col gap-0.5 sm:gap-2">
                    <label class="text-[#111618] dark:text-gray-200 text-[10px] sm:text-sm font-medium leading-none">Kata Sandi</label>
                    <div class="flex w-full items-stretch rounded-lg group">
                        <input name="password" id="password" required
                            class="w-full rounded-l-lg text-[#111618] dark:text-white focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-[#dbe2e6] dark:border-gray-700 bg-white dark:bg-background-dark focus:border-primary h-8 sm:h-12 placeholder:text-[#617c89] px-2 py-1 border-r-0 pr-2 text-[10px] sm:text-sm font-normal leading-normal"
                            placeholder="Kata sandi" type="password" />

                        <div id="togglePassword" class="text-[#617c89] flex border border-[#dbe2e6] dark:border-gray-700 bg-white dark:bg-background-dark items-center justify-center pr-2 rounded-r-lg border-l-0 cursor-pointer hover:text-primary transition-colors">
                            <span class="material-symbols-outlined text-[14px] sm:text-lg" id="eyeIcon">visibility</span>
                        </div>
                    </div>
                    @error('password')
                    <p class="text-red-500 text-[9px] sm:text-xs mt-0.5">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-between py-0">
                    <label class="flex items-center gap-1 sm:gap-2 cursor-pointer">
                        <input name="remember" id="remember_me" type="checkbox"
                            class="rounded text-primary focus:ring-primary border-gray-300 dark:border-gray-700 bg-white dark:bg-background-dark w-2.5 h-2.5 sm:w-4 sm:h-4" />
                        <span class="text-[9px] sm:text-sm text-[#617c89] dark:text-gray-400 font-normal">Ingat Saya</span>
                    </label>

                    @if (Route::has('password.request'))
                    <a class="text-[9px] sm:text-sm text-primary font-semibold hover:underline" href="{{ route('password.request') }}">Lupa Kata Sandi?</a>
                    @endif
                </div>

                <button type="submit" class="w-full flex items-center justify-center rounded-lg h-8 sm:h-12 bg-primary text-white text-[11px] sm:text-base font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 transition-all shadow-md active:scale-[0.98]">
                    Masuk
                </button>

                <div class="mt-0.5 sm:mt-2 text-center border-t border-gray-100 dark:border-gray-800 pt-1.5 sm:pt-4">
                    <p class="text-[9px] sm:text-sm text-[#617c89] dark:text-gray-400">
                        Belum punya akun?
                        <a href="{{ route('register') }}" class="text-primary font-bold hover:underline italic">
                            Daftar Sekarang
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </main>
    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#password');
        const eyeIcon = document.querySelector('#eyeIcon');

        togglePassword.addEventListener('click', function(e) {
            // Toggle tipe input
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);

            // Toggle ikon (visibility vs visibility_off)
            eyeIcon.textContent = type === 'password' ? 'visibility' : 'visibility_off';
        });

        // Mencegah akses kembali ke halaman login dari cache saat pengguna sudah login
        window.addEventListener('pageshow', function(event) {
            if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
                window.location.reload();
            }
        });
    </script>
</body>

</html>