@extends('layouts.app')

@section('title', 'Daftar Akun Baru')

@section('content')
<div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <!-- Main Card Container -->
    <div class="bg-white rounded-2xl border border-gray-200 shadow-xl overflow-hidden w-full max-w-4xl grid md:grid-cols-2 grid-cols-1">
        
        <!-- Left Side Column (Desktop Only) -->
        <div class="bg-indigo-900 p-10 text-white flex-col justify-between hidden md:flex">
            <div>
                <a href="/" class="flex items-center gap-2 font-bold text-2xl tracking-tight text-white mb-8">
                    <i data-lucide="file-check-2" class="w-8 h-8"></i>
                    <span>ATS<span class="text-indigo-300 font-medium">CV</span></span>
                </a>
                <h2 class="text-3xl font-extrabold tracking-tight mb-4">
                    Gabung Sekarang, Bangun Karir Impianmu.
                </h2>
                <p class="text-indigo-200 text-sm leading-relaxed mb-6">
                    Hanya butuh 1 menit untuk mendaftar. Kelola beberapa CV sekaligus dan pantau performa kelulusan dokumen lamaran Anda dengan format standar HRD.
                </p>
                <div class="space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="p-1.5 bg-indigo-800 rounded-lg text-indigo-300">
                            <i data-lucide="user-check" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold">Satu Akun, Banyak CV</h4>
                            <p class="text-xs text-indigo-250 mt-0.5">Buat dan simpan riwayat CV berbeda untuk setiap posisi lamaran.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="p-1.5 bg-indigo-800 rounded-lg text-indigo-300">
                            <i data-lucide="message-square" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold">Integrasi WhatsApp OTP</h4>
                            <p class="text-xs text-indigo-250 mt-0.5">Autentikasi instan tanpa harus menunggu email masuk yang lambat.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-xs text-indigo-300 mt-10">
                &copy; {{ date('Y') }} ATS CV Maker. All rights reserved.
            </div>
        </div>

        <!-- Right Side Column (Register Form) -->
        <div class="p-8 sm:p-12 flex flex-col justify-center">
            <div class="mb-6">
                <!-- Mini Logo for Mobile -->
                <div class="flex items-center gap-2 font-bold text-xl tracking-tight text-indigo-600 mb-3 md:hidden">
                    <i data-lucide="file-check-2" class="w-6 h-6"></i>
                    <span>ATS<span class="text-gray-900 font-medium">CV</span></span>
                </div>
                <h1 class="text-2xl font-bold text-gray-900">Buat akun gratis</h1>
                <p class="text-sm text-gray-500 mt-1">Daftar sekarang dan mulailah mendesain CV terbaik Anda.</p>
            </div>

            <!-- Form -->
            <form id="register-form" class="space-y-4">
                @csrf
                <div>
                    <label for="name" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">Nama Lengkap</label>
                    <input type="text" name="name" id="name" required placeholder="John Doe"
                        class="block w-full px-4 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                </div>

                <div>
                    <label for="email" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">Alamat Email</label>
                    <input type="email" name="email" id="email" required placeholder="name@example.com"
                        class="block w-full px-4 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                </div>

                <div>
                    <label for="whatsapp" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">Nomor WhatsApp</label>
                    <div class="flex">
                        <span class="inline-flex items-center px-3 rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm font-semibold select-none">
                            +62
                        </span>
                        <input type="text" name="whatsapp" id="whatsapp" required placeholder="8123456789"
                            class="block w-full px-4 py-2 border border-gray-300 rounded-r-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                    </div>
                    <span class="text-[10px] text-gray-400 mt-1 block">Pastikan nomor aktif untuk menerima kode verifikasi OTP.</span>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="password" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">Password</label>
                        <input type="password" name="password" id="password" required placeholder="Min. 6 karakter"
                            class="block w-full px-4 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                    </div>
                    <div>
                        <label for="password_confirmation" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">Konfirmasi Password</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" required placeholder="Ulangi password"
                            class="block w-full px-4 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                    </div>
                </div>

                <button type="submit" id="btn-submit"
                    class="w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-semibold transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex justify-center items-center gap-2 cursor-pointer mt-2">
                    <i data-lucide="user-plus" class="w-4 h-4"></i>
                    <span>Daftar</span>
                </button>
            </form>

            <div class="mt-6 text-center text-xs text-gray-500">
                Sudah punya akun? <a href="{{ route('login') }}" class="font-semibold text-indigo-600 hover:text-indigo-800 transition-colors">Masuk</a>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('register-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const submitBtn = document.getElementById('btn-submit');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = `<span class="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span> Memproses...`;

        let whatsapp = document.getElementById('whatsapp').value.trim();
        // Remove leading 0 or 62 if they input it, since the +62 prefix is attached
        if (whatsapp.startsWith('0')) {
            whatsapp = whatsapp.substring(1);
        } else if (whatsapp.startsWith('62')) {
            whatsapp = whatsapp.substring(2);
        }

        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('name', document.getElementById('name').value);
        formData.append('email', document.getElementById('email').value);
        formData.append('whatsapp', '0' + whatsapp); // Format it to 08... standard back for registration input
        formData.append('password', document.getElementById('password').value);
        formData.append('password_confirmation', document.getElementById('password_confirmation').value);

        fetch('{{ route("register") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(res => {
            if (res.status === 200 && res.body.success) {
                Toast.fire({
                    icon: 'success',
                    title: res.body.message
                });
                setTimeout(() => {
                    window.location.href = res.body.redirect;
                }, 1500);
            } else {
                let errorMessage = 'Gagal mendaftarkan akun.';
                if (res.body.errors) {
                    // Extract first error message
                    const firstKey = Object.keys(res.body.errors)[0];
                    errorMessage = res.body.errors[firstKey][0];
                } else if (res.body.message) {
                    errorMessage = res.body.message;
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Gagal',
                    text: errorMessage,
                    confirmButtonText: 'Perbaiki'
                });
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        })
        .catch(err => {
            console.error('Register error:', err);
            Swal.fire({
                icon: 'error',
                title: 'Error Koneksi',
                text: 'Terjadi kegagalan jaringan, silakan coba lagi.',
                confirmButtonText: 'Oke'
            });
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    });
</script>
@endsection
