@extends('layouts.guest')

@section('title', 'Pendaftaran - PMB MAN 1 Palembang')

@section('content')
<div class="min-h-screen flex bg-white font-sans antialiased overflow-hidden">
    <!-- Left Side - Hero Section -->
    <div class="hidden lg:flex lg:w-1/2 bg-[#004d2c] relative items-center justify-center p-12 overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
            <div class="absolute -top-24 -left-24 w-96 h-96 bg-green-400 rounded-full blur-[100px] animate-pulse"></div>
            <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-emerald-500 rounded-full blur-[100px] animate-pulse"></div>
        </div>

        <div class="relative z-10 text-center space-y-8 max-w-lg">
            <div class="inline-block p-4 bg-white/10 backdrop-blur-xl rounded-[2.5rem] border border-white/20 shadow-2xl transform hover:scale-105 transition duration-500">
                <img src="{{ asset('images/logo.png') }}" alt="Logo Kemenag" class="h-24 w-auto drop-shadow-2xl">
            </div>

            <div class="space-y-4">
                <h1 class="text-5xl font-black text-white leading-tight tracking-tighter uppercase italic">
                    Wujudkan Masa Depan <span class="text-green-400">Gemilang</span>
                </h1>
                <p class="text-green-100 text-lg font-medium leading-relaxed opacity-80">
                    Bergabunglah bersama keluarga besar MAN 1 Palembang dan mulailah perjalanan akademis terbaikmu di sini.
                </p>
            </div>

            <div class="relative group">
                <div class="absolute inset-0 bg-green-400/20 blur-3xl rounded-full scale-75 group-hover:scale-100 transition duration-700"></div>
                <img src="{{ asset('images/siswa.png') }}" alt="Siswa MAN 1 Palembang" class="relative z-10 w-full max-w-sm mx-auto drop-shadow-[0_35px_35px_rgba(0,0,0,0.5)] transform -rotate-3 group-hover:rotate-0 transition duration-700">
            </div>

            <div class="flex items-center justify-center gap-6 pt-8">
                <div class="flex flex-col items-center">
                    <span class="text-white font-black text-2xl">95%</span>
                    <span class="text-green-300 text-[10px] font-bold uppercase tracking-widest">Alumni Sukses</span>
                </div>
                <div class="w-px h-8 bg-white/20"></div>
                <div class="flex flex-col items-center">
                    <span class="text-white font-black text-2xl">A+</span>
                    <span class="text-green-300 text-[10px] font-bold uppercase tracking-widest">Akreditasi</span>
                </div>
                <div class="w-px h-8 bg-white/20"></div>
                <div class="flex flex-col items-center">
                    <span class="text-white font-black text-2xl">2024</span>
                    <span class="text-green-300 text-[10px] font-bold uppercase tracking-widest">Angkatan Baru</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Side - Form Section -->
    <div class="w-full lg:w-1/2 flex items-center justify-center p-8 sm:p-12 md:p-16 lg:p-24 bg-[#f8fafc] overflow-y-auto">
        <div class="w-full max-w-md space-y-10">

            <div class="lg:hidden text-center mb-8">
                <img src="{{ asset('images/logo.png') }}" alt="Logo Kemenag" class="h-16 w-auto mx-auto mb-4">
                <h2 class="text-2xl font-black text-gray-900 uppercase tracking-tighter">MAN 1 PALEMBANG</h2>
            </div>

            <div class="space-y-2">
                <h2 class="text-4xl font-black text-gray-900 tracking-tighter uppercase leading-none">Buat Akun</h2>
                <p class="text-sm font-bold text-gray-400 uppercase tracking-[0.2em]">Lengkapi data untuk memulai pendaftaran</p>
            </div>

            @if (session('error'))
            <div class="bg-red-50 border border-red-200 text-red-700 px-5 py-4 rounded-xl text-sm font-semibold">
                <div class="flex items-start gap-2">
                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                    </svg>
                    <span>{{ session('error') }}</span>
                </div>
            </div>
            @endif

            @if ($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-700 px-5 py-4 rounded-xl text-sm font-semibold">
                <ul class="space-y-1">
                    @foreach ($errors->all() as $error)
                        <li class="flex items-start gap-2">
                            <span class="text-red-500 mt-0.5">•</span>
                            <span>{{ $error }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('register.store') }}" method="POST" class="space-y-6" id="registerForm">
                @csrf

                <div class="grid grid-cols-1 gap-5">

                    <!-- NISN Field with Real-time Check -->
                    <div class="group">
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">NISN</label>
                        <div class="relative">
                            <input type="text" name="nisn" id="nisn" required maxlength="10"
                                   value="{{ old('nisn') }}"
                                   class="block w-full px-6 py-4 bg-white border-2 rounded-2xl font-bold
                                   {{ $errors->has('nisn') ? 'border-red-500' : 'border-gray-100' }}
                                   focus:outline-none focus:border-green-500 focus:ring-4 focus:ring-green-50/50"
                                   placeholder="Nomor Induk Siswa Nasional">
                            <div class="absolute right-4 top-1/2 -translate-y-1/2" id="nisnLoader" style="display: none;">
                                <svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </div>
                            <div class="absolute right-4 top-1/2 -translate-y-1/2" id="nisnCheck" style="display: none;"></div>
                        </div>
                        <p class="text-xs mt-2 font-semibold" id="nisnMessage"></p>
                        @error('nisn')
                            <p class="text-xs text-red-500 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Full Name Field -->
                    <div class="group">
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Nama Lengkap</label>
                        <input type="text" name="full_name" required
                               value="{{ old('full_name') }}"
                               class="block w-full px-6 py-4 bg-white border-2 rounded-2xl font-bold
                               {{ $errors->has('full_name') ? 'border-red-500' : 'border-gray-100' }}
                               focus:outline-none focus:border-green-500 focus:ring-4 focus:ring-green-50/50"
                               placeholder="Sesuai Ijazah / Akta">
                        @error('full_name')
                            <p class="text-xs text-red-500 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Email Field with Real-time Check -->
                    <div class="group">
                        <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">Email Aktif</label>
                        <div class="relative">
                            <input type="email" name="email" id="email" required
                                   value="{{ old('email') }}"
                                   class="block w-full px-6 py-4 bg-white border-2 rounded-2xl font-bold
                                   {{ $errors->has('email') ? 'border-red-500' : 'border-gray-100' }}
                                   focus:outline-none focus:border-green-500 focus:ring-4 focus:ring-green-50/50"
                                   placeholder="contoh@email.com">
                            <div class="absolute right-4 top-1/2 -translate-y-1/2" id="emailLoader" style="display: none;">
                                <svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </div>
                            <div class="absolute right-4 top-1/2 -translate-y-1/2" id="emailCheck" style="display: none;"></div>
                        </div>
                        <p class="text-xs mt-2 font-semibold" id="emailMessage"></p>
                        @error('email')
                            <p class="text-xs text-red-500 mt-1 font-semibold">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Password Fields -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <input type="password" name="password" id="password" required minlength="8"
                                   placeholder="Password"
                                   class="block w-full px-6 py-4 bg-white border-2 border-gray-100 rounded-2xl font-bold focus:outline-none focus:border-green-500 focus:ring-4 focus:ring-green-50/50">
                            <p class="text-xs text-gray-400 mt-1 font-semibold">Minimal 8 karakter</p>
                        </div>

                        <div>
                            <input type="password" name="password_confirmation" id="password_confirmation" required minlength="8"
                                   placeholder="Konfirmasi"
                                   class="block w-full px-6 py-4 bg-white border-2 border-gray-100 rounded-2xl font-bold focus:outline-none focus:border-green-500 focus:ring-4 focus:ring-green-50/50">
                            <p class="text-xs mt-1 font-semibold" id="passwordMatch"></p>
                        </div>
                    </div>
                </div>

                <div class="pt-6">
                    <button type="submit" id="submitBtn"
                            class="w-full relative group overflow-hidden bg-green-700 text-white py-5 px-6 rounded-2xl font-black text-sm uppercase tracking-widest shadow-[0_20px_40px_-15px_rgba(0,0,0,0.3)] hover:shadow-green-200 transition-all duration-300 transform hover:-translate-y-1 active:scale-95">
                        <span class="relative z-10 flex justify-center items-center gap-2">
                            Mulai Pendaftaran
                        </span>
                        <div class="absolute inset-0 bg-gradient-to-r from-green-600 to-emerald-600 opacity-0 group-hover:opacity-100 transition duration-500"></div>
                    </button>

                    <p class="mt-8 text-center text-[11px] font-bold text-gray-400 uppercase tracking-widest">
                        Sudah punya akun?
                        <a href="{{ route('login') }}" class="text-green-700 hover:text-green-800 underline underline-offset-4 ml-1">
                            Masuk Sekarang
                        </a>
                    </p>
                </div>
            </form>

            <div class="pt-10 flex justify-center">
                <a href="{{ route('landing') }}" class="inline-flex items-center gap-2 text-[10px] font-black text-gray-400 hover:text-gray-900 uppercase tracking-[0.2em] transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Kembali ke Beranda
                </a>
            </div>
        </div>
    </div>
