<?php
    use Illuminate\Support\Str;
    $activeTab = $activeTab ?? 'login';
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autentikasi - NusaOTP</title>
    
    <!-- Google Fonts: Poppins -->
    <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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Cloudflare Turnstile -->
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    },
                    colors: {
                        'dz-navy': '#1D2A78',
                        'dz-navy-dark': '#151D5B',
                        'dz-blue': '#1E40AF',
                        'dz-cyan': '#00C6FF',
                        'dz-cyan-light': '#00E5FF',
                        'telegram': '#229ED9',
                        'telegram-hover': '#1b8cc4',
                    }
                }
            }
        }
    </script>
    
    <style>
        .bg-card-gradient {
            background: linear-gradient(180deg, #1E40AF 0%, #00C6FF 100%);
        }
        .bg-cyan-glossy {
            background: linear-gradient(180deg, #00E5FF 0%, #00C6FF 100%);
        }
        .shadow-cyan-glow {
            box-shadow: 0 8px 20px rgba(0, 198, 255, 0.35);
        }
        .shadow-navy-glow {
            box-shadow: 0 8px 20px rgba(29, 42, 120, 0.35);
        }
        .shadow-telegram-glow {
            box-shadow: 0 8px 20px rgba(34, 158, 217, 0.3);
        }
        
        /* Smooth Form Switching */
        .auth-form {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .auth-form.active {
            display: block;
            opacity: 1;
        }

        /* Float Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }
    </style>
</head>
<body class="min-h-screen w-full flex font-sans antialiased bg-white p-0 overflow-x-hidden">

    <!-- Container Utama Full Screen -->
    <div class="w-full min-h-screen flex flex-col lg:flex-row relative">
        
        <!-- ========================================== -->
        <!-- SISI KIRI: MOCKUP & BRANDING (DESKTOP)     -->
        <!-- ========================================== -->
        <!-- ========================================== -->
        <!-- SISI KIRI: MOCKUP & BRANDING (DESKTOP)     -->
        <!-- ========================================== -->
        <div class="hidden lg:flex lg:w-7/12 bg-card-gradient p-10 xl:p-14 flex-col justify-between relative overflow-hidden text-white min-h-screen">
            <!-- Background Decorative Circles -->
            <div class="absolute -top-16 -left-16 w-80 h-80 bg-white/10 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute -bottom-20 -right-20 w-96 h-96 bg-cyan-400/20 rounded-full blur-3xl pointer-events-none"></div>

            <!-- Top Header / Tagline -->
            <div class="z-10 max-w-xl">
                <h2 class="text-3xl xl:text-4xl font-bold leading-tight drop-shadow-sm">
                    Nusa<span class="text-cyan-200">OTP</span>
                </h2>
                <p class="mt-2 text-white/80 text-xs xl:text-sm leading-relaxed">
                    Platform penyedia nomor virtual untuk berbagai kebutuhan verifikasi akun. Instan, otomatis, aman, dan aktif 24 jam tanpa perlu kartu fisik.
                </p>
            </div>

            <!-- MOCKUP MONITOR PC (3D Style Frame) -->
            <div class="z-10 my-auto py-4 w-full max-w-xl mx-auto flex flex-col items-center justify-center">
                
                <!-- Frame Monitor Utama -->
                <div class="w-full bg-slate-900 rounded-2xl p-2.5 shadow-2xl border border-white/20 relative animate-float transition-all duration-300">
                    
                    <!-- Kamera & Sensor Atas Monitor -->
                    <div class="w-2 h-2 bg-slate-700 rounded-full mx-auto mb-1.5"></div>

                    <!-- Layar / Screen Dashboard -->
                    <div class="w-full bg-slate-950 rounded-xl overflow-hidden border border-white/10 text-slate-100 p-3 sm:p-4 font-sans relative">
                        
                        <!-- Navbar Mockup Dashboard -->
                        <div class="flex items-center justify-between pb-2.5 border-b border-white/10 mb-3">
                            <div class="flex items-center gap-2">
                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-[9px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full font-mono flex items-center gap-1">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> ONLINE
                                </span>
                            </div>
                        </div>

                        <!-- Content Grid Dashboard -->
                        <div class="grid grid-cols-3 gap-2.5 mb-3">
                            <!-- Stat Card 1 -->
                            <div class="bg-white/5 border border-white/10 p-2.5 rounded-lg">
                                <p class="text-[9px] text-slate-400">Total OTP Diterima</p>
                                <p class="text-sm font-bold text-cyan-300 mt-0.5 font-mono">12,840</p>
                                <span class="text-[8px] text-emerald-400">↑ 14% minggu ini</span>
                            </div>
                            <!-- Stat Card 2 -->
                            <div class="bg-white/5 border border-white/10 p-2.5 rounded-lg">
                                <p class="text-[9px] text-slate-400">Saldo Akun</p>
                                <p class="text-sm font-bold text-emerald-400 mt-0.5 font-mono">Rp 250.000</p>
                                <span class="text-[8px] text-slate-400">Siap Digunakan</span>
                            </div>
                            <!-- Stat Card 3 -->
                            <div class="bg-white/5 border border-white/10 p-2.5 rounded-lg">
                                <p class="text-[9px] text-slate-400">Kecepatan SMS</p>
                                <p class="text-sm font-bold text-yellow-300 mt-0.5 font-mono">&lt; 3 Detik</p>
                                <span class="text-[8px] text-cyan-400">Instant Server</span>
                            </div>
                        </div>

                        <!-- Live Stream SMS Inbound / Aktivitas Realtime -->
                        <div class="space-y-2">
                            <p class="text-[10px] font-semibold text-slate-300 flex items-center justify-between">
                                <span>Aktivitas Nomor Terbaru</span>
                                <span class="text-[9px] text-cyan-400 font-normal">Auto Refresh</span>
                            </p>

                            <!-- Row 1: WhatsApp -->
                            <div class="bg-slate-900/90 border border-white/10 rounded-lg p-2 flex items-center justify-between hover:border-cyan-500/50 transition-colors">
                                <div class="flex items-center gap-2">
                                    <div class="w-7 h-7 rounded-md bg-emerald-500/20 text-emerald-400 flex items-center justify-center font-bold text-[10px]">
                                        WA
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-semibold text-slate-200">WhatsApp Indonesia (+62)</p>
                                        <p class="text-[9px] font-mono text-slate-400">+628381293XXXX</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="text-[10px] font-mono font-bold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 px-2 py-0.5 rounded animate-pulse">
                                        749-012
                                    </span>
                                    <p class="text-[8px] text-slate-400 mt-0.5">Baru saja</p>
                                </div>
                            </div>

                            <!-- Row 2: Telegram -->
                            <div class="bg-slate-900/90 border border-white/10 rounded-lg p-2 flex items-center justify-between hover:border-cyan-500/50 transition-colors">
                                <div class="flex items-center gap-2">
                                    <div class="w-7 h-7 rounded-md bg-telegram/20 text-telegram flex items-center justify-center font-bold text-[10px]">
                                        TG
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-semibold text-slate-200">Telegram USA (+1)</p>
                                        <p class="text-[9px] font-mono text-slate-400">+1202555XXXX</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="text-[10px] font-mono font-bold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 px-2 py-0.5 rounded">
                                        309-182
                                    </span>
                                    <p class="text-[8px] text-slate-400 mt-0.5">2 detik lalu</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Stand / Penyangga Monitor -->
                <div class="w-20 h-4 bg-gradient-to-b from-slate-700 to-slate-900 mx-auto -mt-0.5"></div>
                <div class="w-36 h-2 bg-slate-800 rounded-full shadow-xl mx-auto border-t border-white/10"></div>
            </div>
        </div>
        <!-- ========================================== -->
        <!-- SISI KANAN: FORM AUTENTIKASI               -->
        <!-- ========================================== -->
        <div class="w-full lg:w-5/12 bg-card-gradient lg:bg-white flex flex-col justify-between relative min-h-screen">
            
            <!-- Header & Form Wrapper -->
            <div class="p-6 sm:p-10 lg:p-12 flex flex-col items-center z-10 flex-grow justify-center max-w-md w-full mx-auto">
                
               <!-- Logo Image -->
<div class="logo mb-6 mt-2">
    <img
        src="<?php echo e(asset('public/assets/logo-nusaotp.webp')); ?>"
        alt="NusaOTP Logo"
        class="h-12 lg:h-14 w-auto object-contain drop-shadow-md"
    >
</div>

                <!-- Custom Switcher Tabs (Masuk / Daftar) -->
                <div class="w-full bg-black/20 lg:bg-slate-100 p-1.5 rounded-full flex mb-6 border border-white/10 lg:border-slate-200 backdrop-blur-sm">
                    <button
    type="button"
    id="loginTab"
    class="flex-1 py-2.5 text-xs font-semibold rounded-full bg-gradient-to-r from-sky-400 to-cyan-400 text-white shadow-lg transition-all duration-300">
    Masuk
</button>
                    <button type="button" 
                            id="registerTab"
                            class="flex-1 py-2.5 text-xs font-semibold rounded-full text-white/70 lg:text-gray-400 hover:text-white lg:hover:text-gray-700 transition-all duration-300">
                        Daftar
                    </button>
                </div>

                <!-- ========================================== -->
                <!-- 1. FORM LOGIN                              -->
                <!-- ========================================== -->
                <form id="loginForm"
                      class="auth-form w-full space-y-4 <?php echo e($activeTab == 'login' ? 'active' : ''); ?>"
                      method="POST"
                      action="<?php echo e(route('login')); ?>">
                    <?php echo csrf_field(); ?>

                    <!-- Email Input -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                            </svg>
                        </div>
                        <input type="email" 
                               name="email" 
                               placeholder="Masukkan Email" 
                               required 
                               class="w-full h-[48px] pl-11 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Password Input -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <input type="password" 
                               name="password" 
                               placeholder="Masukkan Password" 
                               required 
                               class="w-full h-[48px] pl-11 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Forgot Password -->
                    <div class="text-right pt-0.5">
                        <a href="<?php echo e(route('password.request')); ?>" class="text-white/80 lg:text-dz-navy hover:underline text-[11px] font-medium transition-colors duration-200">
                            Lupa password?
                        </a>
                    </div>

                    <!-- Cloudflare Turnstile -->
                    <div class="flex justify-center pt-1 overflow-hidden scale-90 origin-center">
                        <div class="cf-turnstile" data-sitekey="0x4AAAAAACFFz3ZX3qh8W-cP"></div>
                    </div>

                    <!-- Submit Button Login -->
                    <button type="submit" class="w-full h-[48px] rounded-full bg-dz-navy lg:bg-dz-navy lg:hover:bg-dz-navy-dark text-white font-semibold text-xs shadow-cyan-glow lg:shadow-navy-glow hover:brightness-110 active:scale-95 transition-all duration-300">
                        Masuk
                    </button>

                    <!-- Telegram Button -->
                    <a href="tg://resolve?domain=nusaotp_bot&start=login_<?php echo e(Str::random(40)); ?>"
                       class="w-full h-[48px] rounded-full bg-telegram hover:bg-telegram-hover text-white font-semibold text-xs shadow-telegram-glow active:scale-95 transition-all duration-300 flex items-center justify-center gap-2 mt-2">
                        <svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="16" cy="16" r="14" fill="url(#paint0_linear)"/>
                            <path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>
                            <defs>
                                <linearGradient id="paint0_linear" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#37BBFE"/>
                                    <stop offset="1" stop-color="#007DBB"/>
                                </linearGradient>
                            </defs>
                        </svg>
                        <span>Masuk via Telegram</span>
                    </a>
                </form>

                <!-- ========================================== -->
                <!-- 2. FORM REGISTER                           -->
                <!-- ========================================== -->
                <form id="registerForm"
                      class="auth-form w-full space-y-3.5 <?php echo e($activeTab == 'register' ? 'active' : ''); ?>"
                      method="POST"
                      action="<?php echo e(route('register')); ?>">
                    <?php echo csrf_field(); ?>

                    <?php if(isset($refCode) && $refCode): ?>
                        <input type="hidden" name="ref" value="<?php echo e($refCode); ?>">
                    <?php endif; ?>

                    <!-- Nama Lengkap -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                        </div>
                        <input type="text" 
                               name="name" 
                               placeholder="Nama lengkap anda" 
                               required 
                               class="w-full h-[46px] pl-10 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Email Gmail Only -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                            </svg>
                        </div>
                        <input type="email" 
                               name="email" 
                               id="registerEmail" 
                               placeholder="Contoh: user@gmail.com" 
                               pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$" 
                               title="Gunakan email Gmail (@gmail.com)" 
                               required 
                               class="w-full h-[46px] pl-10 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Nomor WhatsApp -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <input type="text" 
                               name="phone" 
                               placeholder="Nomor WhatsApp (Contoh: 088xxxxx)" 
                               required 
                               class="w-full h-[46px] pl-10 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Password -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <input type="password" 
                               name="password" 
                               placeholder="Masukkan Password" 
                               required 
                               class="w-full h-[46px] pl-10 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Konfirmasi Password -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <input type="password" 
                               name="password_confirmation" 
                               placeholder="Ulangi Password" 
                               required 
                               class="w-full h-[46px] pl-10 pr-4 bg-white lg:bg-slate-50 rounded-full text-xs text-gray-700 placeholder-gray-400 shadow-md lg:shadow-inner border border-transparent lg:border-slate-200 focus:outline-none focus:ring-2 focus:ring-dz-cyan transition-all duration-300">
                    </div>

                    <!-- Cloudflare Turnstile -->
                    <div class="flex justify-center pt-1 overflow-hidden scale-90 origin-center">
                        <div class="cf-turnstile" data-sitekey="0x4AAAAAACFFz3ZX3qh8W-cP"></div>
                    </div>

                    <!-- Submit Button Register -->
                    <button type="submit" class="w-full h-[46px] rounded-full bg-dz-navy hover:bg-dz-navy-dark text-white font-semibold text-xs shadow-navy-glow active:scale-95 transition-all duration-300">
                        Daftar Sekarang
                    </button>

                    <!-- Telegram Button -->
                    <a href="tg://resolve?domain=nusaotp_bot&start=login_<?php echo e(isset($refCode) && $refCode ? 'ref_'.$refCode : 'login_'.Str::random(40)); ?>"
                       class="w-full h-[46px] rounded-full bg-telegram hover:bg-telegram-hover text-white font-semibold text-xs shadow-telegram-glow active:scale-95 transition-all duration-300 flex items-center justify-center gap-2">
                        <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="16" cy="16" r="14" fill="url(#paint0_linear_reg)"/>
                            <path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>
                            <defs>
                                <linearGradient id="paint0_linear_reg" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#37BBFE"/>
                                    <stop offset="1" stop-color="#007DBB"/>
                                </linearGradient>
                            </defs>
                        </svg>
                        <span>Daftar via Telegram</span>
                    </a>
                </form>

            </div>

            <!-- Wave SVG Curved Divider (Mobile Only) -->
            <div class="w-full -mb-1 z-10 lg:hidden">
                <svg viewBox="0 0 500 120" preserveAspectRatio="none" class="w-full h-10 text-white fill-current">
                    <path d="M0,32 C150,90 350,-10 500,40 L500,120 L0,120 Z"></path>
                </svg>
            </div>

            <!-- Bottom Footer Section -->
            <div class="bg-white px-6 pb-6 pt-2 flex flex-col items-center justify-center text-center z-10">
                <p id="loginFooterText" class="<?php echo e($activeTab == 'login' ? '' : 'hidden'); ?> text-xs text-gray-500">
                    Belum punya akun? 
                    <button type="button" onclick="showRegister()" class="text-dz-navy font-semibold hover:underline">Daftar sekarang</button>
                </p>
                <p id="registerFooterText" class="<?php echo e($activeTab == 'register' ? '' : 'hidden'); ?> text-xs text-gray-500">
                    Sudah punya akun? 
                    <button type="button" onclick="showLogin()" class="text-dz-navy font-semibold hover:underline">Masuk disini</button>
                </p>
            </div>

        </div>

    </div>

    <!-- SweetAlert2 Script -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        const loginTab = document.getElementById('loginTab');
        const registerTab = document.getElementById('registerTab');

        const loginForm = document.getElementById('loginForm');
        const registerForm = document.getElementById('registerForm');

        const loginFooterText = document.getElementById('loginFooterText');
        const registerFooterText = document.getElementById('registerFooterText');

        function showLogin() {
            // Styling switcher tab
            loginTab.classList.add(
    'bg-gradient-to-r',
    'from-sky-400',
    'to-cyan-400',
    'text-white',
    'shadow-lg'
);
            loginTab.classList.remove('text-white/70', 'lg:text-gray-400');
            
registerTab.classList.remove(
    'bg-gradient-to-r',
    'from-sky-400',
    'to-cyan-400',
    'text-white',
    'shadow-lg'
);
            registerTab.classList.add('text-white/70', 'lg:text-gray-400');

            loginForm.classList.add('active');
            registerForm.classList.remove('active');

            loginFooterText.classList.remove('hidden');
            registerFooterText.classList.add('hidden');
        }

        function showRegister() {
            // Styling switcher tab
registerTab.classList.add(
    'bg-gradient-to-r',
    'from-sky-400',
    'to-cyan-400',
    'text-white',
    'shadow-lg'
);
            registerTab.classList.remove('text-white/70', 'lg:text-gray-400');

loginTab.classList.remove(
    'bg-gradient-to-r',
    'from-sky-400',
    'to-cyan-400',
    'text-white',
    'shadow-lg'
);
            loginTab.classList.add('text-white/70', 'lg:text-gray-400');

            registerForm.classList.add('active');
            loginForm.classList.remove('active');

            registerFooterText.classList.remove('hidden');
            loginFooterText.classList.add('hidden');
        }

        loginTab.addEventListener('click', showLogin);
        registerTab.addEventListener('click', showRegister);

        // Inisialisasi Tab Awal berdasarkan variabel Blade
        <?php if($activeTab == 'register'): ?>
            showRegister();
        <?php else: ?>
            showLogin();
        <?php endif; ?>

        // Validasi Email Gmail saat Submit Register
        document.getElementById('registerForm').addEventListener('submit', function(e){
            const email = document.getElementById('registerEmail').value.trim();

            if(!email.endsWith('@gmail.com')){
                e.preventDefault();

                Swal.fire({
                    icon: 'error',
                    title: 'Email tidak valid',
                    text: 'Pendaftaran hanya menerima email Gmail (@gmail.com)',
                    confirmButtonColor: '#1D2A78'
                });

                return false;
            }
        });

        // Tampilkan Error Validasi Laravel dari Backend
        <?php if($errors->any()): ?>
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                html: `<?php echo implode('<br>', $errors->all()); ?>`,
                confirmButtonColor: '#1D2A78'
            });

            <?php if($activeTab == 'register'): ?>
                showRegister();
            <?php else: ?>
                showLogin();
            <?php endif; ?>
        <?php endif; ?>
    </script>
</body>
</html><?php /**PATH /home/nusaotp/public_html/resources/views/auth/auth.blade.php ENDPATH**/ ?>