@{
    Layout = "~/Views/Shared/Layouts/Auth/_Layouts.cshtml";
    ViewData["Title"] = "Login";
}

<div class="min-h-screen flex overflow-hidden">
    <div class="w-full md:w-1/2 bg-white flex flex-col">

        <!-- Images -->
        <div class="px-8 pt-8">
            <img src="/images/logo.png" alt="Logo" class="h-14 w-auto" />
        </div>

        <div class="flex-1 flex items-center justify-center px-8">
            <div class="w-full max-w-[420px]">
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Selamat Datang</h1>
                <p class="text-sm text-gray-600 mb-8">
                    Masuk dengan akun DLH untuk melanjutkan.
                </p>

                <form method="post" action="/Dashboard/Index">

                    <!-- Email Input -->
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            NIK (No. KTP) / Email
                        </label>
                        <div class="relative w-full">
                            <span class="icon icon-fill text-gray-400 absolute left-4 top-1/2 -translate-y-1/2">mail</span>
                            <input 
                                name="email"
                                type="text"
                                placeholder="Masukkan NIK (No. KTP) / Email"
                                class="w-full h-12 pl-12 pr-4 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent placeholder:text-gray-500"
                                required />
                        </div>
                    </div>

                    <!-- Password Input -->
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Password
                        </label>
                        <div class="relative w-full">
                            <span class="icon icon-fill text-gray-400 absolute left-4 top-1/2 -translate-y-1/2">lock</span>
                            <input 
                                id="passwordInput"
                                name="password"
                                type="password"
                                placeholder="************"
                                class="w-full h-12 pl-12 pr-12 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent placeholder:text-gray-500"
                                required />
                            <span 
                                id="togglePassword"
                                class="icon icon-fill text-gray-400 absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer">
                                visibility_off
                            </span>
                        </div>
                    </div>

                    <!-- Remember Me -->
                    <div class="flex items-center mb-6">
                        <input 
                            id="remember" 
                            name="remember"
                            type="checkbox" 
                            class="checkbox checkbox-sm" />
                        <label for="remember" class="ml-2 text-sm  cursor-pointer">
                            Ingat saya
                        </label>
                    </div>

                    <!-- Login Button -->
                    <button 
                        type="submit" 
                        class="btn btn-primary w-full h-12 text-white font-semibold rounded-full normal-case">
                        Login
                    </button>

                </form>

            </div>

        </div>

        <!-- Footer -->
        <div class="py-6 text-center">
            <p class="text-xs text-gray-500">
                © 2025 Dinas Lingkungan Hidup DKI Jakarta
            </p>
        </div>

    </div>

    <!-- Image -->
    <div class="hidden md:block md:w-1/2 relative bg-gray-100">
        <img 
            src="/images/truck.png" 
            alt="DLH Truck" 
            class="w-full h-full object-cover" />
    </div>

</div>

<script>
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('passwordInput');
        const icon = this;
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.textContent = 'visibility';
        } else {
            passwordInput.type = 'password';
            icon.textContent = 'visibility_off';
        }
    });
</script>