</div>

<script>
// Prevent double submission
let isSubmitting = false;
const form = document.getElementById('registerForm');
const submitBtn = document.getElementById('submitBtn');

// NISN Real-time Check
let nisnTimeout;
const nisnInput = document.getElementById('nisn');
const nisnLoader = document.getElementById('nisnLoader');
const nisnCheck = document.getElementById('nisnCheck');
const nisnMessage = document.getElementById('nisnMessage');
let nisnAvailable = false;

nisnInput.addEventListener('input', function() {
    // Only allow numbers and max 10 digits
    this.value = this.value.replace(/[^0-9]/g, '').substring(0, 10);
    
    clearTimeout(nisnTimeout);
    
    if (this.value.length === 10) {
        nisnLoader.style.display = 'block';
        nisnCheck.style.display = 'none';
        nisnMessage.textContent = '';
        
        nisnTimeout = setTimeout(() => {
            checkNisn(this.value);
        }, 500);
    } else if (this.value.length > 0) {
        nisnLoader.style.display = 'none';
        nisnCheck.style.display = 'none';
        nisnMessage.textContent = 'NISN harus 10 digit';
        nisnMessage.className = 'text-xs mt-2 font-semibold text-orange-500';
        nisnAvailable = false;
    } else {
        nisnLoader.style.display = 'none';
        nisnCheck.style.display = 'none';
        nisnMessage.textContent = '';
        nisnAvailable = false;
    }
});

