File Manager
Viewing File: register.blade.php
@php
// Generate simple math CAPTCHA
$num1 = rand(1, 10);
$num2 = rand(1, 10);
$captcha_question = "$num1 + $num2";
$captcha_answer = $num1 + $num2;
@endphp
@extends('layouts.guest1')
@section('title', 'Create Account')
@section('content')
<!-- Fintech Trading Platform Registration -->
<div class="min-h-screen bg-gray-900 relative overflow-hidden py-8 sm:py-12">
<div class="relative z-10 flex items-center justify-center px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-2xl">
<!-- Professional Trading Registration Card -->
<div class="bg-gray-900 border border-gray-700 rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 shadow-2xl"
x-data="registrationForm()" x-cloak>
<!-- 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-12 sm:h-16 w-auto"
alt="{{ $settings->site_name }}" />
</div>
<!-- Title -->
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">
Join <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">{{ $settings->site_name }}</span>
</h1>
<p class="text-gray-300 text-sm sm:text-base lg:text-lg mb-6">
Start your professional trading journey
</p>
<!-- Trading Stats - Mobile Responsive -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 text-xs sm:text-sm">
<!--<div class="text-center p-3 bg-gray-800/50 rounded-xl border border-gray-700/50">-->
<!-- <div class="flex items-center justify-center gap-1 text-green-400 mb-1">-->
<!-- <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>-->
<!-- <span class="font-semibold">99.9% Uptime</span>-->
<!-- </div>-->
<!-- <div class="text-gray-400">Reliable Platform</div>-->
<!--</div>-->
<!--<div class="text-center p-3 bg-gray-800/50 rounded-xl border border-gray-700/50">-->
<!-- <div class="flex items-center justify-center gap-1 text-blue-400 mb-1">-->
<!-- <i data-lucide="shield-check" class="w-3 h-3"></i>-->
<!-- <span class="font-semibold">Bank-Grade</span>-->
<!-- </div>-->
<!-- <div class="text-gray-400">Security</div>-->
<!--</div>-->
<div class="text-center p-3 bg-gray-800/50 rounded-xl border border-gray-700/50">
<div class="flex items-center justify-center gap-1 text-cyan-400 mb-1">
<i data-lucide="users" class="w-3 h-3"></i>
<span class="font-semibold">1M+ Traders</span>
</div>
<div class="text-gray-400">Community</div>
</div>
</div>
</div>
<!-- Enhanced Progress Steps - Mobile Optimized -->
<div class="mb-8">
<div class="flex items-center justify-between sm:justify-center sm:space-x-8">
<template x-for="(step, index) in steps" :key="index">
<div class="flex flex-col items-center">
<!-- Step Circle -->
<div class="relative mb-2">
<div class="flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-xs sm:text-sm font-bold transition-all duration-300"
:class="currentStep > index ? 'bg-green-500 text-white' :
currentStep === index ? 'bg-blue-500 text-white' :
'bg-gray-700 text-gray-400'">
<span x-show="currentStep <= index" x-text="index + 1"></span>
<i x-show="currentStep > index" data-lucide="check" class="w-4 h-4 sm:w-5 sm:h-5"></i>
</div>
<!-- Active Step Pulse -->
<div x-show="currentStep === index"
class="absolute inset-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-500 animate-ping opacity-20"></div>
</div>
<!-- Step Label -->
<div class="text-center">
<div class="text-xs sm:text-sm font-medium transition-colors duration-300"
:class="currentStep >= index ? 'text-white' : 'text-gray-500'"
x-text="step.title"></div>
<div class="text-xs text-gray-500 hidden sm:block" x-text="step.description"></div>
</div>
<!-- Connector Line -->
<div x-show="index < steps.length - 1"
class="hidden sm:block absolute top-4 left-1/2 w-16 h-0.5 transition-colors duration-300"
:class="currentStep > index ? 'bg-green-500' : 'bg-gray-700'"
style="transform: translateX(2rem);"></div>
</div>
</template>
</div>
</div>
<!-- Error Summary Section -->
@if ($errors->any())
<div class="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
<div class="flex items-start gap-3">
<div class="p-1 bg-red-500/20 rounded-lg mt-0.5">
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-400"></i>
</div>
<div class="flex-1">
<h4 class="text-lg font-bold text-red-300 mb-2">Please Fix These Issues:</h4>
<ul class="space-y-1">
@foreach ($errors->all() as $error)
<li class="text-sm text-red-200 flex items-start gap-2">
<i data-lucide="x-circle" class="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0"></i>
<span>{{ $error }}</span>
</li>
@endforeach
</ul>
<div class="mt-3 text-xs text-red-300/80">
<i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
Please scroll down and correct the highlighted fields, then try again.
</div>
</div>
</div>
</div>
@endif
<!-- Registration Form -->
<form action="{{ route('register') }}" method="POST" class="space-y-6" id="register" x-cloak>
@csrf
<!-- Step 1: Personal Information -->
<div x-show="currentStep === 0"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0">
<!-- Step Header -->
<div class="mb-6 p-4 bg-blue-500/10 rounded-xl border border-blue-500/20">
<div class="flex items-center gap-3">
<div class="p-2 bg-blue-500/20 rounded-lg">
<i data-lucide="user-circle" class="w-5 h-5 text-blue-400"></i>
</div>
<div>
<h3 class="text-lg sm:text-xl font-bold text-white">Personal Information</h3>
<p class="text-gray-400 text-sm">Create your trading profile</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<!-- Username Field -->
<div class="space-y-2">
<label for="username" class="block text-sm font-bold text-gray-200">
Trading Username <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-blue-400 transition-colors"></i>
</div>
<input type="text" name="username" id="username" required
class="block w-full rounded-xl border border-gray-600 bg-gray-900 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold"
placeholder="Choose username">
</div>
@error('username')
<p class="text-sm text-red-400 flex items-center gap-1">
<i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
</p>
@enderror
</div>
<!-- Full Name Field -->
<div class="space-y-2">
<label for="name" class="block text-sm font-bold text-gray-200">
Full 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-check" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 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 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold"
placeholder="Enter full name">
</div>
@error('name')
<p class="text-sm text-red-400 flex items-center gap-1">
<i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
</p>
@enderror
</div>
<!-- Email Field -->
<div class="space-y-2">
<label for="email" class="block text-sm font-bold 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-blue-400 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 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold"
placeholder="your.email@example.com">
</div>
@error('email')
<p class="text-sm text-red-400 flex items-center gap-1">
<i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
</p>
@enderror
</div>
<!-- Phone Field -->
<div class="space-y-2">
<label for="phone" class="block text-sm font-bold text-gray-200">
Phone Number <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="phone" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 transition-colors"></i>
</div>
<input type="tel" name="phone" id="phone" required
class="block w-full rounded-xl border border-gray-600 bg-gray-900 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold"
placeholder="+1 (555) 123-4567">
</div>
</div>
</div>
</div>
<!-- Step 2: Location & Currency -->
<div x-show="currentStep === 1"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0">
<!-- Step Header -->
<div class="mb-6 p-4 bg-purple-500/10 rounded-xl border border-purple-500/20">
<div class="flex items-center gap-3">
<div class="p-2 bg-purple-500/20 rounded-lg">
<i data-lucide="globe-2" class="w-5 h-5 text-purple-400"></i>
</div>
<div>
<h3 class="text-lg sm:text-xl font-bold text-white">Location</h3>
<p class="text-gray-400 text-sm">Set your regional trading preferences</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-1 gap-4 sm:gap-6">
<!-- Country Field -->
<div class="space-y-2">
<label for="country" class="block text-sm font-bold text-gray-200">
Country <span class="text-red-400">*</span>
</label>
<div class="relative group">
<div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10">
<i data-lucide="flag" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 transition-colors"></i>
</div>
<select name="country" id="country" required
class="block w-full rounded-xl border border-gray-600 bg-gray-900 pl-12 pr-8 py-4 text-white focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold appearance-none">
<option selected disabled class="text-gray-400">Select your country</option>
@include('auth.countries')
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
<i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
</div>
</div>
</div>
<!-- Currency Field -->
{{-- <div class="space-y-2">
<label for="select_c" class="block text-sm font-bold text-gray-200">
Preferred Currency <span class="text-red-400">*</span>
</label>
<div class="relative group">
<div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10">
<i data-lucide="banknote" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 transition-colors"></i>
</div>
<input name="s_currency" value="{{ $settings->s_currency }}" id="s_c" type="hidden">
<select name="currency" id="select_c" onchange="changecurr()" required
class="block w-full rounded-xl border border-gray-600 bg-gray-900 pl-12 pr-8 py-4 text-white focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold appearance-none">
<option selected disabled class="text-gray-400">Select trading currency</option>
@foreach ($currencies as $key => $currency)
<option id="{{ $key }}" value="<?php echo html_entity_decode($currency); ?>" class="text-white bg-gray-900">
{{ $key . ' (' . html_entity_decode($currency) . ')' }}</option>
@endforeach
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
<i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
</div>
</div>
</div> --}}
</div>
<!-- Trading Preferences Info -->
<div class="mt-6 p-4 bg-blue-500/10 rounded-xl border border-blue-500/20">
<div class="flex items-start gap-3">
<i data-lucide="info" class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0"></i>
<div class="text-sm">
<p class="text-blue-300 font-bold mb-1">Regional Trading Information</p>
<p class="text-gray-300">Your location helps us provide region-specific features, compliance, and optimal server connections for faster trading execution.</p>
</div>
</div>
</div>
</div>
<!-- Step 3: Security -->
<div x-show="currentStep === 2"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0">
<!-- Step Header -->
<div class="mb-6 p-4 bg-green-500/10 rounded-xl border border-green-500/20">
<div class="flex items-center gap-3">
<div class="p-2 bg-green-500/20 rounded-lg">
<i data-lucide="shield-check" class="w-5 h-5 text-green-400"></i>
</div>
<div>
<h3 class="text-lg sm:text-xl font-bold text-white">Account Security</h3>
<p class="text-gray-400 text-sm">Secure your trading account</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<!-- Password Field -->
<div class="space-y-2">
<label for="password" class="block text-sm font-bold 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-blue-400 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 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold"
placeholder="Create strong password">
</div>
@error('password')
<p class="text-sm text-red-400 flex items-center gap-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-bold 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-blue-400 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 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold"
placeholder="Confirm your password">
</div>
</div>
</div>
<!-- CAPTCHA Section -->
<div class="space-y-4 mt-6">
<div class="space-y-2">
<label for="captcha" class="block text-sm font-bold text-gray-200">
Simple Math Verification <span class="text-red-400">*</span>
</label>
<!-- CAPTCHA Display -->
<div class="bg-gray-800 border border-gray-600 rounded-xl p-4 mb-3">
<div class="flex items-center justify-center">
<div class="bg-gradient-to-r from-blue-900 to-purple-900 rounded-lg p-4 border border-gray-600">
<div class="text-center">
<p class="text-sm text-gray-300 mb-3 font-medium">What is the answer to this simple math?</p>
<div class="bg-gray-900 rounded-lg px-8 py-4 border border-gray-700">
<span class="text-3xl font-bold text-green-400 tracking-wide select-none"
style="font-family: 'Arial', sans-serif;">
{{ $captcha_question }} = ?
</span>
</div>
</div>
</div>
</div>
</div>
<!-- CAPTCHA Input -->
<div class="relative group">
<div class="absolute inset-y-0 left-0 flex items-center pl-4">
<i data-lucide="calculator" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 transition-colors"></i>
</div>
<input type="number" name="captcha" id="captcha" required
class="block w-full rounded-xl border border-gray-600 bg-gray-900 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-bold text-center"
placeholder="Enter the answer (numbers only)"
autocomplete="off"
min="0"
max="99">
</div>
@error('captcha')
<p class="text-sm text-red-400 flex items-center gap-1">
<i data-lucide="alert-circle" class="w-4 h-4"></i>{{ $message }}
</p>
@enderror
<!-- Helper text -->
<p class="text-xs text-gray-400 flex items-center gap-1">
<i data-lucide="info" class="w-3 h-3"></i>
Just solve this simple math problem to verify you're human. Much easier than typing random codes!
</p>
</div>
</div>
<!-- Hidden CAPTCHA confirmation -->
<input type="hidden" name="captcha_confirmation" value="{{ $captcha_answer }}">
@if (Session::has('ref_by'))
<input type="hidden" name="ref_by" value="{{ session('ref_by') }}" required>
@endif
<!-- Password Requirements -->
<div class="mt-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
<p class="text-sm font-bold text-gray-200 mb-2">Password Requirements:</p>
<ul class="text-xs text-gray-300 space-y-1">
<li class="flex items-center gap-2">
<i data-lucide="check" class="w-3 h-3 text-green-400"></i>
At least 8 characters long
</li>
<li class="flex items-center gap-2">
<i data-lucide="check" class="w-3 h-3 text-green-400"></i>
Contains uppercase and lowercase letters
</li>
<li class="flex items-center gap-2">
<i data-lucide="check" class="w-3 h-3 text-green-400"></i>
Includes at least one number or special character
</li>
</ul>
</div>
<!-- Terms Agreement -->
<div class="mt-6 p-6 bg-blue-500/10 rounded-xl border border-blue-500/20">
<div class="flex items-start gap-4">
<div class="flex items-center h-5 mt-1">
<input type="checkbox" name="agree" id="agree" required
class="h-4 w-4 rounded border-gray-600 bg-gray-900 text-blue-500 focus:ring-2 focus:ring-blue-400/20 transition-colors">
</div>
<div class="flex-1">
<label for="agree" class="text-sm font-bold text-gray-200 leading-relaxed">
I agree to {{ $settings->site_name }}'s
<a href="rules" target="_blank" class="text-blue-400 hover:text-blue-300 font-bold underline underline-offset-2">
Terms and Conditions
</a>
and acknowledge that I have read and understood the
<a href="#" target="_blank" class="text-blue-400 hover:text-blue-300 font-bold underline underline-offset-2">
Privacy Policy
</a>
</label>
<p class="text-xs text-gray-400 mt-2">
By creating an account, you confirm that you are at least 18 years old and agree to receive trading updates and market insights.
</p>
</div>
</div>
</div>
</div>
<!-- Enhanced Navigation Buttons -->
<div class="flex flex-col sm:flex-row justify-between items-center mt-10 pt-8 border-t border-gray-700 gap-4" x-cloak>
<!-- Previous Button -->
<button type="button" @click="previousStep()"
x-show="currentStep > 0"
class="inline-flex items-center gap-2 px-6 py-3 text-gray-400 hover:text-white transition-all duration-200 rounded-xl hover:bg-gray-800/50 group">
<i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
<span class="font-bold">Previous Step</span>
</button>
<!-- Progress Indicator -->
<div class="flex items-center gap-2 text-sm text-gray-400">
<span x-text="`Step ${currentStep + 1} of ${steps.length}`" class="font-bold"></span>
</div>
<!-- Next Button -->
<button type="button" @click="nextStep()"
x-show="currentStep < steps.length - 1"
class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group">
<span>Continue</span>
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</button>
<!-- Create Account Button -->
<button type="submit" x-show="currentStep === steps.length - 1"
class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white 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>Create Trading Account</span>
<i data-lucide="sparkles" class="w-4 h-4 group-hover:rotate-12 transition-transform"></i>
</button>
</div>
<!-- Professional Footer -->
<div class="mt-8 text-center space-y-4">
<div class="flex items-center justify-center gap-6 text-sm">
<p class="text-gray-400">
Already have an account?
<a href="{{ route('login') }}"
class="font-bold text-blue-400 hover:text-blue-300 transition-colors underline underline-offset-2">
Sign in here
</a>
</p>
</div>
<!-- Trust Indicators -->
<div class="flex items-center justify-center gap-8 py-4 text-xs text-gray-500">
<div class="flex items-center gap-1">
<i data-lucide="shield" class="w-3 h-3"></i>
<span>SSL Secured</span>
</div>
<div class="flex items-center gap-1">
<i data-lucide="lock" class="w-3 h-3"></i>
<span>256-bit Encryption</span>
</div>
<div class="flex items-center gap-1">
<i data-lucide="award" class="w-3 h-3"></i>
<span>Regulated Platform</span>
</div>
</div>
<p class="text-xs text-gray-500">
© {{ date('Y') }} {{ $settings->site_name }}. All rights reserved. |
Licensed and regulated trading platform.
</p>
</div>
</form>
</div>
</div>
</div>
<style>
.skiptranslate {
display: none !important;
}
body {
top: 0 !important;
}
[x-cloak] {
display: none !important;
}
</style>
<div id="google_translate_element" style="display:none"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "en"}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/elementa0d8.js?cb=googleTranslateElementInit"></script>
<script>
function registrationForm() {
return {
currentStep: 0,
steps: [
{
title: 'Personal Info',
description: 'Basic details',
completed: false
},
{
title: 'Location',
description: 'Regional settings',
completed: false
},
{
title: 'Security',
description: 'Account protection',
completed: false
}
],
nextStep() {
if (this.validateCurrentStep()) {
this.steps[this.currentStep].completed = true;
if (this.currentStep < this.steps.length - 1) {
this.currentStep++;
this.scrollToTop();
}
}
},
previousStep() {
if (this.currentStep > 0) {
this.currentStep--;
this.scrollToTop();
}
},
scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
},
validateCurrentStep() {
const step = this.currentStep;
let isValid = true;
let missingFields = [];
if (step === 0) {
// Validate personal information
const fields = [
{ id: 'username', name: 'Username' },
{ id: 'name', name: 'Full Name' },
{ id: 'email', name: 'Email' },
{ id: 'phone', name: 'Phone Number' }
];
fields.forEach(field => {
const element = document.getElementById(field.id);
const value = element.value.trim();
if (!value) {
missingFields.push(field.name);
isValid = false;
// Add visual feedback
element.classList.add('border-red-500', 'bg-red-900/20');
element.classList.remove('border-gray-600');
} else {
// Remove error styling if field is now valid
element.classList.remove('border-red-500', 'bg-red-900/20');
element.classList.add('border-gray-600');
}
});
// Email validation
const emailElement = document.getElementById('email');
const email = emailElement.value.trim();
if (email && !email.includes('@')) {
missingFields.push('Valid Email Format');
isValid = false;
emailElement.classList.add('border-red-500', 'bg-red-900/20');
emailElement.classList.remove('border-gray-600');
}
} else if (step === 1) {
// Validate location
const countryElement = document.getElementById('country');
const country = countryElement.value;
if (!country || country === 'Select your country') {
missingFields.push('Country Selection');
isValid = false;
countryElement.classList.add('border-red-500', 'bg-red-900/20');
countryElement.classList.remove('border-gray-600');
} else {
countryElement.classList.remove('border-red-500', 'bg-red-900/20');
countryElement.classList.add('border-gray-600');
}
} else if (step === 2) {
// Validate security
const passwordElement = document.getElementById('password');
const confirmPasswordElement = document.getElementById('password_confirmation');
const captchaElement = document.getElementById('captcha');
const agreeElement = document.getElementById('agree');
const password = passwordElement.value;
const confirmPassword = confirmPasswordElement.value;
const captcha = captchaElement.value.trim();
const agree = agreeElement.checked;
// Password validation
if (!password) {
missingFields.push('Password');
isValid = false;
passwordElement.classList.add('border-red-500', 'bg-red-900/20');
} else if (password.length < 8) {
missingFields.push('Password (minimum 8 characters)');
isValid = false;
passwordElement.classList.add('border-red-500', 'bg-red-900/20');
} else {
passwordElement.classList.remove('border-red-500', 'bg-red-900/20');
passwordElement.classList.add('border-gray-600');
}
// Confirm password validation
if (!confirmPassword) {
missingFields.push('Password Confirmation');
isValid = false;
confirmPasswordElement.classList.add('border-red-500', 'bg-red-900/20');
} else if (password !== confirmPassword) {
missingFields.push('Passwords Must Match');
isValid = false;
confirmPasswordElement.classList.add('border-red-500', 'bg-red-900/20');
} else {
confirmPasswordElement.classList.remove('border-red-500', 'bg-red-900/20');
confirmPasswordElement.classList.add('border-gray-600');
}
// CAPTCHA validation
if (!captcha) {
missingFields.push('Math Verification Answer');
isValid = false;
captchaElement.classList.add('border-red-500', 'bg-red-900/20');
} else {
captchaElement.classList.remove('border-red-500', 'bg-red-900/20');
captchaElement.classList.add('border-gray-600');
}
// Terms agreement validation
if (!agree) {
missingFields.push('Terms & Conditions Agreement');
isValid = false;
}
}
if (!isValid) {
const message = missingFields.length === 1
? `Please provide: ${missingFields[0]}`
: `Please complete these fields: ${missingFields.join(', ')}`;
// Show professional alert
this.showAlert('Complete Required Fields', message, 'warning');
}
return isValid;
},
showAlert(title, message, type = 'info') {
// Simple alert fallback if SweetAlert2 is not available
if (typeof Swal !== 'undefined') {
Swal.fire({
title: title,
text: message,
icon: type,
confirmButtonText: 'Got it',
confirmButtonColor: '#3B82F6'
});
} else {
alert(`${title}: ${message}`);
}
}
}
}
// Enhanced initialization with better error handling
document.addEventListener('alpine:init', () => {
setTimeout(() => {
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
}, 100);
});
document.addEventListener('alpine:updated', () => {
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
});
// Form submission enhancement
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('register');
if (form) {
form.addEventListener('submit', function(e) {
const submitBtn = form.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...';
}
});
}
// Auto-scroll to errors if they exist
const errorSummary = document.querySelector('.bg-red-500\\/10');
if (errorSummary) {
setTimeout(() => {
errorSummary.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
// Add a subtle shake animation to draw attention
errorSummary.style.animation = 'shake 0.5s ease-in-out';
}, 100);
}
});
</script>
<!-- Add shake animation CSS -->
<style>
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
</style>
</body>
</html>
@endsection