@php
      $captcha = strtoupper(substr(md5(rand()), 0, 6)); // Generate random text
@endphp
@extends('layouts.guest1')
@section('title', 'Create Account')
@section('content')

<!-- BrimStone Brokers Client Registration -->
<div class="min-h-screen bg-gray-900 relative overflow-hidden py-12 px-4 sm:px-6 lg:px-8">
    <div class="relative z-10 flex items-center justify-center">
        <div class="w-full max-w-xl">
            <!-- Premium Card -->
            <div class="bg-[#0f2b48]/90 border border-gray-700/50 rounded-2xl p-6 sm:p-10 shadow-2xl backdrop-blur-md">
                
                <!-- Header Section -->
                <div class="text-center mb-8">
                    <!-- Logo -->
                    <div class="flex items-center justify-center mb-6">
                        <img src="{{ asset('storage/app/public/'.$settings->logo)}}"
                             class="h-16 w-auto"
                             alt="{{ $settings->site_name }}" />
                    </div>

                    <!-- Title -->
                    <h1 class="text-3xl font-bold text-white mb-2">
                        Create Your <span class="text-[#d4af37]">Investor Account</span>
                    </h1>
                    <p class="text-gray-300 text-sm">
                        Access institutional wealth management and stock trading.
                    </p>
                </div>

                <!-- Registration Form -->
                <form action="{{ route('register') }}" method="POST" class="space-y-6" id="register">
                    @csrf

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <!-- First Name Field -->
                        <div class="space-y-2">
                            <label for="name" class="block text-sm font-semibold text-gray-200">
                                First Name <span class="text-red-400">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="user" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                                </div>
                                <input type="text" name="name" id="name" required
                                       class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                       placeholder="John">
                            </div>
                            @error('name')
                                <p class="text-sm text-red-400 flex items-center gap-1 mt-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Last Name Field -->
                        <div class="space-y-2">
                            <label for="l_name" class="block text-sm font-semibold text-gray-200">
                                Last Name <span class="text-red-400">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="user" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                                </div>
                                <input type="text" name="l_name" id="l_name" required
                                       class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                       placeholder="Doe">
                            </div>
                            @error('l_name')
                                <p class="text-sm text-red-400 flex items-center gap-1 mt-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <!-- Email Field -->
                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-semibold text-gray-200">
                            Email Address <span class="text-red-400">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                <i data-lucide="mail" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                            </div>
                            <input type="email" name="email" id="email" required
                                   class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                   placeholder="john.doe@example.com">
                        </div>
                        @error('email')
                            <p class="text-sm text-red-400 flex items-center gap-1 mt-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <!-- Password Field -->
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-semibold text-gray-200">
                                Password <span class="text-red-400">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="lock" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                                </div>
                                <input type="password" name="password" id="password" required
                                       class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                       placeholder="Min 8 characters">
                            </div>
                            @error('password')
                                <p class="text-sm text-red-400 flex items-center gap-1 mt-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="space-y-2">
                            <label for="password_confirmation" class="block text-sm font-semibold text-gray-200">
                                Confirm Password <span class="text-red-400">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="key" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                                </div>
                                <input type="password" name="password_confirmation" id="password_confirmation" required
                                       class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                       placeholder="Confirm password">
                            </div>
                        </div>
                    </div>

                    <!-- Referral Code (Optional) -->
                    <div class="space-y-2">
                        <label for="ref_by" class="block text-sm font-semibold text-gray-200">
                            Referral Code (Optional)
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                <i data-lucide="gift" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                            </div>
                            <input type="text" name="ref_by" id="ref_by" 
                                   value="{{ request()->query('ref') ?? session('ref_by') ?? '' }}"
                                   class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                   placeholder="Enter referral code">
                        </div>
                    </div>

                    <!-- CAPTCHA Section -->
                    <div class="space-y-4">
                        <div class="space-y-2">
                            <label for="captcha" class="block text-sm font-semibold text-gray-200">
                                Security Verification <span class="text-red-400">*</span>
                            </label>

                            <!-- CAPTCHA Display -->
                            <div class="bg-gray-800 border border-gray-700 rounded-xl p-3 mb-2 flex items-center justify-between">
                                <span class="text-xs text-gray-300 font-medium">Verify security code:</span>
                                <div class="bg-gradient-to-r from-blue-950 to-[#0f2b48] px-4 py-1.5 rounded border border-gray-700">
                                    <span class="text-lg font-bold text-yellow-400 tracking-[0.3em] select-none"
                                          style="font-family: 'Courier New', monospace; display: inline-block;">
                                        {{ $captcha }}
                                    </span>
                                </div>
                            </div>

                            <!-- CAPTCHA Input -->
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="shield-check" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors"></i>
                                </div>
                                <input type="text" name="captcha" id="captcha" required
                                       class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm uppercase"
                                       placeholder="Enter security code above"
                                       autocomplete="off"
                                       maxlength="6">
                            </div>

                            @error('captcha')
                                <p class="text-sm text-red-400 flex items-center gap-1 mt-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <!-- Hidden CAPTCHA confirmation -->
                    <input type="hidden" name="captcha_confirmation" value="{{ $captcha }}">

                    <!-- Terms Agreement -->
                    <div class="p-4 bg-gray-800/30 rounded-xl border border-gray-700/50 flex items-start gap-3">
                        <input type="checkbox" name="agree" id="agree" required
                               class="h-4 w-4 rounded border-gray-600 bg-gray-900 text-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 transition-colors mt-1">
                        <label for="agree" class="text-xs text-gray-300 leading-normal">
                            I agree to {{ $settings->site_name }}'s
                            <a href="#" class="text-blue-400 hover:text-blue-300 font-bold underline underline-offset-2">Terms and Conditions</a>
                            and acknowledge the <a href="#" class="text-blue-400 hover:text-blue-300 font-bold underline underline-offset-2">Privacy Policy</a>.
                        </label>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                            class="w-full inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-[#d4af37] to-[#b3922e] hover:from-[#e5c150] hover:to-[#cfa736] text-gray-900 font-bold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group">
                        <i data-lucide="user-plus" class="w-5 h-5"></i>
                        <span>Register Account</span>
                    </button>

                    <!-- Sign In Link -->
                    <p class="text-center text-sm text-gray-400 pt-4">
                        Already have an account?
                        <a href="{{ route('login') }}"
                           class="font-bold text-[#d4af37] hover:text-[#e5c150] transition-colors underline underline-offset-2">
                            Sign in here
                        </a>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/lucide@latest"></script>
<script>
    // Initialize icons
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });

    // Form submission helper
    document.getElementById('register').addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-2"></i>Creating Account...';
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });
</script>

@endsection
