@{
    ViewData["Title"] = "Daftar";
     Layout = "~/Views/Website/Shared/_AuthLayout.cshtml";
}

@section css {
    <style>
          .bg-auth-signup {
        background-image: radial-gradient(circle at 85% 1%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 96%,transparent 96%, transparent 100%),radial-gradient(circle at 14% 15%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 60% 90%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 79% 7%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 78%,transparent 78%, transparent 100%),radial-gradient(circle at 55% 65%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 52%,transparent 52%, transparent 100%),linear-gradient(135deg, rgb(0, 180, 230),rgb(0, 162, 255));
    }
    </style>
}

 <div class="min-h-screen bg-auth-signup flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8">
        <div class="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-4xl w-full overflow-hidden">
            <div class="flex flex-col lg:flex-row">
                <div class="lg:w-1/2 bg-gradient-to-br from-cyan-300 to-cyan-500 flex flex-col items-center justify-between p-6 sm:p-8 lg:p-12 min-h-[200px] lg:min-h-[500px] lg:order-2">
                    <div class="flex-grow flex items-center justify-center w-full">
                        <div class="text-center text-white">

                            <div class="relative">
                                <img src="/website/logo.svg" alt="Ilustrasi Login" class="w-full h-20 max-w-xs sm:max-w-md mx-auto">
                            </div>
                        </div>
                    </div>
                    
                    <footer class="mt-4 sm:mt-8 w-full text-center text-xs sm:text-sm text-gray-200">
                        &copy; @(DateTime.Now.Year > 2025 ? $"2025 - {DateTime.Now.Year}" : DateTime.Now.Year.ToString()) Dinas Lingkungan Hidup Provinsi DKI Jakarta. All rights reserved.
                    </footer>
                </div>

                <div class="lg:w-1/2 p-6 sm:p-8 lg:p-12 lg:order-1">

                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-6 sm:mb-8">Daftar</h1>

                    <form id="signupForm" method="POST" action="#" class="space-y-4 sm:space-y-6 needs-validation" novalidate autocomplete="off">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Nama Perusahaan/Kegiatan Usaha</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="building-2"></i>
                                </div>
                                <input type="text" name="company_name" id="company_name" placeholder="Masukan nama perusahaan" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required autofocus>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="mail"></i>
                                </div>
                                <input type="email" name="email" id="email" placeholder="Masukan email" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Usaha</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="briefcase"></i>
                                </div>
                                <select name="business_type" id="business_type" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
                                    <option value="" selected disabled>Pilih jenis usaha</option>
                                    <option value="jasa_pengangkutan">Jasa Pengangkutan</option>
                                    <option value="jasa_pengolahan">Jasa Pengolahan</option>
                                    <option value="usaha_kegiatan">Usaha Kegiatan</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="w-4 h-4 text-gray-400 transition-colors duration-300" data-lucide="lock"></i>
                                </div>
                                <input type="password" name="password" id="password" placeholder="Masukan password" class="w-full pl-9 sm:pl-10 pr-10 sm:pr-12 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password')">
                                     <i id="eye-open-password" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 transition-colors duration-300" data-lucide="eye"></i>
                                    @* <x-lucide-eye id="eye-open-password" class="h-4 w-4 sm:h-5 sm:w-5 text-gray-400" /> *@
                                    <i id="eye-closed-password" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 hidden" data-lucide="eye-off"></i>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="lock-keyhole"></i>
                                </div>
                                <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Konfirmasi password" class="w-full pl-9 sm:pl-10 pr-10 sm:pr-12 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password_confirmation')">
                                    <i id="eye-open-confirm" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="eye"></i>
                                    <i id="eye-closed-confirm" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 hidden" data-lucide="eye-off"></i>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="terms" name="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-cyan-300" required>
                            </div>
                            <label for="terms" class="ml-2 text-sm font-medium text-gray-700">
                                Saya setuju dengan <a href="#" class="text-cyan-600 hover:underline">Syarat dan Ketentuan</a> yang Berlaku
                            </label>
                        </div>

                        <button type="submit" class="w-full bg-cyan-400 hover:bg-cyan-500 text-white font-semibold py-2.5 sm:py-3 px-6 text-sm sm:text-base rounded-lg transition-colors duration-200">
                            Daftar
                        </button>

                        <div class="text-center">
                            <p class="text-sm text-gray-600">
                                Sudah memiliki akun? <a href="/login" class="text-cyan-600 hover:underline">Masuk</a>
                            </p>
                        </div>
                    </form>

                    
                </div>
            </div>
        </div>

     
</div>

@section Scripts {
    <script>
        function togglePassword(field) {
            const passwordInput = document.getElementById(field);
            const eyeOpen = document.getElementById('eye-open-' + (field === 'password' ? 'password' : 'confirm'));
            const eyeClosed = document.getElementById('eye-closed-' + (field === 'password' ? 'password' : 'confirm'));
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeOpen.classList.add('hidden');
                eyeClosed.classList.remove('hidden');
            } else {
                passwordInput.type = 'password';
                eyeOpen.classList.remove('hidden');
                eyeClosed.classList.add('hidden');
            }
        }
    </script>
}