function checkNisn(nisn) {
    fetch('{{ route("register.check.nisn") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ nisn: nisn })
    })
    .then(response => response.json())
    .then(data => {
        nisnLoader.style.display = 'none';
        nisnCheck.style.display = 'block';
        
        if (data.available) {
            nisnCheck.innerHTML = '<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
            nisnMessage.textContent = data.message;
            nisnMessage.className = 'text-xs mt-2 font-semibold text-green-600';
            nisnAvailable = true;
        } else {
            nisnCheck.innerHTML = '<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>';
            nisnMessage.textContent = data.message;
            nisnMessage.className = 'text-xs mt-2 font-semibold text-red-600';
            nisnAvailable = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        nisnLoader.style.display = 'none';
        nisnCheck.style.display = 'none';
        nisnAvailable = false;
    });
}

// Email Real-time Check
let emailTimeout;
const emailInput = document.getElementById('email');
const emailLoader = document.getElementById('emailLoader');
const emailCheck = document.getElementById('emailCheck');
const emailMessage = document.getElementById('emailMessage');
let emailAvailable = false;

emailInput.addEventListener('input', function() {
    clearTimeout(emailTimeout);
    
    const emailValue = this.value.trim();
    
    if (emailValue.length > 3 && emailValue.includes('@')) {
        emailLoader.style.display = 'block';
        emailCheck.style.display = 'none';
        emailMessage.textContent = '';
        
        emailTimeout = setTimeout(() => {
            checkEmail(emailValue);
        }, 700);
    } else if (emailValue.length > 0) {
        emailLoader.style.display = 'none';
        emailCheck.style.display = 'none';
        emailMessage.textContent = '';
        emailAvailable = false;
    } else {
        emailLoader.style.display = 'none';
        emailCheck.style.display = 'none';
        emailMessage.textContent = '';
        emailAvailable = false;
    }
});

