<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SLHD | Dinas Lingkungan Hidup</title>
    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo3.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo3.png')}}">
    <!-- Tailwind CSS CDN -->
    <!-- Tailwind CSS CDN -->
    <script src="{{ asset('assets/js/tailwind.js') }}"></script>
    <!-- Google Fonts -->
    <link href="{{ asset('assets/css/font.css') }}" rel="stylesheet">
    <!-- Lucide Icons -->
    <script src="{{ asset('assets/js/lucide.js') }}"></script>
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .login-gradient {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-4">

    <!-- Login Container -->
    <div class="max-w-5xl w-full bg-white rounded-[2rem] shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[600px]">
        
        <!-- Left Side: Illustration & Branding -->
        <div class="md:w-1/2 login-gradient p-12 text-white flex flex-col justify-between relative overflow-hidden">
            <!-- Decorative Circles -->
            <div class="absolute -top-20 -left-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-400/20 rounded-full blur-3xl"></div>

            <div class="relative z-10">
                <div class="flex items-center space-x-3 mb-0 md:mb-12">
                    <div class="bg-white p-2 rounded-xl text-blue-600">
                        <img src="{{asset('assets/logo3.png')}}" width="40" alt="">
                    </div>
                    <div>
                        <h1 class="font-bold text-2xl tracking-tight leading-none uppercase text-white mb-2">SLHD</h1>
                        <p class="text-[10px] uppercase tracking-widest text-blue-100 font-bold">Status Lingkungan Hidup Daerah</p>
                    </div>
                </div>

                <h2 class="hidden md:block text-4xl font-extrabold leading-tight mb-6">Kelola Data Lingkungan Secara Terintegrasi</h2>
                <p class="hidden md:block text-blue-100 text-lg leading-relaxed mb-8">Selamat datang kembali di Portal Internal SLHD. Silakan masuk untuk mengakses dasbor pengelolaan data lingkungan hidup.</p>
            </div>

            <!-- Stats/Glass Card -->
            <div class="hidden md:block relative z-10 glass-effect p-6 rounded-2xl">
                <div class="flex items-center space-x-4">
                    <div class="bg-white/20 p-3 rounded-full">
                        <i data-lucide="shield-check" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-xs font-bold uppercase tracking-wider text-blue-100">Keamanan Terjamin</p>
                        <p class="text-sm">Enkripsi data dua arah untuk setiap sesi login pengguna.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Side: Login Form -->
        <div class="md:w-1/2 p-8 md:p-16 flex flex-col justify-center">
            <div class="mb-10">
                <h3 class="text-3xl font-bold text-slate-900 mb-2">Login Portal</h3>
                <p class="text-slate-500 font-medium">Masukkan kredensial Anda untuk melanjutkan.</p>
            </div>

            <form action="{{ url('login') }}" method="POST" id="login-form" class="space-y-6">
                {{ csrf_field() }}
                <!-- Username -->
                <div class="space-y-2">
                    <label for="username" class="text-sm font-bold text-slate-700 ml-1">Nama Pengguna / Email</label>
                    <div class="relative">
                        <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
                        <input type="text" id="username" name="email" placeholder="contoh: admin_dlh" 
                               class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
                    </div>
                </div>

                <!-- Password -->
                <div class="space-y-2">
                    <div class="flex justify-between items-center px-1">
                        <label for="password" class="text-sm font-bold text-slate-700">Kata Sandi</label>
                        {{-- <a href="#" class="text-x  s font-bold text-blue-600 hover:text-blue-700 transition-colors">Lupa Password?</a> --}}
                    </div>
                    <div class="relative">
                        <i data-lucide="lock" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
                        <input type="password" id="password" name="password" placeholder="••••••••" 
                               class="w-full pl-12 pr-12 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
                        <button type="button" id="togglePassword" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
                            <i data-lucide="eye" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <!-- Submit Button -->
                <button class="btnlogin w-full bg-blue-600 text-white py-4 rounded-2xl font-bold text-lg hover:bg-blue-700 transform hover:-translate-y-0.5 transition-all shadow-xl shadow-blue-200 flex items-center justify-center group">
                    Masuk Sekarang
                    <i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
                </button>
            </form>

            <!-- Bottom Link -->
            <div class="mt-auto pt-12 flex justify-center">
                <a href="{{ url('/') }}" class="flex items-center text-xs font-bold text-slate-400 hover:text-blue-600 transition-colors">
                    <i data-lucide="chevron-left" class="w-4 h-4 mr-1"></i> Kembali ke Beranda
                </a>
            </div>
        </div>
    </div>

    <!-- jQuery CDN -->
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            lucide.createIcons();

            // Simple Form Handling
            $('.btnlogin').on('click', function(e) {
                // e.preventDefault();
                const btn = $(this);
                const originalText = btn.html();
                
                // Show loading state
                btn.addClass('opacity-70').html('<i data-lucide="refresh-cw" class="w-5 h-5 animate-spin"></i>');
                lucide.createIcons();
            });
        });
        $('#togglePassword').on('click', function() {
            let passwordField = $('#password');
            let icon = $(this).find('i');

            // Cek apakah input saat ini bertipe password
            if (passwordField.attr('type') === 'password') {
                passwordField.attr('type', 'text'); // Ubah ke teks
                icon.attr('data-lucide', 'eye-off');
            } else {
                passwordField.attr('type', 'password'); // Ubah ke password
                 icon.attr('data-lucide', 'eye');
            }
            lucide.createIcons();
        });   
    </script>
</body>
</html>