function checkEmail(email) {
    fetch('{{ route("register.check.email") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ email: email })
    })
    .then(response => response.json())
    .then(data => {
        emailLoader.style.display = 'none';
        emailCheck.style.display = 'block';
        
        if (data.available) {
            emailCheck.innerHTML = '<svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
            emailMessage.textContent = data.message;
            emailMessage.className = 'text-xs mt-2 font-semibold text-green-600';
            emailAvailable = true;
        } else {
            emailCheck.innerHTML = '<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>';
            emailMessage.textContent = data.message;
            emailMessage.className = 'text-xs mt-2 font-semibold text-red-600';
            emailAvailable = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        emailLoader.style.display = 'none';
        emailCheck.style.display = 'none';
        emailAvailable = false;
    });
}

// Password Match Check
const passwordInput = document.getElementById('password');
const passwordConfirmInput = document.getElementById('password_confirmation');
const passwordMatch = document.getElementById('passwordMatch');

passwordConfirmInput.addEventListener('input', function() {
    if (this.value.length > 0) {
        if (this.value === passwordInput.value) {
            passwordMatch.textContent = 'Password cocok ✓';
            passwordMatch.className = 'text-xs mt-1 font-semibold text-green-600';
        } else {
            passwordMatch.textContent = 'Password tidak cocok';
            passwordMatch.className = 'text-xs mt-1 font-semibold text-red-600';
        }
    } else {
        passwordMatch.textContent = '';
    }
});

passwordInput.addEventListener('input', function() {
    if (passwordConfirmInput.value.length > 0) {
        if (passwordConfirmInput.value === this.value) {
            passwordMatch.textContent = 'Password cocok ✓';
            passwordMatch.className = 'text-xs mt-1 font-semibold text-green-600';
        } else {
            passwordMatch.textContent = 'Password tidak cocok';
            passwordMatch.className = 'text-xs mt-1 font-semibold text-red-600';
        }
    }
});

// Form Submit Handler
form.addEventListener('submit', function(e) {
    if (isSubmitting) {
        e.preventDefault();
        return false;
    }

    // Validation
    const nisn = nisnInput.value;
    const fullName = document.querySelector('input[name="full_name"]').value;
    const email = emailInput.value;
    const password = passwordInput.value;
    const passwordConfirm = passwordConfirmInput.value;

    // Check NISN
    if (nisn.length !== 10) {
        e.preventDefault();
        alert('❌ NISN harus 10 digit!');
        nisnInput.focus();
        return false;
    }

    if (!nisnAvailable) {
        e.preventDefault();
        alert('❌ NISN sudah terdaftar atau belum dicek!');
        nisnInput.focus();
        return false;
    }

    // Check Full Name
    if (fullName.trim().length < 3) {
        e.preventDefault();
        alert('❌ Nama lengkap minimal 3 karakter!');
        return false;
    }

    // Check Email
    if (!email.includes('@') || !email.includes('.')) {
        e.preventDefault();
        alert('❌ Format email tidak valid!');
        emailInput.focus();
        return false;
    }

    if (!emailAvailable) {
        e.preventDefault();
        alert('❌ Email sudah terdaftar atau belum dicek!');
        emailInput.focus();
        return false;
    }

    // Check Password
    if (password.length < 8) {
        e.preventDefault();
        alert('❌ Password minimal 8 karakter!');
        passwordInput.focus();
        return false;
    }

    if (password !== passwordConfirm) {
        e.preventDefault();
        alert('❌ Password dan konfirmasi password tidak sama!');
        passwordConfirmInput.focus();
        return false;
    }

    // All validation passed
    isSubmitting = true;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="flex items-center justify-center gap-2 uppercase tracking-widest"><svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Memproses...</span>';
    submitBtn.classList.add('bg-green-800', 'opacity-80');

    // Reset after 10 seconds if something goes wrong
    setTimeout(() => {
        isSubmitting = false;
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<span class="relative z-10 flex justify-center items-center gap-2">Mulai Pendaftaran</span>';
        submitBtn.classList.remove('bg-green-800', 'opacity-80');
    }, 10000);
});

// Re-enable button on page show (back button)
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        isSubmitting = false;
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<span class="relative z-10 flex justify-center items-center gap-2">Mulai Pendaftaran</span>';
        submitBtn.classList.remove('bg-green-800', 'opacity-80');
    }
});
</script>
@endsection